/* =========================================================================
   DM Serif Display — display face for every heading. Self-hosted rather than
   linked from Google, so the pages still render correctly opened from disk.

   ONE weight (400), ONE style (italic) -- every heading in beckon.css sets
   font-style: italic, so only the italic cut ships. Nothing may ask a
   heading for bold, or the browser fakes it by smearing the glyphs. The
   heading rule below pins 400.

   Unlike Gloock it is moderate contrast and fairly generous by default, so it
   wants only a little tracking -- the .07em Gloock needed would look spaced out
   on this face.
   ========================================================================= */
/* Two files, Latin and Latin Extended, both the real drawn italic cut --
   registered under font-style: italic so the browser paints the drawn
   shapes rather than synthesizing italic by slanting an upright face. */
@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/dm-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("../fonts/dm-serif-italic-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  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;
}

/* =========================================================================
   Beckon — marketing site
   Dark surface, one brand colour (#25a1d6), system typography (matches the app).
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  --brand: #25a1d6;
  --brand-lift: #4fbdec;
  --brand-deep: #16789f;
  --brand-ink: #0a2c3d;

  --bg: #070c12;
  --bg-raised: #0c141d;
  --surface: #101b26;
  --surface-2: #16232f;
  --surface-lit: #dde1e4; /* --brand-ink mixed into white at 14%, so the
                                light band belongs to the same family as the
                                navy and the edge between them stops buzzing */
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text: #dde1e4;
  /* Paragraph copy now matches the headings rather than sitting a step below
     them. Same value as --text; kept as its own token because the primary /
     secondary distinction is real and may well come back. */
  --text-soft: #dde1e4;
  --text-faint: #6f8497;

  --ok: #34c759;
  --warn: #ffb020;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --glow: 0 0 80px -10px rgba(37, 161, 214, 0.55);

  --pad: clamp(24px, 5vw, 40px);
  --max: 1160px;
  --section-y: clamp(72px, 11vw, 136px);

  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);

  /* The conch mark, inlined. Every spiral on the site masks against this.
     It is a data URI on purpose: an external SVG used as a CSS mask is
     blocked over file://, so linking the file would make every spiral
     silently disappear when the page is opened without a web server. */
  --spiral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' aria-label='Beckon conch mark' viewBox='146 146 731 732'%3E%3Cpath d='M511.8 151a359 359 0 0 0-184.6 50.7l.8.6.5.5q18.4-5.5 38.1-9.9c1.5-1.8 4-3.6 6.2-3.8q1.8.6 3.2 2l13.6-2.5c81.1-15.1 154.5-9.6 218.7 26q.4-.6 1.1-.7c1.4-.5 2.1.3 2.8 1.4l1.2 2.2q33.6 19.6 63.9 51l1.5.1.6 2.1 2.2.5q.7.3 1 2l2 .1c1 1.4 2 3.7 2.3 5.6l1.1 1 2.8 3.5.6.1q.4-.2.5.6l-.2.3a273 273 0 0 1 60 128.6c1-.1 2.2.7 2.3 1.4 0 .8-.9 1-1.3 1l-.6-.4q1.2 6 2.1 12.3c3.3 21 5.1 43.5 3.7 65.6l1.7 1.6q.6.4.7 1.3-1.5-.2-2.5-1.3a179 179 0 0 1-4.1 27.8 144 144 0 0 1-7.7 26.9l.7 1.2c.2.4.2 1.2 0 1.6q-.4.2-.4.7l-.5.3h-1l-.3-.2q-2.4 5.6-5.2 11c-10.7 21-26 39.6-43.3 56l1.9 1.2c.2 0-.3.7-.5.7q-.5 0-.9-.2l-1.2-1-2.7 2.7a294 294 0 0 1-35.6 28.1q1.4 0 1.8 1c.4 1-1 2.6-2 2.6-.8 0-1.4-1-1.6-1.6l-.2-.6-8.8 5.8a341 341 0 0 1-56.6 30.5l-6.5 2.6c-24.2 9-49.8 14-75.3 10.8v.3c-.1.2.6.5 1 .7l.6 3.6c-.2.7-.6 2.2-1.1 2.8l-4.2 5-1.3 1.5q-.9 1-2 1.3l-.9.3q-.5-.2-1-.8-1.4.5-2.3-.7-.6-.8-.4-1.7c-1.4-1.4-.5-4.7.8-5.9l4.8-4.5q.9-1 2.4-1.5l2-.6a120 120 0 0 1-30.3-7.9l-3.9-1.5q-3.8-1.6-7.4-3.5l-1 1.4q-.6 1-1.8 1.5l-1.1.4a2 2 0 0 0-1.3-.3c-.3 0-1-.4-1.2-.8q0-.6-.6-1l.2-1.5.8-1 1-1.2q-11.4-6-21.5-14.1-.6.5-1.6.2a3 3 0 0 1-.2-1.7 176 176 0 0 1-38-42.7l-2-3.3q-1-1.5-1.7-3-7.5-12.7-12.8-26.4-1.5-3.5-2.6-7c-6.5-17.7-9.5-36-9.3-53.7v-2.5q.6-18.5 5.8-35.8 5.9-19.6 17.5-36.2l1.1-1.5q-.6-.1-1-.8a2 2 0 0 1-1.4-.6l.4-1q.6-.6 1.4-.4h.9q.6-.2.8.4l-.8.7-.4.2q.1.4.9.5l2.5-3.2q0-.3.3-.4 6.5-8 14.4-14.8l-.3-.2-.4-.3v-.6c.4-.6 1.5-1 1.8-.4v.6l1.8-1.4h-1l-1.6-1.8c0-.6 0-1.7.2-2.2.7-1.2 2-1.5 3.2-2l1.8.3q.7.3.9 1 .4.8.3 1.7 4.2-3 8.7-5.9 0-.8.3-1.4l1.4.5 1.8-1q-.3-.9-.3-2.4 0-1 .6-1.6c.3-.4 1.2-.4 1.7-.3l.6 1.7.2 1q5.4-2.9 11-5.2l.5-2.3c.1-.4 1.2-.7 1.5-.5l1.4 1.5q6.8-2.6 14-4.4l.5-.1 3-.7.3-.2v.2l.5-.2q6.3-1.4 12.8-2l.2-.1.4.1q15.6-1.2 30.8 2.5h.3q.4-.9 1.6-1c2.7 0 5.2 1.7 6 3.3a104 104 0 0 1 14.8 6.2q2.5 1.3 4.9 2.8l1.5.9 2.6 1.6q10.3 6.8 18.4 15.8l2.3 2.6-.5-.8-.5-2.1-.1-.4c0-.2 1-.7 1.6-.3.9.7 0 1.6 1 2.4.5.4.3 1.8-.3 2q-.6 0-1-.5a85 85 0 0 1 11 16.3l2.8 6 .5 1.3 1 2.6v.4l1 2.7q3 9 3.7 19l.2 2.6q.2 3.3 0 6.6v.5l.7-.5c1 0 1.6 1.6.9 2.3q-.7.3-1.6-.3v.1a57 57 0 0 1-5.9 21.4q-2.7 5.8-6.6 11l-.1.2a67 67 0 0 1-9 10 74 74 0 0 1-17.8 12.2h-.2l-.2.2a72 72 0 0 1-23 6.7l-3 .3a57 57 0 0 1-14.6-1.2l-.8-.3a48 48 0 0 1-24-14.1l-1.4-1.4a57 57 0 0 1-6.2-8.5l-.3-.4-.4-.8a48 48 0 0 1-2.7-5.8q-2.4 0-4-1.4l-5-4.9a5 5 0 0 1-1.4-2l-1-2.7q-1-.3-1.4-.6-.4-.6-.2-1.2l2.4.5c.3-1.2.9-1.3 2-1.5.5 0 1.7-.6 2.3-.4.9.2 2.4.5 3 1l.5.3q-.4-2-.4-4.1a47 47 0 0 1 2-13.5v-.1l1-2.7-.7-.3-1.1-.9-.1-.7c0-.2-.6-.3-.8-.3h-.7v-.7c.3-.5 1.1.2 1.9-.7l1-1.4q.6-.4 1.4-.6l2-1a41 41 0 0 1 7-9.4l-.6-.3c.1-1.2 1.4-1.7 2.7-1.7l2.7-2.2q1.2-1 2.6-1.8l2-1.1q3-1.5 6.1-2.5l.6-.2a34 34 0 0 1 16.5-.6l1.9.5 1.6.4-.7-1.4c.1-.3.8-.7 1-.7l1.6.3.3.8c.2.4 1.7-.1 2.3 1.2q.2.5-.1 1.2l5.2 2.5 1.2.7a19 19 0 0 1 7.2 6.3l.5.8 1.5 2.7.3.9q2.6 6 .8 12.3l-.3 1.3-1.2 4-.4 1.2-.6 1.5a50 50 0 0 1-3.3 6.7v.1l-.5.6q.7.9 1 1.8 1.2 1.4 2 3.1a6 6 0 0 1-1.2 2.5l-1.4 1.5-1.3 1-1.3.5c-1.9.9-3.3 1.1-4.5-.4l-1.6-2-.5-.7-1.8.7-1 .4-1.2.2-2.6.3q-3.7 0-7-1.5a13 13 0 0 1-7.4-10.8v-.5a11 11 0 0 1-.3-3.6l.3-1.3v-.3a11 11 0 0 1 4.3-5.6 10 10 0 0 1 3.7-1.6 7 7 0 0 1 4.6.5q2 1 3.2 3.9.6-.4 1.3-.5c.8-.5 1.8-.6 2 0l-.6 1-.4.2.3.4 1.3.2q-.4-1.5-.6-3.1l-.4-2.5q0-1.4-.3-2.6 0-1-.3-2-.4-1-1.6-1.8-1.2-1-2.5-1.6l-.7-.4-.4-.2a7 7 0 0 0-3-.8h-1.3q-2.7.1-5.4 1.3h-.1l-.6.3q-2.6 1.1-4.6 2.4l-2.8 2.1-.6.5-2 2.2q0 .3-.3.5-1.7 2-2.6 4.3v.3l-.4 1.3q-.4.7-.6 1.6v2.4l.2 3.3v.5a38 38 0 0 0 1.3 6.6l.6 1.6c0-.2.5-.8 1.2-.6.3 0 .3.7 0 .8q-.4.5-1 .1h-.2l.6 1.6.3.7.2.4.5.8.7 1.4 1.2 1.5.3.5 1.2 1.2 1.6 1.4 1.2.6q1.5.9 3.1 1.5l.3.2 1.6.7h.1a27 27 0 0 0 9.4 1.1h2.8l3-.7a30 30 0 0 0 5.2-1.5l1-.5 4.4-2v-.1l2.6-1.7.2-.1 3.3-2.6.1-.1.3-.3.3-.3 2-1.8.6-.6 1.9-2.3 1.5-2v-.1l.2-.2.8-1.1.1-.2 1.4-2.3.6-1.1q2.3-4.7 3-9.7v-.3l.1-.5v-.7q.4-3.5 0-6.8l-1.8.3-.1-.7c-.2-1 .8-1.4 1.5-2.1a34 34 0 0 0-5-13.4l-.9-1.4-.2-.3-2.5-2.9v.8q-3.4-.4-6.9-1.1c-.3 0 0-1.2.3-1.3q.6-.4 1.4-.4l4 1.2.7.3q-1.4-2-3-3.7-2.5-2.3-5.5-4l-1.7-1.2-6-3h-.3l-.4-.1-3.4-1.2-2.2-.7-.6-.1a51 51 0 0 0-25.7.2l-4.2 1.2-2.7 1-1.9.8-.8.3a60 60 0 0 0-24.5 20.5l-.5.6a52 52 0 0 0-7.1 15.9 59 59 0 0 0-1 25.7l.5 2q.5 2.6 1.2 5l.5 1.4 1.2-.2.3-.7h.6l-.3 1.1q.6.3.5 1v1.2q0 .8-.6 1.4l-.2.2.7 2a76 76 0 0 0 9 15.7l3.5 4q.3-.6.2-1.2l-.6-3c-.1-.3.5-1.3.6-1.6 1-.2 1.7.6 1.5 1.6-.3 2.4 2.4 2.6 2 5.4q-.4.8-1.3 1.4l.4.5q.9-.5 1.6 0v.7l-1.1-.2q.7 1 1.6 1.8l.8.8.6.7 4.7 4 1.3 1A78 78 0 0 0 503 590h.2l3.9 1 4.1.4 2.2.3q5.1.4 10.2 0a91 91 0 0 0 28.3-4.4q.5 0 1.1-.3l.6-.2 2-.6a105 105 0 0 0 41.8-27.6l1.5-1.6a100 100 0 0 0 20.8-35.5l1-3 .2-1 .5-2q.8-3.6 1.3-7.1c-1-1.4-.7-4.2.3-4.6h.2l.4-4q-1.5 1.4-2.5 1.3c-1.3-.2-2.7-3.4-1.9-5.1q1.2-2 3.3-1.2l1.3.5a119 119 0 0 0-2.7-28h-.1v.3q0 .6-.5.9h-1v-1.1l-1.3-.4q-.7 0-.7-.6c-.1-1 .9-1 2-.9q.2-.7.8-1l.2.1-.7-2.6-2-1.5c-.8-.5-.8-1.8-.6-2.4q.3-.9 1.2-1.3a145 145 0 0 0-6.2-16.9l-.2-.4a155 155 0 0 0-28.1-42.3 117 117 0 0 0-20.4-17.5l-1.4.6.7 2.4c.1.3-.2 1-.5 1.2s-.9.3-1.3.3l-1.3.1c-.3 0-.8-.7-.8-1l.1-2.6-2-.5c-.5 0-1-.6-1.1-1s.6-2.4 1.2-2.6q1-.2 1.6.2a113 113 0 0 0-43.1-15.4l-2.3 3.2q-.2.4-.4.4l-.5-.5 1.7-3.2a154 154 0 0 0-56.9 3.3l-2.1 2q-.8-.2-1.2-1.2a187 187 0 0 0-38.3 14.3 212 212 0 0 0-64 47.8q-2 2.2-3.7 4.5l-1.1 1.3v.9l-1.1.8-.4.2a179 179 0 0 0-22.6 35.1l.8-.2q1.5 0 1.6 1.4v2.7q-.5.3-1.1-.1-1.4-.4-2.4-1.3a166 166 0 0 0-15.4 65.1 177 177 0 0 0 12.5 70.7q.1-.5.7-.6-.1.7-.5 1l2.9 7.1q1 .1 1.6 1.6a8 8 0 0 1 .3 2.7 210 210 0 0 0 28 44.8l.8 1q14.8 18.5 32.2 35.1l-.5-.9c.1-.7.5-2 1-2.5 1-1.1 2.6-1.1 4.1-1.3l2 .9c.6.2.6.8.8 1.3q.6 2.8-2 4c-1.3.7-2 .9-3.4.5a367 367 0 0 0 27.5 23.2l1-1.8q.2-.5.6-.7l.9.1-1.2 3.4a320 320 0 0 0 43.3 27.5l2.3 1.2c.6-.9 1.5-1.8 2.5-1.5l2.4.8c.4.1 1.3.4 1.4.9l.4 1.6.2 1.6q23.7 11.4 48.7 17.8 29.7 7.7 60.5 6.7 14-.4 27.8-2.2a288 288 0 0 0 45.6-9.4l-.1-1.4c0-.3.7-.3.8 0l.2.6-.6.2.1.4a286 286 0 0 0 44.8-17.3l8-4-.3-.7h.8l.3.2a259 259 0 0 0 35.3-22.2q9-7.1 17.4-14.5-.8-1.6-1.8-2.7c-1.2-1.4-3-1-2.6-3q.2-1.3 1.6-2c3-1.1 3.3-3 5.6-1.8a9 9 0 0 1 3.5 3.2l.2.5a491 491 0 0 0 87.4-102l.4-.6h-.1q11.1-23.6 18.3-48.6l1.4-12q-1.3-.4-2-1.7-1.8 0-3.4-1.1l.7-2.4q.5-.7 1.1-.8-.7-1-.7-1.7l.2-3c1.2-1.2 2.8-2.3 4.3-2.2l.7.1q.6-10 .6-20a361 361 0 0 0-361-361.1Z'/%3E%3Cpath d='m702 801.3-1.8.7q-.2.4-.5.4l-.4-.1-3.8 1.5c-.1 1.7-1.5 1.4-3.5 2.9q-.7.4-1.4 0-.8-.2-.8-.8-9.9 3.8-20 6.8l.5.5c.4.4 1.8-.8 3 .3.4.4.5 1.6 0 2q-1.2.2-2.5.1l-1.9-.2c-.5 0-1.3-.8-1.7-1.3l.3-.7a304 304 0 0 1-111 12q.5.8 0 1.7c-1 2.2-.2 3.3-2 3.8q-1.9.6-3.6 0c-1.3-.3-3-1-3.6-2.3-.3-1.1.4-2 .4-3.5v-.3a276 276 0 0 1-57.7-12.5q.8.5.4 1.4c-.3.5-1.7.7-2.5.7-1.2 0-1.7-1.4-1.6-2.2q.8-.6 1.3-.6l-9.4-3.4-8.3-3.6q.7.4.7 1.4a6 6 0 0 1-2 3.8q-.7 1.1-2.1 1.3-.7-.1-1.5-.7l-1-.6q-1.5-.4-1.3-2 .4-.7 1-.8 1.5-1.1 1.9-2.9v-1q.3 0 .5-.2a372 372 0 0 1-44.4-24h-.2l-.1-.2a345 345 0 0 1-85.7-75 7 7 0 0 1-.9 3.8l-.4.4-2.4 3 .5-2c1.7-.7 2.2-3.2 1.8-3.5l-1-.2c-.2-.7.1-1.8.7-2.3h1q-5-5.8-9.6-11.7-10-13.5-18.4-27.7c-.3 1-1 2.2-2.3 2.6q0 .4-.3.5l-.5-.2q-1.1-.4-.9-1.6c.3-1 1.8-2.5 3.3-2.4-15.2-26-26-54-30.7-83.2a200 200 0 0 1 30.2-140.4 247 247 0 0 1 129.6-95.5 174 174 0 0 1 99.4-2q7.4 2.2 14.4 5.2a145 145 0 0 1 66.8 57.2q2.3 3.6 4.3 7.3 1 .4 1.6 1.2l2 2.7q-.5.6-.5 1.4l.5.8c13 24.7 19.6 52.4 18.7 80.3l-.1 6.6-.7 3.8a111 111 0 0 1-1.9 9.3v.3q-1.2 4.5-2.7 8.7c-5.2 15-13.6 28.6-24.3 40.3q-1 1.4-2.3 2.7-4 4.1-8.3 7.9l-3.4 2.7a123 123 0 0 1-22 14q.2 1.4-.4 2-1 .3-2.5-.6-5.8 2.8-11.9 4.8.9 1 1.2 2c.3 2.3 3 1.7 2.2 4.1h-2q-1.3-2.1-3.1-3-1 .2-1.7 0c-.4 0-1-1-.9-1.3l.1-.3-1.8.6a111 111 0 0 1-13.4 2.8c-1.2 1.8-3 3.8-4.4 3.7q-1-1.5-1.3-3-6.7.7-13.5.5-6.6.4-13-.4a78 78 0 0 1-22.2-6 90 90 0 0 1-24.7-16.3l-1-.7-3.6-3.7-2.4-2.6a94 94 0 0 1-13-18.8l-.5-.2-.3.7-.6-.2-.5-.7c0-.2.3-.7.6-.6l1 .3a87 87 0 0 1-8.4-25.4v-.2q-.6-4.5-.7-9a64 64 0 0 1 11.1-37.6l.4-.5a73 73 0 0 1 11.2-12.7v-.4h.5l.8-1a54 54 0 0 1 24.5-12.9l2.3-.5 1.8-.3 5.4-.9h1a67 67 0 0 1 23.4 2.2l1.2.3 1.2.3a62 62 0 0 1 16.6 8.7q5.5 4.2 9.5 9.9.3-1.2 1-2.5l3.2-1.2c1.6-.7 6.7 2.4 5.8 7.7-.1.8-1.2 1.6-1.7 2.2-1.4 1.6-2.6 1-4.7.2l.3.5a42 42 0 0 1 3 9.4l.3 1.2.2 1.2q.5 3 .7 5.8 0 2.3-.3 4.6l-.1 1.1v.7A39 39 0 0 1 548 521l-.2.5-2 3.2-1.4 1.7-.5.6q-.9 1.3-2 2.5-1.6 1.8-3.4 3.2-1.3 1.3-2.6 2.2l-.7.5-2.6 1.7-.2.1-.4.3-.9.5-2.7 1.5.2.5-.6 1.2q-.4.6-1 1-.8.8-2.1.9h.3l2.4 2c.9.7.6 3 .6 4.1-.1 1.7-1.2 3-2.2 4q-2.3 2.4-5.5 1.4c-3.5-1-3.6-5.4-2-8.8 1-2.1 2.9-2.9 4.5-3l-.8-.7-1 .2-1.3.4-3.3.7h-.8l-2.2.2h-4.2l-2.6-.3a34 34 0 0 1-7.5-2l-.7-.4-.8-.4-1.1-.6-1-.5h-.1l-.8-.5q-3.2-2.2-5.7-5.4l-.4-.6-.5-.7q-1-1.7-1.8-3.7l-.2-.6q-.6-1.3-1-2.7l-.5-3q-.5-2-.7-4l-.1-2.5v-5.4q.2-1.5.9-2.9a19 19 0 0 1 4.6-7.3l1-1 .6-.6 1.4-1.1 2.4-1.8a35 35 0 0 1 7.7-3.4q3-1 5.8-.8h.5q.5 0 1.1.3l1 .2 1.8.9q2.2 1 4.3 2.9 1 .9 1.6 2.2l.2 1 .2.7v.5l.3 3.5v.4l.3 1.3q.4 2.3 1 4.4l.3 1v.2l.5 1.8-.2.7q-.3.7-1.2.7h-.3q-.6 0-1.3-.4-2.5-1.1-5.2-1.7l-.4-.2-.2-.9-.1-.4-.2-.6c-1-3.5-3.3-4.5-5.7-3.8l-.3.1-.4.1h-.2l-1.5 1a8 8 0 0 0-2.8 6.2l.2 2q.3 1.4.8 2.6l.5 1.4.3.8c2.1 3.3 5.8 4.6 9.6 4.2l1-.1q2-.3 4-1.1l2-1.2q2.3-1.4 4-3.3l.7-1q.4-.4.6-1l1.2-2 1.8-4.6v-.2l.5-1.1a41 41 0 0 0 1.6-6.1q.5-3 .2-5.9-.1-1.3-.6-2.6l-.2-.4-.7-1.6q-.8-1.3-1.9-2.4l-1.2-1.3-.6-.5q-5.2-4.4-12.3-6.3l-2.2-.5q-1.5-.4-3.2-.5l-2.2-.2q-3.8-.2-7.3.3h-.3l-2 .7q-4.2 1.4-7.9 3.6l-.7.4a31 31 0 0 0-7.5 6.9q-1.2 1.6-2.3 3.5.5.2.7.7.5.8-.2 1.4l.3.8-1.3 1.5-1.5.5-.6.1-.1.3-1 2.8-.4 1.2 2.5 1.9-.2.6-.7-.1-1.9-1-.4 1.7-.3 1.8a43 43 0 0 0 0 11.9q0 1 .4 2.1a45 45 0 0 0 6.8 17l.2.4.3.3.5.8 1.7 2a37 37 0 0 0 9 7.5q1.3 1 2.8 1.8l2 .7.8.3.7.2 2.7 1 .7.3 2.1.6q3.4.9 6.7 1.1l2 .2h6.7l1-.1h.4l.7-.1 1.6-.3 2.9-.5 1.5-.3q5.7-1.4 11-3.8l-.6-1.3q-.4-1.2.5-2c.5-.4 1 0 1.4 0l1.3-.3h.2v-.7l-.5-1.3-1.1-1.8c-.4-.5-1.4-.9-1.5-1.6-.2-1.8 1.2-2.9 2.8-3l1.6-.4c1-.2 2.2-1 3.3-.8 2 .6 3.8 3.7 4.4 6.2q4.9-3.5 8.8-8l1-1.2 1.1-1.3q1.6-1.8 2.8-3.7l2-3.1a51 51 0 0 0 7-23.4v-.9a63 63 0 0 0-3.7-26.2 68 68 0 0 0-7.2-14.8 71 71 0 0 0-8.2-10.7q-1.2-1.3-2.5-2.4a78 78 0 0 0-10.2-8.8l-4.4-3.1-1.3-.9q-3-1.7-6.2-3.1a81 81 0 0 0-22.2-7.4 86 86 0 0 0-28.9-.5l-4.2 1-3 .6-.5.1-3 .7a115 115 0 0 0-34.3 16l-5 4 .4.7q-.1.4-.5.4-.3 0-.7-.6a90 90 0 0 0-14.2 14.1l-1.2 1.6-2.6 3.6q-1.3 2-2.3 4 0 .7-.6 1v.1q-3.1 5-5.5 10.4 1.2.2 2.8 1.2c1.1.6 1.8 2 2.1 3.3l-1.3 2.4c-1.3 1.6-4.7 1.5-6.2.4l-.4-.4a111 111 0 0 0-6.9 37.9v5c.4 20.4 5.4 41.3 14.3 60.6q0-.4.3-.5l1-.6.7-.1c.6.1.5 1.1 1.2 1.2.8 0 .7-1 1-1.3.6-.3 1.7.2 2.3.7v.5l.7-.5.3-.1q.3 0 .3.3l-.3.3-1.9 1.6c-.1.2-.5-.2-.5-.3l.1-.4-.6.5-.6-.4-.6.3q-.3.1-.6-.2l-.6.4c-.8-.2-2.1-1-2.2-1.4q2.6 5.3 5.4 10.5.8-.4 1.6-.2a3 3 0 0 1 2.3 1.5q1.3 1.7 2.3 3.9l-2.7.6-.4-.4 1.5 2.6 1.2 1.8a146 146 0 0 0 40.4 41.7q11.8 8.7 24.3 13.6l2.6 1c30 10.9 61.8 6.7 92-5.3l6.9-2.9a272 272 0 0 0 48.9-28.4 312 312 0 0 0 32.8-25l6-5.1q25.7-23.9 39.7-52l3.4-7.7-.6.3c-.2 0-.8-.8-.4-1.5q.3-.5 1-.4l.7.2q6.8-16.4 9.8-34.6.7-4.4 1.1-8.8 1.8-17.4.2-36.6v.4q-1 .2-1.3 1c-.5 1-2 1.3-3 .6q-1.4.6-2.4-.4-1.7-1-2.3-2.6l-2-5.9-.4-1.3.4-2.4v-.7q-.7.8-1.8 1.4l-2.2-.5c-1.2-.3-2.8-3.8-.4-6.3.3-.4 1.2-.4 1.7-.6q1-.2 1.7.4l1.1 1.5.3 1.3.1 1.2.7.5c.1.1.7-.4.9-.6 4 .3 5.1 2.3 6.3 5l1.7-1q-.8-6.6-2-13.7-.5-.2-.6-.7l.3-.4-1.1-6.8q-3-19.9-9.2-38.7l-1.5-1.5-1.7-1.8-.3-1.3q.2-.7 1.6-1.3a255 255 0 0 0-124.9-140 218 218 0 0 0-90-22.6l.3.6c0 .3-.6.7-.8.5q-.8-.6-1.4-.5c-.6.2-1.3.5-1.8 0l-.4-.8a322 322 0 0 0-20.6 0l-.7-.1c-25 .7-50.2 4.1-74.6 9.6q.6.8.4 1.8l-.3 2.5q-.9-.1-1.3.8-.7-1.1-.7-2.5-.1-1.1.2-1.9l.4-.5c-30.9 7-60.4 17-86 28.4q-11.3 5-21.5 11 .6.4 1.4 1.6l-.4 3c-.6.6-1.7 1.6-2.5 1.8-1.7.3-3.1-.6-4.6-1.5l-.6-.8q-7.4 4.5-14.3 9.8l-.1 1-1 .8q-.6.1-1-.3a266 266 0 0 0-64.8 74.2h.4l1.8-.2q.3.1.2.4l-.4.2-1.9.5h-.6q-9.2 15-17.3 31.5a734 734 0 0 0-17.8 36.2l1-.1q.5 1.1.3 2.7c0 1.2-1.5 2.7-2.4 2.1l-.7-.7-2.1 5.1q-6.8 34-6.9 70A361 361 0 0 0 776.4 758l-9 7.1a331 331 0 0 1-65.4 36.4Z'/%3E%3C/svg%3E");

  /* The eye, used as the list bullet. Inlined for the same file:// reason.
     Its viewBox is squared on the eyeball centre, so rotating the element
     swings the pupil around and the eye appears to look in that direction. */
  --eye: url("data:image/svg+xml,%3Csvg id='beckon-eye' role='img' aria-label='Beckon eye' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='947.302 527.761 25.600 25.600'%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M954.2,551.7s0,0,0,0c1.1.6,2.2,1,3.4,1.2,2.4.5,4.8.2,7-.6,3.9-1.5,6.9-4.9,7.8-9.3,1.3-6.8-3.1-13.4-9.9-14.8-3.3-.6-6.6,0-9.4,1.9-2.8,1.9-4.7,4.7-5.3,8-.6,3.3,0,6.6,1.9,9.4,1.2,1.7,2.7,3.1,4.5,4.1ZM949.9,538.6c.5-2.7,2.1-5.1,4.4-6.6,2.3-1.6,5.1-2.1,7.8-1.6,1,.2,2,.5,2.8,1,4,2.1,6.3,6.6,5.4,11.2-1,4.9-5.3,8.4-10.1,8.4-.7,0-1.4,0-2.1-.2-2-.4-3.9-1.4-5.3-2.8-.5-.5-.9-1-1.3-1.6-1.5-2.3-2.1-5.1-1.6-7.8Z'/%3E%3Cpath class='st0' d='M957.5,542.6c2,.4,4-.9,4.4-2.9.4-2-.9-4-2.9-4.4-.9-.2-1.8,0-2.5.4-.8.4-1.4,1.2-1.7,2.1,0,.1-.1.3-.1.4-.4,2,.9,4,2.9,4.4Z'/%3E%3C/svg%3E");
  --eyes-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='741.93 341.24 420.40 327.42'%3E%3Cpath fill='%23fff' d='M815.37,361.55c-1.05-.06-2.12-.09-3.16-.09-3.77,0-7.53.38-11.16,1.12-12.87,2.7-23.94,10.31-31.16,21.43-6.35,9.78-8.97,21.37-7.53,33.03l.8,3.84c2.7,12.87,10.31,23.94,21.43,31.16l.11.07c2.61,1.75,5.38,3.21,8.49,4.44,5.89,2.34,11.96,3.53,18.04,3.53,3.47,0,6.98-.39,10.43-1.17l.18-.04.18-.03c2.89-.51,5.78-1.43,9.37-2.98,21.35-9.2,33.3-32.57,28.42-55.54-4.55-21.02-22.81-36.96-44.42-38.79ZM802.64,426.91l-.09-.22c-11.07,2.45-21.82-4.53-24.27-15.6-.06-.75-.22-1.71-.29-2.46-.45-5.23,1.01-10.24,4.2-14.2,2.86-3.55,6.83-6.3,11.78-7.4,11.07-2.45,21.82,4.53,24.27,15.6,2.45,11.07-4.53,21.82-15.6,24.27Z'/%3E%3Cpath fill='%23fff' d='M1144.01,423.47c-2.55-9.92-8.72-18.27-17.39-23.51-5.88-3.55-12.57-5.43-19.34-5.43-3.11,0-6.23.4-9.27,1.17l-.1.02c-9.86,2.4-18.17,8.5-23.4,17.19-5.25,8.71-6.76,18.94-4.26,28.81,4.12,16.33,18.3,27.89,35.3,28.77.65.04,1.32.06,1.98.06,2.96,0,5.89-.37,8.71-1.09,9.92-2.55,18.27-8.72,23.51-17.39,5.25-8.69,6.76-18.85,4.25-28.61ZM1130.78,445.23c-2.08,2.96-5.19,5.33-9.17,6.27-8.93,2.04-17.65-3.23-19.91-12.06-2.04-8.93,3.23-17.65,12.06-19.91l-.22.09c8.93-2.04,17.65,3.23,19.91,12.06.28.65.03,1.28.31,1.93.51,4.17-.57,8.25-3,11.61Z'/%3E%3C/svg%3E");
  --eyes-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='741.93 341.24 420.40 327.42'%3E%3Cpath fill='%23fff' d='M1068.13,490.29s.05.03.08.05c-.02-.19-.03-.39-.05-.58l-.03.53Z'/%3E%3Cpath fill='%23fff' d='M990.7,666.88c.49-3.05.55-5.91-.02-9.02-2.14-10.95-7.41-19-15.24-25.17-12.59-10.06-31.8-15.71-55.72-22.7-66.94-19.41-76.66-70.7-102.07-112.91,4.17-.51,8.12-.92,12.1-1.86,12.57-2.58,23.7-7.89,33.24-15.1,2.29,10.11,6.02,21.15,11.83,32.84,23.34,46.97,44.88,52.65,100.8,68.04,18.49,5.19,35.71,10.41,49.34,26.48,24.18-29.52,35.7-58.48,41.26-79.71,3.37-13.37,2.94-26.83,1.99-37.42,13.57,9.33,30.38,13.67,47.46,11.46-2.45,3.89-4.47,7.6-5.36,10.31-8.29,26.28-15.33,68.02-51.28,123.52-4.41,6.54-8.93,13.4-14.21,20.32.29,4.26.05,8.5-.72,12.7l-53.4-1.76Z'/%3E%3Cpath fill='%23fff' d='M796.58,342.81c-18.16,3.96-33.52,14.44-43.54,30.12-10.11,15.45-13.4,34.16-9.54,52.11,3.96,18.16,14.44,33.52,30.12,43.53,9.72,6.39,20.56,9.98,31.76,10.83l.19.44.22-.09c6.66.48,13.47.13,20.04-1.41,13.22-2.86,24.84-9.42,33.85-18.46,16.3-16.06,24.35-39.91,19.13-63.99-8.07-37.29-44.93-61.15-82.23-53.08ZM834.54,463.22c-3.48,1.5-7.06,2.78-11.13,3.51-11.29,2.54-22.59,1.48-33.18-2.73-3.43-1.36-6.73-3.04-10-5.24-12.9-8.38-21.73-21.08-24.91-36.23l-.12.31c-3.08-14.93-.4-30.28,7.97-43.18,8.38-12.9,21.09-21.73,36.23-24.9,5.69-1.16,11.23-1.49,16.52-1.18,24.62,2.04,46.22,19.82,51.68,45.08,5.78,27.19-8.48,53.98-33.07,64.57Z'/%3E%3Cpath fill='%23fff' d='M1160.81,419.13c-3.64-14.43-12.5-26.61-25.34-34.24-8.01-4.81-16.88-7.43-26.09-7.85-5.29-.3-10.73.24-16.02,1.74-29.83,7.44-47.78,37.62-40.44,67.23,2.7,10.45,8.13,19.46,15.27,26.45,13.28,12.86,32.9,18.85,51.96,13.99,2.36-.5,4.54-1.44,6.81-2.16,11.5-4.44,20.98-12.4,27.43-23.18,7.63-12.84,9.75-27.68,6.42-41.99ZM1146.61,456.22c-6.33,10.47-16.52,17.96-28.37,21-4.42,1.13-8.9,1.51-13.13,1.27-19.79-1.02-37.49-14.55-42.61-34.8-6.24-24.66,8.77-49.71,33.53-55.74,11.85-3.04,24.27-1.17,34.74,5.16,10.47,6.33,17.96,16.52,21,28.37,3.04,11.85,1.17,24.27-5.16,34.74Z'/%3E%3C/svg%3E");
  --ico-no-algorithm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 12h11'/%3E%3Ccircle cx='19' cy='12' r='2.4' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
  --ico-no-strangers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5V5.5A1.5 1.5 0 0 1 5.5 4h3M15.5 4h3A1.5 1.5 0 0 1 20 5.5v3M20 15.5v3a1.5 1.5 0 0 1-1.5 1.5h-3M8.5 20h-3A1.5 1.5 0 0 1 4 18.5v-3'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='1' fill='%23fff' stroke='none'/%3E%3C/svg%3E");
  --ico-no-group-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.5a7.5 6.5 0 0 1-10.9 5.8L4 19.5l1.4-4A6.5 6.5 0 0 1 4.6 8'/%3E%3Cpath d='M7.5 5.6A8.6 8.6 0 0 1 12 4.5c4.4 0 8 3.1 8 7'/%3E%3Cpath d='M3.5 3.5l17 17'/%3E%3C/svg%3E");
  --ico-no-pressure: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.8 12 5.8c1.5 0 2.9.4 4.1 1M21.5 12s-1.3 2.3-3.6 4'/%3E%3Cpath d='M14.5 14.4a3.4 3.4 0 0 1-4.8-4.8'/%3E%3Cpath d='M18 18.6A9.9 9.9 0 0 1 12 20.4C6 20.4 2.5 12 2.5 12'/%3E%3Cpath d='M3.5 3.5l17 17'/%3E%3C/svg%3E");
  --ico-apple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.3 0.9 18.3 22.3'%3E%3Cpath fill='%23fff' d='M17.62 12.72c-.03-2.85 2.33-4.22 2.43-4.29-1.32-1.94-3.38-2.2-4.11-2.23-1.75-.18-3.42 1.03-4.31 1.03-.89 0-2.26-1.01-3.71-.98-1.91.03-3.67 1.11-4.65 2.82-1.98 3.44-.51 8.53 1.42 11.32.94 1.37 2.07 2.9 3.54 2.85 1.42-.06 1.96-.92 3.68-.92 1.71 0 2.2.92 3.71.89 1.53-.03 2.5-1.39 3.43-2.77 1.08-1.58 1.53-3.12 1.55-3.2-.03-.01-2.98-1.15-3.01-4.52z'/%3E%3Cpath fill='%23fff' d='M14.9 4.51c.79-.96 1.32-2.28 1.17-3.6-1.13.05-2.5.76-3.32 1.71-.73.85-1.37 2.2-1.2 3.49 1.26.1 2.55-.64 3.35-1.6z'/%3E%3C/svg%3E");
  --ico-android: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3.6 7.1 16.8 9.8'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M3.6 16.9a8.4 8.4 0 0 1 16.8 0Z M8.6 12.9a1.05 1.05 0 1 0 2.1 0 1.05 1.05 0 1 0-2.1 0Z M13.3 12.9a1.05 1.05 0 1 0 2.1 0 1.05 1.05 0 1 0-2.1 0Z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' d='M6.3 10 4.4 7.1M17.7 10l1.9-2.9'/%3E%3C/svg%3E");
  --btn-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='68' viewBox='-7.0 -7.0 240.0 68.0'%3E%3Cpath d='M30.1,-0.2 Q32.4,-0.1 34.2,0.5 Q35.9,1.2 37.7,1.3 Q39.6,1.3 41.9,0.9 Q44.2,0.5 46.1,0.5 Q48.0,0.5 49.7,0.9 Q51.5,1.3 53.5,1.3 Q55.5,1.3 57.9,0.3 Q60.4,-0.6 61.8,-0.2 Q63.2,0.2 65.7,-0.1 Q68.2,-0.4 70.0,-0.2 Q71.8,-0.1 73.9,0.5 Q76.0,1.0 78.0,0.3 Q79.9,-0.5 81.9,-0.3 Q83.9,-0.0 85.9,-0.0 Q88.0,-0.0 90.0,0.5 Q92.0,1.0 93.9,0.8 Q95.8,0.6 97.8,0.4 Q99.7,0.1 101.1,0.5 Q102.4,0.9 104.7,-0.1 Q106.9,-1.1 108.9,-0.7 Q110.8,-0.3 112.6,0.2 Q114.3,0.7 116.2,0.6 Q118.1,0.6 120.5,-0.2 Q122.9,-0.9 124.7,-0.6 Q126.5,-0.4 128.2,-0.1 Q130.0,0.2 132.5,0.4 Q135.0,0.6 137.1,0.4 Q139.3,0.2 141.5,0.3 Q143.6,0.5 145.3,0.1 Q146.9,-0.3 148.8,-0.0 Q150.7,0.2 153.1,0.2 Q155.5,0.3 157.4,-0.5 Q159.3,-1.3 160.9,-1.3 Q162.5,-1.2 164.7,-0.7 Q166.9,-0.2 168.9,0.1 Q170.9,0.3 172.6,0.2 Q174.2,0.1 176.6,-0.4 Q179.0,-0.9 181.4,-1.0 Q183.8,-1.2 185.4,-0.7 Q186.9,-0.2 189.0,0.2 Q191.2,0.7 193.2,0.6 Q195.2,0.5 197.0,0.2 Q198.8,-0.2 200.6,0.1 Q202.5,0.5 204.8,1.1 Q207.0,1.8 208.6,2.3 Q210.2,2.7 212.8,3.3 Q215.4,3.9 216.7,5.9 Q218.0,7.8 219.4,9.2 Q220.8,10.6 221.8,12.7 Q222.7,14.8 223.4,16.4 Q224.0,18.0 225.0,19.9 Q226.0,21.9 226.1,23.2 Q226.2,24.5 226.5,26.8 Q226.8,29.0 226.6,31.7 Q226.3,34.4 225.7,35.8 Q225.1,37.1 224.3,38.9 Q223.6,40.7 221.9,42.6 Q220.3,44.4 219.3,46.0 Q218.2,47.6 216.6,48.6 Q214.9,49.5 213.4,50.5 Q211.8,51.4 209.9,51.8 Q207.9,52.2 205.5,53.5 Q203.0,54.8 201.1,54.5 Q199.2,54.2 197.0,54.6 Q194.9,54.9 193.1,54.2 Q191.4,53.5 189.3,54.4 Q187.3,55.2 185.7,54.3 Q184.2,53.4 182.3,53.4 Q180.5,53.5 178.0,54.0 Q175.5,54.4 173.8,54.0 Q172.1,53.6 170.1,53.7 Q168.1,53.8 166.0,54.5 Q163.9,55.1 161.7,54.2 Q159.5,53.3 157.5,53.7 Q155.6,54.1 153.6,54.4 Q151.6,54.7 149.0,54.5 Q146.3,54.3 144.8,54.6 Q143.3,54.9 141.2,54.6 Q139.1,54.3 137.2,53.8 Q135.4,53.3 133.4,53.7 Q131.4,54.1 129.2,53.7 Q126.9,53.3 124.8,53.5 Q122.6,53.7 120.3,54.2 Q117.9,54.7 116.5,54.2 Q115.1,53.8 112.3,54.2 Q109.5,54.7 107.5,54.3 Q105.5,53.8 103.9,54.1 Q102.3,54.4 100.4,54.2 Q98.4,53.9 96.2,54.3 Q94.1,54.6 92.3,54.0 Q90.6,53.4 88.6,54.0 Q86.5,54.5 84.2,53.7 Q81.9,52.8 79.4,53.7 Q77.0,54.5 75.1,54.4 Q73.3,54.2 71.2,53.6 Q69.2,53.1 67.2,53.7 Q65.1,54.2 63.1,53.9 Q61.0,53.6 59.7,53.6 Q58.4,53.7 55.6,53.2 Q52.9,52.7 51.7,53.0 Q50.5,53.3 47.8,53.5 Q45.0,53.7 43.7,53.5 Q42.4,53.3 39.8,53.2 Q37.2,53.1 35.6,53.7 Q33.9,54.3 31.5,54.3 Q29.2,54.3 27.8,54.1 Q26.4,53.9 24.2,53.2 Q21.9,52.5 20.1,52.4 Q18.3,52.3 16.7,51.3 Q15.0,50.2 12.8,49.1 Q10.7,48.1 9.5,46.8 Q8.3,45.6 7.0,44.5 Q5.8,43.4 4.5,41.5 Q3.2,39.6 3.0,38.1 Q2.8,36.6 1.4,34.8 Q0.1,33.0 0.5,30.9 Q0.9,28.9 1.1,27.2 Q1.3,25.6 1.4,22.8 Q1.5,20.1 1.9,18.6 Q2.3,17.2 3.0,15.4 Q3.6,13.6 5.3,12.2 Q6.9,10.8 8.4,9.4 Q9.9,7.9 11.0,6.6 Q12.2,5.2 14.1,4.4 Q16.1,3.5 17.6,2.2 Q19.1,0.9 21.6,1.0 Q24.2,1.1 26.0,0.4 Q27.8,-0.3 30.1,-0.2 Z' fill='%2325a1d6'/%3E%3Cpath d='M26.6,2.6 Q29.4,3.0 31.4,3.0 Q33.3,2.9 34.9,3.1 Q36.6,3.3 39.1,1.9 Q41.6,0.6 43.6,1.4 Q45.5,2.2 47.0,1.8 Q48.6,1.4 50.6,0.9 Q52.6,0.4 55.0,0.7 Q57.3,1.0 59.5,1.9 Q61.8,2.9 64.0,3.0 Q66.3,3.2 69.2,3.3 Q72.0,3.4 74.2,2.8 Q76.3,2.3 77.9,2.9 Q79.4,3.4 81.3,2.2 Q83.1,0.9 85.1,1.6 Q87.0,2.2 88.5,1.5 Q89.9,0.8 92.0,1.8 Q94.0,2.8 97.0,2.8 Q100.1,2.7 101.5,1.6 Q102.8,0.6 104.1,1.6 Q105.4,2.7 108.2,2.3 Q111.1,2.0 112.5,1.4 Q113.9,0.8 115.9,0.8 Q117.8,0.8 120.5,1.1 Q123.2,1.4 125.1,1.6 Q127.0,1.7 128.9,2.3 Q130.9,2.8 133.2,1.7 Q135.6,0.7 137.8,1.9 Q140.1,3.0 141.8,2.3 Q143.5,1.6 145.7,2.2 Q147.8,2.8 148.6,2.5 Q149.3,2.3 152.3,2.4 Q155.3,2.4 157.3,2.0 Q159.3,1.6 160.9,0.8 Q162.4,0.0 164.4,0.1 Q166.3,0.2 168.3,1.4 Q170.4,2.7 171.7,1.3 Q173.1,-0.2 174.5,0.5 Q175.9,1.3 178.0,1.6 Q180.2,2.0 182.9,1.5 Q185.6,1.1 187.6,0.5 Q189.7,-0.1 191.3,-0.3 Q192.9,-0.5 195.0,0.7 Q197.1,2.0 198.4,2.0 Q199.7,1.9 203.1,1.8 Q206.4,1.7 206.9,2.3 Q207.4,2.9 210.2,3.7 Q212.9,4.4 214.4,6.0 Q215.8,7.5 217.1,10.1 Q218.4,12.6 219.7,13.1 Q220.9,13.6 221.3,15.7 Q221.6,17.7 222.7,19.6 Q223.9,21.5 223.0,23.7 Q222.1,25.8 222.0,27.5 Q221.8,29.3 222.6,31.4 Q223.3,33.6 221.9,36.5 Q220.4,39.5 219.7,41.1 Q219.0,42.7 218.6,43.9 Q218.3,45.2 216.9,46.7 Q215.5,48.3 214.3,49.7 Q213.1,51.2 210.5,52.1 Q207.8,53.1 206.4,54.3 Q205.0,55.5 202.5,55.2 Q199.9,54.9 199.4,54.4 Q198.9,54.0 196.5,55.4 Q194.2,56.8 192.1,55.4 Q189.9,54.1 188.3,54.4 Q186.6,54.8 184.2,55.8 Q181.8,56.7 179.6,55.8 Q177.3,54.9 175.0,55.1 Q172.7,55.3 170.7,55.9 Q168.8,56.5 168.0,55.5 Q167.3,54.4 164.8,55.7 Q162.4,56.9 160.8,56.1 Q159.3,55.2 156.9,55.9 Q154.5,56.6 152.5,57.2 Q150.6,57.7 149.2,57.7 Q147.9,57.7 144.6,56.1 Q141.3,54.5 140.1,55.5 Q138.9,56.4 136.4,55.8 Q133.8,55.3 132.7,56.2 Q131.6,57.2 128.3,56.0 Q125.0,54.9 124.1,55.4 Q123.3,55.9 120.3,56.8 Q117.4,57.6 115.6,56.2 Q113.9,54.7 112.0,55.2 Q110.1,55.8 108.5,56.4 Q106.8,57.0 103.8,56.4 Q100.8,55.9 100.2,55.9 Q99.5,55.9 97.4,56.6 Q95.3,57.3 93.1,56.8 Q90.9,56.4 87.7,56.9 Q84.5,57.5 82.8,56.3 Q81.0,55.1 79.3,55.5 Q77.6,55.8 75.9,55.8 Q74.3,55.8 72.5,56.2 Q70.7,56.6 68.2,55.7 Q65.6,54.8 63.5,55.1 Q61.4,55.5 59.6,55.1 Q57.7,54.6 55.7,55.3 Q53.7,56.0 50.6,56.4 Q47.5,56.7 45.9,55.9 Q44.4,55.0 42.1,54.9 Q39.8,54.8 38.5,55.6 Q37.2,56.5 34.6,55.8 Q32.0,55.2 29.9,54.4 Q27.9,53.7 26.5,54.2 Q25.2,54.7 21.7,54.2 Q18.2,53.6 16.7,54.1 Q15.2,54.5 13.1,52.7 Q11.0,50.8 10.5,50.0 Q10.0,49.3 8.5,47.5 Q7.0,45.7 4.2,44.5 Q1.4,43.4 0.8,42.3 Q0.3,41.2 -0.7,40.1 Q-1.6,39.0 -1.2,36.4 Q-0.7,33.8 -0.9,32.3 Q-1.1,30.8 -1.0,28.4 Q-1.0,25.9 -2.1,23.9 Q-3.2,21.9 -2.7,19.8 Q-2.1,17.6 0.4,15.8 Q2.9,14.0 3.6,13.3 Q4.2,12.6 5.7,10.2 Q7.2,7.8 8.5,6.2 Q9.8,4.5 12.0,4.4 Q14.3,4.4 15.4,3.3 Q16.6,2.2 19.5,1.2 Q22.4,0.1 23.1,1.1 Q23.8,2.2 26.6,2.6 Z' fill='none' stroke='%2325a1d6' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke-width='1.5' opacity='.45'/%3E%3C/svg%3E");
  --btn-hand-ghost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='68' viewBox='-7.0 -7.0 240.0 68.0'%3E%3Cpath d='M30.1,-0.2 Q32.4,-0.1 34.2,0.5 Q35.9,1.2 37.7,1.3 Q39.6,1.3 41.9,0.9 Q44.2,0.5 46.1,0.5 Q48.0,0.5 49.7,0.9 Q51.5,1.3 53.5,1.3 Q55.5,1.3 57.9,0.3 Q60.4,-0.6 61.8,-0.2 Q63.2,0.2 65.7,-0.1 Q68.2,-0.4 70.0,-0.2 Q71.8,-0.1 73.9,0.5 Q76.0,1.0 78.0,0.3 Q79.9,-0.5 81.9,-0.3 Q83.9,-0.0 85.9,-0.0 Q88.0,-0.0 90.0,0.5 Q92.0,1.0 93.9,0.8 Q95.8,0.6 97.8,0.4 Q99.7,0.1 101.1,0.5 Q102.4,0.9 104.7,-0.1 Q106.9,-1.1 108.9,-0.7 Q110.8,-0.3 112.6,0.2 Q114.3,0.7 116.2,0.6 Q118.1,0.6 120.5,-0.2 Q122.9,-0.9 124.7,-0.6 Q126.5,-0.4 128.2,-0.1 Q130.0,0.2 132.5,0.4 Q135.0,0.6 137.1,0.4 Q139.3,0.2 141.5,0.3 Q143.6,0.5 145.3,0.1 Q146.9,-0.3 148.8,-0.0 Q150.7,0.2 153.1,0.2 Q155.5,0.3 157.4,-0.5 Q159.3,-1.3 160.9,-1.3 Q162.5,-1.2 164.7,-0.7 Q166.9,-0.2 168.9,0.1 Q170.9,0.3 172.6,0.2 Q174.2,0.1 176.6,-0.4 Q179.0,-0.9 181.4,-1.0 Q183.8,-1.2 185.4,-0.7 Q186.9,-0.2 189.0,0.2 Q191.2,0.7 193.2,0.6 Q195.2,0.5 197.0,0.2 Q198.8,-0.2 200.6,0.1 Q202.5,0.5 204.8,1.1 Q207.0,1.8 208.6,2.3 Q210.2,2.7 212.8,3.3 Q215.4,3.9 216.7,5.9 Q218.0,7.8 219.4,9.2 Q220.8,10.6 221.8,12.7 Q222.7,14.8 223.4,16.4 Q224.0,18.0 225.0,19.9 Q226.0,21.9 226.1,23.2 Q226.2,24.5 226.5,26.8 Q226.8,29.0 226.6,31.7 Q226.3,34.4 225.7,35.8 Q225.1,37.1 224.3,38.9 Q223.6,40.7 221.9,42.6 Q220.3,44.4 219.3,46.0 Q218.2,47.6 216.6,48.6 Q214.9,49.5 213.4,50.5 Q211.8,51.4 209.9,51.8 Q207.9,52.2 205.5,53.5 Q203.0,54.8 201.1,54.5 Q199.2,54.2 197.0,54.6 Q194.9,54.9 193.1,54.2 Q191.4,53.5 189.3,54.4 Q187.3,55.2 185.7,54.3 Q184.2,53.4 182.3,53.4 Q180.5,53.5 178.0,54.0 Q175.5,54.4 173.8,54.0 Q172.1,53.6 170.1,53.7 Q168.1,53.8 166.0,54.5 Q163.9,55.1 161.7,54.2 Q159.5,53.3 157.5,53.7 Q155.6,54.1 153.6,54.4 Q151.6,54.7 149.0,54.5 Q146.3,54.3 144.8,54.6 Q143.3,54.9 141.2,54.6 Q139.1,54.3 137.2,53.8 Q135.4,53.3 133.4,53.7 Q131.4,54.1 129.2,53.7 Q126.9,53.3 124.8,53.5 Q122.6,53.7 120.3,54.2 Q117.9,54.7 116.5,54.2 Q115.1,53.8 112.3,54.2 Q109.5,54.7 107.5,54.3 Q105.5,53.8 103.9,54.1 Q102.3,54.4 100.4,54.2 Q98.4,53.9 96.2,54.3 Q94.1,54.6 92.3,54.0 Q90.6,53.4 88.6,54.0 Q86.5,54.5 84.2,53.7 Q81.9,52.8 79.4,53.7 Q77.0,54.5 75.1,54.4 Q73.3,54.2 71.2,53.6 Q69.2,53.1 67.2,53.7 Q65.1,54.2 63.1,53.9 Q61.0,53.6 59.7,53.6 Q58.4,53.7 55.6,53.2 Q52.9,52.7 51.7,53.0 Q50.5,53.3 47.8,53.5 Q45.0,53.7 43.7,53.5 Q42.4,53.3 39.8,53.2 Q37.2,53.1 35.6,53.7 Q33.9,54.3 31.5,54.3 Q29.2,54.3 27.8,54.1 Q26.4,53.9 24.2,53.2 Q21.9,52.5 20.1,52.4 Q18.3,52.3 16.7,51.3 Q15.0,50.2 12.8,49.1 Q10.7,48.1 9.5,46.8 Q8.3,45.6 7.0,44.5 Q5.8,43.4 4.5,41.5 Q3.2,39.6 3.0,38.1 Q2.8,36.6 1.4,34.8 Q0.1,33.0 0.5,30.9 Q0.9,28.9 1.1,27.2 Q1.3,25.6 1.4,22.8 Q1.5,20.1 1.9,18.6 Q2.3,17.2 3.0,15.4 Q3.6,13.6 5.3,12.2 Q6.9,10.8 8.4,9.4 Q9.9,7.9 11.0,6.6 Q12.2,5.2 14.1,4.4 Q16.1,3.5 17.6,2.2 Q19.1,0.9 21.6,1.0 Q24.2,1.1 26.0,0.4 Q27.8,-0.3 30.1,-0.2 Z' fill='none' stroke='%2325a1d6' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke-width='2'/%3E%3Cpath d='M26.6,2.6 Q29.4,3.0 31.4,3.0 Q33.3,2.9 34.9,3.1 Q36.6,3.3 39.1,1.9 Q41.6,0.6 43.6,1.4 Q45.5,2.2 47.0,1.8 Q48.6,1.4 50.6,0.9 Q52.6,0.4 55.0,0.7 Q57.3,1.0 59.5,1.9 Q61.8,2.9 64.0,3.0 Q66.3,3.2 69.2,3.3 Q72.0,3.4 74.2,2.8 Q76.3,2.3 77.9,2.9 Q79.4,3.4 81.3,2.2 Q83.1,0.9 85.1,1.6 Q87.0,2.2 88.5,1.5 Q89.9,0.8 92.0,1.8 Q94.0,2.8 97.0,2.8 Q100.1,2.7 101.5,1.6 Q102.8,0.6 104.1,1.6 Q105.4,2.7 108.2,2.3 Q111.1,2.0 112.5,1.4 Q113.9,0.8 115.9,0.8 Q117.8,0.8 120.5,1.1 Q123.2,1.4 125.1,1.6 Q127.0,1.7 128.9,2.3 Q130.9,2.8 133.2,1.7 Q135.6,0.7 137.8,1.9 Q140.1,3.0 141.8,2.3 Q143.5,1.6 145.7,2.2 Q147.8,2.8 148.6,2.5 Q149.3,2.3 152.3,2.4 Q155.3,2.4 157.3,2.0 Q159.3,1.6 160.9,0.8 Q162.4,0.0 164.4,0.1 Q166.3,0.2 168.3,1.4 Q170.4,2.7 171.7,1.3 Q173.1,-0.2 174.5,0.5 Q175.9,1.3 178.0,1.6 Q180.2,2.0 182.9,1.5 Q185.6,1.1 187.6,0.5 Q189.7,-0.1 191.3,-0.3 Q192.9,-0.5 195.0,0.7 Q197.1,2.0 198.4,2.0 Q199.7,1.9 203.1,1.8 Q206.4,1.7 206.9,2.3 Q207.4,2.9 210.2,3.7 Q212.9,4.4 214.4,6.0 Q215.8,7.5 217.1,10.1 Q218.4,12.6 219.7,13.1 Q220.9,13.6 221.3,15.7 Q221.6,17.7 222.7,19.6 Q223.9,21.5 223.0,23.7 Q222.1,25.8 222.0,27.5 Q221.8,29.3 222.6,31.4 Q223.3,33.6 221.9,36.5 Q220.4,39.5 219.7,41.1 Q219.0,42.7 218.6,43.9 Q218.3,45.2 216.9,46.7 Q215.5,48.3 214.3,49.7 Q213.1,51.2 210.5,52.1 Q207.8,53.1 206.4,54.3 Q205.0,55.5 202.5,55.2 Q199.9,54.9 199.4,54.4 Q198.9,54.0 196.5,55.4 Q194.2,56.8 192.1,55.4 Q189.9,54.1 188.3,54.4 Q186.6,54.8 184.2,55.8 Q181.8,56.7 179.6,55.8 Q177.3,54.9 175.0,55.1 Q172.7,55.3 170.7,55.9 Q168.8,56.5 168.0,55.5 Q167.3,54.4 164.8,55.7 Q162.4,56.9 160.8,56.1 Q159.3,55.2 156.9,55.9 Q154.5,56.6 152.5,57.2 Q150.6,57.7 149.2,57.7 Q147.9,57.7 144.6,56.1 Q141.3,54.5 140.1,55.5 Q138.9,56.4 136.4,55.8 Q133.8,55.3 132.7,56.2 Q131.6,57.2 128.3,56.0 Q125.0,54.9 124.1,55.4 Q123.3,55.9 120.3,56.8 Q117.4,57.6 115.6,56.2 Q113.9,54.7 112.0,55.2 Q110.1,55.8 108.5,56.4 Q106.8,57.0 103.8,56.4 Q100.8,55.9 100.2,55.9 Q99.5,55.9 97.4,56.6 Q95.3,57.3 93.1,56.8 Q90.9,56.4 87.7,56.9 Q84.5,57.5 82.8,56.3 Q81.0,55.1 79.3,55.5 Q77.6,55.8 75.9,55.8 Q74.3,55.8 72.5,56.2 Q70.7,56.6 68.2,55.7 Q65.6,54.8 63.5,55.1 Q61.4,55.5 59.6,55.1 Q57.7,54.6 55.7,55.3 Q53.7,56.0 50.6,56.4 Q47.5,56.7 45.9,55.9 Q44.4,55.0 42.1,54.9 Q39.8,54.8 38.5,55.6 Q37.2,56.5 34.6,55.8 Q32.0,55.2 29.9,54.4 Q27.9,53.7 26.5,54.2 Q25.2,54.7 21.7,54.2 Q18.2,53.6 16.7,54.1 Q15.2,54.5 13.1,52.7 Q11.0,50.8 10.5,50.0 Q10.0,49.3 8.5,47.5 Q7.0,45.7 4.2,44.5 Q1.4,43.4 0.8,42.3 Q0.3,41.2 -0.7,40.1 Q-1.6,39.0 -1.2,36.4 Q-0.7,33.8 -0.9,32.3 Q-1.1,30.8 -1.0,28.4 Q-1.0,25.9 -2.1,23.9 Q-3.2,21.9 -2.7,19.8 Q-2.1,17.6 0.4,15.8 Q2.9,14.0 3.6,13.3 Q4.2,12.6 5.7,10.2 Q7.2,7.8 8.5,6.2 Q9.8,4.5 12.0,4.4 Q14.3,4.4 15.4,3.3 Q16.6,2.2 19.5,1.2 Q22.4,0.1 23.1,1.1 Q23.8,2.2 26.6,2.6 Z' fill='none' stroke='%2325a1d6' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke-width='1.5' opacity='.45'/%3E%3C/svg%3E");
  --badge-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='-4 -4 42.0 42.0'%3E%3Cpath d='M34.6,18.6 Q34.7,20.6 34.2,21.7 Q33.7,22.8 32.5,24.0 Q31.2,25.2 30.2,26.3 Q29.3,27.5 28.4,28.7 Q27.5,30.0 26.3,31.0 Q25.0,32.1 23.3,32.3 Q21.6,32.5 20.1,32.8 Q18.6,33.0 17.3,33.2 Q16.0,33.4 14.2,33.6 Q12.5,33.9 11.3,33.5 Q10.1,33.1 9.2,32.3 Q8.3,31.4 6.7,30.2 Q5.1,28.9 4.2,28.2 Q3.3,27.5 2.7,25.9 Q2.1,24.3 1.3,23.0 Q0.5,21.6 0.5,19.9 Q0.4,18.2 0.3,16.8 Q0.1,15.4 0.5,14.0 Q0.8,12.6 1.3,11.4 Q1.9,10.1 2.4,8.3 Q2.9,6.5 3.8,5.3 Q4.8,4.2 6.1,3.4 Q7.4,2.6 8.5,1.6 Q9.6,0.6 11.3,0.5 Q13.0,0.3 14.5,0.2 Q15.9,0.0 17.6,-0.3 Q19.4,-0.6 20.5,0.0 Q21.6,0.7 23.4,1.3 Q25.2,2.0 26.5,2.8 Q27.7,3.5 28.7,5.0 Q29.8,6.4 31.2,7.5 Q32.6,8.5 33.0,9.6 Q33.4,10.8 33.9,12.3 Q34.3,13.8 34.5,15.2 Q34.6,16.6 34.6,18.6 Z' fill='%2325a1d6'/%3E%3Cpath d='M33.4,20.2 Q33.1,21.3 32.8,23.0 Q32.5,24.8 32.2,26.0 Q31.9,27.2 31.3,28.6 Q30.7,29.9 28.8,30.6 Q27.0,31.3 25.9,32.4 Q24.9,33.5 22.9,34.1 Q20.9,34.8 19.5,35.0 Q18.1,35.2 16.1,34.8 Q14.0,34.3 12.3,34.1 Q10.7,34.0 9.4,33.4 Q8.1,32.8 6.7,32.6 Q5.3,32.4 4.6,31.0 Q3.9,29.5 2.8,28.2 Q1.8,26.9 1.6,26.4 Q1.4,26.0 0.6,23.8 Q-0.2,21.7 0.1,20.3 Q0.3,18.9 -0.5,17.7 Q-1.3,16.5 -0.6,15.5 Q0.1,14.5 0.5,12.2 Q0.8,10.0 1.9,8.7 Q3.0,7.4 4.2,6.7 Q5.4,5.9 6.7,5.4 Q8.1,4.9 8.6,4.0 Q9.1,3.0 10.7,2.6 Q12.3,2.3 13.2,1.5 Q14.2,0.7 16.5,0.3 Q18.8,-0.2 19.5,0.4 Q20.2,1.0 21.6,2.3 Q23.0,3.6 24.1,4.2 Q25.2,4.9 26.5,6.0 Q27.7,7.2 28.6,7.6 Q29.5,8.1 31.2,9.5 Q32.8,10.8 33.0,12.5 Q33.2,14.3 33.4,16.7 Q33.7,19.1 33.4,20.2 Z' fill='none' stroke='%2325a1d6' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke-width='1.2' opacity='.45'/%3E%3C/svg%3E");
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.48;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

::selection {
  background: rgba(37, 161, 214, 0.35);
  color: #fff;
}

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

/* ---------- typography ---------- */
h1,
h2,
h3,
h4 {
  /* 1.1 suited the old sans. DM Serif has long ascenders and descenders, so a
     wrapping heading needs a little more room or the lines lock together. */
  line-height: 1.16;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}
h1 {
  font-size: clamp(1.8rem, 5vw, 3.3rem);
  letter-spacing: 0.01em;
} /* 53px cap */
h2 {
  font-size: clamp(1.9rem, 4.2vw, 2.5rem);
} /* caps at 40px */
h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: 0.015em;
}
h4 {
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

p {
  text-wrap: pretty;
}

.lede {
  font-size: clamp(1.08rem, 2.1vw, 1.32rem);
  line-height: 1.4;
  color: var(--text-soft);
}
.faint {
  color: var(--text-faint);
  font-size: 0.88rem;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-lift);
  margin-bottom: 18px;
}
/* beckon.js prepends this wrapper to every .eyebrow and rotates IT instead of
   the masked glyph, the same wrapper-rotates-a-static-mask fix as the hero and
   CTA spirals (web-and-invite.md): masking an element that is itself
   transform-animated makes Firefox re-apply the mask every frame, and this
   shape repeats up to eight times a page. Slower than the 3.3s conch on the
   closing panel, deliberately: that one is a single focal mark, while these
   repeat up to eight times on a page -- at the CTA's speed a page full of
   them reads as frantic. */
.eyebrow__spin {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  animation: turn 9s linear infinite;
}
.eyebrow__spin::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand-lift);
  -webkit-mask: var(--spiral) center / contain no-repeat;
  mask: var(--spiral) center / contain no-repeat;
}
/* The no-JS fallback: with the script absent, this pseudo-element draws the
   glyph itself and turns on its own. .has-spin below hides it the instant
   beckon.js has inserted the real wrapper above. */
.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: var(--brand-lift);
  -webkit-mask: var(--spiral) center / contain no-repeat;
  mask: var(--spiral) center / contain no-repeat;
  animation: turn 9s linear infinite;
}
.eyebrow.has-spin::before {
  display: none;
}

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.wrap--narrow {
  max-width: 760px;
}

section {
  position: relative;
}
.section {
  padding-block: var(--section-y);
}
.section--tight {
  padding-block: clamp(52px, 7vw, 84px);
}

/* One light band, so the page is not an unbroken wall of dark. The cards inside
   keep their dark surface and invert against it; only the loose text on the
   band itself needs recolouring, since everything else carries its own. */
.section--light {
  background: var(--surface-lit);
  color: var(--brand-ink);
}
.section--light .lede {
  color: #46606f;
}
.section--light h2,
.section--light h3 {
  color: var(--brand-ink);
}

/* Dark panels keep their dark surface on this band, so everything inside them
   has to keep its light text -- otherwise the rules above turn their headings
   navy-on-navy. Any new dark panel dropped on a light band belongs in this list. */
.section--light .card {
  color: var(--text);
}
.section--light .card h2,
.section--light .card h3 {
  color: var(--text);
}
.section--light .card p,
.section--light .card .lede {
  color: var(--text-soft);
}

/* The versus columns have no panel behind them any more, so on a light band
   their text sits straight on the surface and has to invert. */
.section--light .versus__col h3 {
  color: var(--brand-ink);
}
.section--light .versus__col li {
  color: #46606f;
}
.section--light .versus__col li b {
  color: var(--brand-ink);
}
.section--light .versus__col--good {
  border-left-color: rgba(10, 44, 61, 0.2);
}
.section--light .versus__col li::before {
  color: rgba(10, 44, 61, 0.45);
}
.section--light .versus__col--good li::before {
  color: var(--accent-on-light);
}
@media (max-width: 700px) {
  .section--light .versus__col--good {
    border-top-color: rgba(10, 44, 61, 0.2);
  }
}
/* One accent for everything on the light band. --brand-lift sits at 2.2:1 here
   (unreadable) and --brand-deep at 3.5:1, so this is the palette blue taken down
   far enough to clear AA against #dde1e4. Eyebrow, its conch mark and links all
   use it, so they stay in step. */
.section--light {
  --accent-on-light: #125f7b;
}
.section--light .eyebrow {
  color: var(--accent-on-light);
}
.section--light .eyebrow__spin::before {
  background: var(--accent-on-light);
}
.section--light .eyebrow::before {
  background: var(--accent-on-light);
}

.section--light .textlink {
  color: var(--accent-on-light);
  border-bottom-color: rgba(18, 95, 123, 0.45);
}
.section--light .textlink:hover {
  border-bottom-color: var(--accent-on-light);
}

.section-head {
  max-width: 660px;
  margin-bottom: clamp(38px, 6vw, 60px);
}
.section-head p {
  margin-top: 16px;
}

/* A lede sitting straight after a heading needs a gap wherever it appears, not
   just inside .section-head. In the split sections it had none at all -- the
   heading and the paragraph were touching, which is what made those blocks look
   cramped once the serif went in. */
h1 + .lede,
h2 + .lede,
h3 + .lede {
  margin-top: 18px;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* Subtle radial wash used to lift a section off the page background */
.wash {
  position: relative;
  isolation: isolate;
}
.wash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(64% 90% at 50% 0%, rgba(37, 161, 214, 0.13), transparent 68%);
  pointer-events: none;
}
.band {
  background: var(--bg-raised);
  border-block: 1px solid var(--line);
}

/* ---------- the spiral ----------
   One SVG, tinted by `background`, punched through with mask-image. Every
   spiral on the site comes from this file, so there is one thing to maintain. */
.spiral {
  display: block;
  background: currentColor;
  -webkit-mask: var(--spiral) center / contain no-repeat;
  mask: var(--spiral) center / contain no-repeat;
}

/* oversized ambient watermark bleeding off a section edge */
.wm {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.wm::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(420px, 52vw, 720px);
  aspect-ratio: 1;
  opacity: 0.04;
  background: var(--brand-lift);
  -webkit-mask: var(--spiral) center / contain no-repeat;
  mask: var(--spiral) center / contain no-repeat;
  pointer-events: none;
}
.wm--right::after {
  right: -14%;
  top: -18%;
}
.wm--left::after {
  left: -16%;
  bottom: -22%;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    transform 0.22s var(--ease),
    background-color 0.22s var(--ease),
    border-color 0.22s var(--ease),
    box-shadow 0.22s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

/* Hand-drawn shapes. The pill is an SVG background rather than a border-radius,
   so both buttons need a little more padding than a real pill would -- the drawn
   line wanders, and the label must not touch it. The shape stretches to any
   width (preserveAspectRatio="none") while the line keeps an even weight
   (vector-effect="non-scaling-stroke"), which is what lets one drawing serve
   every button on the site.

   Hover brightens rather than swapping the image: a second SVG would be a
   second drawing, and the wobble would visibly jump on hover. */
/* The drawn shape is a border-image, not a stretched background. Sliced 34px in
   from each side, the two round caps are never scaled and only the straight
   middle repeats, so the wobble keeps its rhythm whether the button is 130px in
   the nav or full-width on a phone. Stretching one drawing to every width
   smeared it -- a full-width mobile button stretched it 1.9x.

   The 34px side borders ARE the caps, so horizontal padding drops to 0 and the
   label is inset by the border instead. */
.btn--primary {
  color: #04222f;
  font-weight: 700;
  border-radius: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0 28px;
  padding: 17px 0;
  border-image-source: var(--btn-hand);
  border-image-slice: 0 34 fill;
  border-image-width: 0 28px;
  border-image-repeat: round stretch;
  transition:
    filter 0.22s var(--ease),
    transform 0.22s var(--ease);
}
.btn--primary:hover {
  filter: brightness(1.1);
}

.btn--ghost {
  color: var(--text);
  border-radius: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0 28px;
  padding: 17px 0;
  border-image-source: var(--btn-hand-ghost);
  border-image-slice: 0 34 fill;
  border-image-width: 0 28px;
  border-image-repeat: round stretch;
  transition:
    filter 0.22s var(--ease),
    transform 0.22s var(--ease);
}

/* ---------- Becky on the primary call to action ----------
   beckon.js wraps every large .btn--primary and injects two masked layers:
   the eye whites, and the blue rings and stalks. She sits BEHIND the button,
   so the stalk ends are hidden by the pill and she reads as peering over it.

   The pupils are knocked out of the artwork rather than painted, so they show
   whatever is behind them -- the page. That is why she must stay clear of the
   pill itself: overlap it and the pupils fill with brand blue.

   Placement alternates per button, so she is somewhere different on each one.
   The bottom pair is kept for buttons with clearance below; nothing uses them
   yet, because the stalks vanish behind the pill when she hangs underneath. */
.cta-becky {
  position: relative;
  display: inline-flex;
}
.cta-becky > .btn {
  position: relative;
  z-index: 2;
}

.becky {
  position: absolute;
  z-index: 1;
  width: 46px;
  height: 36px;
  pointer-events: none;
  transition: transform 0.3s var(--ease);
}
.becky > span {
  position: absolute;
  inset: 0;
  display: block;
}
.becky__white {
  background: #fff;
  -webkit-mask: var(--eyes-w) center / contain no-repeat;
  mask: var(--eyes-w) center / contain no-repeat;
}
.becky__blue {
  background: var(--brand);
  -webkit-mask: var(--eyes-b) center / contain no-repeat;
  mask: var(--eyes-b) center / contain no-repeat;
}

.becky--tl {
  left: 18px;
  top: -22px;
}
.becky--tr {
  right: 18px;
  top: -22px;
}
/* she pulls herself up for a better look */
.cta-becky:hover .becky--tl,
.cta-becky:hover .becky--tr {
  transform: translateY(-10px);
}

/* Becky's eyes rise above the button, so the row she is in reserves headroom.
   beckon.js adds .has-becky to that row; rows without her are untouched. */
.has-becky {
  padding-top: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .becky {
    transition: none;
  }
}

/* ---------- Becky peeking from behind the phones ----------
   She needs to sit BEHIND the device, and a child of .phone cannot: .phone is
   positioned, so it paints its own background in the positioned layer and a
   negative z-index child ends up in front of it either way. So beckon.js wraps
   each phone in .phone-peek and puts her in there as a sibling, underneath.

   The wrapper carries the phone's width constraints so it hugs the device
   exactly -- otherwise it would fill the column and she would be positioned
   against the wrong edges.

   beckon.js adds .is-peeking while the phone is on screen and takes it away
   once you scroll past, so she rises and then ducks back down. */
.phone-peek {
  display: block; /* it is a <span>, so this is load-bearing */
  position: relative;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}
.phone-peek--lg {
  max-width: 330px;
}
.phone-peek--sm {
  max-width: 232px;
}
.phone-peek > .phone {
  max-width: none;
  z-index: 1;
}

.becky-peek {
  position: absolute;
  z-index: 0;
  width: 54px;
  height: 42px;
  pointer-events: none;
  /* Ducking back behind the phone: quick. The rise is slower and lives on the
     .is-peeking rule below -- a transition is governed by the state being moved
     TO, so the two directions can have different durations. */
  transition: transform 0.3s var(--ease);
}
.becky-peek > span {
  position: absolute;
  inset: 0;
  display: block;
}

/* Rising into view: slow and deliberate, so you actually catch it happening. */
.is-peeking .becky-peek {
  transition: transform 1s var(--ease);
}

.becky-peek--tl {
  left: 30px;
  top: -32px;
  transform: translateY(38px);
}
.becky-peek--tr {
  right: 30px;
  top: -32px;
  transform: translateY(38px);
}
.becky-peek--bl {
  left: 30px;
  bottom: -32px;
  transform: rotate(180deg) translateY(38px);
}
.becky-peek--br {
  right: 30px;
  bottom: -32px;
  transform: rotate(180deg) translateY(38px);
}

/* Sides. The rotation matters: her eyes are at the top of the artwork, so the
   angle has to point them away from the phone, not into it. Under CSS rotation
   the local "up" axis maps to screen-left at -90deg and screen-right at +90deg,
   which is why left uses -90 and right uses +90. translateY then runs along the
   rotated axis, so the same positive value tucks her back behind the frame in
   both cases. */
.becky-peek--l {
  left: -38px;
  top: 30%;
  transform: rotate(-90deg) translateY(44px);
}
.becky-peek--r {
  right: -38px;
  top: 30%;
  transform: rotate(90deg) translateY(44px);
}

.is-peeking .becky-peek--tl,
.is-peeking .becky-peek--tr {
  transform: translateY(0);
}
.is-peeking .becky-peek--bl,
.is-peeking .becky-peek--br {
  transform: rotate(180deg) translateY(0);
}
.is-peeking .becky-peek--l {
  transform: rotate(-90deg) translateY(0);
}
.is-peeking .becky-peek--r {
  transform: rotate(90deg) translateY(0);
}

@media (max-width: 520px) {
  .phone-peek,
  .phone-peek--lg,
  .phone-peek--sm {
    max-width: 268px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .becky-peek {
    transition: none;
  }
}
.btn--ghost:hover {
  filter: brightness(1.25);
}

/* The cap slice is 34x68, so its rendered width has to stay half the button's
   height or the round end squashes. This button is shorter than the others, so
   its caps are narrower to match -- without this the nav button's ends looked
   stretched. */
.btn--sm {
  padding: 10px 0;
  font-size: 0.88rem;
  border-width: 0 20px;
  border-image-width: 0 20px;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.btn-row--center {
  justify-content: center;
}

.textlink {
  color: var(--brand-lift);
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 189, 236, 0.35);
  transition: border-color 0.2s var(--ease);
}
.textlink:hover {
  border-bottom-color: var(--brand-lift);
}

/* ---------- headings ----------
   DM Serif Display, set in italic, carries every display heading. Eyebrows,
   footer column headings and UI labels deliberately stay on the system face
   -- they are labels, not display type, and DM Serif Display at small sizes
   reads as a mistake. */
h1,
h2,
h3,
.hero h1,
.section-head h2 {
  font-family: var(--font-display);
  /* h2 value; h1 and h3 set their own below, because tracking that suits a big
     headline is too wide for a small sub-heading. */
  letter-spacing: 0.015em;
  font-style: italic;
  /* 700 was chosen for the old system sans. DM Serif Display is a high-contrast
     display serif, so the same number reads far heavier -- 400 is the equivalent
     weight by eye. Footer column headings are h3 too, so they land in this
     selector; .footer__col h3 further down overrides font-family, font-style
     and font-weight back to the system face at 700. */
  font-weight: 400;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 12, 18, 0.72);
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease);
}
/* The blur waits for .is-stuck: at scroll 0 the header sits over the
   animating hero, and a backdrop-filter there would resample it every frame. */
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(7, 12, 18, 0.9);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
}

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 80px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.brand-lockup img {
  height: 36px;
  width: auto;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav__links a {
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  transition:
    color 0.2s var(--ease),
    background-color 0.2s var(--ease);
}
.nav__links a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
/* :not(.btn) because join.html's current link is also the primary button;
   the attribute is for assistive tech only and must not restyle the pill. */
.nav__links a[aria-current="page"]:not(.btn) {
  color: var(--text);
  font-weight: 600;
}

.nav__cta {
  flex: 0 0 auto;
}

/* the CTA inside the links panel is the mobile-menu copy only */
@media (min-width: 901px) {
  .nav__links > .btn {
    display: none;
  }
}

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  align-items: center;
  justify-content: center;
}
.nav__toggle span {
  display: block;
  position: relative;
  width: 17px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: background-color 0.2s var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.25s var(--ease);
}
.nav__toggle span::before {
  top: -5.5px;
}
.nav__toggle span::after {
  top: 5.5px;
}
.nav__toggle[aria-expanded="true"] span {
  background: transparent;
}
.nav__toggle[aria-expanded="true"] span::before {
  transform: translateY(5.5px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span::after {
  transform: translateY(-5.5px) rotate(-45deg);
}

@media (max-width: 900px) {
  .nav__toggle {
    display: flex;
  }
  .nav__links,
  .nav__cta {
    display: none;
  }

  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 0;
    padding: 12px var(--pad) 22px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -18px rgba(0, 0, 0, 0.9);
  }
  .nav__links.is-open a {
    padding: 13px 4px;
    font-size: 1.02rem;
    border-radius: var(--r-sm);
  }
  .nav__links.is-open .btn {
    margin-top: 12px;
    justify-content: center;
    color: #04222f;
    background: var(--brand);
    font-weight: 700;
  }
}

/* ---------- hero ---------- */
.hero {
  padding-block: clamp(56px, 9vw, 104px) clamp(64px, 9vw, 112px);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 68px);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero__copy .eyebrow {
    justify-content: center;
  }
  .hero .btn-row {
    justify-content: center;
  }
  .hero__proof {
    justify-content: center;
  }
}

.hero h1 span {
  color: var(--brand-lift);
}
.hero__copy .lede {
  margin-top: 22px;
  max-width: 30em;
}
@media (max-width: 900px) {
  .hero__copy .lede {
    margin-inline: auto;
  }
}
.hero .btn-row {
  margin-top: 34px;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 26px;
  font-size: 0.87rem;
  color: var(--text-faint);
}
.hero__proof span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero__proof span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
  flex: 0 0 auto;
}

/* radiating signal behind the hero phone — the conch/broadcast motif */
.hero__stage {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
}
/* The mark, scaled to span the whole hero and turning slowly behind everything
   in it. It is a child of <section class="hero">, not of the phone's column, so
   its size is measured against the full module. .hero already carries
   position:relative and isolation:isolate (via .wash) plus overflow:hidden, so
   this centres on the section and is clipped to it.

   Positioning is top/left 50% pulled back by negative margins, NOT translate:
   `transform` has to stay free for the rotation. --hero-spiral-shift then slides
   the eye of the spiral left of centre so it bleeds off the left edge instead of
   showing its outer rim. --hero-spiral-size is square and must stay bigger than
   the distance from that off-centre eye to the furthest corner, or a corner goes
   bare as it turns. */
.hero__spiral {
  --hero-spiral-size: max(1280px, 156vw);
  --hero-spiral-shift: 13vw; /* how far left of centre the eye of it sits */
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: calc(var(--hero-spiral-size) / -2);
  margin-left: calc(var(--hero-spiral-size) / -2 - var(--hero-spiral-shift));
  z-index: -1;
  width: var(--hero-spiral-size);
  height: var(--hero-spiral-size);
  opacity: 0.13;
  /* Chrome and Safari mask the spiral once and rotate the texture underneath it,
     so a smooth turn costs them nothing; the @supports block below gives Firefox
     alone a stepped override, because it re-paints the mask on every composite
     (the comment on ::before explains why). */
  animation: turn 75s linear infinite;
  pointer-events: none;
}
/* @supports (-moz-appearance: none) matches only Gecko -- Blink and WebKit fail
   this query on a -moz- property -- so only Firefox gets the stepped rotation.
   75s / 750 = one composite every 100ms instead of 60 times a second, a 0.48deg
   jump too small to see on a 13%-opacity wash, and it took Firefox's GPU process
   from 49% to 15% with the hero in view (Firefox 154, 2026-09-13). */
@supports (-moz-appearance: none) {
  .hero__spiral {
    animation-timing-function: steps(750);
  }
}
/* The tint and the mask live on a child, not on the box that turns. Firefox
   re-applies a mask on every frame when the masked element is the one being
   transformed, and at this size (about 4500 device px square on a Retina
   display) that held its GPU process at ~7 cores until the hero scrolled out
   of view. A static child masked once inside the turning box costs 35% in the
   same measurement; Chrome was at 6% either way. Firefox 154, 2026-09-13. */
.hero__spiral::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--brand-deep);
  -webkit-mask: var(--spiral) center / contain no-repeat;
  mask: var(--spiral) center / contain no-repeat;
}
/* beckon.js watches .hero with an IntersectionObserver and adds this class once
   the section leaves the viewport; the rotation itself (not just the mask
   trick above) held Firefox's GPU process ~40 points higher whenever the hero
   was visible, and a hero below the fold has no reason to keep turning. */
.hero.is-offscreen .hero__spiral {
  animation-play-state: paused;
}

/* On a phone the hero is narrow and very tall (~1200px), so a square spiral has
   to be much larger than the viewport to keep its outer rim off every corner.
   The shift also shrinks: on a centred one-column layout a big sideways offset
   just drags the eye of the spiral off-screen. Placed after the rule above on
   purpose — same specificity, so it has to come later to win. */
@media (max-width: 900px) {
  .hero__spiral {
    --hero-spiral-size: max(1420px, 190vw);
    --hero-spiral-shift: 5vw;
  }
}
@keyframes turn {
  to {
    transform: rotate(360deg);
  }
}
.hero__glow {
  position: absolute;
  z-index: -2;
  width: min(620px, 110%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 161, 214, 0.3), transparent 62%);
  filter: blur(20px);
}

/* ---------- phone frame ---------- */
.phone {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  padding: 9px;
  border-radius: 46px;
  background: linear-gradient(165deg, #2b3a48, #0d151d 45%, #263442);
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(255, 255, 255, 0.07) inset;
}
.phone--lg {
  max-width: 330px;
}
.phone--sm {
  max-width: 232px;
}

.phone__screen {
  position: relative;
  /* The capture ratio belongs on the screen, not the frame. Putting it on
     .phone made the frame that shape, and the screen inside came out 9px
     narrower on each side -- a different ratio -- so object-fit: cover shaved
     about 3.6% off the sides of every screenshot. */
  aspect-ratio: 1320 / 2868; /* the App Store 6.9" capture ratio */
  border-radius: 38px;
  overflow: hidden;
  background: var(--surface);
  display: grid;
}
.phone__screen > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone::after {
  /* dynamic island */
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 29%;
  height: 21px;
  border-radius: var(--r-pill);
  background: #05090d;
  z-index: 3;
}

/* placeholder shown until a real screenshot is dropped in */
.phone__slot {
  grid-area: 1 / 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 18px;
  text-align: center;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(37, 161, 214, 0.16), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.022) 0 12px, transparent 12px 24px),
    var(--surface);
}
.phone__screen.is-empty > img {
  display: none;
}
.phone__screen.is-empty .phone__slot {
  display: flex;
}

.phone__slot .mark {
  width: 44px;
  height: 44px;
  background: var(--brand);
  -webkit-mask: var(--spiral) center / contain no-repeat;
  mask: var(--spiral) center / contain no-repeat;
  opacity: 0.85;
}
.phone__slot b {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.phone__slot code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--brand-lift);
  word-break: break-all;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(37, 161, 214, 0.1);
  border: 1px solid rgba(37, 161, 214, 0.22);
}
.phone__slot small {
  color: var(--text-faint);
  font-size: 0.7rem;
}

/* ---------- the conch, at size ----------
   Shown large in the "Why a conch" section. Used as a plain <img>, not a CSS
   mask: the artwork is ~445KB, which would bloat the stylesheet on every page,
   and <img src> has none of the file:// restrictions a mask does. Its one
   colour is baked into the SVG — change it there, not here. */
.conch {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  isolation: isolate;
}
.conch::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 82%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 161, 214, 0.2), transparent 66%);
  filter: blur(14px);
}
.conch img {
  width: min(420px, 100%);
  height: auto;
  animation: bob 7s ease-in-out infinite;
}
@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

/* ---------- cards ---------- */
.grid {
  display: grid;
  gap: 18px;
}
.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

.card {
  position: relative;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition:
    border-color 0.28s var(--ease),
    transform 0.28s var(--ease),
    background-color 0.28s var(--ease);
}
.card:hover {
  border-color: rgba(37, 161, 214, 0.45);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.card h2,
.card h3 {
  margin-bottom: 10px;
}
/* h2 and h3 otherwise share every typographic property (the display font,
   letter-spacing and weight rules above); only the bare elements' font-size
   differs, so a card heading promoted from h3 to h2 needs it pinned here to
   keep the same look. */
.card h2 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}
.card p {
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* icon-less card: a small spiral stands in for the icon */
/* Cards in a grid already stretch to equal height, but a button placed after
   copy of differing length still lands at a different level in each card. Making
   the card a column and pushing the button row down with auto margin pins them
   to a shared baseline -- so the buttons stay level even if the copy changes. */
.grid .card {
  display: flex;
  flex-direction: column;
}
.grid .card .btn-row {
  margin-top: auto;
  padding-top: 24px;
}
/* When Becky is on a card's button she needs her own clearance on top of the
   normal gap, or her eyes land on the paragraph above. .has-becky alone is not
   enough here -- the rule above is more specific and would win. */
.grid .card .btn-row.has-becky {
  padding-top: 44px;
}

/* Platform mark above the card heading on the beta chooser. Masked rather than
   dropped in as an image, so it takes its colour from CSS like every other mark
   on the site. */
.card__os {
  display: block;
  /* Each viewBox is cropped to its own artwork and each box matches that
     aspect, so the drawing sets the size rather than the empty space around it.
     The two are matched by EYE, not by height: the Apple glyph is tall and
     narrow (aspect .82), the Android robot short and wide (1.71), so equal
     heights gave the Android twice the area and it read as much the bigger
     mark. The sizes below put it at ~117% of the Apple's area, which is where
     they look equal -- a shape with gaps in it needs slightly more area than a
     solid one to carry the same weight. */
  margin-bottom: 16px;
  background: #fff;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.card__os--apple {
  width: 23px;
  height: 28px;
  -webkit-mask-image: var(--ico-apple);
  mask-image: var(--ico-apple);
}
.card__os--android {
  width: 36px;
  height: 21px;
  -webkit-mask-image: var(--ico-android);
  mask-image: var(--ico-android);
}

.card--plain::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: 16px;
  background: var(--brand);
  opacity: 0.9;
  -webkit-mask: var(--spiral) center / contain no-repeat;
  mask: var(--spiral) center / contain no-repeat;
}

/* One icon per card. Without these every card repeats the conch, which reads
   as a texture rather than four separate points. */
.card--ico-no-algorithm::before {
  -webkit-mask: var(--ico-no-algorithm) center / contain no-repeat;
  mask: var(--ico-no-algorithm) center / contain no-repeat;
}
.card--ico-no-strangers::before {
  -webkit-mask: var(--ico-no-strangers) center / contain no-repeat;
  mask: var(--ico-no-strangers) center / contain no-repeat;
}
.card--ico-no-group-chat::before {
  -webkit-mask: var(--ico-no-group-chat) center / contain no-repeat;
  mask: var(--ico-no-group-chat) center / contain no-repeat;
}
.card--ico-no-pressure::before {
  -webkit-mask: var(--ico-no-pressure) center / contain no-repeat;
  mask: var(--ico-no-pressure) center / contain no-repeat;
}

/* ---------- steps ---------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: 20px;
}
.steps--3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 820px) {
  .steps--3 {
    grid-template-columns: 1fr;
  }
}

.step {
  counter-increment: step;
  position: relative;
  padding: 30px 26px 28px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.step::before {
  content: counter(step);
  display: grid;
  place-items: center;
  /* A touch bigger than the old 34px circle: the drawn edge wanders outside the
     shape, so the box has to give it somewhere to go. */
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border-radius: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #04222f;
  background: var(--badge-hand) center / 100% 100% no-repeat;
}
.step h3 {
  margin-bottom: 9px;
}
.step p {
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* ---------- alternating feature rows ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 76px);
  align-items: center;
}
.split + .split {
  margin-top: clamp(64px, 9vw, 112px);
}
.split--flip .split__media {
  order: -1;
}
@media (max-width: 880px) {
  .split {
    grid-template-columns: 1fr;
    gap: 38px;
  }
  .split--flip .split__media {
    order: 0;
  }
  /* Stacked, the copy sits directly above the phone and Becky reaches 32px over
     its top edge, leaving only 6px of the 38px gap. This buys her room. The
     padding goes on the media column, not on .phone-peek -- she is positioned
     against that wrapper, so padding there would just move her down with it. */
  .split__media {
    padding-top: 10px;
  }
}

.checks {
  list-style: none;
  padding: 0;
  margin-top: 24px;
  display: grid;
  gap: 13px;
}
.checks li {
  position: relative;
  padding-left: 27px;
  color: var(--text-soft);
  font-size: 0.96rem;
}
.checks li b {
  color: var(--text);
  font-weight: 600;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4.8px;
  width: 14.4px;
  height: 14.4px;
  background: var(--brand);
  -webkit-mask: var(--eye) center / contain no-repeat;
  mask: var(--eye) center / contain no-repeat;
  transform: rotate(var(--eye-look, 0deg));
}

/* Each eye looks a different way. beckon.js re-rolls these at random on load;
   this seven-step cycle is the no-JS fallback and keeps lists from ever
   marching in step. */
.checks li:nth-child(7n + 1)::before {
  --eye-look: 24deg;
}
.checks li:nth-child(7n + 2)::before {
  --eye-look: 152deg;
}
.checks li:nth-child(7n + 3)::before {
  --eye-look: 291deg;
}
.checks li:nth-child(7n + 4)::before {
  --eye-look: 76deg;
}
.checks li:nth-child(7n + 5)::before {
  --eye-look: 218deg;
}
.checks li:nth-child(7n + 6)::before {
  --eye-look: 337deg;
}
.checks li:nth-child(7n + 7)::before {
  --eye-look: 119deg;
}

/* ---------- comparison ---------- */
.versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

/* No panels: two bare columns split by a single hairline. The old boxes were a
   lot of chrome for ten short lines, and on a light band the text reads better
   sitting directly on the surface. */
.versus__col {
  padding: 0;
  border: 0;
  background: none;
}
.versus__col:first-child {
  padding-right: clamp(22px, 4vw, 44px);
}
.versus__col--good {
  padding-left: clamp(22px, 4vw, 44px);
  border-left: 1px solid var(--line);
}

@media (max-width: 700px) {
  .versus {
    grid-template-columns: 1fr;
  }
  /* Stacked, the divider has to run across instead of down. */
  .versus__col:first-child {
    padding-right: 0;
    padding-bottom: 26px;
  }
  .versus__col--good {
    padding-left: 0;
    padding-top: 26px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
.versus__col h3 {
  font-size: 1.35rem;
  margin-bottom: 20px;
}
.versus__col ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}
.versus__col li {
  position: relative;
  padding-left: 24px;
  font-size: 0.94rem;
  color: var(--text-soft);
}
.versus__col li b {
  color: var(--text);
  font-weight: 600;
}
.versus__col li::before {
  content: "\2212"; /* true minus, so it matches the + in width */
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-faint);
}
.versus__col--good li::before {
  content: "+";
  color: var(--brand-lift);
}

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  gap: 12px;
}
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.25s var(--ease);
}
.faq details[open] {
  border-color: rgba(37, 161, 214, 0.4);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 22px;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--brand-lift);
  border-bottom: 2px solid var(--brand-lift);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.faq summary:hover {
  color: var(--brand-lift);
}
.faq .faq__body {
  padding: 0 22px 21px;
  color: var(--text-soft);
  font-size: 0.96rem;
}
.faq .faq__body p + p {
  margin-top: 12px;
}

/* ---------- page hero (interior pages) ---------- */
.page-hero {
  padding-block: clamp(52px, 8vw, 92px) clamp(34px, 5vw, 56px);
  border-bottom: 1px solid var(--line);
}
.page-hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
}
.page-hero p {
  margin-top: 18px;
  max-width: 56ch;
}

/* ---------- prose (legal / support) ---------- */
.prose {
  max-width: 72ch;
}
.prose h2 {
  font-size: clamp(1.32rem, 2.4vw, 1.62rem);
  margin-top: 52px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.prose h2:first-of-type {
  margin-top: 34px;
}
.prose h3 {
  margin-top: 30px;
  font-size: 1.06rem;
}
.prose p,
.prose li {
  color: var(--text-soft);
}
.prose p {
  margin-top: 15px;
}
.prose ul,
.prose ol {
  margin-top: 15px;
  padding-left: 22px;
  display: grid;
  gap: 9px;
}
.prose li::marker {
  color: var(--brand);
}
.prose strong {
  color: var(--text);
  font-weight: 600;
}
.prose a {
  color: var(--brand-lift);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.callout {
  margin-top: 26px;
  padding: 20px 22px;
  border-radius: var(--r-md);
  border: 1px solid rgba(37, 161, 214, 0.32);
  background: rgba(37, 161, 214, 0.08);
}
.callout p {
  margin-top: 0;
  color: var(--text-soft);
}
.callout p + p {
  margin-top: 12px;
}

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}
.toc a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 0.84rem;
  color: var(--text-soft);
  text-decoration: none;
  transition:
    border-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.toc a:hover {
  border-color: var(--brand);
  color: var(--text);
}

/* ---------- contact tiles ---------- */
.contact-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  transition:
    border-color 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.contact-tile:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
}
.contact-tile b {
  font-size: 1.02rem;
}
.contact-tile span {
  color: var(--text-soft);
  font-size: 0.93rem;
}
.contact-tile .val {
  color: var(--brand-lift);
  font-size: 0.93rem;
  word-break: break-word;
}

/* ---------- final CTA ---------- */
.cta-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 7vw, 76px) var(--pad);
  border-radius: var(--r-xl);
  border: 1px solid rgba(37, 161, 214, 0.3);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(37, 161, 214, 0.22), transparent 65%), var(--bg-raised);
  text-align: center;
}
/* The conch above the closing headline turns slowly. Reuses the same @keyframes
   as the hero's background spiral; faster here because it is a 54px mark rather
   than a 1400px wash, and at that size 75s would look like nothing at all.
   The rotation lives on this wrapper, not on .spiral: .spiral carries the
   mask, and turning the masked element (rather than a plain box around it)
   held Firefox's GPU process ~20 points higher whenever this panel was
   visible, the same trap the hero had. Paused off-screen the same way. */
.cta-panel .cta-spiral {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 22px;
  color: var(--brand);
  animation: turn 3.3s linear infinite;
}
.cta-panel .cta-spiral .spiral {
  width: 100%;
  height: 100%;
}
.cta-panel.is-offscreen .cta-spiral {
  animation-play-state: paused;
}

.cta-panel p {
  margin: 16px auto 0;
  max-width: 46ch;
}
.cta-panel .btn-row {
  margin-top: 30px;
}

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(46px, 6vw, 66px) 34px;
  background: var(--bg-raised);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 38px;
}
@media (max-width: 860px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}
@media (max-width: 520px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

.footer__brand img {
  height: 32px;
  width: auto;
}
.footer__brand p {
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--text-faint);
  max-width: 30ch;
}

.footer__col h3 {
  /* h3 is in the display-heading selector above, so font-family, font-style and
     font-weight are pinned here too, not only the size the old h4 rule set --
     otherwise the footer would inherit the italic serif meant for real headings. */
  font-family: var(--font);
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.footer__col ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}
.footer__col a {
  font-size: 0.92rem;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.footer__col a:hover {
  color: var(--brand-lift);
}

.footer__base {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--text-faint);
}

/* ---------- scroll reveal ---------- */
/* Scoped to .js: without JavaScript the class is never added and nothing hides. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Phones scroll faster relative to the content, so the same 0.7s rise that
   feels gentle on a desktop feels like lag. Shorter, and travelling less far. */
@media (max-width: 880px) {
  .js .reveal {
    transform: translateY(10px);
    transition:
      opacity 0.4s var(--ease),
      transform 0.4s var(--ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--brand);
  color: #04222f;
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* ---------- narrow-phone refinements ---------- */
/* ---------- phone-width readability ----------
   Centred display type is fine; centred *paragraphs* are not. At 375px the hero
   lede ran to six centred lines, which reads as a block rather than a sentence
   because the left edge moves on every line. Below 600px the centred blocks go
   left-aligned, headings get looser leading, and the bullet lists open up so a
   wrapped item stops merging into the next one.

   Everything here is scoped to the media query on purpose -- the desktop layout
   is signed off and none of it should move. */
@media (max-width: 600px) {
  .section-head--center,
  .hero__grid,
  .hero__copy,
  .cta-panel {
    text-align: left;
  }
  .section-head--center {
    margin-inline: 0;
  }
  .section-head--center .eyebrow,
  .hero__copy .eyebrow,
  .cta-panel .eyebrow {
    justify-content: flex-start;
  }
  .hero .btn-row,
  .cta-panel .btn-row,
  .hero__proof {
    justify-content: flex-start;
  }
  .cta-panel p,
  .section-head--center p {
    margin-inline: 0;
  }
  .cta-panel .cta-spiral {
    margin-inline: 0 auto !important;
  }

  h1,
  h2,
  h3 {
    line-height: 1.18;
  }

  .checks {
    gap: 18px;
  }
}

@media (max-width: 520px) {
  .hero .btn-row,
  .cta-panel .btn-row,
  .page-hero .btn-row {
    flex-direction: column;
    align-items: stretch;
  }
  .hero .btn-row .btn,
  .cta-panel .btn-row .btn,
  .page-hero .btn-row .btn {
    width: 100%;
  }

  .hero__proof {
    gap: 6px 16px;
    font-size: 0.82rem;
  }
  .phone {
    max-width: 268px;
  }
  .card,
  .step {
    padding: 24px;
  }
  .versus__col {
    padding: 24px 20px;
  }
  .faq summary {
    padding: 17px 18px;
    font-size: 0.96rem;
  }
  .faq .faq__body {
    padding: 0 18px 19px;
  }
  .cta-panel {
    border-radius: var(--r-lg);
  }
}

/* ---------- print ---------- */
/* /privacy and /terms are the two pages people print or save as a PDF. The
   site is dark-only, and browsers drop background colours when printing, so
   without this the body text (--text on --bg) comes out light grey on white.
   Flip the tokens once here rather than chasing every rule that reads them,
   force the scroll-reveal sections visible (they sit at opacity: 0 until a JS
   observer marks them, which never happens on a printed page), and hide
   anything that is pure chrome or decoration rather than content. */
@media print {
  :root {
    --bg: #fff;
    --bg-raised: #fff;
    --surface: #fff;
    --text: #111;
    --text-soft: #111;
    --text-faint: #555;
    --brand: var(--brand-deep);
    --brand-lift: var(--brand-deep);
  }
  html,
  body {
    background: #fff;
    color: #111;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .nav__toggle,
  .nav__cta,
  .nav__links .btn,
  .skip-link,
  .hero__spiral,
  .hero__glow,
  .wm::after,
  .cta-panel,
  .cta-becky {
    display: none;
  }
  a {
    color: inherit;
    text-decoration: underline;
  }
}