/* ============================================================
   FLOWKEEPS — Enhanced Material Design 3
   ============================================================ */

/* ── Custom Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: linear-gradient(180deg,#1565C0,#42A5F5); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg,#0D47A1,#1565C0); }
html { scrollbar-width: thin; scrollbar-color: #1565C0 transparent; }

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --md-sys-color-primary:                 #1565C0;
  --md-sys-color-on-primary:              #ffffff;
  --md-sys-color-primary-container:       #DBEAFE;
  --md-sys-color-on-primary-container:    #1E3A5F;
  --md-sys-color-secondary:               #2196F3;
  --md-sys-color-on-secondary:            #ffffff;
  --md-sys-color-outline:                 #1976D2;
  --md-sys-color-outline-variant:         rgba(25,118,210,0.16);
  --md-sys-color-surface:                 #F5F8FF;
  --md-sys-color-on-surface:              #0D1B2A;
  --md-sys-color-on-surface-variant:      #3D5A80;
  --md-sys-color-surface-container:       #EBF1FD;
  --md-sys-color-surface-container-high:  rgba(235,241,253,0.92);
}
:root[data-theme='dark'] {
  --md-sys-color-primary:                 #90CAF9;
  --md-sys-color-on-primary:              #0D47A1;
  --md-sys-color-primary-container:       #1565C0;
  --md-sys-color-on-primary-container:    #DBEAFE;
  --md-sys-color-secondary:               #64B5F6;
  --md-sys-color-on-secondary:            #0D47A1;
  --md-sys-color-outline:                 #5B9BD5;
  --md-sys-color-outline-variant:         rgba(91,155,213,0.18);
  --md-sys-color-surface:                 #0A1628;
  --md-sys-color-on-surface:              #E3EEFF;
  --md-sys-color-on-surface-variant:      #7EB3E0;
  --md-sys-color-surface-container:       #0F2040;
  --md-sys-color-surface-container-high:  rgba(15,32,64,0.92);
}

/* ── Base ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: 'Roboto', sans-serif;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  margin: 0;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Typography ────────────────────────────────────────────── */
.md-typescale-display-large { font: var(--md-sys-typescale-display-large-font); }
.md-typescale-title-large   { font: var(--md-sys-typescale-title-large-font); }
.md-typescale-body-medium   { font: var(--md-sys-typescale-body-medium-font); }

.gradient-text {
  background: linear-gradient(135deg,#1565C0 0%,#2196F3 55%,#42A5F5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Scroll Progress ───────────────────────────────────────── */
.scroll-progress {
  position: fixed; top:0; left:0; height:3px; z-index:500;
  width: 0%;
  background: linear-gradient(to right,#1565C0,#2196F3,#42A5F5);
  box-shadow: 0 0 10px rgba(33,150,243,.5);
  transition: width .08s linear;
}

/* ── Cursor Glow ───────────────────────────────────────────── */
.cursor-glow {
  position: fixed; width:480px; height:480px; border-radius:50%;
  background: radial-gradient(circle,rgba(21,101,192,.05) 0%,transparent 70%);
  pointer-events:none; z-index:0;
  transform: translate(-50%,-50%);
  transition: left .12s ease, top .12s ease;
}
@media (hover:none) { .cursor-glow { display:none; } }

/* ── Floating Controls ─────────────────────────────────────── */
.floating-controls {
  position: fixed; top:1rem; right:1rem; z-index:200;
  display: flex; align-items:center; gap:.5rem;
  background: var(--md-sys-color-surface-container-high);
  padding: .4rem .4rem .4rem .75rem;
  border-radius: 100px;
  box-shadow: 0 4px 20px rgba(21,101,192,.15);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--md-sys-color-outline-variant);
  transition: box-shadow .3s;
}
.floating-controls:hover { box-shadow: 0 8px 32px rgba(21,101,192,.25); }

/* ── Sticky Navbar ─────────────────────────────────────────── */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:150;
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 2rem; height:64px;
  transition: background .4s, box-shadow .4s, border-color .4s;
  pointer-events: none;
  border-bottom: 1px solid transparent;
}
.navbar.scrolled {
  background: var(--md-sys-color-surface-container-high);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-color: var(--md-sys-color-outline-variant);
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
  pointer-events: all;
}
.navbar-logo {
  font-weight: 900; font-size: 1.2rem;
  color: var(--md-sys-color-primary);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .3s, transform .3s;
}
.navbar.scrolled .navbar-logo { opacity:1; transform:none; }
.navbar-links {
  display: flex; gap: 2rem;
  opacity: 0; transition: opacity .3s;
}
.navbar.scrolled .navbar-links { opacity:1; }
.navbar-links a {
  font-size: .875rem; font-weight:500;
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none; transition: color .2s;
}
.navbar-links a:hover { color: var(--md-sys-color-primary); }
@media (max-width:768px) { .navbar-links { display:none; } }

/* ── Hero Section ──────────────────────────────────────────── */
.hero-section {
  position: relative; min-height:100vh;
  display:flex; align-items:center; overflow:hidden;
  padding: 7rem 1rem 9rem;
}
.hero-bg {
  position: absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 80% at 20% 55%,rgba(21,101,192,.13) 0%,transparent 60%),
    radial-gradient(ellipse 60% 60% at 82% 20%,rgba(33,150,243,.09) 0%,transparent 55%),
    radial-gradient(ellipse 45% 45% at 60% 82%,rgba(100,181,246,.07) 0%,transparent 50%);
  animation: hero-pulse 12s ease-in-out infinite alternate;
}
@keyframes hero-pulse {
  0%   { opacity:1; transform:scale(1); }
  100% { opacity:.7; transform:scale(1.04); }
}
.hero-noise {
  position: absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px; opacity:.02; pointer-events:none;
}
.blob {
  position:absolute; border-radius:50%; filter:blur(80px);
  pointer-events:none; will-change:transform;
  animation: blob-wander 14s ease-in-out infinite;
}
.blob-1 { width:600px;height:600px;background:radial-gradient(circle,rgba(21,101,192,.25),transparent 70%);top:-150px;left:-150px;animation-duration:17s; }
.blob-2 { width:450px;height:450px;background:radial-gradient(circle,rgba(33,150,243,.18),transparent 70%);bottom:-80px;right:-80px;animation-duration:21s;animation-delay:-7s; }
.blob-3 { width:320px;height:320px;background:radial-gradient(circle,rgba(100,181,246,.12),transparent 70%);top:45%;left:38%;animation-duration:11s;animation-delay:-4s; }
@keyframes blob-wander {
  0%,100% { transform:translate(0,0) scale(1); }
  25%     { transform:translate(40px,-30px) scale(1.04); }
  50%     { transform:translate(-20px,40px) scale(0.96); }
  75%     { transform:translate(25px,15px) scale(1.02); }
}
.dot-grid {
  position:absolute; width:240px; height:240px;
  background-image: radial-gradient(circle,var(--md-sys-color-primary) 1px,transparent 1px);
  background-size:22px 22px; opacity:.11; pointer-events:none;
}

/* ── Hero Animations ───────────────────────────────────────── */
.hero-chip {
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .875rem .35rem .6rem; border-radius:100px;
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em;
  color: var(--md-sys-color-primary); background: var(--md-sys-color-primary-container);
  border: 1px solid rgba(21,101,192,.2);
  animation: entry-up .8s cubic-bezier(.16,1,.3,1) both;
}
.hero-title-wrap { animation: entry-up .9s cubic-bezier(.16,1,.3,1) .1s both; }
.hero-sub-wrap   { animation: entry-up .9s cubic-bezier(.16,1,.3,1) .25s both; }
.hero-cta-wrap   { animation: entry-up .9s cubic-bezier(.16,1,.3,1) .4s both; }
.hero-mock-wrap  { animation: entry-up-scale 1.1s cubic-bezier(.16,1,.3,1) .15s both; }

@keyframes entry-up {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes entry-up-scale {
  from { opacity:0; transform:translateY(40px) scale(.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.float-loop  { animation: float-anim 6s ease-in-out infinite; }
.float-loop2 { animation: float-anim 5.2s ease-in-out infinite; animation-delay:-2.5s; }
@keyframes float-anim {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-14px); }
}

/* ── Mock Image Theme ──────────────────────────────────────── */
.mock-phone-stack,.mock-laptop-stack { display:grid; }
.mock-phone-stack>img,.mock-laptop-stack>img { grid-area:1/1; transition:opacity .4s; }
.mock-phone-light,.mock-laptop-light { opacity:1; }
.mock-phone-dark,.mock-laptop-dark   { opacity:0; }
:root[data-theme='dark'] .mock-phone-light,
:root[data-theme='dark'] .mock-laptop-light { opacity:0; }
:root[data-theme='dark'] .mock-phone-dark,
:root[data-theme='dark'] .mock-laptop-dark  { opacity:1; }

/* ── CTA Pulse ─────────────────────────────────────────────── */
.cta-glow { position:relative; }
.cta-glow::after {
  content:''; position:absolute; inset:-5px; border-radius:20px;
  background:rgba(21,101,192,.35); z-index:-1;
  animation: pulse-glow 2.5s ease-out infinite;
}
@keyframes pulse-glow {
  0%   { transform:scale(1); opacity:.5; }
  100% { transform:scale(1.3); opacity:0; }
}

/* ── Scroll Reveal ─────────────────────────────────────────── */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(.16,1,.3,1);
  transition-duration: .75s;
}
.reveal       { opacity:0; transform:translateY(38px); }
.reveal-left  { opacity:0; transform:translateX(-38px); }
.reveal-right { opacity:0; transform:translateX(38px); }
.reveal-scale { opacity:0; transform:scale(.88); }
.revealed     { opacity:1 !important; transform:none !important; }
.delay-1 { transition-delay:.08s; }
.delay-2 { transition-delay:.16s; }
.delay-3 { transition-delay:.24s; }
.delay-4 { transition-delay:.32s; }
.delay-5 { transition-delay:.40s; }
.delay-6 { transition-delay:.48s; }

/* ── Stats Glass ───────────────────────────────────────────── */
.stats-glass {
  background: var(--md-sys-color-surface-container-high);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 40px;
  box-shadow: 0 24px 64px rgba(21,101,192,.1), 0 4px 16px rgba(0,0,0,.04),
              inset 0 1px 0 rgba(255,255,255,.08);
}

/* ── Section Decorators ────────────────────────────────────── */
.section-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .75rem; border-radius:100px;
  font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  margin-bottom:.875rem;
}
.section-title { position:relative; display:inline-block; }
.section-title::after {
  content:''; position:absolute;
  bottom:-10px; left:50%; transform:translateX(-50%);
  width:48px; height:4px; border-radius:2px;
  background: linear-gradient(to right,#1565C0,#42A5F5);
}

/* ── Feature Cards ─────────────────────────────────────────── */
.feature-card {
  position:relative; padding:2rem; border-radius:2rem;
  background: var(--md-sys-color-surface); overflow:hidden; cursor:default;
  border: 1px solid var(--md-sys-color-outline-variant);
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
}
.feature-card::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(135deg,rgba(21,101,192,.07) 0%,transparent 60%);
  opacity:0; transition:opacity .4s;
}
.feature-card:hover { transform:translateY(-10px) scale(1.02); box-shadow:0 24px 64px rgba(21,101,192,.18); }
.feature-card:hover::before { opacity:1; }
.feature-icon {
  width:56px; height:56px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  margin-bottom:1.5rem;
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.feature-card:hover .feature-icon { transform:rotate(-8deg) scale(1.12); }
.feature-card-glow {
  position:absolute; width:160px; height:160px; border-radius:50%;
  background: radial-gradient(circle,rgba(21,101,192,.14) 0%,transparent 70%);
  bottom:-60px; right:-60px; opacity:0;
  transition: opacity .4s, transform .4s;
}
.feature-card:hover .feature-card-glow { opacity:1; transform:scale(1.4); }
:root[data-theme='dark'] .feature-card { background: color-mix(in srgb,var(--md-sys-color-surface-container),transparent 20%); }
:root[data-theme='dark'] .feature-card:hover { box-shadow:0 24px 64px rgba(144,202,249,.12); }

/* ── Comparison Table ──────────────────────────────────────── */
.comparison-wrap {
  border-radius:2rem; overflow:hidden;
  box-shadow: 0 16px 60px rgba(0,0,0,.07);
  border: 1px solid var(--md-sys-color-outline-variant);
}

/* ── Testimonials ──────────────────────────────────────────── */
.testimonials { padding:6rem 0; background:var(--md-sys-color-surface-container); position:relative; overflow:hidden; }
.testimonials-bg {
  position:absolute; inset:0;
  background: radial-gradient(ellipse at 50% 100%,rgba(21,101,192,.06) 0%,transparent 70%);
}
.testimonials .track {
  overflow:hidden;
  -webkit-mask-image: linear-gradient(to right,transparent 0%,black 7%,black 93%,transparent 100%);
  mask-image: linear-gradient(to right,transparent 0%,black 7%,black 93%,transparent 100%);
}
.testimonials .scroller {
  display:flex; gap:1.5rem; align-items:stretch;
  animation: scroll-left 34s linear infinite;
}
.testimonials .scroller:hover { animation-play-state:paused; }
.testimonials .card {
  min-width:340px; max-width:340px;
  background: var(--md-sys-color-surface); padding:1.75rem; border-radius:24px;
  border: 1px solid var(--md-sys-color-outline-variant); position:relative;
  transition: transform .3s, box-shadow .3s;
}
.testimonials .card:hover { transform:translateY(-6px); box-shadow:0 16px 48px rgba(21,101,192,.14); }
.testimonials .card::before {
  content:'\201C'; position:absolute; top:4px; left:16px;
  font-size:72px; line-height:1; color:var(--md-sys-color-primary);
  opacity:.15; font-family:Georgia,serif; pointer-events:none;
}
.testimonials .stars  { color:#F59E0B; font-size:.82rem; margin-bottom:.6rem; letter-spacing:.1em; }
.testimonials .quote  { font-size:.94rem; line-height:1.68; color:var(--md-sys-color-on-surface); margin-bottom:1.25rem; padding-top:.5rem; }
.testimonials .author { font-weight:700; color:var(--md-sys-color-primary); font-size:.84rem; }
.testimonials .role   { font-size:.77rem; color:var(--md-sys-color-outline); margin-top:.1rem; }
@keyframes scroll-left {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

/* ── Pricing ───────────────────────────────────────────────── */
.pricing-card {
  position:relative; padding:2.5rem 2rem; border-radius:2rem;
  display:flex; flex-direction:column; align-items:center; overflow:hidden;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s;
}
.pricing-card:hover { transform:translateY(-12px); }
.pricing-card-featured {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--md-sys-color-surface),var(--md-sys-color-surface)) padding-box,
    linear-gradient(135deg,#1565C0,#2196F3,#42A5F5,#1565C0) border-box;
  background-size: 100%, 300% 300%;
  animation: border-shift 5s ease infinite;
  box-shadow: 0 8px 40px rgba(21,101,192,.2);
}
@keyframes border-shift {
  0%,100% { background-position:100%,0% 50%; }
  50%     { background-position:100%,100% 50%; }
}
.pricing-shimmer {
  position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(to right,transparent,rgba(255,255,255,.07),transparent);
  pointer-events:none; animation: shimmer-pass 4s ease-in-out infinite;
}
@keyframes shimmer-pass { 0% { left:-120%; } 100% { left:220%; } }

/* ── Download Buttons ──────────────────────────────────────── */
.dl-btn {
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.5rem; border-radius:1.25rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  min-width:240px; height:80px;
  text-decoration:none; color:var(--md-sys-color-on-surface);
  background: var(--md-sys-color-surface);
  position:relative; overflow:hidden;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, color .3s;
}
.dl-btn::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg,#1565C0,#2196F3);
  opacity:0; transition:opacity .3s;
}
.dl-btn:hover { transform:translateY(-5px) scale(1.03); box-shadow:0 12px 36px rgba(21,101,192,.3); color:#fff; border-color:transparent; }
.dl-btn:hover::before { opacity:1; }
.dl-btn>* { position:relative; z-index:1; }

/* ── Contact Form ──────────────────────────────────────────── */
.contact-section { position:relative; overflow:hidden; padding:6rem 1rem; }
.contact-blob { position:absolute; border-radius:50%; filter:blur(100px); opacity:.07; pointer-events:none; }
.contact-card {
  background: var(--md-sys-color-surface-container-high);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius:2.5rem; padding:3rem;
  box-shadow: 0 24px 80px rgba(21,101,192,.1), 0 4px 16px rgba(0,0,0,.04);
}
.form-field { position:relative; margin-bottom:1.25rem; }
.form-field label {
  display:block; font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.07em;
  color: var(--md-sys-color-on-surface-variant); margin-bottom:.4rem;
}
.form-field input,
.form-field textarea,
.form-field select {
  width:100%; box-sizing:border-box;
  padding:.875rem 1rem;
  border: 1.5px solid var(--md-sys-color-outline-variant);
  border-radius:1rem;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font-family:'Roboto',sans-serif; font-size:1rem; outline:none;
  transition: border-color .2s, box-shadow .2s;
  appearance:none;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 3px rgba(21,101,192,.12);
}
.form-field textarea { resize:vertical; min-height:140px; }
.form-submit-btn {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; padding:1rem 2rem; border-radius:1rem; border:none;
  background: linear-gradient(135deg,#1565C0,#2196F3);
  color:#fff; font-family:'Roboto',sans-serif;
  font-size:1rem; font-weight:700; cursor:pointer; letter-spacing:.02em;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  position:relative; overflow:hidden;
}
.form-submit-btn:hover { transform:translateY(-3px) scale(1.02); box-shadow:0 8px 28px rgba(21,101,192,.4); }
.form-submit-btn:active { transform:scale(.98); }
.form-submit-btn::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg,rgba(255,255,255,.12),transparent);
  pointer-events:none;
}
.form-success {
  display:none; align-items:center; gap:.75rem;
  padding:1rem 1.5rem; border-radius:1rem;
  background: rgba(21,101,192,.1);
  border: 1px solid rgba(21,101,192,.25);
  color: var(--md-sys-color-primary); font-weight:600;
  animation: entry-up .5s cubic-bezier(.16,1,.3,1) both;
}

/* ── Footer ────────────────────────────────────────────────── */
.footer-bg { background: linear-gradient(to bottom,var(--md-sys-color-surface-container),var(--md-sys-color-surface)); }

/* ═════════════════════════════════════════════════════════════
   LEGAL PAGES
   ═════════════════════════════════════════════════════════════ */
.legal-header {
  position: sticky; top:0; z-index:180;
  background: var(--md-sys-color-surface-container-high);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.5rem; gap:1rem; flex-wrap:wrap;
}
.legal-header-back {
  display:flex; align-items:center; gap:.4rem;
  color: var(--md-sys-color-on-surface-variant);
  text-decoration:none; font-size:.875rem; font-weight:500;
  padding:.4rem .875rem; border-radius:100px;
  border: 1px solid var(--md-sys-color-outline-variant);
  transition: background .2s, color .2s;
}
.legal-header-back:hover { background:var(--md-sys-color-primary-container); color:var(--md-sys-color-primary); }
.legal-header-title { font-weight:800; font-size:1rem; color:var(--md-sys-color-primary); }
.legal-header-controls {
  display:flex; align-items:center; gap:.5rem; margin-left:auto;
}
.legal-header-controls select {
  background:transparent; border:none;
  font-size:.875rem; font-weight:700;
  color:var(--md-sys-color-on-surface); cursor:pointer; outline:none;
  padding:.25rem .5rem;
}
.legal-progress {
  position:fixed; top:0; left:0; height:3px; z-index:300; width:0%;
  background: linear-gradient(to right,#1565C0,#42A5F5);
  box-shadow: 0 0 8px rgba(33,150,243,.5); transition:width .08s linear;
}
.legal-layout {
  display:grid; grid-template-columns:1fr;
  max-width:1120px; margin:0 auto; padding:2.5rem 1.5rem 5rem; gap:2rem;
}
@media (min-width:1024px) { .legal-layout { grid-template-columns:260px 1fr; align-items:start; gap:3rem; } }
.legal-sidebar { display:none; }
@media (min-width:1024px) { .legal-sidebar { display:block; position:sticky; top:76px; } }
.legal-sidebar-inner {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius:1.5rem; padding:1.5rem;
}
.legal-sidebar-label {
  font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:var(--md-sys-color-outline); margin-bottom:.875rem;
}
.legal-sidebar a {
  display:block; padding:.4rem .6rem; border-radius:.5rem;
  font-size:.82rem; color:var(--md-sys-color-on-surface-variant);
  text-decoration:none; transition:background .2s,color .2s; line-height:1.4; margin-bottom:.15rem;
}
.legal-sidebar a:hover,.legal-sidebar a.toc-active {
  background:var(--md-sys-color-primary-container); color:var(--md-sys-color-primary);
}
/* Legal body content */
.legal-body h1 { font-size:2.25rem; font-weight:900; letter-spacing:-.02em; color:var(--md-sys-color-on-surface); margin-bottom:.75rem; line-height:1.15; }
.legal-body .doc-meta { font-size:.82rem; color:var(--md-sys-color-outline); margin-bottom:2rem; padding-bottom:1.5rem; border-bottom:1px solid var(--md-sys-color-outline-variant); }
.legal-body h2 {
  font-size:1.1rem; font-weight:800; color:var(--md-sys-color-primary);
  margin-top:3rem; margin-bottom:.875rem;
  padding-bottom:.5rem; border-bottom:2px solid var(--md-sys-color-primary-container);
  scroll-margin-top:80px;
}
.legal-body h3 { font-size:1rem; font-weight:700; color:var(--md-sys-color-on-surface); margin-top:1.75rem; margin-bottom:.75rem; }
.legal-body p { margin-bottom:1rem; line-height:1.78; }
.legal-body ul,.legal-body ol { padding-left:1.5rem; margin-bottom:1rem; line-height:1.78; }
.legal-body li { margin-bottom:.4rem; }
.legal-body a { color:var(--md-sys-color-primary); }
.legal-body strong { color:var(--md-sys-color-on-surface); }
.legal-body table { width:100%; border-collapse:collapse; border-radius:1rem; overflow:hidden; margin:1.5rem 0; font-size:.9rem; }
.legal-body th { background:var(--md-sys-color-primary-container); color:var(--md-sys-color-on-primary-container); padding:.75rem 1rem; font-weight:700; text-align:left; }
.legal-body td { padding:.75rem 1rem; border-bottom:1px solid var(--md-sys-color-outline-variant); }
.legal-body tr:nth-child(even) td { background:var(--md-sys-color-surface-container); }
/* Info/highlight boxes — restyle existing ones */
.legal-body .bg-blue-50   { background:var(--md-sys-color-primary-container) !important; color:var(--md-sys-color-on-primary-container) !important; }
.legal-body .border-blue-600 { border-color:var(--md-sys-color-primary) !important; }
.legal-body .text-blue-600   { color:var(--md-sys-color-primary) !important; }
.legal-body .bg-gray-50   { background:var(--md-sys-color-surface-container) !important; }
.legal-body .border-gray-200,.legal-body .border-gray-300 { border-color:var(--md-sys-color-outline-variant) !important; }
.legal-body .text-gray-400,.legal-body .text-gray-500 { color:var(--md-sys-color-outline) !important; }
.legal-body .text-gray-900 { color:var(--md-sys-color-on-surface) !important; }
.legal-body .bg-amber-50  { background:rgba(245,158,11,.08) !important; }
.legal-body .border-amber-400 { border-color:#F59E0B !important; }
/* The inline nav (TOC) inside data-lang - hide on desktop since sidebar exists */
@media (min-width:1024px) { .legal-body>nav.bg-gray-50 { display:none; } }