/* The type system: Geist for everything, weight by role.
   Loaded last on every page so it settles any older rule. */

/* major section headings: 700, tight, nearly solid */
h1, h2, .t-1, .t-2, .see-head {
  font-family: var(--display, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-weight: 700; letter-spacing: -0.04em; line-height: .96;
}
/* smaller headings: 600-700 */
h3 { font-family: var(--display, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }

/* body: 400-500 */
body { font-family: var(--sans, "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-weight: 400; }
b, strong { font-weight: 600; }

/* buttons, navigation, labels: 500-600 */
button, .btn, .pill-white, .pill-tray a, .nav-links a, .open-cta, .open-badge,
.ca, .chip, .tab, .seg, .eyebrow { font-weight: 500; }
.open-cta, .open-badge-tag, .btn-primary { font-weight: 600; }
.tier-k, .chain-k, .open-scroll, .still-notes b, .step-n, .strip-sym, .ph-key, .note-k { font-weight: 500; }

/* numbers and stats: 500-600, tabular so columns of prices line up */
.mono, .strip-px, .card-px, .tile-tick, .row-px, .res-v, .chain-row b.mono, [data-live], [data-px] {
  font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* the wordmark: set like the headings, no full stop */
.wordmark-lockup { align-items: center; }
.wm-name { font-family: var(--display); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-size: clamp(19px, 1.8vw, 25px); }

/* the Seen mark on transparent: no tile to round */
/* the mark is a cut-out now: no tile, so no radius and no edge */
/* the nav download pill: the robot beside the words, like the hero button */
.nav-apk { display: inline-flex; align-items: center; gap: 8px; }
.nav-apk .android-mark { width: 17px; height: 17px; flex: none; }

/* the nav mark, bigger (user, 2026-09-22). The PNG carries about 20% clear space round
   the flower, so the negative margin keeps the flower's gap to "Seen" as it was. */
.wordmark-lockup img { width: clamp(38px, 3.4vw, 48px); height: clamp(38px, 3.4vw, 48px); margin-right: -6px; }

/* the X link at the end of the bar: a square icon button like the old one */
.icon-x { display: inline-flex; align-items: center; justify-content: center; }
.icon-x svg { width: 44%; height: 44%; }

/* ---------- the bar on a phone ---------- */
.nav-toggle, .nav-sheet { display: none; }
@media (max-width: 860px) {
  /* only the wordmark, Lens and the menu button fit */
  .topbar .pill-tray, .topbar .ca, .topbar .nav-apk, .topbar .icon-x { display: none; }
  .topbar-left .icon-btn { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    width: 46px; height: 46px; border-radius: 25%; border: 1px solid rgba(255,255,255,.18);
    background: rgba(16,17,19,.55); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
    cursor: pointer; flex-direction: column; }
  .nav-toggle i { display: block; width: 17px; height: 2px; border-radius: 2px; background: #fff; }
  .nav-sheet {
    position: fixed; top: calc(var(--nav-h, 64px) + 18px); right: 12px; left: 12px; z-index: 95;
    display: none; grid-gap: 2px; padding: 10px; border-radius: 20px;
    background: rgba(12,14,20,.92); border: 1px solid rgba(255,255,255,.14);
    backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
  }
  .nav-sheet.is-open { display: grid; }
  .nav-sheet a { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: var(--r-btn, 12px);
    color: #f0f1f2; font-size: 16px; font-weight: 500; text-decoration: none; }
  .nav-sheet a:active { background: rgba(255,255,255,.08); }
  .nav-sheet a.go { background: var(--accent, #17191d); color: #fff; font-weight: 600; margin-top: 4px; }
  .nav-sheet svg { width: 18px; height: 18px; flex: none; }
  /* the Lens page and the docs page have their own small bars: leave them be */
}

/* The `hidden` attribute only carries a user-agent rule, which loses to any
   author `display` declaration. Three chips were set hidden in JS and kept
   rendering because .ca and .pill-white both declare display:inline-flex.
   This is the same rule proof.html already declares inline. */
[hidden] { display: none !important; }


/* =========================================================================
   No script, nothing hidden.
   Every rule that hides content at rest does so to animate it in. If the
   script that brings it back never runs, the content must not be lost: one of
   the pieces is the line saying earning is not built yet. These selectors are
   the hidden-at-rest ones only; interactive things that are legitimately
   hidden until opened, such as the settings sheet and its scrim, are not here.
   ========================================================================= */
html:not(.js) .open-badge,
html:not(.js) .open-screen h1 span,
html:not(.js) .open-screen .open-sub,
html:not(.js) .open-cta,
html:not(.js) .loop-rail li,
html:not(.js) .rise,
html:not(.js) [data-stagger] > *,
html:not(.js) .see-head,
html:not(.js) .still-notes li,
html:not(.js) .still-layer,
html:not(.js) .still-single,
html:not(.js) .path-ours > div,
html:not(.js) .story-card,
html:not(.js) .strip-card,
html:not(.js) .tiers .tier {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
  visibility: visible !important;
}


/* =========================================================================
   The mark is white ink on transparency, so it has to be turned black on the
   light surfaces. This lives in type.css because it is the only stylesheet all
   four pages load: the camera, app and docs pages never see site.css, so the
   rule there reached the homepage alone and the mark was simply missing on the
   other three. The topbar lockup is deliberately not included; it is handled
   by the on-light state, because it crosses between dark and light bands.
   ========================================================================= */
.brand img, .rail-brand img { filter: invert(1); }