/* Goodbyte - goodbyte.app
   Design system. Dark, precise, mint accent, mirrors the Android app. */

/* Space Grotesk and Space Mono share a skeleton, which is what makes the
   spec-sheet FIG captions on the home page cohere with the display type by
   construction. Latin subsets only, 22KB and 16KB. */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-latin-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-style: normal;
  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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/assets/fonts/space-mono-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  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+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Surfaces, taken from the app rather than approximated:
     core/ui/theme/Color.kt BackgroundDark, SurfaceNavyLifted, SurfaceNavyHigh. */
  --void: #070E18;
  --navy: #0f1b2d;
  --bg: #0f1b2d;
  --bg-2: #0a1421;
  --surface: #15233a;
  --surface-2: #1a2a40;
  --line: #22364f;

  /* Brand: Primary, PrimaryBright, OnPrimary */
  --mint: #1fd9a0;
  --mint-bright: #06d89f;
  --on-mint: #00251a;

  /* The logo green, from Anton's master icon at
     projects/sift/brand/source/sift_icon_squircle.svg. It is the app's
     PrimaryBright, and it is deliberately a separate token from --mint.

     --mint is the app's Primary, and this page renders app screens in the DOM
     and calls them the product, so --mint has to keep matching the app a
     visitor would install. The mark is an identity and has to be the same green
     everywhere it lands, whatever the interface does. Both clear AA on every
     ground here, so this is not a contrast decision.

     The one exception is the mint field on the first screen, where the whole
     lockup inverts to --on-mint, because mark green on Primary is nearly
     invisible. See projects/sift/brand/BRAND.md. */
  --mark-green: #06d89f;
  --mint-dim: #1fb87c;
  --teal: #00897b;
  --violet: #7b5fd4;
  --sky: #3b9bf0;
  --magenta: #b44bd8;
  --amber: #ffa726;
  --red: #e5484d;

  --ink: #ffffff;
  --ink-2: #c3d2e0;
  --ink-3: #8299ae;
  --ink-4: #8ba2b6;

  --radius: 16px;
  --radius-lg: 24px;
  --maxw: 1160px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --step-1: clamp(1.22rem, 1.13rem + 0.45vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --step-4: clamp(2.1rem, 1.7rem + 1.9vw, 3.15rem);
  --step-5: clamp(2.35rem, 1.9rem + 2.2vw, 3.7rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 520;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

img, svg, video { display: block; max-width: 100%; }

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

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--mint);
  color: var(--on-mint);
  padding: 0.7rem 1.1rem;
  font-weight: 650;
  z-index: 100;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- Header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-head[data-stuck='true'] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 66px;
}

/* The lockup: the six dot mark, then the word. These rules live in site.css and
   not in home.css because the legal pages and the 404 load site.css only. That
   is exactly why they were still carrying the improvised old wordmark plus a green
   square long after the home page had the real mark. One lockup, one file, so
   the drift cannot come back.

   <use> renders into a shadow tree, so a descendant selector never reaches the
   circles. fill is inherited, so it is set on the svg and comes down. */
.mark {
  display: block;
  /* 26 x 23.4 is the master icon's own bounding box, 1368.57 x 1230.06.
     Rounding it to 26x24 letterboxes the mark inside its own viewport. */
  width: 26px;
  height: 23.4px;
  flex: none;
  fill: var(--mark-green);
}

.wordmark-v2 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.26rem;
  letter-spacing: -0.04em;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2rem);
  font-size: var(--step--1);
}
.nav a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.2s;
}
.nav a:hover { color: var(--ink); }
.nav a { white-space: nowrap; }
@media (max-width: 720px) { .nav .nav-hide { display: none; } }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 620;
  font-size: var(--step--1);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--mint);
  color: var(--on-mint);
}
.btn-primary:hover { transform: translateY(-2px); background: #3ee9b3; }
.btn-ghost {
  border-color: var(--line);
  color: var(--ink-2);
  background: transparent;
}
.btn-ghost:hover { border-color: var(--ink-4); color: var(--ink); }
.btn[aria-disabled='true'] { cursor: default; }
.btn[aria-disabled='true']:hover { transform: none; }

/* ---------- Reveal motion ---------- */

.rise { opacity: 1; }
.js .rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .rise.in { opacity: 1; transform: none; }

/* ---------- Sections ---------- */

section { position: relative; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  font-weight: 640;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--mint);
  opacity: 0.6;
}

.lede {
  color: var(--ink-3);
  font-size: var(--step-1);
  line-height: 1.55;
  max-width: 34ch;
}

.section-pad { padding-block: clamp(5rem, 11vw, 9rem); }

/* ---------- Footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 3.5rem 2.5rem;
  color: var(--ink-3);
  font-size: var(--step--1);
  background: var(--void);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
.foot-grid h2 {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 1rem;
  font-weight: 640;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.foot-grid a { text-decoration: none; transition: color 0.2s; }
.foot-grid a:hover { color: var(--mint); }
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-4);
  font-size: 0.82rem;
}

/* ---------- Prose (legal pages) ---------- */

.prose-head {
  padding-block: clamp(3.5rem, 8vw, 6rem) 2.5rem;
  border-bottom: 1px solid var(--line);
}
.prose-head h1 { font-size: var(--step-3); margin-bottom: 1rem; }
.prose-meta { color: var(--ink-4); font-size: var(--step--1); }

.prose {
  max-width: 74ch;
  padding-block: 3.5rem 6rem;
  color: var(--ink-2);
}
.prose h2 {
  font-size: var(--step-2);
  margin: 3.2rem 0 1.1rem;
  color: var(--ink);
  scroll-margin-top: 90px;
}
.prose h3 {
  font-size: var(--step-1);
  margin: 2.2rem 0 0.8rem;
  color: var(--ink);
  font-weight: 580;
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li { line-height: 1.75; }
.prose p + p { margin-top: 1.1rem; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 1.1rem 0; display: grid; gap: 0.6rem; }
.prose a { color: var(--mint); text-underline-offset: 3px; }
.prose strong { color: var(--ink); font-weight: 620; }
.prose code {
  font-family: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.85em;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0.12em 0.42em;
  border-radius: 5px;
  color: var(--ink-2);
  word-break: break-word;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0; }

.prose .callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--mint);
  border-radius: 12px;
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
}
.prose .callout p { color: var(--ink-2); }
.prose .callout strong { color: var(--mint); }

.table-scroll { overflow-x: auto; margin: 1.6rem 0; -webkit-overflow-scrolling: touch; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  min-width: 460px;
}
.prose th, .prose td {
  text-align: left;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose th {
  color: var(--ink);
  font-weight: 620;
  background: var(--surface);
  white-space: nowrap;
}
.prose tbody tr:last-child td { border-bottom: 0; }

.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
  margin-bottom: 3rem;
}
.toc h2 {
  font-size: 0.76rem !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin: 0 0 1rem !important;
  font-weight: 640;
}
.toc ol { margin: 0; padding-left: 1.2rem; gap: 0.55rem; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--mint); }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .rise, .js .rise { opacity: 1 !important; transform: none !important; }
}