/* XRG — shared stylesheet for legal/policy pages
   Tokens mirror xrg-styles.css so these pages stay visually consistent
   with the main site (dark gradient canvas, gold/ember/navy/sky accents). */

:root{
  --bg-0: #0A0C22;
  --bg-1: #10122B;
  --ink: #F4F3FF;
  --ink-soft: #B9BCDD;
  --ink-faint: #7D82AC;

  --gold: #FFFFFF;
  --gold-2: #BEE4F7;
  --ember: #3E8FD0;
  --ember-2: #6FC6EA;

  --navy: #16224F;
  --blue: #2F6FD1;
  --sky: #6FC6EA;
  --teal: #22D3A6;

  --glass: rgba(255,255,255,.06);
  --glass-strong: rgba(255,255,255,.11);
  --glass-border: rgba(255,255,255,.16);

  --grad-warm: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 45%, var(--ember) 100%);
  --grad-cool: linear-gradient(135deg, var(--navy) 0%, var(--blue) 55%, var(--sky) 100%);
  --grad-mix: linear-gradient(120deg, var(--gold) 0%, var(--ember) 32%, var(--blue) 68%, var(--sky) 100%);

  --radius-lg: 20px;
  --radius-pill: 999px;

  --font-display-en: 'Plus Jakarta Sans', sans-serif;
  --font-display-ja: 'Zen Kaku Gothic New', sans-serif;
  --font-body-en: 'Inter', sans-serif;
  --font-body-ja: 'Noto Sans JP', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }

body{
  background: var(--bg-0);
  color: var(--ink-soft);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}
html[lang="en"] body{ font-family: 'Inter', sans-serif; }

a{ color: inherit; }

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ---- MINIMAL TOP BAR (legal pages only) ---- */
.legal-topbar{
  position: relative;
  background: var(--bg-1);
  border-bottom: 1px solid var(--glass-border);
  padding: 18px 0;
}
.legal-topbar::before{
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--grad-mix);
}
.legal-topbar .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 14px;
}
.legal-logo{
  display:flex; align-items:center; gap:10px;
  font-weight:800;
  letter-spacing: 0.02em;
  font-size: 15px;
  color: var(--ink);
  text-decoration:none;
}
.legal-logo img{ height: 26px; width:auto; display:block; filter: brightness(0) invert(1); }
.legal-logo .accent{ color: var(--gold); }
.legal-back{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration:none;
  border: 1px solid var(--glass-border);
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.legal-back:hover{ border-color: var(--sky); color: var(--ink); background: var(--glass); }

.legal-topbar-right{
  display:flex;
  align-items:center;
  gap: 16px;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ---- LANG TOGGLE (legal pages) ---- */
.lang-toggle{
  position: relative; display:flex; align-items:center;
  width: 68px; height: 30px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass);
  cursor:pointer;
  padding: 3px;
  font-family: var(--font-mono);
}
.lang-opt{ flex:1; text-align:center; font-size: .66rem; font-weight:700; z-index:2; color: var(--ink-soft); opacity:.6; transition: opacity .2s ease, color .2s ease; }
.lang-pill{
  position:absolute; top:3px; left:3px;
  width: calc(50% - 3px); height: calc(100% - 6px);
  background: linear-gradient(135deg, rgba(199,149,56,.92) 0%, rgba(107,79,31,.9) 100%);
  border-radius: var(--radius-pill);
  transition: transform .25s ease;
  box-shadow: 0 4px 14px -4px rgba(184,140,58,.6);
}
html[lang="en"] .lang-pill{ transform: translateX(100%); }
html[lang="ja"] .lang-opt[data-val="ja"], html[lang="en"] .lang-opt[data-val="en"]{ color:#F5E6C8; opacity:1; }

/* ---- LEGAL CONTENT ---- */
.legal{
  padding: 64px 0 110px;
  max-width: 820px;
}
.legal .eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--sky);
  background: rgba(111,198,234,.12);
  border: 1px solid rgba(111,198,234,.35);
  display:inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.legal h1{
  font-family: var(--font-display-ja), var(--font-display-en), sans-serif;
  font-weight:800;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0 0 12px;
}
html[lang="en"] .legal h1{ font-family: var(--font-display-en), sans-serif; }
.legal .meta{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  margin-bottom: 40px;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 28px;
}
.legal h2{
  font-family: var(--font-display-ja), var(--font-display-en), sans-serif;
  font-size: 19px;
  font-weight:700;
  color: var(--ink);
  margin: 44px 0 14px;
}
html[lang="en"] .legal h2{ font-family: var(--font-display-en), sans-serif; }
.legal h3{
  font-size: 15px;
  font-weight:700;
  color: var(--ink);
  margin: 26px 0 10px;
}
.legal p{
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.legal ul, .legal ol{
  margin: 0 0 16px;
  padding-left: 22px;
}
.legal li{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.legal strong, .legal b{ color: var(--ink); }
.legal a.inline-link{
  color: var(--sky);
  text-decoration:none;
  border-bottom: 1px solid rgba(111,198,234,0.4);
}
.legal a.inline-link:hover{ border-bottom-color: var(--sky); }

.legal table{
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
}
.legal table th, .legal table td{
  border: 1px solid var(--glass-border);
  padding: 10px 12px;
  font-size: 13.5px;
  text-align: left;
  color: var(--ink-soft);
  vertical-align: top;
}
.legal table th{
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.tbc{
  color: var(--ember-2);
  font-weight: 700;
}

/* ---- SHARED FOOTER (index.html + legal pages) ---- */
footer.site-footer{
  border-top: 1px solid var(--glass-border);
  padding: 40px 0 32px;
}
.footer-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap: 28px;
  margin-bottom: 28px;
}
.footer-brand{
  font-size: 13px;
  color: var(--ink-faint);
  max-width: 340px;
  line-height: 1.6;
}
.footer-brand-name{
  font-weight:800;
  letter-spacing: 0.02em;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 10px;
}
.footer-brand .accent{ color: var(--gold); }
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap: 10px 28px;
}
.footer-links a{
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint);
  text-decoration:none;
  transition: color .15s ease;
}
.footer-links a:hover{ color: var(--sky); }
.footer-bottom{
  border-top: 1px solid var(--glass-border);
  padding-top: 22px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap: 10px;
}
.footer-bottom a{ color: var(--sky); text-decoration:none; }

/* ---- COOKIE CONSENT BANNER (index.html + legal pages) ---- */
.cookie-banner{
  position: fixed;
  left:0; right:0; bottom:0;
  z-index: 200;
  background: var(--bg-1);
  border-top: 1px solid var(--glass-border);
  padding: 18px 0;
  display:none;
}
.cookie-banner.show{ display:block; }
.cookie-banner .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.cookie-text{
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
}
.cookie-text a{
  color: var(--sky);
  text-decoration:none;
  border-bottom: 1px solid rgba(111,198,234,0.4);
}
.cookie-actions{
  display:flex;
  gap: 10px;
  flex-shrink:0;
}
.cookie-actions button{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  cursor:pointer;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--ink);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.cookie-actions button.accept{
  background: linear-gradient(135deg, rgba(199,149,56,.9) 0%, rgba(107,79,31,.85) 100%);
  color: #F5E6C8;
  font-weight:700;
  border-color: transparent;
}
.cookie-actions button.decline{ border-color: rgba(34,211,166,.3); }
.cookie-actions button.decline:hover{ border-color: var(--teal); color: var(--teal); background: rgba(34,211,166,.1); }

@media (max-width: 700px){
  .legal h1{ font-size: 26px; }
  .footer-bottom{ flex-direction: column; }
}