/* Shared chrome + document styles for the legal pages (privacy, terms, data-deletion).
   Tokens and nav/footer rules mirror index.html so the pages read as one site. */

:root {
  --white: #ffffff;
  --text: #0a1020;
  --text-soft: #333b52;
  --text-muted: #6b7280;
  --border: rgba(66, 87, 138, 0.15);
  --border-light: #f3f4f8;
  --bg-gray: #f5f6fa;
  --bg-gray-2: #eceff5;
  --blue: #3758f9;
  --blue-2: #5670fa;
  --blue-hover: #2a47d8;
  --blue-soft: #e3ebff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: hidden; width: 100%; }
::selection { background: rgba(55, 88, 249, 0.18); color: var(--text); }

body {
  font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'ss01' 1, 'cv11' 1, 'kern' 1;
  font-optical-sizing: auto;
  background-color: var(--white);
  background-image:
    linear-gradient(to right, rgba(55, 88, 249, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(55, 88, 249, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  text-rendering: optimizeLegibility;
}

.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; position: relative; }

/* Nav */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}
nav.scrolled { border-bottom-color: var(--border); background: rgba(255, 255, 255, 0.85); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--text-soft);
  padding: 8px 14px; border-radius: 100px; text-decoration: none;
  transition: color 0.15s, background-color 0.15s; letter-spacing: -0.005em;
}
.nav-links a:hover { color: var(--text); background: rgba(55,88,249,0.06); }
.nav-right { display: flex; align-items: center; gap: 14px; }
@media (max-width: 860px) { .nav-links { display: none; } }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
.logo img { display: block; height: 26px; width: auto; }

/* Buttons */
.btn-primary {
  font-family: 'Inter Tight', sans-serif; font-size: 16px; font-weight: 500;
  padding: 14px 28px; background: linear-gradient(180deg, #3f64fa 0%, #3050f0 100%);
  color: white; border: none; border-radius: 999px; cursor: pointer;
  transition: transform 0.12s, background 0.15s, box-shadow 0.15s; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0px 6px 28px -1px rgba(55, 88, 249, 0.28), 0px 4px 9px 0px rgba(0, 0, 0, 0.09),
    inset 0px 10px 32px 0px rgba(255, 255, 255, 0.17), inset 2px 2px 2px 0px rgba(186, 207, 234, 0.4),
    inset -1px -1px 6px 0px rgba(7, 36, 137, 0.25);
  outline: none;
}
.btn-primary:hover { background: linear-gradient(180deg, #3050f0 0%, #2845e0 100%); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:focus-visible { outline: 3px solid rgba(55, 88, 249, 0.5); outline-offset: 3px; }
.btn-sm { padding: 10px 20px; font-size: 15px; }
.nav-cta { padding: 11px 22px; min-height: 0; font-size: 15px; }
.nav-login {
  font-size: 15px; font-weight: 500; color: var(--text-soft); text-decoration: none;
  padding: 9px 14px; border-radius: 100px; white-space: nowrap;
  transition: color 0.15s, background-color 0.15s;
}
.nav-login:hover { color: var(--text); background: rgba(55,88,249,0.06); }

/* Document */
.legal-wrap { padding: 128px 0 96px; }
.legal {
  max-width: 820px; margin: 0 auto; background: var(--white);
  border: 1px solid var(--border); border-radius: 22px;
  padding: 56px 56px 64px;
  box-shadow: 0 2px 4px rgba(10, 16, 32, 0.03), 0 14px 44px -12px rgba(10, 16, 32, 0.10);
}
.legal h1 { font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 10px; }
.legal h2 {
  font-size: 21px; font-weight: 600; letter-spacing: -0.02em;
  margin: 44px 0 12px; padding-top: 26px; border-top: 1px solid var(--border-light);
}
.legal h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; margin: 26px 0 8px; }
.legal p { color: var(--text-soft); margin: 12px 0; }
.legal ul, .legal ol { padding-left: 1.35rem; margin: 12px 0; color: var(--text-soft); }
.legal li { margin: 7px 0; }
.legal li strong, .legal p strong { color: var(--text); font-weight: 600; }
.legal a { color: var(--blue); text-decoration: none; border-bottom: 1px solid rgba(55, 88, 249, 0.28); }
.legal a:hover { color: var(--blue-hover); border-bottom-color: var(--blue-hover); }
.legal .meta { color: var(--text-muted); font-size: 14.5px; margin-bottom: 8px; }
.legal .lede { font-size: 17.5px; color: var(--text-soft); margin-top: 22px; }
.legal code {
  background: var(--bg-gray); border: 1px solid var(--border-light);
  padding: 2px 7px; border-radius: 6px; font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.legal table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 15px; }
.legal th, .legal td { border: 1px solid var(--border); padding: 11px 14px; text-align: left; vertical-align: top; color: var(--text-soft); }
.legal th { background: var(--bg-gray); font-weight: 600; color: var(--text); }
.legal .box {
  background: var(--bg-gray); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 24px; margin: 22px 0;
}
.legal-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 40px; }
.legal-nav a {
  font-size: 14px; font-weight: 500; color: var(--text-soft); text-decoration: none;
  padding: 9px 16px; border: 1px solid var(--border); border-radius: 100px;
  background: var(--white); transition: color 0.15s, border-color 0.15s;
}
.legal-nav a:hover { color: var(--blue); border-color: var(--blue); }

/* Footer */
footer { border-top: 1px solid var(--border); padding: 44px 0; background: var(--bg-gray); position: relative; z-index: 1; }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-inner .logo img { height: 24px; }
.foot-copy { font-size: 13.5px; color: var(--text-muted); }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { font-size: 13.5px; color: var(--text-muted); text-decoration: none; }
.foot-links a:hover { color: var(--text); }

@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .nav-inner { height: 62px; }
  .logo { font-size: 16px; gap: 8px; }
  .logo img { height: 22px; }
  .nav-right { gap: 4px; }
  .nav-right .btn-sm { padding: 8px 14px; font-size: 13px; flex-shrink: 0; }
  .nav-login { font-size: 13px; padding: 8px 10px; }
  .legal-wrap { padding: 96px 0 64px; }
  .legal { padding: 32px 22px 40px; border-radius: 18px; }
  .legal h1 { font-size: 30px; }
  .legal h2 { font-size: 19px; margin-top: 36px; }
  .legal table { display: block; overflow-x: auto; }
}