/* QVINQ link-landing — the whole stylesheet.
 *
 * Loaded as /assets/styles.css (root-absolute on purpose: the same document is
 * served from /r/<code> and /d/<code>, where a relative href would resolve to
 * /r/assets/styles.css and 404).
 *
 * Visual system = Qvinq brand (reference qvinq.vercel.app; owner 07.09.2026),
 * token-for-token the same as the public ride page on cityride.cc
 * (cityride-web/assets/styles/app.css): yellow #FFCE24 accent, near-black ink,
 * cool greys, Montserrat headings, Inter text, square buttons in small caps.
 * Light and dark follow the system; an explicit data-theme stamp on <html>
 * wins in either direction. Every colour is a token declared on bare :root —
 * nothing lives only inside a media block.
 *
 * Contract with app.js (do not rename): #langs > button(.active), #code-card, #nocode-card,
 * #code, #copy-btn (textContent is replaced — keep it text-only), #t-promo
 * toggled via .hidden, and .hidden itself must stay display:none !important.
 *
 * Fonts come from the Google Fonts <link> in index.html; both font tokens end
 * in a real system stack, so a blocked font host degrades to Helvetica/Arial
 * instead of nothing. */

:root {
  --q-bg: #f7f8f9;
  --q-surface: #ffffff;
  --q-ink: #0b0b0e;
  --q-ink2: #3c3f49;
  --q-mute: #6d7280;
  --q-rule: #e3e3ee;
  --q-rule2: #c9cad6;
  --q-acc: #ffce24;
  --q-acc-hover: #ffab24;
  --q-acc-ink: #0b0b0e;
  --q-acc-soft: #fff3c2;
  --q-btn: #0b0b0e;
  --q-btn-ink: #ffffff;
  --q-btn-hover: #ffce24;
  --q-btn-hover-ink: #0b0b0e;
  --q-font-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --q-font-display: Montserrat, Inter, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --q-bg: #0e0e11;
    --q-surface: #17171c;
    --q-ink: #f4f4f6;
    --q-ink2: #c9cad3;
    --q-mute: #8f92a0;
    --q-rule: #26262e;
    --q-rule2: #3a3a45;
    --q-acc-soft: #3a3110;
    --q-btn: #ffce24;
    --q-btn-ink: #0b0b0e;
    --q-btn-hover: #ffab24;
    --q-btn-hover-ink: #0b0b0e;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --q-bg: #0e0e11;
  --q-surface: #17171c;
  --q-ink: #f4f4f6;
  --q-ink2: #c9cad3;
  --q-mute: #8f92a0;
  --q-rule: #26262e;
  --q-rule2: #3a3a45;
  --q-acc-soft: #3a3110;
  --q-btn: #ffce24;
  --q-btn-ink: #0b0b0e;
  --q-btn-hover: #ffab24;
  --q-btn-hover-ink: #0b0b0e;
  color-scheme: dark;
}

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

html, body { background: var(--q-bg); color: var(--q-ink); }

body {
  font: 15px/1.45 var(--q-font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* ── Header: wordmark + language switcher ─────────────────────────────── */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--q-surface);
  border-bottom: 1px solid var(--q-rule);
}

.wordmark { display: flex; align-items: center; color: var(--q-ink); }

.wordmark svg { display: block; width: 106px; height: 20px; }

.langs { display: flex; gap: 4px; }

/* Buttons are created by app.js as bare <button> elements; `.active` is the
 * only class it sets. */
.langs button {
  font: 600 11.5px/1 var(--q-font-body);
  letter-spacing: .08em;
  min-width: 34px;
  min-height: 36px;
  padding: 0 7px;
  border: 1px solid var(--q-rule2);
  background: transparent;
  color: var(--q-ink);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}

.langs button:hover { border-color: var(--q-ink); }

.langs button.active {
  background: var(--q-btn);
  border-color: var(--q-btn);
  color: var(--q-btn-ink);
}

/* ── Main column ─────────────────────────────────────────────────────── */
main {
  width: 100%;
  display: grid;
  align-content: start;
}

.card {
  padding: 22px 18px;
  background: var(--q-surface);
  border-bottom: 1px solid var(--q-rule);
}

/* Invitation block — the one yellow surface on the page, same role as the
 * status strip on the ride page. */
.card.intro {
  background: var(--q-acc);
  color: var(--q-acc-ink);
  border-bottom: 0;
  padding: 30px 18px 28px;
}

h1 {
  font: 700 30px/1.1 var(--q-font-display);
  letter-spacing: -.02em;
  text-wrap: balance;
  margin-bottom: 10px;
}

/* The "How it works" section reuses <h1> at section-title size. */
h1.card-subtitle {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: 14px;
}

.lead { font-size: 15px; line-height: 1.45; color: var(--q-acc-ink); opacity: .82; max-width: 44ch; }

ul.benefits {
  list-style: none;
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

ul.benefits li {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15px;
  line-height: 1.4;
  max-width: 46ch;
}

ul.benefits li::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: 5px;
  background: var(--q-acc-ink);
}

/* The first-ride promo is the strongest claim on the page — display size. */
ul.benefits li#t-promo {
  font: 800 22px/1.15 var(--q-font-display);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}

ul.benefits li#t-promo::before { margin-top: 7px; }

/* ── Invite code ─────────────────────────────────────────────────────── */
.code-label {
  font: 600 11px/1 var(--q-font-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--q-mute);
  text-align: center;
  margin-bottom: 12px;
}

.code {
  font: 800 clamp(24px, 9.5vw, 40px)/1 var(--q-font-display);
  letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  /* extra left padding balances the trailing letter-spacing of the last glyph */
  padding: 18px 8px 18px calc(8px + .22em);
  border: 2px solid var(--q-ink);
  overflow-wrap: anywhere;
  user-select: all;
}

.btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  font: 700 13px/1 var(--q-font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  min-height: 48px;
  padding: 15px 18px;
  border: 1px solid var(--q-btn);
  background: var(--q-btn);
  color: var(--q-btn-ink);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.btn:hover {
  background: var(--q-btn-hover);
  border-color: var(--q-btn-hover);
  color: var(--q-btn-hover-ink);
}

.btn:active { opacity: .85; }

.hint {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--q-mute);
  text-align: center;
  max-width: 38ch;
  margin: 12px auto 0;
}

/* ── "Link incomplete" notice (replaces the code card when there is no code) ── */
.notice {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--q-ink2);
}

.notice .ico {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--q-rule);
  color: var(--q-ink);
  font: 800 18px/1 var(--q-font-display);
}

/* ── How it works ────────────────────────────────────────────────────── */
ol.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 12px;
}

ol.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--q-ink2);
  max-width: 46ch;
}

ol.steps li::before {
  content: counter(step);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font: 800 13px/1 var(--q-font-display);
  background: var(--q-acc);
  color: var(--q-acc-ink);
}

.stores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

/* Store tiles are placeholders until the listings go live: quiet outline,
 * muted text, no hover — nothing here is clickable yet. */
.store {
  display: grid;
  gap: 4px;
  text-align: center;
  padding: 12px 10px;
  border: 1px solid var(--q-rule2);
  font: 600 13.5px/1.2 var(--q-font-body);
  color: var(--q-mute);
}

.store .soon {
  font: 500 10.5px/1.2 var(--q-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ── Footer ──────────────────────────────────────────────────────────── */
footer {
  padding: 18px;
  font-size: 12.5px;
  color: var(--q-mute);
  text-align: center;
  border-top: 1px solid var(--q-rule);
}

.hidden { display: none !important; }

:focus-visible { outline: 2px solid var(--q-ink); outline-offset: 2px; }

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

/* ── Tablet: one column with margins ─────────────────────────────────── */
@media (min-width: 700px) {
  header { padding: 16px 40px; }
  main {
    width: min(100% - 64px, 640px);
    margin: 28px auto 36px;
    border: 1px solid var(--q-rule);
  }
  .card { padding: 26px 28px; }
  .card.intro { padding: 36px 28px 32px; }
  h1 { font-size: 34px; }
  .card:last-child { border-bottom: 0; }
  footer { border-top: 0; }
}

/* ── Desktop: invitation left, code card right ───────────────────────── */
@media (min-width: 1000px) {
  main {
    width: min(100% - 80px, 1040px);
    margin: 40px auto 48px;
    border: 0;
    grid-template-columns: 1fr 400px;
    grid-template-areas: "intro code" "how code";
    column-gap: 24px;
    align-items: start;
  }
  .card { border: 1px solid var(--q-rule); }
  .card.intro { grid-area: intro; border: 0; padding: 44px 36px 40px; }
  .card.how { grid-area: how; border-top: 0; padding: 30px 36px; }
  #code-card, #nocode-card {
    grid-area: code;
    position: sticky;
    top: 24px;
    padding: 30px 28px;
  }
  h1 { font-size: 40px; }
  h1.card-subtitle { font-size: 22px; }
  .lead { font-size: 16px; }
  .code { font-size: 44px; }
}