/* ============================================================================
   THE WORDMARK
   ----------------------------------------------------------------------------
   Four files, drawn by Mark, in assets/logo/:

     wordmark.svg               horizontal, purple and orange — for light grounds
     wordmark-dark.svg          horizontal, white and peach   — for dark grounds
     wordmark-stacked.svg       the same, set over two lines, light grounds
     wordmark-stacked-dark.svg  the same, set over two lines, dark grounds

   Horizontal in the top navigation, stacked in the footer.

   WHY TWO FILES PER LOCKUP RATHER THAN ONE THAT RECOLOURS
   An SVG loaded through <img> is a separate document and cannot see this
   page's custom properties, so currentColor and var() do nothing to it. The
   alternative is pasting the paths inline into eleven files, which is a lot of
   markup to keep in step for a logo that changes colour in exactly one place —
   the landing navigation, which turns dark over the hero and light below it.
   Everywhere else the ground is known, one file is loaded, and nothing swaps.

   SIZING is by HEIGHT. The width follows from the file's own aspect ratio, so
   nothing here needs to know that the horizontal lockup is 5.64:1.
   ========================================================================== */

.logo{display:inline-flex;align-items:center;text-decoration:none!important;flex-shrink:0}

.wm{display:block;width:auto;height:var(--wm, 30px)}

/* ── The landing navigation ────────────────────────────────────────────────
   Both files are in the markup and CSS chooses. Swapping the src in JS would
   mean the wrong one is painted first on every load, and over the hero — which
   is dark — that first paint is a purple wordmark on a photograph. */
.nav .wm{--wm:clamp(23px, 2.5vw, 30px)}
.nav .wm-dark{display:none}
header.nav[data-tone="dark"] .wm-light{display:none}
header.nav[data-tone="dark"] .wm-dark{display:block}

/* ── The footer ────────────────────────────────────────────────────────────
   Stacked, because the brand column is narrow and a 5.64:1 lockup set across
   it would come out smaller than the body text beside it. */
.wm-stacked{display:block;width:auto;height:clamp(58px, 7vw, 74px)}

/* ── Sign-in, sign-up, onboarding, terms, privacy ──────────────────────────
   All of them sit on paper, so there is one file and no swap. */
.ob-head .wm,
.flow-bar .wm{--wm:26px}

/* ── Inside the app ────────────────────────────────────────────────────────
   The rail is 76px wide and the console header no wider, which is not a
   measure a horizontal wordmark can be set across. That is what a square app
   icon is for, and it is the one the phone home screen already shows. */
.applogo{display:block;width:34px;height:34px;border-radius:9px;flex-shrink:0}