/* Shared shell for the sub-pages: tokens, header, prose. */
:root {
  --page: #FFFFFF;
  --page-deep: #F4F4F5;

  /* One type scale for the whole page. The HUD inside the phone is exempt —
     those sizes are a 1:1 reproduction of the app's own typography. */
  --t-display: clamp(46px, 8vw, 92px);
  --t-title:   clamp(36px, 5.2vw, 60px);
  --t-head:    21px;
  --t-price:   42px;
  --t-small:   14px;
  --t-micro:   11px;

  /* Approximates SwiftUI's .snappy spring (bounce ≈ 0.15). */
  --snappy: cubic-bezier(.28, 1.22, .53, 1);
  --ink: #0B0B0C;
  --ink-soft: rgba(11, 11, 12, 0.58);
  --ink-faint: rgba(11, 11, 12, 0.32);
  --hairline: rgba(11, 11, 12, 0.10);
  --orange: #E8531F;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--page);
  /* A whisper of the current sky washes the page as you scroll. */
  background-image: radial-gradient(150% 110% at 50% 30%, var(--sky-wash, transparent), transparent 78%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: inherit; }
::selection { background: var(--ink); color: #fff; }
::-moz-selection { background: var(--ink); color: #fff; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* ── Nav ── */









/* Liquid glass: it floats over whatever section is behind it. */




/* Four section links won't fit beside the wordmark on a phone. */
@media (max-width: 720px) {
  
  
}


/* ── Hero (normal flow) + scrub ── */
.hero { padding: 15vh 24px 0; text-align: center; }
/* Everything lifts in once, on load. */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFade { from { opacity: 0 } to { opacity: 1 } }
.hero-copy h1  { animation: heroRise .8s cubic-bezier(.2,.7,.2,1) .05s both; }
.hero-copy p   { animation: heroRise .8s cubic-bezier(.2,.7,.2,1) .16s both; }
.hero .hero-cta { animation: heroRise .8s cubic-bezier(.2,.7,.2,1) .27s both; }
.stage         { animation: heroFade 1s ease .38s both; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy h1, .hero-copy p, .hero .hero-cta, .stage { animation: none; }
}
#scrub { position: relative; height: 190vh; }
/* Hero, phone and features share one tinted field; features fades it out to
   white so the rest of the page starts clean. */
#top { background: var(--scrub-tint, var(--page)); }
#features { padding-bottom: 220px; }
#features {
  background: linear-gradient(180deg, transparent 0%, var(--page) 62%);
}
.stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3vh;
}
.hero-copy { text-align: center; }
.hero-copy h1 {
  font-size: var(--t-display);
  font-weight: 700; letter-spacing: -0.035em; line-height: 0.98;
}
.hero-copy p {
  margin: 22px auto 0; max-width: 500px;
  font-size: var(--t-head); color: var(--ink-soft);
}
br.wide { display: none; }
@media (min-width: 700px) { br.wide { display: inline; } }
.hero-cta {
  border: 0; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 30px; padding: 19px 26px;
  background: var(--ink); color: #fff; border-radius: 17px;
  text-decoration: none; font-size: var(--t-head); font-weight: 600;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(11,11,12,.16), 0 10px 26px rgba(11,11,12,.18);
}
.hero-cta > span { line-height: 1; }
.hero-cta .cta-apple { fill: #fff; }

/* Cue banners — the day's notifications, arriving beside the phone as the
   scrub passes their hour. Three only: the pitch is that Ray stays quiet. */
.notes { position: absolute; inset: 0; pointer-events: none; z-index: 3; perspective: 900px; }
.note {
  position: absolute; width: 296px; z-index: 5;
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px; border-radius: 24px;
  /* The same glass as the footer's code card. */
  background: linear-gradient(150deg, rgba(255,255,255,.58), rgba(255,255,255,.30));
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow:
    0 18px 40px rgba(11,11,12,.22),
    inset 0 1px 0 rgba(255,255,255,.75);
  opacity: 0; transform: translateY(-18px) scale(.94) rotate(var(--tilt, 0deg));
  transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  text-align: left; overflow: hidden;
}
.n-shine {
  position: absolute; inset: 0; border-radius: 24px; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 65%);
  opacity: .3; mix-blend-mode: overlay;
}
.note.in {
  opacity: 1;
  transform: rotateX(var(--lean-x, 0deg)) rotateY(var(--lean-y, 0deg))
             rotate(var(--tilt, 0deg));
}
.note.in { transition: opacity .45s ease, transform .18s ease-out; }
.note img { width: 38px; height: 38px; border-radius: 23.27%; flex: none; }
.note .n-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(11,11,12,.5);
}
.note .n-title { font-size: var(--t-small); font-weight: 650; margin-top: 3px; }
.note .n-body { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.35; margin-top: 1px; }
.note > div { min-width: 0; }
/* Left and right of the phone, staggered down the screen. */
.note.a { right: calc(50% + 130px); top: 17%; --tilt: -1.6deg; }
.note.b { left:  calc(50% + 130px); top: 40%; --tilt:  1.6deg; }
.note.c { right: calc(50% + 130px); top: 63%; --tilt: -1.2deg; }

/* One shooting star inside the phone's sky, which already clips. */
.shoot {
  position: absolute; left: -14%; top: 14%; z-index: 6;
  width: 74px; height: 1.4px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95));
  opacity: 0; transform: rotate(26deg);
}
.shoot.go { animation: shoot 1.15s ease-out; }
@keyframes shoot {
  0%   { opacity: 0; transform: translate(0,0) rotate(26deg) scaleX(.35); }
  14%  { opacity: 1; }
  100% { opacity: 0; transform: translate(340px, 168px) rotate(26deg) scaleX(1); }
}
@media (max-width: 900px) {
  /* No room beside the phone — banners sit where iOS would put them.
     These need the .note.x specificity to beat the desktop placement.
     Slightly different tops so an overlap reads as a stack, not a collision. */
  .note { width: auto; }
  .note.a, .note.b, .note.c { left: 20px; right: 20px; }
  .note.a { top: 7%; }
  .note.b { top: 14%; }
  .note.c { top: 21%; }
}
@media (prefers-reduced-motion: reduce) {
  .note { transition: opacity .2s linear; }
  .shoot.go { animation: none; }
}

/* Phone — sits in the sticky stage, only ever scaled */
.phone-wrap { will-change: transform; }
.phone {
  width: 340px; aspect-ratio: 340 / 700;
  border-radius: 50px;
  background: linear-gradient(155deg, #45474d, #26282d 42%, #141518);
  padding: 3.5px;
  box-shadow:
    0 2px 5px rgba(0,0,0,.18),
    0 18px 44px var(--sky-shadow-near, rgba(0,0,0,.18)),
    0 60px 130px var(--sky-shadow, rgba(0,0,0,.30)),
    0 110px 240px var(--sky-glow, rgba(0,0,0,.16)),
    inset 0 1px 1px rgba(255,255,255,.28);
  transition: box-shadow .25s linear;
  position: relative;
}
.phone .btn-l, .phone .btn-r {
  position: absolute; width: 2.5px; border-radius: 3px; background: #2c2e33;
}
.phone .btn-l { left: -2.5px; top: 20%; height: 5%; box-shadow: 0 58px 0 #2c2e33, 0 122px 0 #2c2e33; }
.phone .btn-r { right: -2.5px; top: 27%; height: 10%; }
.screen {
  width: 100%; height: 100%; border-radius: 47px; overflow: hidden;
  position: relative; background: #0a0e1c; border: 4px solid #000;
}
.statusbar {
  /* Sits on the island's own line, in the two "ears" either side of it. */
  position: absolute; top: 9px; left: 0; right: 0; height: 31px; z-index: 41;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 22px; font-size: 14px; font-weight: 600;
  letter-spacing: -.01em; pointer-events: none;
}
.statusbar .sb-time { padding-left: 8px; }
.statusbar .sb-icons { display: flex; align-items: center; gap: 5px; }
.statusbar svg { height: 11.5px; width: auto; fill: currentColor; display: block; }
.statusbar .sb-time { font-variant-numeric: tabular-nums; }
.island {
  /* 125 × 37pt at 11pt from the top, scaled by 340/402. */
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 106px; height: 31px; background: #000; border-radius: 16px; z-index: 40;
}


/* ── Header (sub-pages only) ── */
/* Every sub-page fills the viewport, so its footer links rest on the bottom
   edge rather than floating under short content. */
body { min-height: 100svh; display: flex; flex-direction: column; }
.prose { flex: 1 0 auto; }
.page-foot { margin-top: auto; }

.site-head {
  position: sticky; top: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 26px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.brand img { width: 34px; height: 34px; border-radius: 23.27%; display: block; }
.brand span { font-weight: 650; letter-spacing: 0.3em; font-size: var(--t-small); }
.site-head nav { display: flex; align-items: center; gap: 20px; }
.site-head nav a { font-size: var(--t-small); text-decoration: none; color: var(--ink-soft); }
.site-head nav a:hover { color: var(--ink); }
/* The filled button keeps its own colours on hover. */
.site-head nav a.cta:hover { color: #fff; }
body.dark-sky .site-head nav a.cta:hover { color: #0B0B0C; }
.site-head .cta {
  font-size: var(--t-small); line-height: 1; text-decoration: none; color: #fff;
  /* The home page's buttons are 17px on a 63px-tall button; this one is
     ~40px tall, so 11px keeps the same corner-to-height ratio. */
  background: var(--ink); border-radius: 11px; padding: 13px 18px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(11,11,12,.16), 0 8px 20px rgba(11,11,12,.18);
}
@media (max-width: 620px) { .site-head nav a.hide-sm { display: none; } }

/* ── Prose pages ── */
.prose { max-width: 680px; margin: 0 auto; width: 100%; padding: 80px 24px 96px; }
.prose h1 { font-size: var(--t-title); letter-spacing: -.033em; line-height: 1.04; }
.prose h2 { font-size: var(--t-head); margin-top: 44px; }
.prose p, .prose li { font-size: var(--t-head); line-height: 1.55; color: var(--ink-soft); margin-top: 14px; }
.prose a { color: var(--ink); }
.prose ul { margin-top: 14px; padding-left: 22px; }
.prose .updated { font-size: var(--t-small); color: var(--ink-faint); margin-top: 10px; }
.prose dl { margin-top: 24px; display: grid; gap: 14px; }
.prose dt { font-size: var(--t-small); color: var(--ink-faint); }
.prose dd { font-size: var(--t-head); color: var(--ink); }

/* ── Page footer links (all sub-pages) ── */
.page-foot {
  /* Same 26px gutters as .site-head, so the wordmark sits under the logo and
     the links sit under the button. */
  padding: 0 26px 34px; font-size: var(--t-small); color: var(--ink-faint);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%;
}
.page-foot .mark { text-align: left; }
.page-foot .links { display: flex; gap: 26px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 700px) {
  .page-foot { flex-direction: column; gap: 12px; text-align: center; }
  .page-foot .links { justify-content: center; }
}
.page-foot a { text-decoration: none; color: var(--ink-faint); }
.page-foot a:hover { color: var(--ink); }

/* ── Contact ── */
.centered { text-align: center; }
/* Content sits in the middle of the screen rather than under the header. */
.prose.centered { display: flex; flex-direction: column; justify-content: center; }
.prose .email {
  font-size: var(--t-head); margin-top: 30px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.prose .email a { text-decoration: none; border-bottom: 1px solid var(--hairline); }
.prose .email a:hover { border-color: var(--ink-faint); }
.copy-icon {
  cursor: pointer; background: none; border: 0; padding: 4px; line-height: 0;
  color: var(--ink-soft); transition: color .2s ease;
}
.copy-icon:hover { color: var(--ink); }
.copy-icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.copy-icon .done { display: none; }
.copy-icon.copied .idle { display: none; }
.copy-icon.copied .done { display: inline; }
.copy-icon.copied { color: var(--ink); }
.copy-row { display: flex; justify-content: center; margin-top: 26px; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: inherit; font-size: var(--t-head); color: var(--ink);
  background: none; border: 1px solid var(--hairline); border-radius: 11px;
  padding: 12px 16px; transition: border-color .2s ease, background .2s ease;
}
.copy-btn:hover { border-color: var(--ink-faint); background: var(--page-deep); }
.copy-btn svg { width: 17px; height: 17px; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.copy-btn .done { display: none; }
.copy-btn.copied .idle { display: none; }
.copy-btn.copied .done { display: inline; }

/* A page whose background goes dark flips the header with it. */
body.dark-sky .site-head .brand span,
body.dark-sky .site-head nav a { color: #FFFFFF; }
body.dark-sky .site-head .cta { background: #FFFFFF; color: #0B0B0C; }