/* =============================================
   GRIF — Legal & Docs Pages
   Shared styles for: terms, privacy, data-consent, docs
   Brand-aligned with grif_main.css (Sora/Inter, dark)
   Mobile-first responsive
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* === Tokens (dark, aligned with grif_main.css) === */
:root{
  --hero-glow:      rgba(91,141,239,0.22);
  --bg-base:        #0b0f1a;
  --bg-surface:     #131929;
  --bg-elevated:    #1a2236;
  --bg-nav:         rgba(11,15,26,.88);

  --primary:        #5b8def;
  --primary-hover:  #7aa3f5;
  --primary-soft:   rgba(91,141,239,.12);

  --text-primary:   #eef2ff;
  --text-secondary: #8a9bbf;
  --text-muted:     #4a5878;
  --text-on-primary:#ffffff;

  --border-subtle:  #162039;
  --border-default: #1e2d4a;

  --gold:           #c9a04a;
  --warn:           #ffd37a;
  --success:        #87e6b0;

  --maxw:           860px;
  --maxw-wide:      980px;
  --radius-sm:      12px;
  --radius:         16px;
  --radius-lg:      20px;
}

/* === Reset === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  -webkit-font-smoothing:antialiased;
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.7;
  background:
    radial-gradient(ellipse 900px 600px at 20% 0%, var(--hero-glow) 0%, transparent 65%),
    var(--bg-base);
  color:var(--text-primary);
  min-height:100vh;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* === Container === */
.wrap{
  width:min(var(--maxw), calc(100% - 32px));
  margin:0 auto;
}
.wrap-wide{
  width:min(var(--maxw-wide), calc(100% - 32px));
  margin:0 auto;
}

/* === Topbar — handled by grif_main.css (.ni / .nl / .nr / .hb / .nm) === */
/* legacy .topbar / .brand / .back-link kept for backward-compat only */
.topbar{display:none}

/* === Hero === */
.hero{
  padding:56px 0 24px;
}
.pill{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.hero h1,
h1{
  font-family:'Sora',sans-serif;
  margin:0 0 16px;
  font-size:clamp(28px, 5.5vw, 44px);
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:600;
  color:var(--text-primary);
}
.lead{
  max-width:720px;
  color:var(--text-secondary);
  font-size:clamp(16px, 2.2vw, 18px);
  margin:0;
  line-height:1.6;
}
.meta{
  margin-top:18px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  font-size:13px;
  color:var(--text-secondary);
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
}
.meta strong{color:var(--text-primary);font-weight:600}

/* === TOC === */
.toc{
  margin:24px 0 32px;
  padding:20px 22px;
  border-radius:var(--radius);
  border:1px solid var(--border-subtle);
  background:var(--bg-surface);
}
.toc-title{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--text-muted);
  margin-bottom:12px;
}
.toc ol{
  margin:0;
  padding-left:22px;
  display:grid;
  gap:8px;
}
.toc li{
  color:var(--text-muted);
  font-size:14px;
  line-height:1.5;
}
.toc a{
  color:var(--text-primary);
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.toc a:hover{color:var(--primary);border-bottom-color:var(--primary)}

/* === Sections === */
main{padding-bottom:80px}
.section{
  padding:28px 0;
  border-top:1px solid var(--border-subtle);
}
.section:first-of-type{border-top:none;padding-top:18px}
.section h2,
h2{
  font-family:'Sora',sans-serif;
  margin:0 0 16px;
  font-size:clamp(20px, 3.2vw, 26px);
  line-height:1.2;
  letter-spacing:-.01em;
  font-weight:600;
  color:var(--text-primary);
  scroll-margin-top:80px;
}
.section h3,
h3{
  font-family:'Sora',sans-serif;
  margin:24px 0 10px;
  font-size:17px;
  font-weight:600;
  color:var(--text-primary);
}
.section p,
p{
  margin:0 0 14px;
  color:var(--text-secondary);
  line-height:1.7;
}
.section p:last-child{margin-bottom:0}
.section ul,
.section ol{
  margin:8px 0 14px;
  padding-left:22px;
}
.section li,
li{
  margin:6px 0;
  color:var(--text-secondary);
  line-height:1.65;
}
.section li strong,
li strong,
strong{color:var(--text-primary);font-weight:600}
.section a,
a.inline{
  color:var(--primary);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.section a:hover{border-bottom-color:var(--primary)}

/* === Callouts === */
.note{
  margin:18px 0;
  padding:14px 18px;
  border-radius:var(--radius-sm);
  background:var(--primary-soft);
  border:1px solid rgba(91,141,239,.22);
  color:var(--text-primary);
  font-size:14.5px;
  line-height:1.6;
}
.note strong{color:var(--primary)}

.warn{
  margin:18px 0;
  padding:14px 18px;
  border-radius:var(--radius-sm);
  background:rgba(255,211,122,.06);
  border:1px solid rgba(255,211,122,.20);
  color:var(--text-primary);
  font-size:14.5px;
  line-height:1.6;
}
.warn strong{color:var(--warn)}

.subtle{color:var(--text-muted)}

/* === Cards (used by docs) === */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.card h3{margin:0 0 10px;font-size:18px}
.card p{margin:0;color:var(--text-secondary)}

.section-card{
  background:var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);
  padding:24px;
  margin:18px 0;
}

/* docs hero grid */
.grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
  margin:28px 0 18px;
}
.mini-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.mini-item{
  padding:13px 15px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03);
  border:1px solid var(--border-subtle);
}
.mini-item strong{
  display:block;
  margin-bottom:4px;
  color:var(--text-primary);
  font-size:14px;
}

/* tables (docs) */
.table-wrap{
  overflow-x:auto;
  margin-top:16px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  background:rgba(255,255,255,.02);
  -webkit-overflow-scrolling:touch;
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:540px;
}
th,td{
  padding:13px 16px;
  text-align:left;
  border-bottom:1px solid var(--border-subtle);
  vertical-align:top;
}
th{
  color:var(--text-primary);
  font-size:13px;
  font-weight:700;
  background:rgba(255,255,255,.02);
  letter-spacing:.02em;
}
td{
  color:var(--text-secondary);
  font-size:14.5px;
}
tr:last-child td{border-bottom:none}

/* docs plans grid */
.plans{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:16px;
}
.plan{
  background:var(--bg-elevated);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  padding:20px;
}
.plan .name{
  color:var(--primary);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.plan h4{
  font-family:'Sora',sans-serif;
  margin:0 0 8px;
  font-size:20px;
  color:var(--text-primary);
  font-weight:600;
}
.plan p{color:var(--text-secondary);margin:0;font-size:14.5px}

/* docs UI examples */
.ui-examples{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.ui-box{
  padding:16px 18px;
  border-radius:var(--radius);
  border:1px solid var(--border-subtle);
  background:rgba(255,255,255,.03);
}
.ui-label{
  display:block;
  margin-bottom:6px;
  color:var(--warn);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ui-demo{
  font-size:15px;
  color:var(--text-primary);
  font-family:'JetBrains Mono','Menlo',monospace;
  word-break:break-word;
}

/* === Legal footer / CTA === */
.legal-footer{
  margin-top:36px;
  padding:26px 22px;
  border-radius:var(--radius);
  border:1px solid var(--border-subtle);
  background:var(--bg-surface);
  text-align:center;
}
.legal-footer p{
  margin:0 0 14px;
  color:var(--text-secondary);
  font-size:14px;
}
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border-radius:999px;
  background:var(--primary);
  color:var(--text-on-primary);
  font-weight:600;
  font-size:14.5px;
  transition:transform .2s, box-shadow .2s, background .2s;
}
.cta:hover{
  transform:translateY(-1px);
  background:var(--primary-hover);
  box-shadow:0 10px 26px rgba(91,141,239,.32);
}

.footer{
  padding:32px 0 48px;
  color:var(--text-muted);
  font-size:13px;
  text-align:center;
}

/* =============================================
   Responsive — mobile-first refinements
   ============================================= */

/* Tablet down */
@media (max-width:860px){
  .grid,
  .plans{grid-template-columns:1fr}
  .hero{padding:44px 0 18px}
  .section-card,
  .card{padding:20px}
}

/* Mobile-table card layout (docs) */
@media (max-width:700px){
  .mobile-table thead{display:none}
  .mobile-table,
  .mobile-table tbody,
  .mobile-table tr,
  .mobile-table td{
    display:block;
    width:100%;
  }
  .mobile-table{min-width:0}
  .mobile-table tr{
    margin-bottom:12px;
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-sm);
    padding:14px;
    background:rgba(255,255,255,.02);
  }
  .mobile-table tr:last-child{margin-bottom:0}
  .mobile-table td{
    border:none;
    padding:5px 0;
    font-size:14.5px;
  }
  .mobile-table td::before{
    content:attr(data-label);
    display:block;
    font-size:11px;
    color:var(--primary);
    font-weight:700;
    margin-bottom:3px;
    text-transform:uppercase;
    letter-spacing:.06em;
  }
  .table-wrap:has(.mobile-table){
    border:none;
    background:transparent;
    overflow:visible;
  }
}

/* Phones */
@media (max-width:600px){
  body{font-size:15.5px;line-height:1.65}
  .wrap,.wrap-wide{
    width:calc(100% - 24px);
  }
  .topbar-inner{padding:12px 0;gap:8px}
  .brand{font-size:17px}
  .back-link{font-size:13px}
  .hero{padding:36px 0 12px}
  .pill{font-size:11px;padding:5px 11px;margin-bottom:14px}
  .hero h1,h1{font-size:clamp(26px, 7vw, 32px);margin-bottom:12px}
  .lead{font-size:15.5px;line-height:1.55}
  .meta{flex-direction:column;gap:8px;padding:12px 14px}
  .toc{padding:16px 16px 16px 18px;margin:18px 0 24px}
  .toc ol{padding-left:18px;gap:7px}
  .toc li{font-size:13.5px}
  .section{padding:22px 0}
  .section h2,h2{font-size:20px;margin-bottom:12px}
  .section h3,h3{font-size:16px;margin:18px 0 8px}
  .section p,p{font-size:15.5px;margin-bottom:12px}
  .section ul,.section ol{padding-left:20px}
  .section li,li{font-size:15.5px}
  .note,.warn{
    padding:12px 14px;
    font-size:14px;
    margin:14px 0;
  }
  .section-card,.card{padding:18px;border-radius:var(--radius)}
  .legal-footer{padding:22px 18px;margin-top:28px}
  .legal-footer p{font-size:13.5px}
  .cta{padding:11px 20px;font-size:14px;width:100%;max-width:280px}
  .plan{padding:18px}
  .plan h4{font-size:18px}
  .ui-box{padding:14px 16px}
  .ui-demo{font-size:14px}
  .table-wrap{margin-top:12px;border-radius:var(--radius-sm)}
  th,td{padding:10px 12px;font-size:13.5px}
}

/* Very small phones */
@media (max-width:380px){
  .wrap,.wrap-wide{width:calc(100% - 20px)}
  .hero h1,h1{font-size:24px}
  .section h2,h2{font-size:18.5px}
  .section-card,.card,.toc{padding:16px}
  .back-link{display:none} /* keep header tight */
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}