/* Speed Comp - speedcomp.app
   Google-styled static site. No build step, no dependencies. */

:root {
  --blue:        #1a73e8;
  --blue-hover:  #1b66c9;
  --blue-tint:   #e8f0fe;
  --red:         #ea4335;
  --yellow:      #fbbc04;
  --green:       #34a853;

  --text:        #202124;
  --text-muted:  #5f6368;
  --border:      #dadce0;
  --surface:     #ffffff;
  --surface-alt: #f8f9fa;

  --shadow-1: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-2: 0 1px 3px 0 rgba(60,64,67,.30), 0 4px 8px 3px rgba(60,64,67,.15);

  --radius: 8px;
  --radius-lg: 16px;

  /* The corner radius already masked into icon.png, as a ratio of its width, so
     CSS rounds exactly as far as the PNG does and no further. A fixed px value
     here rounds harder than the mask at these sizes and eats into the artwork.
     .hero-icon still needs this: box-shadow follows the border-box rather than
     the alpha channel, so without it the shadow squares off behind a round icon. */
  --icon-radius: 16.7%;
  --max: 1000px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --blue:        #8ab4f8;
    --blue-hover:  #aecbfa;
    --blue-tint:   #1f2a3d;
    --text:        #e8eaed;
    --text-muted:  #9aa0a6;
    --border:      #3c4043;
    --surface:     #202124;
    --surface-alt: #292a2d;
    --shadow-1: 0 1px 2px 0 rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.35);
    --shadow-2: 0 1px 3px 0 rgba(0,0,0,.6), 0 4px 8px 3px rgba(0,0,0,.35);
  }
}

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

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

body {
  margin: 0;
  font-family: "Google Sans Text", "Google Sans", Roboto, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

h1, h2, h3 {
  font-family: "Google Sans", "Google Sans Text", Roboto, -apple-system,
               BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

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

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

/* Anchor targets have to clear the 64px sticky header. Without this every TOC
   link, section link and the skip link lands with its heading hidden behind it.
   .hero-actions is the header's "Get the app" target now that there are two
   store badges to choose between. */
main[id], section[id], h2[id], h3[id], .hero-actions[id] { scroll-margin-top: 84px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--blue); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--radius) 0; z-index: 100;
}
.skip-link:focus { left: 0; }

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

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; height: 64px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text);
  font-family: "Google Sans", Roboto, sans-serif;
  font-size: 20px; font-weight: 500; letter-spacing: -.01em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }

/* The app's own launcher icon, masked to its artwork's corner radius. It carries
   its own dark ground, so it needs no plate behind it in either theme. */
.brand-icon {
  display: block; flex: none;
  width: 28px; height: 28px;
  border-radius: var(--icon-radius);
}

.nav { display: flex; align-items: center; gap: 8px; }

/* :not(.btn) so these never win over the button rules below on specificity -
   without it the header call-to-action renders muted grey on blue. */
.nav a:not(.btn) {
  color: var(--text-muted); font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--radius);
}
.nav a:not(.btn):hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }
.nav a:not(.btn)[aria-current="page"] { color: var(--blue); }
.nav .btn { padding: 10px 20px; font-size: 14px; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Google Sans", Roboto, sans-serif;
  font-size: 15px; font-weight: 500; line-height: 1;
  padding: 13px 24px; border-radius: 100px; border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s, box-shadow .2s, border-color .2s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); box-shadow: var(--shadow-1); }
.btn-ghost { color: var(--blue); border-color: var(--border); background: transparent; }
.btn-ghost:hover { background: var(--blue-tint); border-color: var(--blue); }

@media (prefers-color-scheme: dark) {
  .btn-primary { color: #202124; }
}

/* ---------- Hero ---------- */

.hero { padding: 88px 0 72px; text-align: center; }
.hero h1 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 400; margin-bottom: 20px;
}
.hero h1 strong { font-weight: 500; color: var(--blue); }
.hero p.lede {
  max-width: 620px; margin: 0 auto 36px;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  color: var(--text-muted);
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center; align-items: center;
}

/* Google's supplied badge artwork, used unmodified - their brand guidelines forbid
   recreating or restyling it, which is what the hand-drawn button here did before.
   The asset already carries the required clear space: 41px around a 168px badge,
   i.e. the mandated quarter of the badge height, which is why nothing here adds
   padding of its own.

   Height is set on the file, not the badge inside it. The badge is 67.2% of the
   file's height, so 64px here renders it at ~43px and clears Google's 40px
   minimum; anything below 60px would breach it. */
.play-badge { display: inline-block; line-height: 0; border-radius: 4px; }
.play-badge img { display: block; height: 64px; width: auto; }

/* Apple's badge, likewise unmodified, from the App Store marketing tools. Unlike
   Google's file it has no clear space baked in, and Apple asks for a quarter of
   the badge height on every side - hence the padding. 43px matches the height
   Google's badge renders at inside its 64px file, so the two sit as equals, and
   clears Apple's 40px minimum. The black badge carries its own grey keyline and
   holds up on both the light and dark grounds without a plate. */
.app-store-badge { display: inline-block; line-height: 0; padding: 11px; border-radius: 4px; }
.app-store-badge img { display: block; height: 43px; width: auto; }

.hero-uses {
  margin: -18px auto 32px; max-width: 560px;
  color: var(--text-muted); font-size: .95rem; letter-spacing: .01em;
}

.hero-icon {
  display: block; margin: 0 auto 28px;
  width: 88px; height: 88px;
  border-radius: var(--icon-radius);
  box-shadow: var(--shadow-2);
}

/* Discord's own blurple, not a theme token — it identifies the destination, and it
   holds its contrast on both the light and dark section backgrounds. */
.discord-mark {
  display: block; margin: 0 auto 20px;
  width: 44px; height: 44px;
  color: #5865f2;
}

@media (prefers-color-scheme: dark) {
  .discord-mark { color: #7d87f5; }
}

.eyebrow {
  display: inline-block; margin-bottom: 20px; padding: 6px 14px;
  background: var(--blue-tint); color: var(--blue);
  border-radius: 100px; font-size: 13px; font-weight: 500; letter-spacing: .02em;
}

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

.section { padding: 72px 0; border-top: 1px solid var(--border); }
.section-alt { background: var(--surface-alt); }
.section h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.15rem);
  font-weight: 400; margin-bottom: 12px;
}
.section > .wrap > p.sub {
  color: var(--text-muted); max-width: 620px; margin: 0 0 44px;
  font-size: 1.05rem;
}
.section-center { text-align: center; }
.section-center > .wrap > p.sub { margin-left: auto; margin-right: auto; }

/* ---------- Grids and cards ---------- */

.grid { display: grid; gap: 24px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: left;
  transition: box-shadow .2s, border-color .2s;
}
.card:hover { box-shadow: var(--shadow-2); }
.card h3 {
  font-size: 1.15rem; margin-bottom: 8px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.card p { margin: 0; color: var(--text-muted); font-size: .95rem; }

.plan-lead { margin-bottom: 16px !important; }
.plan-list {
  margin: 0; padding-left: 20px;
  color: var(--text-muted); font-size: .95rem;
}
.plan-list li { margin-bottom: 6px; }
.plan-note { margin: 36px auto 28px !important; }

/* Tier tag on features a subscription unlocks. */
.tag {
  font-family: "Google Sans", Roboto, sans-serif;
  font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; white-space: nowrap;
  background: var(--blue-tint); color: var(--blue);
  border: 1px solid transparent;
}
@media (prefers-color-scheme: dark) {
  .tag { border-color: var(--border); }
}

.card-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 18px;
}
.card-icon svg { width: 22px; height: 22px; }
.i-blue   { background: var(--blue-tint);    color: var(--blue); }
.i-red    { background: rgba(234,67,53,.14); color: var(--red); }
.i-green  { background: rgba(52,168,83,.14); color: var(--green); }
.i-yellow { background: rgba(251,188,4,.18); color: #a05f00; }

@media (prefers-color-scheme: dark) {
  .i-yellow { color: var(--yellow); }
}

.step-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue); color: #fff;
  display: grid; place-items: center; margin-bottom: 18px;
  font-family: "Google Sans", Roboto, sans-serif; font-weight: 500;
}

@media (prefers-color-scheme: dark) {
  .step-num { color: #202124; }
}

/* ---------- Privacy call-out ---------- */

.callout {
  background: var(--blue-tint);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 36px;
}
.callout h2 { margin-bottom: 12px; }
.callout p { color: var(--text-muted); max-width: 640px; }
.callout ul { margin: 20px 0 24px; padding-left: 0; list-style: none; }
.callout li {
  position: relative; padding-left: 30px; margin-bottom: 10px;
  color: var(--text); font-size: .97rem;
}
.callout li::before {
  content: ""; position: absolute; left: 4px; top: .5em;
  width: 12px; height: 6px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

@media (prefers-color-scheme: dark) {
  .callout { border-color: var(--border); }
}

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

.site-footer {
  background: var(--surface-alt);
  border-top: 1px solid var(--border);
  padding: 40px 0;
  font-size: 14px; color: var(--text-muted);
}
.site-footer .wrap {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
}

/* Full-width row of its own beneath the footer links. */
.footer-legal {
  flex-basis: 100%;
  padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
}
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--blue); }

/* ---------- Legal document ---------- */

.doc { padding: 56px 0 88px; }
.doc-head { border-bottom: 1px solid var(--border); padding-bottom: 28px; margin-bottom: 12px; }
.doc-head h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 400; }
.doc-meta { color: var(--text-muted); font-size: .9rem; margin: 0; }

.doc-body { max-width: 760px; }
.doc-body h2 {
  font-size: 1.4rem; font-weight: 500;
  margin-top: 48px; padding-top: 8px;
}
.doc-body h3 { font-size: 1.08rem; font-weight: 500; margin-top: 32px; }
.doc-body p, .doc-body li { color: var(--text); }
.doc-body ul, .doc-body ol { padding-left: 24px; }
.doc-body li { margin-bottom: 8px; }
.doc-body li::marker { color: var(--text-muted); }

.summary {
  background: var(--blue-tint); border-radius: var(--radius-lg);
  padding: 28px 32px; margin: 32px 0 8px;
}
.summary h2 { margin-top: 0; font-size: 1.15rem; }
.summary ul { margin-bottom: 0; }

.toc {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px 28px; margin: 32px 0;
  background: var(--surface-alt);
}
.toc h2 {
  margin: 0 0 12px; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted); font-weight: 500;
}
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.toc li { margin-bottom: 6px; break-inside: avoid; }

@media (max-width: 600px) {
  .toc ol { columns: 1; }
}

.table-wrap { overflow-x: auto; margin: 24px 0; }
table {
  width: 100%; border-collapse: collapse;
  font-size: .93rem; min-width: 520px;
}
th, td {
  text-align: left; vertical-align: top;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
th {
  font-family: "Google Sans", Roboto, sans-serif; font-weight: 500;
  color: var(--text-muted); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--surface-alt);
}
tbody tr:last-child td { border-bottom: none; }

code {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}

/* ---------- Small screens ---------- */

@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .hero { padding: 56px 0 48px; }
  .section { padding: 56px 0; }
  .callout { padding: 28px 24px; }
  .summary { padding: 24px; }

  /* The 64px bar has room for the wordmark or the call-to-action, not both.
     Drop the button - the hero repeats it immediately below. */
  .brand { font-size: 18px; gap: 8px; }
  .brand-icon { width: 24px; height: 24px; }
  .nav { gap: 0; }
  .nav a:not(.btn) { padding: 8px 9px; font-size: 13px; }
  .nav .btn { display: none; }

  /* "How it works" is the longest label and the only one the page duplicates -
     the hero's second button points at the same anchor. Dropping it here is what
     keeps the rest on one line; with it, the bar wrapped to three rows at 375px
     as soon as Support was added. */
  .nav a[href="#how"] { display: none; }
}