/* ============================================================
   Zula — tryzula.com
   One typeface. One accent. Space does the separating.
   ============================================================ */

/* Instrument Sans, served from this origin. The footer promises no tracking;
   a webfont fetched from Google would hand every visitor's IP to a third
   party, so the typeface ships with the site. Variable, 400–700 in one file. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ───────────────────────────────────────────── */
:root {
  --ground:  #FCFBF9;
  --panel:   #FFFFFF;
  --type:    #16171B;
  --muted:   #6E6B64;
  --line:    rgba(22, 23, 27, .09);
  --accent:  #FF5C00;
  --on-accent: #FFFFFF;

  --lift: 0 40px 80px -40px rgba(22, 23, 27, .30),
          0 8px 24px -14px rgba(22, 23, 27, .14);
  --ring: 0 0 0 1px rgba(22, 23, 27, .07);

  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont,
          "Segoe UI", system-ui, sans-serif;

  --pad:  clamp(22px, 6vw, 48px);
  --maxw: 1080px;
  --read: 68ch;
  --gap:  clamp(72px, 10vw, 144px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0C0D0F;
    --panel:  #141518;
    --type:   #F4F3F0;
    --muted:  #8B8A84;
    --line:   rgba(244, 243, 240, .11);
    --accent: #FF6E24;
    --on-accent: #0C0D0F;
    --lift: 0 40px 90px -40px rgba(0, 0, 0, .9);
    --ring: 0 0 0 1px rgba(244, 243, 240, .09);
  }
}

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

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--accent);
  color: var(--on-accent);
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}
.skip:focus { left: 0; }

/* ── Layout ───────────────────────────────────────────── */
.wrap   { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.center { text-align: center; }
section { padding-top: var(--gap); }

/* ── Type ─────────────────────────────────────────────── */
h1, h2, h3 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.02;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 7.4vw, 5.5rem); }
h2 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); }
h3 { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.3; }

.label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Button ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding-inline: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: transform .18s cubic-bezier(.2, .7, .2, 1), filter .18s ease;
}
.btn:hover { transform: translateY(-2px); filter: brightness(1.06); }

.btn.ghost {
  background: none;
  color: var(--type);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn.ghost:hover { filter: none; box-shadow: inset 0 0 0 1px var(--muted); }

/* ── Masthead ─────────────────────────────────────────── */
.mast .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 78px;
}
/* The mark ships as two files, picked by the page's colour scheme — see
   tools/build_site.py for why it is not one self-recolouring SVG. */
picture { display: block; }
.mark { height: 21px; width: auto; }
.mast .quiet { font-size: 15px; color: var(--muted); transition: color .18s ease; }
.mast .quiet:hover { color: var(--type); }

/* ── Hero ─────────────────────────────────────────────── */
.hero { padding-top: clamp(36px, 6vw, 76px); }
.hero h1 { max-width: 21ch; margin-inline: auto; }
.hero h1 span { display: block; }
.hero .sub {
  margin: 22px auto 34px;
  max-width: 34ch;
  font-size: clamp(1.1rem, 2.2vw, 1.32rem);
  color: var(--muted);
  letter-spacing: -.01em;
}
.hero .btn { margin-bottom: 14px; }
.hero .label { display: block; font-size: 11.5px; }

/* An iPhone 17, drawn rather than photographed — crisp at any density, and
   one less asset to keep in step with the screenshots.

   Geometry is the real thing: body 71.5 x 149.6 mm around a 66.6 x 144.8 mm
   display, so the bezel is 3.4% of the device width and the display corner
   radius (62pt at 402pt wide) works out at 14.4%. Every measurement below is
   a fraction of --dev-w, so the whole device scales as one piece. Aluminium
   rather than titanium, and Camera Control below the side button. */
.device {
  --dev-w: min(300px, 70vw);
  width: var(--dev-w);
  margin: clamp(56px, 10vw, 110px) auto 0;
}

.phone {
  position: relative;
  padding: calc(var(--dev-w) * .034);
  border-radius: calc(var(--dev-w) * .178);
  /* Black aluminium: matte, with the light catching the chamfer. */
  background: linear-gradient(145deg,
    #62666b 0%, #24262a 9%, #34373c 34%,
    #1c1e21 58%, #3e4145 86%, #202225 96%, #55585d 100%);
  box-shadow:
    var(--lift),
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 1px 1px rgba(255, 255, 255, .20),
    inset 0 -1px 1px rgba(0, 0, 0, .45);
}

.phone .screen {
  border-radius: calc(var(--dev-w) * .144);
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .9);
}
.phone .screen img { width: 100%; border-radius: inherit; }

/* The turn. The app's whole argument is that what you see changes as you
   move, so the hero shows three cities rather than describing one. The first
   shot sits in flow and gives the screen its height; the rest stack on top
   and cross-fade. Under reduced motion only the first is ever shown. */
.phone .screen { position: relative; }
.shot { transition: opacity .9s ease; }
.shot + .shot { position: absolute; inset: 0; opacity: 0; }
.shot + .shot.is-on { opacity: 1; }

.readout {
  display: grid;
  justify-items: center;
  margin: 22px 0 0;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.readout span {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .45s ease;
}
.readout span.is-on { opacity: 1; }

/* Action button above the volume pair on the left; side button and
   Camera Control on the right. */
.phone .keys,
.phone .side,
.phone .cam {
  position: absolute;
  border-radius: 2px;
  background: #4b4e53;
}
.phone .keys,
.phone .side { width: calc(var(--dev-w) * .0092); }

.phone .keys {
  left: calc(var(--dev-w) * -.0110);
  top: calc(var(--dev-w) * .255);
  height: calc(var(--dev-w) * .40);
  background: linear-gradient(to bottom,
    #4b4e53 0 15%, transparent 15% 27%,
    #4b4e53 27% 60%, transparent 60% 68%,
    #4b4e53 68% 100%);
}
.phone .side {
  right: calc(var(--dev-w) * -.0110);
  top: calc(var(--dev-w) * .30);
  height: calc(var(--dev-w) * .155);
}
/* Camera Control sits flush, so it is wider and barely proud of the rail. */
.phone .cam {
  right: calc(var(--dev-w) * -.0070);
  top: calc(var(--dev-w) * .515);
  width: calc(var(--dev-w) * .0064);
  height: calc(var(--dev-w) * .075);
  background: #5b5e63;
}

/* ── Three ────────────────────────────────────────────── */
.three {
  display: grid;
  gap: clamp(30px, 4vw, 44px);
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
  padding-top: 30px;
}
@media (min-width: 760px) { .three { grid-template-columns: repeat(3, 1fr); } }
.three > div { display: grid; gap: 9px; align-content: start; }
.three strong { font-size: 1.18rem; font-weight: 600; letter-spacing: -.02em; }
.three p { margin: 0; color: var(--muted); font-size: 1rem; max-width: 26ch; }

/* ── Quote ────────────────────────────────────────────── */
.quote blockquote {
  margin: 0 auto;
  max-width: 24ch;
  font-size: clamp(1.6rem, 3.8vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1.18;
  text-wrap: balance;
}
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after  { content: "\201D"; }
.quote cite {
  display: block;
  margin-top: 26px;
  font-style: normal;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Numbers ──────────────────────────────────────────── */
.numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.numbers > div { padding-top: 26px; }
.numbers b {
  display: block;
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

/* ── Close ────────────────────────────────────────────── */
.close h2 { max-width: 12ch; margin-inline: auto; }
.close .btn { margin-top: 32px; }

/* ── Footer ───────────────────────────────────────────── */
.foot {
  margin-top: var(--gap);
  padding-block: 36px 44px;
  border-top: 1px solid var(--line);
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  align-items: center;
  justify-content: space-between;
}
.foot .mark { height: 17px; opacity: .5; }
.foot p { margin: 0; font-size: 14px; color: var(--muted); }
.foot nav { display: flex; gap: 22px; font-size: 14px; color: var(--muted); }
.foot nav a { transition: color .18s ease; }
.foot nav a:hover { color: var(--type); }

/* ============================================================
   Prose pages — privacy, support, 404
   ============================================================ */
/* A document is one column, masthead and footer included, so the wordmark
   sits on the same left edge as the prose. */
body.doc .wrap { max-width: 720px; }
.page { padding-top: clamp(48px, 8vw, 96px); }
.page h1 { font-size: clamp(2.2rem, 5.4vw, 3.4rem); max-width: 18ch; }
.page .label { display: block; margin-bottom: 18px; }

.prose { margin-top: clamp(40px, 6vw, 64px); }
.prose h2 {
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 52px 0 12px;
  max-width: none;
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--muted); max-width: var(--read); }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--type); font-weight: 600; }
.prose a { color: var(--type); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 52px 0; }

.faq { margin-top: clamp(40px, 6vw, 64px); display: grid; gap: 2px; }
.faq details {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.015em;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--muted);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 12px 0 0; color: var(--muted); max-width: var(--read); }

.notfound { padding-block: clamp(90px, 18vw, 200px) 0; }
.notfound .sub {
  margin: 22px auto 34px;
  max-width: 30ch;
  font-size: clamp(1.1rem, 2.2vw, 1.32rem);
  color: var(--muted);
}

/* ── Reveal on scroll ─────────────────────────────────── */
.up {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.up.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .up { opacity: 1; transform: none; }
  .shot + .shot { opacity: 0 !important; }
  .readout span { opacity: 0 !important; }
  .readout span:first-child { opacity: 1 !important; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}