/* Tandem marketing site — candy-pop. Tokens mirror handoff-website/STYLE_GUIDE.md §1–§4.
   Self-hosted Baloo 2 (the only family). Light theme only, by design. */

@font-face { font-family: 'Baloo 2'; font-weight: 500; font-display: swap; src: url('/assets/fonts/Baloo2-500.ttf') format('truetype'); }
@font-face { font-family: 'Baloo 2'; font-weight: 700; font-display: swap; src: url('/assets/fonts/Baloo2-700.ttf') format('truetype'); }
@font-face { font-family: 'Baloo 2'; font-weight: 800; font-display: swap; src: url('/assets/fonts/Baloo2-800.ttf') format('truetype'); }

:root {
  --bg: #F6EFDF; --card: #FFFDF6; --ink: #2A2118; --inkSoft: #7A6E5C;
  --accent: #FF6B57; --accentSoft: #FCE0D9; --onAccent: #FFF7EA;
  --muted: #A08B72; --hair: #EFE4CE; --line: #2A2118;
  --pop: 4px 4px 0 #2A2118; --popLg: 7px 7px 0 #2A2118;
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Baloo 2', system-ui, sans-serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--ink); }
img { max-width: 100%; }

@keyframes pulseK { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* shared shell width */
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* ── nav ── */
.nav { display: flex; align-items: center; gap: 26px; padding-top: 22px; padding-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 0; }
.glyph {
  width: 38px; height: 38px; border-radius: 12px; background: var(--accent);
  border: 3px solid var(--line); box-shadow: 3px 3px 0 var(--line);
  display: inline-flex; align-items: center; justify-content: center; transform: rotate(-6deg); flex: none;
}
.glyph > span { display: inline-flex; gap: 3.5px; }
.glyph b { width: 4.5px; height: 17px; border-radius: 4px; display: block; }
.glyph .barCream { background: #FFF7EA; }
.glyph .barInk { background: #2A2118; }
.wordmark { font-size: 27px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.nav-spacer { flex: 1; }
.nav-link { font-size: 15px; font-weight: 800; color: var(--inkSoft); }
.pill-cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--accent); border: 3px solid var(--line); box-shadow: var(--pop);
  font-weight: 800; font-size: 15px; color: var(--onAccent); white-space: nowrap; cursor: pointer;
}
.pill-cta:hover { color: var(--onAccent); }

/* ── footer ── */
.footer-band { background: var(--card); border-top: 3px solid var(--line); }
.footer { display: flex; align-items: center; gap: 22px; padding-top: 30px; padding-bottom: 30px; flex-wrap: wrap; }
.footer .copy { font-size: 13px; font-weight: 700; color: var(--muted); }
.footer .flex1 { flex: 1; }
.footer a { font-size: 14px; font-weight: 800; color: var(--inkSoft); }
.footer a.mail { color: var(--accent); }
.footer a:hover { color: var(--ink); }
.glyph.sm { width: 28px; height: 28px; border-radius: 9px; border-width: 2.5px; box-shadow: none; }
.glyph.sm b { width: 3.5px; height: 13px; border-radius: 3px; }

/* ── doc pages (terms / privacy / support) ── */
.doc { max-width: 760px; margin: 0 auto; padding: 20px 32px 80px; }
.back-link { display: inline-block; font-size: 14.5px; font-weight: 800; color: var(--inkSoft); }
.back-link:hover { color: var(--ink); }
.doc-title { font-size: 46px; font-weight: 800; letter-spacing: -1px; margin: 18px 0 0; text-wrap: balance; }
.doc-updated { font-size: 14px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.doc-body { margin-top: 26px; }
.doc-body h2 { font-size: 22px; font-weight: 800; letter-spacing: -.3px; margin: 30px 0 0; }
.doc-body h2:first-child { margin-top: 0; }
.doc-body p { font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.6; margin: 10px 0 0; }
.doc-body ul { margin: 10px 0 0; padding-left: 20px; }
.doc-body li { font-size: 15.5px; font-weight: 500; color: var(--ink); line-height: 1.6; margin-top: 6px; }
.doc-body strong { font-weight: 800; }
.doc-body a { font-weight: 700; border-bottom: 2px solid var(--accent); }
.doc-note {
  font-size: 13.5px; font-weight: 700; color: var(--muted); line-height: 1.55;
  margin-top: 32px; padding-top: 18px; border-top: 2px solid var(--hair);
}

/* support contact card + faq */
.contact-card {
  margin-top: 26px; background: var(--card); border: 3px solid var(--line); border-radius: 22px;
  box-shadow: var(--pop); padding: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.contact-card .t1 { font-size: 19px; font-weight: 800; }
.contact-card .t2 { font-size: 14px; font-weight: 700; color: var(--inkSoft); margin-top: 3px; }
.contact-card .grow { flex: 1; min-width: 220px; }
.contact-btn {
  display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border-radius: 16px;
  background: var(--accent); border: 3px solid var(--line); box-shadow: var(--pop);
  font-weight: 800; font-size: 15px; color: var(--onAccent);
}
.contact-btn:hover { color: var(--onAccent); }
.faq { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.faq-card { background: var(--card); border: 2.5px solid var(--line); border-radius: 18px; box-shadow: var(--pop); padding: 18px 20px; }
.faq-card .q { font-size: 17px; font-weight: 800; }
.faq-card .a { font-size: 14.5px; font-weight: 500; color: var(--inkSoft); margin-top: 6px; line-height: 1.55; }

@media (max-width: 640px) {
  .wrap, .doc { padding-left: 20px; padding-right: 20px; }
  .doc-title { font-size: 38px; }
}