/* Zapchat. The palette is the app's own — a product site that does not look
   like the product it sells is a second registry of the brand.

   It used to be #25D366 on a #111B21 ground, taken from the app icon. Both of
   those values are WhatsApp's: the first is their brand green exactly, the
   second their dark theme. Apple rejected the app under guideline 4.1(b) for
   it, the icon was rebuilt in TAG's own colours, and the site follows the same
   move. It is now TAG's blue from tag.org (#04A5E0) over neutral greys taken
   from the icon's mark (#2E3134).

   Every value below is measured against its own ground rather than picked by
   eye; the ratios are in the comments. */

:root {
  color-scheme: light dark;

  --brand: #04a5e0;         /* TAG's blue, from tag.org */
  --link: #037fac;          /* the blue, darkened until it passes on white — 4.5:1 */
  --ground: #ffffff;
  --surface: #f3f7fa;       /* neutral, biased a few degrees toward the blue */
  --line: #e1e8ed;
  --ink: #0e1416;           /* 18.6:1 on white */
  --muted: #5d6a70;         /* 5.6:1 on white */
  --shadow: 0 1px 2px rgba(14,20,22,.05), 0 8px 24px rgba(14,20,22,.06);
}

/* Only the tokens change. Every rule below reads them, so a colour is never
   defined solely inside a media query — that is how a page ends up rendering
   one theme's text on the other theme's ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --link: #04a7e2;      /* 6.4:1 on the ground below */
    --ground: #16191c;
    --surface: #202427;
    --line: #2e3134;      /* the icon's mark colour, used as the rule */
    --ink: #e8eaec;       /* 14.6:1 */
    --muted: #9aa4ab;     /* 7.0:1 */
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"] {
  --link: #04a7e2;
  --ground: #16191c;
  --surface: #202427;
  --line: #2e3134;
  --ink: #e8eaec;
  --muted: #9aa4ab;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 3.5rem 1.25rem 4rem;
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

/* One column for prose. The screenshot rail below breaks out of it on purpose. */
.wrap { max-width: 44rem; margin: 0 auto; }

h1 { font-size: clamp(2.1rem, 7vw, 2.9rem); line-height: 1.1; letter-spacing: -.03em;
     margin: 0 0 .4rem; text-wrap: balance; }
h2 { font-size: 1.2rem; letter-spacing: -.01em; margin: 3rem 0 .6rem; text-wrap: balance; }
h3 { font-size: 1rem; margin: 1.75rem 0 .35rem; }
p  { margin: 0 0 1rem; }
.sub { color: var(--muted); font-size: 1.12rem; margin: 0 0 1.75rem; text-wrap: balance; }
.lede { font-size: 1.06rem; }
a { color: var(--link); text-underline-offset: .18em; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
strong { font-weight: 600; }

/* Header */
.mark { width: 76px; height: 76px; border-radius: 22%; display: block; margin: 0 0 1.1rem; }

/* Screenshots. Full-bleed and scrollable so a phone never has to shrink four
   portrait screens into a row it cannot read. */
.shots {
  display: flex; gap: 1rem; overflow-x: auto;
  /* Full-bleed so a narrow screen can scroll the row edge to edge, but
     centred whenever the four fit — "safe" so centring never pushes the first
     one out of reach on the left, which is what plain centre does. */
  margin: 2rem calc(50% - 50vw) 0;
  padding: .5rem 1.25rem 1.25rem;
  justify-content: safe center;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.shots figure { margin: 0; flex: 0 0 auto; width: 216px; scroll-snap-align: center; }
.shots img {
  width: 100%; height: auto; display: block; border-radius: 22px;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--surface);
}
.shots figcaption { color: var(--muted); font-size: .85rem; margin-top: .6rem; text-align: center; }

/* The one thing on this page somebody has to remember two weeks from now. It
   is not a warning and it is not decoration — it is a step whose consequence
   arrives late, so it gets the accent and its own edge. */
.callout {
  margin: 1.25rem 0 0;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--brand);
  background: var(--surface);
  border-radius: 0 10px 10px 0;
  font-size: .97rem;
}
.callout b { font-weight: 600; }

/* An aside under a block, not a section subtitle. */
.note { color: var(--muted); font-size: .95rem; margin: .25rem 0 0; }

/* Steps. Numbered because this IS a sequence — do them out of order and the
   code has expired before you reach WhatsApp. */
ol.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
ol.steps li {
  counter-increment: step; position: relative; padding: 0 0 1.1rem 2.6rem;
}
ol.steps li::before {
  content: counter(step); position: absolute; left: 0; top: .05rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--brand); color: #00131c;   /* 6.7:1 on the blue */
  font-size: .85rem; font-weight: 700; display: grid; place-items: center;
}
ol.steps b { font-weight: 600; }

/* Two short lists side by side where there is room. */
.pair { display: grid; gap: 1.25rem 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .pair { grid-template-columns: 1fr 1fr; } }
.pair h3 { margin-top: 0; }
.pair p { color: var(--muted); margin: 0; }

/* FAQ */
details {
  border-top: 1px solid var(--line); padding: .9rem 0;
}
details:last-of-type { border-bottom: 1px solid var(--line); }
summary {
  cursor: pointer; font-weight: 600; list-style: none; display: flex;
  justify-content: space-between; align-items: center; gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; color: var(--muted); font-weight: 400; font-size: 1.3rem; line-height: 1;
}
details[open] summary::after { content: "\2212"; }
details p { margin: .7rem 0 .2rem; color: var(--muted); }
details p:last-child { margin-bottom: 0; }

/* Footer */
nav { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
      font-size: .93rem; }
.fine { font-size: .82rem; color: var(--muted); margin-top: 1.5rem; }
.fine a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The App Store button.
   ---------------------
   Zapchat went on sale 2026-09-24, and until then this page described an app
   with no way to get it: the first thing under the fold was "Getting started",
   which assumed you already had it. */
.get {
  display: inline-flex; align-items: center; gap: .55rem;
  margin: 1.4rem 0 .35rem;
  padding: .72rem 1.35rem;
  background: var(--brand); color: #fff;
  font-weight: 600; font-size: 1.02rem;
  border-radius: 999px; text-decoration: none;
  box-shadow: var(--shadow);
}
.get:hover { filter: brightness(1.06); }
/* Focus is drawn by the shared a:focus-visible rule; this only keeps the
   pill's shape so the ring does not cut its corners. */
.get:focus-visible { border-radius: 999px; }
.get svg { width: 1.15em; height: 1.15em; fill: currentColor; }