/* SussOut site styles. Brand tokens from theme.js / design handoff.
   Fonts self-hosted (fonts/): no external requests, no trackers. */

@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/nunito-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Nunito Sans';
  src: url('fonts/nunito-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --ink: #1A1A2E;          /* theme.js textPrimary */
  --tile: #15171E;         /* wordmark icon tile */
  --muted: #666666;        /* theme.js textSecondary */
  --soft: #888888;         /* theme.js textMuted */
  --bg: #FFFFFF;
  --border: #E0E0E0;
  --divider: #F0F0F0;
  --green: #1A7F37;        /* confirmGreen */
  --green-bright: #3FBF63; /* icon check accent */
  --link: #1B6FE0;         /* theme.js selectBlue */
}

/* ---------- dark mode ----------
   TOKENS ONLY. Every value below is the same token from the app's theme.js
   dark palette, so the site and the app are one surface rather than two that
   happen to look similar: bg #15171E, text #F4F5F7, secondary #9BA1AD,
   border #2E3342, divider #232734, green #3FBF63.

   WHY prefers-color-scheme AND NOTHING ELSE. The app's theme is driven by
   useColorScheme() with no in-app override, so the OS decides both. The
   in-app webview therefore matches the screen around it for free, with no
   theme parameter on the URL and nothing to keep in sync. Anyone reading the
   documents in a browser gets the same courtesy.

   The green LIFTS in dark (#1A7F37 is the light-mode confirm green and goes
   muddy on a dark ground). This mirrors the app, which brightens it for the
   same reason. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #F4F5F7;        /* theme.js dark text */
    --tile: #F4F5F7;       /* wordmark text: the tile art keeps its own fill */
    --muted: #9BA1AD;      /* dark textSecondary */
    --soft: #8B92A0;       /* dark textMuted */
    --bg: #15171E;         /* dark bg */
    --border: #2E3342;
    --divider: #232734;    /* dark rowDivider */
    --green: #3FBF63;      /* dark confirmGreen, lifted off the dark ground */
    --link: #4D97FF;       /* dark selectBlue */
  }

  /* One weight down for each half on a dark ground, per mark.js's `dark` pair.
     Light text on dark reads OPTICALLY HEAVIER, so holding 500/800 here would
     thicken the mark; stepping both down keeps the contrast between the halves
     identical while the absolute weights change. */
  .wordtext { font-weight: 400; }
  .wordtext b { font-weight: 700; }

  /* The filled button takes INK text: the lifted green is bright enough that
     white-on-green loses contrast, and the app inverts its buttons in dark for
     the same reason. */
  .notify { color: #15171E; }
  .notify:hover { background: #35A554; }

  /* THE TILE CANNOT KEEP ITS LIGHT-MODE FILL. It is painted #15171E inline,
     which is precisely the dark background, so the rounded square would vanish
     and leave the brackets and the check floating in space. The app solves this
     the same way and these are its values: the tile becomes `surface` and gains
     the hairline `ring` that separates it from the page.

     A CSS rule beats an inline presentation attribute (unlike a style
     attribute), so the fill in the markup stays as the light-mode value and
     this overrides it. */
  .tile rect {
    fill: #1E212B;
    stroke: #2A2E3A;
    stroke-width: 1;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* ---------- wordmark lockup ---------- */

.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 56px;
}

.wordmark a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.tile {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* THE WORDMARK. Values come from app/src/brand/mark.js in the app repo, which is
   the single source; this file is a HAND-SYNCED COPY and the only one, so check
   it whenever that file's WORDMARK block changes.

   THE EMPHASIS IS ON THE SECOND HALF, which is the inverse of the ReallyMe mark
   this replaces: "Out" is the result rather than the act, and it is the syllable
   people land on saying the phrase. So <b> wraps the SECOND half here; the mark
   it replaced had it on the first.

   WEIGHT PER SCHEME, NOT ONE PAIR FOR BOTH. Dark-on-light strokes read thinner
   optically, so each half steps up one weight in light mode. That keeps the
   CONTRAST between the halves constant, and the contrast is the wordmark, not
   the absolute weights.

   Tracking is POSITIVE (mark.js letterSpacingRatio 0.01em, was -0.02em). It
   loosens every gap including the seam between the halves, which is what makes
   SussOut read as two words at small sizes: unlike ReallyMe's y-to-M, the s-to-O
   junction has no diagonal to open it up. */
.wordtext {
  font-family: 'Manrope', 'Nunito Sans', sans-serif;
  font-size: 26px;
  font-weight: 500;              /* mark.js light.lightWeight */
  letter-spacing: 0.01em;        /* mark.js letterSpacingRatio */
  color: var(--tile);
}

.wordtext b {
  font-weight: 800;              /* mark.js light.boldWeight */
  margin-left: 0.06em;           /* mark.js halfGapRatio */
}

/* ---------- hero ---------- */

.hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 96px 0;
}

h1 {
  font-family: 'Manrope', 'Nunito Sans', sans-serif;
  font-size: clamp(40px, 8vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin-bottom: 28px;
}

.sub {
  font-size: clamp(19px, 3vw, 22px);
  color: var(--muted);
  margin-bottom: 48px;
}

.notify {
  display: inline-block;
  background: var(--green);
  color: #FFFFFF;
  text-decoration: none;
  font-size: 19px;
  font-weight: 700;
  padding: 17px 28px;
  border-radius: 12px;
  min-height: 56px;
}

.notify:hover { background: #166B2E; }

.notify:focus-visible,
footer a:focus-visible,
.wordmark a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- footer ---------- */

footer {
  border-top: 1px solid var(--divider);
  padding: 28px 0;
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
}

footer nav { display: flex; gap: 24px; }

footer a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

footer a:hover { border-bottom-color: var(--ink); }

.quiet { color: var(--soft); }

/* attribution, not navigation: sits in the quiet line, weight only */
footer .by-link {
  color: inherit;
  font-weight: 700;
  border-bottom: 0;
}

footer .by-link:hover { color: var(--ink); }

/* ---------- legal pages ---------- */

.legal { padding: 72px 0 96px; }

.legal .wordmark { margin-bottom: 48px; }

.legal h1 {
  font-size: clamp(30px, 5vw, 40px);
  margin-bottom: 12px;
}

.updated {
  color: var(--soft);
  font-size: 15px;
  margin-bottom: 40px;
}

.legal h2 {
  font-family: 'Manrope', 'Nunito Sans', sans-serif;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 36px 0 10px;
}

.legal p, .legal li {
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 12px;
}

.legal ul { padding-left: 22px; margin-bottom: 12px; }

/* LINKS ARE BLUE, NOT GREEN. In the app green carries a verification VERDICT,
   and these documents are read inside it, so a green mailto link borrows the one
   colour that has to keep meaning "confirmed". Blue is the app's selectBlue, and
   a blue link is what a reader expects of a link anyway. The green stays where it
   belongs, on the action button. */
.legal a { color: var(--link); }

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