/* VeloUtils — veloutils.app
   Accent values match the app's AccentColor pair: #E0530A light, #FB923C dark.
   Both clear 3:1 against their own background, which is the bar for a non-text use. */

:root {
  --bg: #ffffff;
  --bg-sunken: #f6f6f7;
  --text: #1c1c1e;
  --text-dim: #5c5c61;
  --rule: #e2e2e5;
  --accent: #e0530a;
  --link: #c44708;
  --accent-soft: #fff4ec;
  --code-bg: #f2f2f4;
  --glow: rgba(224, 83, 10, 0.10);
  --glow-2: rgba(224, 83, 10, 0.05);
  --shot-edge: #d7d7dc;
  --shot-halo: rgba(0, 0, 0, 0.04);
  --page: 80rem;   /* the page gutter, shared by every band */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17171a;
    --bg-sunken: #1f1f23;
    --text: #ececf0;
    --text-dim: #a0a0a8;
    --rule: #34343a;
    --accent: #fb923c;
    --link: #fb923c;
    --accent-soft: #2a1f16;
    --code-bg: #26262b;
    --glow: rgba(251, 146, 60, 0.13);
    --glow-2: rgba(251, 146, 60, 0.06);
    --shot-edge: #3f3f47;
    --shot-halo: rgba(255, 255, 255, 0.05);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(90rem 46rem at 78% 0%, var(--glow) 0%, transparent 62%),
    radial-gradient(58rem 34rem at 4% 10%, var(--glow-2) 0%, transparent 60%);
  background-repeat: no-repeat;
  background-position: top center;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- focus ---- */
/* Chrome's default ring is a static rgb(0,95,204), which measures 2.99:1 against the
   dark page background — just under the 3:1 that WCAG 1.4.11 asks of a focus
   indicator. The accent clears 3:1 in both palettes. */

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

/* ---- header ---- */

.site-head {
  border-bottom: 1px solid var(--rule);
  background: transparent;
}

.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 62px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

.brand img { width: 26px; height: 26px; border-radius: 6px; display: block; }

.site-head nav { display: flex; gap: 20px; }

.site-head nav a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 15px;
}

.site-head nav a:hover,
.site-head nav a[aria-current="page"] { color: var(--link); }

/* ---- hero ---- */
/* The screenshot is shown WHOLE, framed and floating, rather than bled off the
   trailing edge. Bleeding cut the diagram mid-label ("Spre...", "Sor..."), which
   reads as a broken image rather than a deliberate crop. */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
  padding: 68px 0 72px;
}

.hero > .wrap {
  position: relative;
  display: grid;
  gap: 44px;
  align-items: center;
}

.hero-copy { max-width: 30rem; }

.eyebrow {
  display: inline-block;
  margin: 0 0 20px;
  padding: 6px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 600;
}

.hero h1 {
  font-size: clamp(33px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
}

.hero p.lede {
  font-size: 18px;
  color: var(--text-dim);
  margin: 0 0 24px;
}

/* Claims list. Each item is checkable against the app, not marketing filler. */
.claims { list-style: none; padding: 0; margin: 0 0 28px; }

.claims li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-bottom: 10px;
  font-size: 16px;
}

.claims .tick {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--link);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg-sunken);
  color: var(--text-dim);
  font-size: 14.5px;
  font-weight: 500;
}

/* A soft pulse-free dot reads as state. A bordered rectangle reads as a control. */
.status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.meta-line {
  margin: 14px 0 0;
  color: var(--text-dim);
  font-size: 14px;
}

/* ---- the app screenshot ---- */

.shot { margin: 0; min-width: 0; }

.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--shot-edge);
  border-radius: 11px;
  /* A dark shadow alone is invisible on the dark palette, so the frame carries a
     hairline highlight as well and the glow behind lifts it off the background. */
  box-shadow: 0 32px 72px -20px rgba(0, 0, 0, 0.75),
              0 0 0 1px var(--shot-halo);
}

.shot figcaption {
  margin-top: 14px;
  color: var(--text-dim);
  font-size: 13.5px;
  max-width: 36rem;
}

@media (min-width: 1000px) {
  .hero > .wrap {
    grid-template-columns: minmax(19rem, 26rem) 1fr;
    gap: 52px;
  }
}

/* ---- the article column ---- */
/* Every page keeps the same 80rem chrome band, so the logo never moves between pages.
   The article inside main is a centred column instead, because prose cannot fill 1280px:
   characters per line is roughly width / (0.5 x font-size), so 1280px at 17px is about
   150 characters against a comfortable 45 to 75. Measured before this change, the privacy
   page put a 608px column beside a 648px void — 51% of the band, all on one side.

   The column widens by raising the type with it: 19px at 44rem lands near 70 characters.

   Everything inside main shares this one column, including the tool cards, which go from
   four across to two. An earlier attempt let the cards break out to the chrome band, but
   that left their own heading indented 264px from them — a worse fault than the width it
   recovered. */

main .wrap {
  max-width: 44rem;
  font-size: 19px;
}

@media (max-width: 640px) {
  main .wrap { font-size: 17px; }
}

/* ---- content ---- */

main { padding: 56px 0 24px; }


h2 {
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 48px 0 14px;
  padding-top: 8px;
}

main > .wrap > h2:first-child { margin-top: 0; }

h3 { font-size: 19px; margin: 32px 0 8px; }

p, ul, ol { margin: 0 0 16px; }

ul, ol { padding-left: 1.35em; }

li { margin-bottom: 6px; }

a { color: var(--link); }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--code-bg);
  padding: 0.12em 0.38em;
  border-radius: 4px;
}

.page-title { margin: 0 0 6px; font-size: 36px; letter-spacing: -0.02em; }

/* The standfirst under the page title. At 15px in the article column it ran to 87
   characters, the only measure left above the target; 17px in a shorter column puts it
   near 68 and sets it between the title and the 19px body. */
.page-date {
  color: var(--text-dim);
  font-size: 17px;
  max-width: 36rem;
  margin-bottom: 40px;
}

/* ---- the summary callout, used once per legal page ---- */

.callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  background: var(--bg-sunken);
  border-radius: 8px;
  padding: 18px 20px;
  margin: 0 0 36px;
}

.callout p:last-child { margin-bottom: 0; }

/* ---- tool cards ---- */

.tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 16px;
  margin: 24px 0 8px;
  padding: 0;
  list-style: none;
}

.tools li {
  background: var(--bg-sunken);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 20px;
  margin: 0;
}

.tools h3 { margin: 0 0 6px; font-size: 17px; }

.tools p { margin: 0; font-size: 15px; color: var(--text-dim); }

/* ---- key/value table ---- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 0 0 16px;
}

th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

th { font-weight: 600; white-space: nowrap; }

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

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: 64px;
  padding: 28px 0 48px;
  color: var(--text-dim);
  font-size: 14px;
}

.site-foot .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }

.site-foot a {
  color: var(--text-dim);
  display: inline-block;
  padding: 5px 0;
}

.site-foot a:hover { color: var(--link); }

.site-foot .spacer { margin-left: auto; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 48px 0 56px; }
  .hero p.lede { font-size: 17.5px; }
  .claims li { font-size: 16px; }
  .page-title { font-size: 29px; }
  .site-foot .spacer { margin-left: 0; width: 100%; }
}