@font-face {
  font-family: 'Staatliches';
  src: url('fonts/Staatliches-Regular.ttf?v=2') format('truetype');
  font-display: swap;
}

/* The app's own palette: AppBackground / AppForeground / AccentOrange. */
:root {
  --bg: #f9f7f3;
  --fg: #100e0c;
  --muted: rgba(16, 14, 12, 0.62);
  --hairline: rgba(16, 14, 12, 0.12);
  --card: rgba(16, 14, 12, 0.04);
  --orange: #eb4f27;
  --ink: #100e0c;
  --paper: #f9f7f3;
  /* The hero: a light peach in light mode, so everything on it can be ink like the
     rest of the page; the full brand orange in dark mode, with paper on it. */
  --hero-bg: radial-gradient(120% 90% at 50% 0%, #ffe6d4 0%, #ffc9a6 55%, #ffa574 100%);
  --hero-fg: var(--ink);
  --hero-muted: rgba(16, 14, 12, 0.72);
  --hero-glow: none;
  --burst-opacity: 0.4;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #100e0c;
    --fg: #f9f7f3;
    --muted: rgba(249, 247, 243, 0.62);
    --hairline: rgba(249, 247, 243, 0.14);
    --card: rgba(249, 247, 243, 0.05);
    --hero-bg: radial-gradient(120% 90% at 50% 0%, #ff7a3d 0%, var(--orange) 55%, #c93a17 100%);
    --hero-fg: var(--paper);
    --hero-muted: rgba(249, 247, 243, 0.92);
    --hero-glow: 0 1px 12px rgba(120, 30, 0, 0.25);
    --burst-opacity: 0.6;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.55 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-underline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
}
@media (min-width: 720px) { .wrap { padding: 0 24px; } }

/* Display type is Staatliches, headings only — as in the app. */
.display {
  font-family: 'Staatliches', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
}

/* Header */
.bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.bar .logo { width: 84px; }
.bar nav { display: flex; gap: 20px; font-size: 15px; font-weight: 500; }
.bar nav a { text-decoration: none; color: var(--muted); }
.bar nav a:hover { color: var(--fg); }
@media (min-width: 720px) { .bar { padding: 20px 0; } .bar .logo { width: 96px; } }

/* Hero: the orange of screenshot 1, lit by the app icon's burst, stickers round the title. */
.hero {
  position: relative;
  margin: 4px 0 0;
  padding: 88px 24px 88px;
  border-radius: 40px;
  corner-shape: superellipse(1.4);
  background: var(--hero-bg);
  color: var(--hero-fg);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero .copy > p {
  max-width: 30em;
  margin: 20px auto 32px;
  font-size: clamp(17px, 2.2vw, 21px);
  color: var(--hero-muted);
  text-shadow: var(--hero-glow);
}

/* The icon's burst, turning slowly behind everything. It fades out toward its own
   edge (baked into the image's alpha), so its square never shows as it turns. */
.burst {
  position: absolute;
  z-index: -2;
  inset: 50% auto auto 50%;
  /* Wide enough that its square's edge never crosses the card, even as it turns. */
  width: max(220%, 1500px);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: url('burst.webp') center / cover;
  mix-blend-mode: screen;
  opacity: var(--burst-opacity);
  animation: spin 160s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }

/* The app's headline (PaywallHeadline.ramp): Staatliches under a grey ramp, blended
   for luminosity so the glyphs keep the orange's hue and only their brightness is
   ours. Top-lit in light mode, inverted in dark. The blend sits on the text itself,
   and the hero's isolation is the backdrop it reads. */
.headline {
  margin: 0 auto;
  font: 400 clamp(60px, 11vw, 118px)/0.88 'Staatliches', system-ui, sans-serif;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  background: linear-gradient(to bottom, #0f0f0f, #575757);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  mix-blend-mode: luminosity;
  animation: slap 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
@media (prefers-color-scheme: dark) {
  .headline { background-image: linear-gradient(to bottom, #b8b8b8, var(--paper)); }
}

/* The onboarding's entrance: dropped from above the screen, landing with a bounce. */
@keyframes slap {
  from { scale: 1.35; opacity: 0; translate: 0 -14px; }
  to   { scale: 1;    opacity: 1; translate: 0 0; }
}

.hero .sticker {
  position: absolute;
  z-index: -1;
  filter: drop-shadow(0 10px 18px rgba(90, 20, 0, 0.3));
  animation: pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both, bob 7s 0.6s ease-in-out infinite alternate;
}
@keyframes pop { from { scale: 0.4; opacity: 0; } }
@keyframes bob { to { translate: 0 -10px; } }

/* Kept to the card's margins, clear of the title; they land one after another. */
.s-lemons       { width: 150px; left: 4%;   top: 9%;     rotate: -12deg; animation-delay: 0.25s, 0.9s !important; }
.s-plate        { width: 140px; right: 5%;  top: 8%;     rotate: 14deg;  animation-delay: 0.35s, 1.8s !important; }
.s-spritz-right { width: 84px;  right: 6%;  top: 44%;    rotate: -14deg; animation-delay: 0.45s, 2.4s !important; }
.s-coast        { width: 170px; right: 5%;  bottom: 5%;  rotate: -8deg;  animation-delay: 0.55s, 1.2s !important; }
.s-sunglasses   { width: 130px; left: 24%;  bottom: -3%; rotate: -6deg;  animation-delay: 0.65s, 3s !important; }
.s-spritz-left  { width: 92px;  left: 7%;   bottom: 12%; rotate: 9deg;   animation-delay: 0.75s, 2s !important; }

@media (prefers-reduced-motion: reduce) {
  .burst, .headline, .hero .sticker { animation: none !important; }
}

.copy { max-width: 640px; margin: 0 auto; }

/* Download: one control. On a phone it's a badge to tap; on a desktop it carries
   the App Store's QR code too, for the phone that will actually install it. */
.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 26px 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  text-align: left;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(80, 18, 0, 0.32);
  transition: scale 0.15s;
}
.store:hover { scale: 1.025; }
.store:active { scale: 0.95; }
.store .big { display: flex; align-items: baseline; gap: 0.22em; margin-top: 1px; }
/* Sits on the baseline like a letter. The view box is cropped to the glyph, and an
   SVG's baseline is its bottom edge, so the apple's bottom lands on the text's. */
.store .apple { height: 0.98em; width: 0.8em; flex: none; position: relative; top: 1px; }
.store .label { display: flex; flex-direction: column; font-size: 22px; font-weight: 650; line-height: 1.05; letter-spacing: -0.01em; }
.store small { font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: 0.75; }
.store .scan, .store .qr { display: none; }

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .store {
    gap: 14px;
    padding: 10px 28px 10px 10px;
    /* Continuous corners, concentric with the code's tile. Offsetting a
       superellipse isn't a superellipse: at this shape the corner's diagonal
       sits 0.327 of its radius in (0.414 for a circle), so for the gap there to
       match the 10px sides, this radius is the tile's plus 1.27 × the padding,
       not plus 1 ×. Safari gets the same curve from
       the nine-slice images below. */
    border-radius: 25px;
    corner-shape: superellipse(1.4);
  }
  .store .qr {
    display: block;
    padding: 8px;
    margin-right: 6px;
    border-radius: 12px;
    corner-shape: superellipse(1.4);
    background: var(--paper);
  }
  .store .qr img { width: 72px; height: 72px; }
  /* Safari has no corner-shape: the same curve, drawn as a nine-slice image. */
  @supports not (corner-shape: superellipse(1.4)) {
    .store { background: none; border-image: url('squircle-ink.svg') 40 fill / 25px; border-radius: 20px; }
    .store .qr { background: none; border-image: url('squircle-paper.svg') 40 fill / 12px; }
  }
  .store .scan { display: inline; }
  .store .tap { display: none; }
}

/* Safari has no corner-shape, and doesn't clip the turning burst to a rounded
   overflow either: one nine-slice mask does both. */
@supports not (corner-shape: superellipse(1.4)) {
  .hero { -webkit-mask-box-image: url('squircle.svg') 40 / 40px; mask-border: url('squircle.svg') 40 fill / 40px; }
  /* Under the mask Safari drops a screen-blended layer entirely. */
  .burst { mix-blend-mode: normal; }
  .shots img { -webkit-mask-box-image: url('squircle.svg') 40 / 22px; mask-border: url('squircle.svg') 40 fill / 22px; }
}
@media (max-width: 720px) {
  @supports not (corner-shape: superellipse(1.4)) {
    .hero { -webkit-mask-box-image-width: 32px; mask-border-width: 32px; }
  }
}

/* On a phone the title fills the card's width, so the stickers go above and below it. */
@media (max-width: 720px) {
  .hero { padding: 128px 18px 148px; border-radius: 32px; }
  .hero .sticker.wide { display: none; }
  .s-lemons     { width: 100px; left: 5%;   top: 18px; }
  .s-plate      { width: 90px;  right: 7%;  top: 24px; }
  .s-sunglasses { width: 96px;  left: 9%;   bottom: 34px; }
  .s-coast      { width: 112px; right: 7%;  bottom: 22px; }
}

/* Screenshots: one horizontally scrolling strip, as they sit on the store. */
.shots {
  display: flex;
  gap: 14px;
  margin: 48px 0 0;
  /* Lines the first screenshot up with the content above it (.wrap's edge). */
  --edge: max(16px, calc((100vw - 1080px) / 2 + 24px));
  padding: 0 var(--edge) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--edge);
  scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
@media (min-width: 720px) { .shots { --edge: max(24px, calc((100vw - 1080px) / 2 + 24px)); } }
.shots img {
  flex: 0 0 auto;
  corner-shape: superellipse(1.4);
  width: min(260px, 62vw);
  height: auto;
  aspect-ratio: 660 / 1434;
  border-radius: 22px;
  scroll-snap-align: start;
}

/* Features */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 56px 0;
}
.feature {
  padding: 26px;
  border-radius: 24px;
  corner-shape: superellipse(1.4);
  background: var(--card);
  border: 1px solid var(--hairline);
}
.feature h2 { font-size: 32px; margin-bottom: 10px; }
.feature p { margin: 0; color: var(--muted); }

/* Prose pages (web/drafts/support) */
.page { max-width: 720px; margin: 0 auto; padding: 32px 24px 64px; }
.page h1 { font-size: clamp(48px, 9vw, 80px); margin: 24px 0 12px; }
.page .lede { color: var(--muted); margin: 0 0 40px; font-size: 19px; }
.page h2 { font-size: 19px; margin: 36px 0 6px; }
.page p { margin: 0 0 12px; }
.contact {
  margin: 48px 0 0;
  padding: 28px;
  border-radius: 24px;
  corner-shape: superellipse(1.4);
  background: var(--orange);
  color: var(--paper);
}
.contact h2 { margin-top: 0; }
.contact a { font-weight: 600; }

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  padding: 28px 0 max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 14px;
}
footer nav { display: flex; gap: 20px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--fg); }