/* Bridge Talk site styles.

   The palette is Bridge Talk's own, copied token for token from frontend/src/theme.css
   rather than picked again here, so the site and the window agree about what colour
   Bridge Talk is. Orange is the accent, lavender the contrast and green the focus ring,
   as they are in the window. Every other colour on the page is mixed from those tokens.

   Light and dark carry their own tokens, as the window's do; the page follows the
   reader's system setting. Nothing is fetched for the type: the headings use the
   system's monospaced face and the text its interface face.
*/

:root {
  --surface: #f6f4f1;
  --panel: #ffffff;
  --raised: #eae6e0;
  --border: #d6d0c8;
  --text: #1c1a18;
  --muted: #6b6560;
  --accent: #b34e00;
  --accent-soft: #e8dccd;
  --secondary: #4338ca;
  --secondary-soft: #e0e0ff;
  --ring: #047857;
  --on-accent: #ffffff;
  --shadow: color-mix(in srgb, var(--text) 18%, transparent);
  --glow: color-mix(in srgb, var(--accent) 22%, transparent);
  --mono: 'Cascadia Code', Consolas, ui-monospace, 'SF Mono', monospace;
  --sans: 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0c0c0e;
    --panel: #16161a;
    --raised: #202027;
    --border: #2e2e37;
    --text: #e9e6e2;
    --muted: #96918a;
    --accent: #ff7f11;
    --accent-soft: #3a2510;
    --secondary: #b3bcff;
    --secondary-soft: #23233a;
    --ring: #34d399;
    --on-accent: #0c0c0e;
    --shadow: color-mix(in srgb, #000000 60%, transparent);
    --glow: color-mix(in srgb, var(--accent) 30%, transparent);
  }
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* A thin line of the two brand colours across the very top of the page. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--secondary), transparent);
  z-index: 10;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Hero. A soft glow of the accent sits behind the icon and the name. */
header.hero {
  position: relative;
  text-align: center;
  padding: 96px 0 56px;
}
header.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38rem 20rem at 50% 18%, var(--glow), transparent 70%),
    radial-gradient(30rem 16rem at 72% 42%, color-mix(in srgb, var(--secondary) 12%, transparent), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.hero img.logo {
  width: 128px;
  height: 128px;
  filter: drop-shadow(0 18px 36px var(--shadow));
}
.hero h1 {
  font-family: var(--mono);
  font-size: clamp(44px, 9vw, 76px);
  font-weight: 700;
  color: var(--accent);
  margin: 18px 0 4px;
  letter-spacing: 1px;
  text-shadow: 0 0 28px var(--glow);
}
.hero .tagline {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 26px;
}
.hero p.pitch {
  max-width: 680px;
  margin: 0 auto 34px;
  font-size: 19px;
}
.hero p.pitch strong { color: var(--accent); font-weight: 600; }

.cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 24px;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid var(--border);
  transition: transform 0.15s, background 0.18s, border-color 0.18s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 85%, var(--text)); }
.btn.ghost { background: var(--panel); color: var(--text); }
.btn.ghost:hover { background: var(--raised); border-color: var(--accent); }
/* The donate button carries artwork before its label. The mark is sized in em
   against the button's own type; at one line box the artwork could not be read,
   so it takes 2.7em and the button is deliberately taller than a text-only one. */
.btn-donate { display: inline-flex; align-items: center; gap: 10px; }
.btn-donate img { display: block; height: 2.7em; width: auto; }

.platform-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.5px;
}

/* Screenshots */
.shot { margin: 0; text-align: center; }
.shot img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--muted);
  box-shadow: 0 24px 64px var(--shadow);
}
.shot figcaption, .caption { margin-top: 14px; font-size: 14px; color: var(--muted); }
.hero-shot { max-width: 940px; margin: 56px auto 0; }

/* Sections */
section { padding: 56px 0; }
.eyebrow {
  font-family: var(--mono);
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 28px;
}
h2.section-title {
  font-family: var(--mono);
  color: var(--text);
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 14px;
}
.section-sub { color: var(--muted); margin: 0 0 36px; max-width: 680px; font-size: 17px; }

/* What your ship might say: lines as they would come over the comms. */
.lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.line {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 18px 20px;
}
.line .moment {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--secondary);
  margin: 0 0 6px;
}
.line blockquote { margin: 0; font-size: 18px; color: var(--text); }
.line blockquote::before { content: "\201C"; color: var(--accent); }
.line blockquote::after { content: "\201D"; color: var(--accent); }

/* The ready-made voices */
.voice-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.voice-group {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.voice-group h3 {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--accent);
  margin: 0 0 12px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--secondary-soft);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--secondary) 30%, transparent);
}
.voices-note { margin: 22px 0 0; color: var(--muted); font-size: 15px; text-align: center; }

/* Feature cards */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  transition: border-color 0.2s, transform 0.2s;
}
.features .card:hover { border-color: var(--accent); transform: translateY(-3px); }
.card .icon { font-size: 24px; line-height: 1; }
.card h3 { margin: 12px 0 6px; font-size: 17px; color: var(--text); font-family: var(--mono); }
.card p { margin: 0; color: var(--muted); font-size: 15px; }

/* Recording a voice of your own */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.steps li {
  counter-increment: step;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px;
  color: var(--muted);
  font-size: 15px;
}
.steps li::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
  margin-bottom: 12px;
}
.steps strong { display: block; color: var(--text); font-family: var(--mono); font-size: 16px; margin-bottom: 4px; }

/* A look inside: the panes two by two. */
.gallery {
  --gallery-gap: 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px var(--gallery-gap);
}
/* A shot left alone on the last row is centred at a column's width rather than hanging at the left. */
.gallery .shot:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc((100% - var(--gallery-gap)) / 2);
}

/* Common questions */
.faq { display: grid; gap: 14px; }
.faq .card h3 { font-family: var(--sans); font-size: 16px; margin: 0 0 8px; color: var(--accent); }
.faq .card p { color: var(--text); }

/* The comparison with other tools: a table that scrolls sideways inside its own box on a
   narrow screen rather than widening the page. Bridge Talk's column sits on the accent's
   soft ground so it reads as the subject. */
.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.compare { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th, .compare thead td { font-family: var(--mono); color: var(--text); background: var(--raised); }
.compare thead th:nth-child(2) { color: var(--accent); }
.compare tbody th { font-family: var(--mono); font-size: 14px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.compare td { color: var(--muted); }
.compare td:nth-child(2) { color: var(--text); background: var(--accent-soft); }
.compare-note { margin: 18px 0 0; color: var(--muted); font-size: 14px; max-width: 760px; }

/* Download */
#download { text-align: center; }
#download .eyebrow, #download h2.section-title { text-align: left; }
#download .section-sub { text-align: left; }
.dl-version {
  display: block;
  width: fit-content;
  margin: 4px auto 0;
  font-size: 14px;
  font-family: var(--mono);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 14px;
}
.downloads { display: grid; grid-template-columns: minmax(0, 420px); justify-content: center; margin-top: 28px; }
.dl-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 18px 48px var(--shadow);
}
.dl-card .ico { font-size: 30px; }
.dl-card h3 { margin: 4px 0 0; font-size: 18px; color: var(--text); font-family: var(--mono); }
.dl-card .req { color: var(--muted); font-size: 13px; margin: 0; }
.dl-card .btn { margin: 14px auto 4px; }
.dl-card .meta { color: var(--muted); font-size: 12.5px; min-height: 1.2em; margin: 0; }
.dl-card .how { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.dl-links { color: var(--muted); font-size: 14px; margin: 18px 0 0; }

footer {
  border-top: 1px solid var(--border);
  margin-top: 32px;
  padding: 32px 0 56px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
footer .mono { font-family: var(--mono); color: var(--accent); }

@media (max-width: 720px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery .shot:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
  header.hero { padding-top: 72px; }
}

/* Entrance animation, left out for a reader who has asked for less motion. */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fade { animation: fadeUp 0.55s ease both; }
.d1 { animation-delay: 0.08s; }
.d2 { animation-delay: 0.18s; }
.d3 { animation-delay: 0.28s; }
.d4 { animation-delay: 0.38s; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade { animation: none; }
  .btn:hover, .features .card:hover { transform: none; }
}