/* Shared base styles for Tansei's simple utility pages (Privacy, Terms, FAQ,
   Contact). Extracted from the homepage's design tokens, nav, and footer so
   these pages match without duplicating the homepage's full stylesheet. */
:root {
  --bg: #ffffff;
  --fill: #f5f5f7;
  --fill-2: #ececee;
  --line: rgba(0, 0, 0, 0.08);
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  /* Darkened from #86868b: that value is ~3.7:1 on white, under the 4.5:1
     WCAG AA floor for the small text this is used on. */
  --ink-3: #73737a;
  --accent: #d92e76;
  --accent-ink: #b0245e;
  --violet: #8b5cf6;
  --radius: 20px;
  --maxw: 1080px;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI',
    Helvetica, Arial, sans-serif;
}
/* Dark mode follows the choice saved on the homepage (or the Mac's own
   appearance when no choice has been made). Same tokens as the homepage. */
[data-theme='dark'] {
  --bg: #161617;
  --fill: #232326;
  --fill-2: #2e2e32;
  --line: rgba(255, 255, 255, 0.14);
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #98989d;
  --accent: #f4629f;
  --accent-ink: #ff86b9;
  --violet: #a78bfa;
  color-scheme: dark;
}
[data-theme='dark'] .btn-primary {
  color: #1d1d1f;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  /* The blog promo band breaks full-bleed with 100vw; clip keeps a reserved
     desktop scrollbar from adding a stray horizontal scroll (same fix as
     the homepage's carousel). */
  overflow-x: clip;
}
body {
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}
::selection {
  background: rgba(217, 46, 118, 0.2);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
a {
  color: inherit;
  text-decoration: none;
}
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 980px;
  padding: 12px 22px;
  transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
  cursor: pointer;
  border: none;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
}
.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btn-sm {
  font-size: 14px;
  padding: 9px 16px;
}

/* Nav */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
[data-theme='dark'] nav {
  background: rgba(22, 22, 23, 0.72);
}
.nav-inner {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.brand-wordmark img {
  display: block;
  border-radius: 22%;
  flex: none;
}
/* The wordmark is set type now, not artwork: crisp at every size and
   theme-aware for free (no dark-mode invert hack). */
.wordmark-text {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
footer .wordmark-text {
  font-size: 18px;
}
.nav-links {
  display: flex;
  gap: 26px;
  font-size: 13px;
  color: var(--ink-2);
  margin-left: 6px;
}
.nav-links a:hover {
  color: var(--ink);
}
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Light/dark toggle — identical to the homepage's, so every page's header
   behaves the same. Sun shows in dark mode, moon in light. */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fill);
  color: var(--ink);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
  flex: none;
}
.theme-toggle:hover {
  background: var(--fill-2);
}
.theme-toggle .sun {
  display: none;
}
[data-theme='dark'] .theme-toggle .sun {
  display: block;
}
[data-theme='dark'] .theme-toggle .moon {
  display: none;
}

/* Simple page content */
main {
  padding: 64px 0 100px;
}
.page-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
}
h1 {
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin-top: 10px;
}
h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 40px 0 12px;
}
.updated {
  color: var(--ink-3);
  font-size: 14px;
  margin-top: 14px;
}
.prose {
  max-width: 62ch;
  margin-top: 32px;
}
.prose p {
  color: var(--ink-2);
  font-size: 16px;
  margin-bottom: 16px;
}
.prose ul {
  margin: 0 0 16px 20px;
  color: var(--ink-2);
  font-size: 16px;
}
.prose li {
  margin-bottom: 6px;
}
.disclaimer {
  margin-top: 40px;
  padding: 16px 18px;
  background: var(--fill);
  border-radius: 14px;
  font-size: 13px;
  color: var(--ink-2);
  max-width: 62ch;
}
.faq-item {
  max-width: 62ch;
  margin-top: 28px;
}
.faq-item h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}
.faq-item p {
  color: var(--ink-2);
  font-size: 15px;
}
.faq-item p + p {
  margin-top: 8px;
}
.contact-card {
  max-width: 46ch;
  margin-top: 32px;
  background: var(--fill);
  border-radius: 18px;
  padding: 28px;
}
.contact-card p {
  color: var(--ink-2);
  font-size: 15px;
  margin-bottom: 18px;
}

/* Footer */
footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 24px;
}
.foot-grid h3 {
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 14px;
  font-weight: 600;
}
.foot-grid a {
  display: block;
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.foot-grid a:hover {
  color: var(--ink);
}
.foot-bottom {
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-3);
  flex-wrap: wrap;
  gap: 10px;
}
.muted {
  color: var(--ink-2);
}
/* Footer social row — X + Instagram, quiet by default, brand on hover. */
.foot-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.foot-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink-2);
  transition: color 0.15s, background 0.15s;
}
.foot-social a:hover {
  color: var(--accent);
  background: var(--accent-tint);
}

/* Nav collapses at the same width as the homepage (its inline style uses 860),
   so every page's header behaves identically: brand + download CTA only, the
   middle links (also in the footer) tuck away before they can crowd or clip. */
@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
}
@media (max-width: 680px) {
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}