/* Eleveny
   One stylesheet for every page. Tokens first, then layout, then pieces. */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Nohemi, used unmodified as the EULA requires: fonts/Nohemi-EULA.pdf */
@font-face {
  font-family: "Nohemi";
  src: url("/assets/fonts/nohemi-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --cream: #f3f2eb;
  --paper: #fbfaf5;
  --ink: #17150f;
  --ink-2: rgb(23 21 15 / 0.62);
  --ink-3: rgb(23 21 15 / 0.42);
  --line: rgb(23 21 15 / 0.1);
  --red: #ff0a2e;
  --red-top: #ff1d42;
  --red-bottom: #ff0026;
  --on-red: #f3f2eb;

  --glass: rgb(251 250 245 / 0.62);
  --glass-edge: rgb(255 255 255 / 0.7);
  --glass-shadow: 0 1px 0 rgb(255 255 255 / 0.5) inset, 0 8px 32px -12px rgb(23 21 15 / 0.18), 0 0 0 1px rgb(23 21 15 / 0.06);

  --sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --display: "Nohemi", var(--sans);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1200px;
  --radius-card: 32px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.8, 0.25, 1);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #121110;
    --paper: #1b1a17;
    --ink: #f3f2eb;
    --ink-2: rgb(243 242 235 / 0.64);
    --ink-3: rgb(243 242 235 / 0.42);
    --line: rgb(243 242 235 / 0.1);
    --glass: rgb(27 26 23 / 0.6);
    --glass-edge: rgb(255 255 255 / 0.08);
    --glass-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 8px 32px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.06);
  }
}
:root[data-theme="dark"] {
  --cream: #121110;
  --paper: #1b1a17;
  --ink: #f3f2eb;
  --ink-2: rgb(243 242 235 / 0.64);
  --ink-3: rgb(243 242 235 / 0.42);
  --line: rgb(243 242 235 / 0.1);
  --glass: rgb(27 26 23 / 0.6);
  --glass-edge: rgb(255 255 255 / 0.08);
  --glass-shadow: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 8px 32px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.06);
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 96px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--red); color: var(--on-red); }

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

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
  font-size: 15px;
}
.skip:focus { top: 16px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.label {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.label::before {
  content: "";
  width: 12px;
  height: 6px;
  background: currentColor;
  border-radius: 6px 6px 1px 1px;
  opacity: 0.9;
}
.label--plain::before { display: none; }

.meta { flex-wrap: wrap; gap: 4px 10px; }
.meta > span + span::before { content: "·"; margin-right: 10px; opacity: 0.5; }

/* ---------- Dome (the mark) ---------- */

.dome { display: block; fill: currentColor; }

/* ---------- Glass bar ---------- */

.bar {
  position: fixed;
  inset: 12px 0 auto;
  z-index: 50;
  display: flex;
  justify-content: center;
  padding-inline: 12px;
  pointer-events: none;
}

.bar__inner {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 560px;
  height: 52px;
  padding: 6px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--glass-shadow);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 620;
  font-size: 18px;
  letter-spacing: -0.035em;
  margin-right: auto;
}
.brand .dome { width: 22px; height: auto; color: var(--red); transform: translateY(1px); }

.bar__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bar__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color 0.3s var(--ease-soft);
}
.bar__link:hover,
.bar__link[aria-current="true"],
.bar__link[aria-current="page"] { color: var(--ink); }

.bar__pill {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  height: 40px;
  width: 0;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(23 21 15 / 0.08), 0 0 0 1px var(--line);
  opacity: 0;
  transition:
    transform 0.55s var(--ease-out),
    width 0.55s var(--ease-out),
    opacity 0.3s var(--ease-soft);
}

@media (max-width: 420px) {
  .brand { padding-inline: 10px; font-size: 17px; }
  .bar__link { padding: 0 11px; font-size: 14.5px; }
}
@media (max-width: 350px) {
  .brand span { display: none; }
}

/* ---------- Hero ----------
   The title sits on a horizon line. The sun sits on the same line, behind
   the text, and rises as you scroll (--rise is set by site.js, 0 to 1). */

.hero {
  padding-top: clamp(140px, 24vh, 260px);
  padding-bottom: clamp(24px, 4vw, 48px);
}

.hero__stage {
  --rise: 0;
  position: relative;
  isolation: isolate;
}
.hero__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line);
  z-index: 2;
}

.hero__title {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(20px, 2.4vw, 36px);
  font-family: var(--display);
  font-size: clamp(56px, 11.4vw, 172px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-left: -0.03em;
  max-width: 9ch;
  text-wrap: balance;
}

.hero__title .w {
  display: inline-block;
  overflow: clip;
  overflow-clip-margin: 0.12em;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
  vertical-align: top;
}
.hero__title .w > span { display: inline-block; }

.sun {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  width: min(56%, 760px);
  aspect-ratio: 120 / 54.4;
  overflow: clip;
}
.sun__body { position: absolute; inset: 0; }
/* Mostly below the horizon at the top of the page, fully up after a short scroll.
   Without JS, or with reduced motion, it simply sits fully risen. */
@media (prefers-reduced-motion: no-preference) {
  .js .sun__body { transform: translateY(calc((1 - var(--rise)) * 58%)); }
}
.sun .dome { width: 100%; height: auto; }
.sun .dome path { fill: url(#sun-fill); }

@media (max-width: 720px) {
  .hero { padding-top: 128px; }
  .hero__title { padding-bottom: 24px; }
  .sun { width: 80%; right: -8px; }
}

/* ---------- Sections ---------- */

.section { padding-block: clamp(80px, 12vw, 160px); }
/* The apps lead straight into the quieter closing sections. */
#apps { padding-block: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 48px); }

.section__head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.h2 {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  max-width: 16ch;
}

.lede {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--ink-2);
  max-width: 44ch;
  text-wrap: pretty;
}

/* ---------- App cards ---------- */

.cards {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}

.card {
  --card-bg: var(--paper);
  --card-ink: var(--ink);
  --card-ink-2: var(--ink-2);
  --card-line: var(--line);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(560px, 62vw, 720px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--radius-card);
  background: var(--card-bg);
  color: var(--card-ink);
  text-decoration: none;
  overflow: clip;
  isolation: isolate;
  box-shadow: 0 0 0 1px var(--card-line);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.card--1138 {
  --card-bg: #0d1310;
  --card-ink: #f3f2eb;
  --card-ink-2: rgb(243 242 235 / 0.62);
  --card-line: rgb(255 255 255 / 0.06);
}
.card--1138::before {
  content: "";
  position: absolute;
  inset: auto -20% -30% -20%;
  height: 80%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 60%, rgb(34 197 94 / 0.34), transparent 70%);
  transition: opacity 0.6s var(--ease-soft);
  opacity: 0.8;
}

.card--bits {
  --card-bg: #ece5d8;
  --card-ink: #17150f;
  --card-ink-2: rgb(23 21 15 / 0.6);
  --card-line: rgb(23 21 15 / 0.06);
}
.card--bits::before {
  content: "";
  position: absolute;
  inset: auto -20% -30% -20%;
  height: 80%;
  z-index: -1;
  background: radial-gradient(50% 50% at 50% 60%, rgb(245 87 47 / 0.22), transparent 70%);
  opacity: 0.8;
  transition: opacity 0.6s var(--ease-soft);
}

.card__top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.icon {
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  overflow: clip;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 6px 16px -6px rgb(0 0 0 / 0.3);
}
.icon img { width: 100%; height: 100%; object-fit: cover; }

.card__title {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 3px;
}
.card__meta {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--card-ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.status { display: inline-flex; align-items: center; gap: 6px; }
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.status--live::before { background: #22c55e; opacity: 1; box-shadow: 0 0 0 3px rgb(34 197 94 / 0.18); }

.card__arrow {
  margin-left: auto;
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--card-line), inset 0 0 0 1px var(--card-line);
  background: color-mix(in srgb, var(--card-ink) 6%, transparent);
  transition: transform 0.5s var(--ease-out), background 0.3s var(--ease-soft);
}
.card__arrow svg { width: 16px; height: 16px; transition: transform 0.5s var(--ease-out); }

.card__copy {
  margin-top: 24px;
  font-size: clamp(18px, 1.55vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.015em;
  max-width: 30ch;
  text-wrap: pretty;
}

.card__stage {
  position: relative;
  flex: 1;
  margin: 32px calc(clamp(24px, 3vw, 36px) * -1) calc(clamp(24px, 3vw, 36px) * -1);
  min-height: 300px;
}
.card__stage .phone {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(66%, 340px);
  translate: -50% 0;
  transition: transform 0.8s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--card-line), 0 30px 60px -30px rgb(23 21 15 / 0.35); }
  .card:hover .card__stage .phone { transform: translateY(-14px); }
  .card:hover .card__arrow { background: color-mix(in srgb, var(--card-ink) 12%, transparent); }
  .card:hover .card__arrow svg { transform: translate(2px, -2px); }
  .card:hover::before { opacity: 1; }
}
.card:active { transform: scale(0.995); }

/* ---------- Phone ----------
   An iPhone 17 Pro, built in CSS: titanium band, black bezel, Dynamic Island
   and side buttons. Proportions come from the real device (402pt screen,
   ~55pt display corners, 125 x 37pt island). */

.phone {
  --metal: #3b3b3f;
  container-type: inline-size;
  position: relative;
  padding: 1.15%;
  border-radius: 16.2% / 7.7%;
  background: linear-gradient(135deg, #a1a1a6 0%, #46464b 9%, #1f1f22 32%, #2b2b2f 68%, #4b4b50 90%, #8a8a8f 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 1px 2px rgb(0 0 0 / 0.14),
    0 24px 48px -18px rgb(0 0 0 / 0.38),
    0 60px 120px -40px rgb(0 0 0 / 0.3);
}
/* Action button and volume on the left, side button and Camera Control on the right. */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 0.9cqi;
  border-radius: 1cqi;
}
.phone::before {
  left: -0.6cqi;
  top: 22cqi;
  height: 56cqi;
  background: linear-gradient(to bottom,
    var(--metal) 0 12%, transparent 12% 30%,
    var(--metal) 30% 58%, transparent 58% 66%,
    var(--metal) 66% 94%, transparent 94%);
}
.phone::after {
  right: -0.6cqi;
  top: 40cqi;
  height: 92cqi;
  background: linear-gradient(to bottom,
    var(--metal) 0 34%, transparent 34% 74%,
    var(--metal) 74% 100%);
}

.phone__screen {
  container-type: inline-size;
  position: relative;
  padding: 2.3%;
  border-radius: 15.2% / 7.2%;
  background: #050505;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.05);
}
.phone__screen img {
  width: 100%;
  height: auto;
  aspect-ratio: 1206 / 2622;
  object-fit: cover;
  object-position: top;
  border-radius: 13cqi;
  background: #0b0b0b;
}
/* Dynamic Island. Simulator screenshots don't include it, so it goes on top. */
.phone__screen::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 4.8cqi;
  width: 29.6cqi;
  height: 8.8cqi;
  translate: -50% 0;
  border-radius: 99px;
  background: #000;
}

.contact .lede { color: rgb(243 242 235 / 0.84); }

/* ---------- About strip ---------- */

.about {
  display: grid;
  gap: clamp(24px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--line);
}
@media (min-width: 860px) {
  .about { grid-template-columns: 1fr 1.4fr; align-items: start; }
  .about .label { margin-top: 0.7em; }
}
.about__text {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.03em;
  font-weight: 460;
  text-wrap: pretty;
  max-width: 28ch;
}
.about__text em { font-style: normal; color: var(--ink-2); }

/* ---------- Contact ---------- */

#contact { padding-bottom: 24px; }

.contact {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: clamp(24px, 2.6vw, 32px);
  background: linear-gradient(180deg, var(--red-top), var(--red-bottom));
  color: var(--on-red);
  overflow: clip;
  isolation: isolate;
}
.contact__text { display: grid; gap: 12px; max-width: 600px; }
.contact .label { color: rgb(243 242 235 / 0.8); }
.contact__title {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 17px;
  font-weight: 560;
  letter-spacing: -0.015em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.4s var(--ease-out), background 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--cream { background: var(--on-red); color: #17150f; padding-inline: 28px; }
.btn--cream:hover { background: #fff; }

.btn--ink { background: var(--ink); color: var(--cream); }
.btn--ink:hover { background: color-mix(in srgb, var(--ink) 86%, var(--red)); }
.btn--quiet {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn--quiet:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.btn[aria-disabled="true"] { cursor: default; }
.btn[aria-disabled="true"]:active { transform: none; }

/* A small cream sun on the bottom edge, like the splash screen. */
.contact__sun {
  position: absolute;
  right: clamp(140px, 22%, 320px);
  bottom: 0;
  width: clamp(110px, 12vw, 170px);
  z-index: -1;
  color: var(--on-red);
  opacity: 0.16;
}
.contact__sun .dome { width: 100%; height: auto; transform: translateY(3%); }
@media (max-width: 720px) {
  .contact__sun { right: 24px; }
}

/* ---------- Privacy ---------- */

.legal {
  display: grid;
  gap: clamp(24px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
  .legal { grid-template-columns: 1fr 1.6fr; }
  .legal__head { position: sticky; top: 112px; align-self: start; }
}
.legal__head .h2 { margin-top: 18px; }
.page-top { padding-top: clamp(140px, 16vw, 200px); }
.legal__head p { margin-top: 16px; color: var(--ink-2); font-size: 15px; }

.legal__body { max-width: 66ch; }
.legal__body h2 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 40px;
  margin-bottom: 10px;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { color: var(--ink-2); margin-bottom: 14px; text-wrap: pretty; }
.legal__body p:first-of-type { color: var(--ink); font-size: 19px; letter-spacing: -0.015em; }
.legal__body a { text-decoration-color: color-mix(in srgb, var(--red) 60%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal__body a:hover { text-decoration-color: var(--red); }

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

.footer {
  padding-block: 0 32px;
  font-size: 14px;
  color: var(--ink-2);
}
.footer__row {
  position: relative;
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.footer__row::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--line);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--ink); }
.footer .made { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; }
.footer .made .dome { width: 14px; color: var(--red); }

/* ---------- Social tray ----------
   The same glass as the bar at the top, closing the page. */

.social { display: flex; justify-content: center; margin-bottom: 24px; }

.social__tray {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--glass-shadow);
}

.footer .social__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
}
.social__link svg {
  width: 17px;
  height: 17px;
  fill: var(--red);
  flex: none;
  transition: transform 0.5s var(--ease-out);
}
.footer .social__link:hover {
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(23 21 15 / 0.08), 0 0 0 1px var(--line);
}
.social__link:hover svg { transform: scale(1.08); }

@media (max-width: 420px) {
  .footer .social__link { padding: 0 12px 0 10px; font-size: 14.5px; gap: 7px; }
  .social__link svg { width: 16px; height: 16px; }
}

/* ---------- App page ---------- */

.app-hero {
  padding-top: clamp(128px, 16vw, 200px);
  display: grid;
  gap: 28px;
  justify-items: start;
}
.app-hero .icon { width: 88px; height: 88px; border-radius: 20px; }
.app-hero__title {
  font-family: var(--display);
  font-size: clamp(64px, 11vw, 160px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-left: -0.03em;
}
.app-hero .lede { max-width: 36ch; color: var(--ink); font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; }
.app-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.app-hero__note { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

.stage {
  --pw: clamp(200px, 19vw, 268px);
  position: relative;
  margin-top: clamp(56px, 8vw, 96px);
}
.stage::before {
  content: "";
  position: absolute;
  inset: 20% 6% 0;
  background: radial-gradient(50% 50% at 50% 50%, var(--glow, rgb(255 10 46 / 0.18)), transparent 70%);
  z-index: -1;
}
.stage__row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 36px);
  padding-block: 8px 48px;
}
.stage .phone { width: var(--pw); flex: none; }
.stage .phone:nth-child(even) { margin-top: calc(var(--pw) * 0.22); }

@media (max-width: 760px) {
  .stage { margin-inline: calc(var(--gutter) * -1); }
  .stage__row {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    padding: 8px var(--gutter) 48px;
    scrollbar-width: none;
  }
  .stage__row:has(.phone:only-child) { justify-content: center; }
  .stage__row::-webkit-scrollbar { display: none; }
  .stage .phone { width: 64vw; scroll-snap-align: start; }
  .stage .phone:nth-child(even) { margin-top: 0; }
}

.story {
  display: grid;
  gap: clamp(24px, 4vw, 64px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .story { grid-template-columns: 1fr 1.6fr; }
}
.story__body { max-width: 60ch; display: grid; gap: 20px; }
.story__body p { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; letter-spacing: -0.012em; text-wrap: pretty; }
.story__body p + p { color: var(--ink-2); }
.story__sign { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.story__sign .dome { width: 14px; color: var(--red); }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature {
  padding: 28px 28px 32px 0;
  border-bottom: 1px solid var(--line);
}
.feature h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.feature h3::before {
  content: "";
  width: 12px;
  height: 6px;
  border-radius: 6px 6px 1px 1px;
  background: var(--accent, var(--red));
  flex: none;
}
.feature p { color: var(--ink-2); max-width: 36ch; text-wrap: pretty; }

.next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(48px, 7vw, 88px);
  border-top: 1px solid var(--line);
}
.next a.next__link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.next a.next__link .icon { width: 48px; height: 48px; border-radius: 11px; }
.next a.next__link svg { width: 24px; height: 24px; transition: transform 0.5s var(--ease-out); }
.next a.next__link:hover svg { transform: translateX(6px); }

/* ---------- Bits privacy demo ----------
   A live compose screen inside the phone frame. Sized in iPhone points:
   --pt is one point at whatever size the phone is drawn. */

.privacy__grid {
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
  .privacy__grid { grid-template-columns: auto 1fr; }
}
.privacy__phone { display: flex; justify-content: center; position: relative; }
.privacy__phone::before {
  content: "";
  position: absolute;
  inset: 10% -20%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(245 87 47 / 0.18), transparent 70%);
  z-index: -1;
}
.privacy__phone .phone { width: clamp(250px, 26vw, 320px); }
.privacy__copy { display: grid; gap: 20px; max-width: 34rem; }
.privacy__copy .lede { color: var(--ink-2); }

.compose {
  --pt: calc(100cqi / 402);
  position: relative;
  aspect-ratio: 1206 / 2622;
  border-radius: 13cqi;
  overflow: hidden;
  background: #fff;
  color: #111;
  font-family: -apple-system, "SF Pro Text", var(--sans);
  -webkit-font-smoothing: antialiased;
}

.compose__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(54 * var(--pt));
  padding: calc(6 * var(--pt)) calc(34 * var(--pt)) 0 calc(46 * var(--pt));
  font-size: calc(17 * var(--pt));
  font-weight: 600;
}
.compose__status-icons { display: flex; gap: calc(6 * var(--pt)); align-items: center; }
.compose__status-icons i { display: block; height: calc(11 * var(--pt)); border-radius: calc(3 * var(--pt)); background: #111; }
.compose__status-icons i:nth-child(1) { width: calc(17 * var(--pt)); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.compose__status-icons i:nth-child(2) { width: calc(15 * var(--pt)); border-radius: 50% 50% 0 0 / 100% 100% 0 0; clip-path: polygon(50% 100%, 0 0, 100% 0); }
.compose__status-icons i:nth-child(3) { width: calc(25 * var(--pt)); }

.compose__bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(10 * var(--pt)) calc(16 * var(--pt)) 0;
}
.compose__close {
  display: grid;
  place-items: center;
  width: calc(44 * var(--pt));
  height: calc(44 * var(--pt));
  border-radius: 50%;
  font-size: calc(17 * var(--pt));
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 calc(4 * var(--pt)) calc(14 * var(--pt)) calc(-4 * var(--pt)) rgb(0 0 0 / 0.18);
}
.compose__post {
  height: calc(40 * var(--pt));
  padding: 0 calc(18 * var(--pt));
  border-radius: 999px;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: calc(16 * var(--pt));
  font-weight: 600;
}
.compose__toast {
  position: absolute;
  left: 50%;
  top: calc(16 * var(--pt));
  translate: -50% 0;
  height: calc(32 * var(--pt));
  padding: 0 calc(14 * var(--pt));
  border-radius: 999px;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: calc(13 * var(--pt));
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(calc(-8 * var(--pt))) scale(0.96);
  transition: opacity 0.35s var(--ease-soft), transform 0.5s var(--ease-out);
}
.compose__toast.is-on { opacity: 1; transform: none; }

.compose__title {
  margin: calc(22 * var(--pt)) calc(22 * var(--pt)) 0;
  min-height: calc(34 * var(--pt));
  font-size: calc(28 * var(--pt));
  font-weight: 700;
  letter-spacing: -0.02em;
}
.compose__body {
  margin: calc(10 * var(--pt)) calc(22 * var(--pt)) 0;
  font-size: calc(18 * var(--pt));
  line-height: 1.42;
  letter-spacing: -0.01em;
  word-wrap: break-word;
}
.compose__caret {
  display: inline-block;
  width: calc(2 * var(--pt));
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: #f5572f;
  border-radius: 1px;
  animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* While privacy mode kicks in, the shuffling letters flash Bits orange. */
.compose [data-body],
.compose [data-title] { transition: color 0.3s var(--ease-soft); }
.compose .flick { color: #f5572f; transition: none; }

.compose__tools {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(291 * var(--pt));
  display: flex;
  align-items: center;
  gap: calc(22 * var(--pt));
  padding: calc(10 * var(--pt)) calc(18 * var(--pt));
  border-top: 0.5px solid #e5e5ea;
  background: #fff;
}
.compose__tool { display: grid; place-items: center; width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); color: #6b6b70; }
.compose__tool svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compose__tool--hash { font-size: calc(22 * var(--pt)); font-weight: 600; }
.compose__spacer { flex: 1; }
.compose__privacy {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--pt));
  height: calc(34 * var(--pt));
  padding: 0 calc(12 * var(--pt)) 0 calc(10 * var(--pt));
  border-radius: 999px;
  color: #6b6b70;
  box-shadow: inset 0 0 0 1px #e0e0e5;
  font-size: calc(14 * var(--pt));
  font-weight: 600;
  transition: background 0.3s var(--ease-soft), color 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft), transform 0.25s var(--ease-out);
}
.compose__privacy svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.compose__privacy .slash { stroke-dasharray: 23; stroke-dashoffset: 23; transition: stroke-dashoffset 0.4s var(--ease-out); }
.compose__privacy.is-on { background: #111; color: #fff; box-shadow: none; }
.compose__privacy.is-on .slash { stroke-dashoffset: 0; }
.compose__privacy.is-pressed { transform: scale(0.92); }

/* A simple iOS keyboard. Keys light up as they're "typed". */
.compose__keys {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(291 * var(--pt));
  padding: calc(8 * var(--pt)) calc(3 * var(--pt)) 0;
  background: #d3d5db;
  display: flex;
  flex-direction: column;
  gap: calc(11 * var(--pt));
}
.compose__row { display: flex; justify-content: center; gap: calc(6 * var(--pt)); }
.compose__key {
  display: grid;
  place-items: center;
  width: calc(34 * var(--pt));
  height: calc(43 * var(--pt));
  border-radius: calc(6 * var(--pt));
  background: #fff;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.3);
  font-size: calc(22 * var(--pt));
  color: #111;
  transition: background 0.12s;
}
.compose__key--wide { width: calc(46 * var(--pt)); background: #abb0ba; font-size: calc(16 * var(--pt)); }
.compose__key--space { width: calc(186 * var(--pt)); font-size: calc(15 * var(--pt)); color: #555; }
.compose__key--return { width: calc(90 * var(--pt)); background: #abb0ba; font-size: calc(15 * var(--pt)); }
.compose__key.down { background: #c4c7ce; }

/* ---------- Motion ----------
   Everything below only runs when motion is welcome. Without JS, or with
   reduced motion, every element simply sits in its final place. */

@media (prefers-reduced-motion: no-preference) {

  /* Page load: bar drops in, title rises word by word, the sun comes up. */
  .js .bar__inner { animation: bar-in 0.9s var(--ease-out) 0.1s both; }
  .js .hero__title .w > span { animation: rise 1.1s var(--ease-out) both; animation-delay: calc(0.15s + var(--i, 0) * 0.08s); }
  .js .sun__body { animation: sunrise 1.8s var(--ease-out) 0.3s both; }
  .js .hero__stage::after { animation: draw 1.4s var(--ease-out) 0.15s both; transform-origin: left; }

  .js .app-hero > * { animation: fade-up 1s var(--ease-out) both; }
  .js .app-hero > :nth-child(2) { animation-delay: 0.06s; }
  .js .app-hero > :nth-child(3) { animation-delay: 0.12s; }
  .js .app-hero > :nth-child(4) { animation-delay: 0.18s; }
  .js .app-hero > :nth-child(5) { animation-delay: 0.24s; }

  /* Scroll reveals, toggled by site.js. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* Phones rise from the horizon, one after another. */
  .js .stage .phone {
    transform: translateY(12%);
    opacity: 0;
    transition: transform 1.4s var(--ease-out), opacity 0.9s var(--ease-soft);
    transition-delay: calc(var(--d, 0) * 110ms);
  }
  .js .stage.is-in .phone { transform: none; opacity: 1; }

  .js .card__stage .phone { transform: translateY(18%); transition: transform 1.3s var(--ease-out); }
  .js .card.is-in .card__stage .phone { transform: none; }
  @media (hover: hover) and (pointer: fine) {
    .js .card.is-in:hover .card__stage .phone { transform: translateY(-14px); transition-duration: 0.8s; }
  }

  /* The cream sun comes up over the red when contact scrolls in. */
  .js .contact__sun .dome { transform: translateY(100%); transition: transform 1.6s var(--ease-out) 0.25s; }
  .js .contact.is-in .contact__sun .dome { transform: translateY(3%); }
}

@keyframes bar-in { from { opacity: 0; transform: translateY(-14px) scale(0.98); } }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes sunrise { from { translate: 0 45%; } }
@keyframes draw { from { transform: scaleX(0); } }