/* ─────── WristBuddy design tokens ─────── */
:root {
  /* Color */
  --wb-ink:        #1B1B1F;
  --wb-ink-deep:   #0A0A0C;
  --wb-mint:       #63E6E2;
  --wb-mint-dark:  #0FB6B0;
  --wb-bone:       #F6F2EA;
  --wb-line:       rgba(27, 27, 31, 0.08);
  --wb-mute:       rgba(27, 27, 31, 0.55);
  --wb-mute-dark:  rgba(242, 242, 247, 0.65);

  /* Type */
  --wb-font:       'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --wb-font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Layout */
  --wb-radius:     14px;     /* card / button radius */
  --wb-radius-pill: 999px;
  --wb-maxwidth:   720px;    /* readable column for the privacy doc */
}

/* ─────── Base ─────── */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--wb-font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  background: var(--wb-bone);
  color: var(--wb-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─────── Typography ─────── */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.030em; line-height: 1.12; margin: 1.6em 0 0.5em; text-wrap: balance; }
h1 { font-size: 44px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; letter-spacing: -0.022em; }
p  { margin: 0.7em 0; max-width: var(--wb-maxwidth); text-wrap: pretty; }
strong { font-weight: 700; }
em     { font-style: italic; }

a {
  color: var(--wb-mint-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.12s;
}
a:hover { color: var(--wb-ink); }

code, pre {
  font-family: var(--wb-font-mono);
  font-size: 14px;
  background: rgba(27, 27, 31, 0.05);
  border-radius: 6px;
}
code { padding: 2px 6px; }
pre { padding: 14px 16px; overflow-x: auto; }

ul, ol { padding-left: 1.4em; max-width: var(--wb-maxwidth); }
li     { margin: 0.35em 0; }

hr { border: 0; border-top: 1px solid var(--wb-line); margin: 2.4em 0; }

/* ─────── Tables (extension — policy uses two) ─────── */
table {
  width: 100%;
  max-width: var(--wb-maxwidth);
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: 15px;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--wb-line);
}
th {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--wb-mute);
  border-bottom: 1.5px solid var(--wb-line);
}
tbody tr:last-child td { border-bottom: none; }

/* ─────── Layout shell ─────── */
.wb-page { max-width: 880px; margin: 0 auto; padding: 56px 24px 96px; }

/* ─────── Site header ─────── */
.wb-header { display: flex; align-items: center; gap: 14px; margin-bottom: 36px; }
.wb-header img.logo { width: 44px; height: 44px; border-radius: 10px; }
.wb-header .brand {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
}
.wb-header .name {
  font-weight: 800; font-size: 22px; letter-spacing: -0.025em; line-height: 1;
  color: var(--wb-ink);
  text-decoration: none;
}
.wb-header .name .accent { color: var(--wb-mint-dark); }
.wb-header .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ─────── Language switcher (native <select> styled as a pill) ─────── */
.wb-lang-switcher {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--wb-line);
  color: var(--wb-mute);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 30px 8px 14px;
  border-radius: var(--wb-radius-pill);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  /* tiny chevron */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}
.wb-lang-switcher:hover {
  color: var(--wb-ink);
  border-color: rgba(27, 27, 31, 0.20);
}

/* ─────── Dark-mode toggle button ─────── */
.wb-theme-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--wb-line);
  color: var(--wb-mute);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: var(--wb-radius-pill);
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wb-theme-toggle:hover {
  color: var(--wb-ink);
  border-color: rgba(27, 27, 31, 0.20);
}
.wb-theme-toggle .icon { font-size: 14px; line-height: 1; }

/* ─────── Site footer ─────── */
.wb-footer {
  margin-top: 80px; padding-top: 28px; border-top: 1px solid var(--wb-line);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--wb-mute);
  flex-wrap: wrap;
  gap: 12px;
}
.wb-footer .left { display: flex; align-items: center; gap: 8px; }
.wb-footer .left img { width: 22px; height: 22px; border-radius: 5px; }

/* ─────── Dark variant (toggled by JS via body.wb-dark) ─────── */
body.wb-dark {
  background: var(--wb-ink);
  color: rgba(242, 242, 247, 0.92);
}
body.wb-dark .wb-header .name { color: rgba(242, 242, 247, 1); }
body.wb-dark .wb-header .name .accent { color: var(--wb-mint); }
body.wb-dark a { color: var(--wb-mint); }
body.wb-dark a:hover { color: #fff; }
body.wb-dark code, body.wb-dark pre { background: rgba(99, 230, 226, 0.10); color: var(--wb-mint); }
body.wb-dark hr { border-top-color: rgba(255, 255, 255, 0.08); }
body.wb-dark .wb-footer { border-top-color: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); }
body.wb-dark th { color: var(--wb-mute-dark); border-bottom-color: rgba(255, 255, 255, 0.10); }
body.wb-dark td { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.wb-dark .wb-theme-toggle {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--wb-mute-dark);
}
body.wb-dark .wb-theme-toggle:hover,
body.wb-dark .wb-lang-switcher:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
body.wb-dark .wb-lang-switcher {
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--wb-mute-dark);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
}
body.wb-dark .wb-lang-switcher option {
  background: var(--wb-ink);
  color: rgba(242, 242, 247, 0.92);
}

/* ═══════════════════════════════════════════════════════════════════════
   Marketing-site extensions
   ─────────────────────────────────────────────────────────────────────── */

/* Top nav between brand + actions */
.wb-nav {
  display: flex;
  gap: 18px;
  margin-left: 24px;
}
.wb-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--wb-mute);
  text-decoration: none;
  transition: color 0.12s;
}
.wb-nav a:hover { color: var(--wb-ink); }
body.wb-dark .wb-nav a { color: var(--wb-mute-dark); }
body.wb-dark .wb-nav a:hover { color: #fff; }

/* Wider landing-page shell (overrides .wb-page max-width) */
.wb-page--wide { max-width: 1080px; }

/* ─────── Hero ─────── */
.wb-hero {
  padding: 48px 0 64px;
  text-align: left;
}
.wb-hero h1 {
  font-size: 64px;
  letter-spacing: -0.040em;
  line-height: 1.05;
  margin-top: 0;
  margin-bottom: 16px;
  max-width: 16ch;
}
.wb-hero .tagline {
  font-size: 18px;
  color: var(--wb-mute);
  max-width: 50ch;
  margin-bottom: 32px;
}
body.wb-dark .wb-hero .tagline { color: var(--wb-mute-dark); }
@media (max-width: 600px) {
  .wb-hero h1 { font-size: 44px; }
  .wb-hero .tagline { font-size: 16px; }
}

/* ─────── Store badges row ─────── */
.wb-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.wb-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--wb-radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.12s, box-shadow 0.12s;
}
.wb-badge .glyph {
  font-size: 22px;
  line-height: 1;
}
.wb-badge .label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
}
.wb-badge .label .small {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.wb-badge--live {
  background: var(--wb-ink);
  color: #fff;
}
.wb-badge--live:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(27, 27, 31, 0.22);
  color: #fff;
}
.wb-badge--coming {
  background: transparent;
  color: var(--wb-mute);
  border: 1px solid var(--wb-line);
  cursor: default;
}
body.wb-dark .wb-badge--live { background: var(--wb-mint); color: var(--wb-ink); }
body.wb-dark .wb-badge--live:hover { color: var(--wb-ink); }
body.wb-dark .wb-badge--coming {
  color: var(--wb-mute-dark);
  border-color: rgba(255, 255, 255, 0.12);
}

/* ─────── Hero device row (mock or real screenshots) ─────── */
.wb-hero-art {
  margin-top: 16px;
  padding: 36px;
  border-radius: var(--wb-radius);
  background: linear-gradient(135deg, rgba(99, 230, 226, 0.10), rgba(15, 182, 176, 0.05));
  border: 1px solid var(--wb-line);
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
body.wb-dark .wb-hero-art {
  background: linear-gradient(135deg, rgba(99, 230, 226, 0.08), rgba(15, 182, 176, 0.04));
  border-color: rgba(255, 255, 255, 0.06);
}
.wb-hero-art .placeholder-frame {
  width: 220px;
  height: 440px;
  border-radius: 32px;
  background: rgba(27, 27, 31, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--wb-mute);
  font-size: 12px;
  text-align: center;
  padding: 16px;
}
.wb-hero-art .placeholder-frame.watch {
  width: 180px;
  height: 220px;
  border-radius: 24px;
  align-self: center;
}
body.wb-dark .wb-hero-art .placeholder-frame {
  background: rgba(255, 255, 255, 0.05);
  color: var(--wb-mute-dark);
}

/* ─────── Feature cards (3-column on desktop, stack on mobile) ─────── */
.wb-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 48px 0;
}
@media (max-width: 800px) {
  .wb-features { grid-template-columns: 1fr; }
}
.wb-feature-card {
  padding: 24px;
  background: rgba(27, 27, 31, 0.025);
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-radius);
}
body.wb-dark .wb-feature-card {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.06);
}
.wb-feature-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
}
.wb-feature-card p {
  margin: 0;
  font-size: 14px;
  color: var(--wb-mute);
  max-width: none;
}
body.wb-dark .wb-feature-card p { color: var(--wb-mute-dark); }
.wb-feature-card .icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: rgba(99, 230, 226, 0.15);
  color: var(--wb-mint-dark);
  margin-bottom: 12px;
}
body.wb-dark .wb-feature-card .icon { color: var(--wb-mint); }

/* ─────── Tally embed wrapper ─────── */
.wb-tally-wrap {
  margin: 32px 0;
  border-radius: var(--wb-radius);
  overflow: hidden;
  border: 1px solid var(--wb-line);
  background: rgba(27, 27, 31, 0.02);
}
.wb-tally-wrap iframe {
  width: 100%;
  border: 0;
  display: block;
}
body.wb-dark .wb-tally-wrap {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}

/* ─────── Footer nav links (right column) ─────── */
.wb-footer .footer-links {
  display: flex;
  gap: 18px;
}
.wb-footer .footer-links a {
  color: var(--wb-mute);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.12s;
}
.wb-footer .footer-links a:hover { color: var(--wb-ink); }
body.wb-dark .wb-footer .footer-links a { color: var(--wb-mute-dark); }
body.wb-dark .wb-footer .footer-links a:hover { color: #fff; }

/* ─────── Coming-soon notice block ─────── */
.wb-notice {
  margin: 24px 0;
  padding: 14px 18px;
  background: rgba(15, 182, 176, 0.08);
  border-left: 3px solid var(--wb-mint-dark);
  border-radius: 6px;
  font-size: 14px;
  color: var(--wb-ink);
}
body.wb-dark .wb-notice {
  background: rgba(99, 230, 226, 0.08);
  border-left-color: var(--wb-mint);
  color: rgba(242, 242, 247, 0.92);
}