@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

/* ============================================================
   The header uses these, and they normally come from style.css,
   which these pages do not load. Copied here by name and value
   so the nav paints correctly on its own.
   ============================================================ */
:root{
  --void:         #0b062c;
  --line:         rgba(246,242,234,0.10);
  --ivory:        #F6F2EA;
  --gold-bright:  #EFC463;
  --purple-royal: #5a3696;
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono:    'JetBrains Mono', Menlo, monospace;
}


/* ============================================================================
   css/style.css — AskMAE.ai site stylesheet
   Loaded after css/nav.css.
   ============================================================================ */

:root{
  --cream:      #F2EFE6;   /* page background */
  --deep-purple:#1d0048;   /* headings and body type */
  --body-ink:   #2f2358;   /* running text */
  --illumination:#a054ff;  /* bright purple, thin lines only */
  --gold:       #988959;   /* rules and bullet marks */
  --radius:     4px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

body{
  margin:0;
  width:100%;
  background:var(--cream);
  color:var(--body-ink);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:18px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}

h1, h2{
  font-family:"Fraunces", Georgia, serif;
  font-weight:700;
  line-height:1.15;
  color:var(--deep-purple);
}

a{
  color:var(--deep-purple);
  text-decoration:underline;
  text-underline-offset:3px;
}

a:hover{ color:var(--illumination); }

a:focus-visible{
  outline:2px solid var(--illumination);
  outline-offset:3px;
  border-radius:var(--radius);
}

[data-reveal]{
  opacity:1;
  transform:none;
}

/* ---------- PAGE FRAME ---------------------------------------------------- */

.legal-main{
  max-width:820px;
  margin:0 auto;
  padding:0 28px 90px;
}

/* ---------- HERO ---------------------------------------------------------- */

.legal-hero{
  padding:120px 0 46px;
  margin-bottom:48px;
}

.legal-hero h1{
  font-size:clamp(2.2rem, 5.5vw, 3.4rem);
  margin:0 0 18px;
}

.legal-hero p{
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:0.95rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--deep-purple);
  border-left:3px solid var(--illumination);
  padding-left:16px;
  margin:0;
}

/* ---------- SECTIONS ------------------------------------------------------ */

.legal-section{ margin:0 0 44px; }

.legal-section h2{
  font-size:1.55rem;
  line-height:1.3;
  margin:0 0 16px;
  padding-top:18px;
  border-top:1px solid rgba(160,84,255,0.30);
}

.legal-section h3{
  font-family:"Inter", system-ui, sans-serif;
  font-weight:600;
  font-size:1.15rem;
  color:var(--deep-purple);
  margin:30px 0 10px;
}

.legal-section p{
  margin:0 0 18px;
  font-size:1.05rem;
}

.legal-section ul{
  margin:0 0 24px;
  padding-left:0;
  list-style:none;
}

.legal-section li{
  position:relative;
  padding-left:28px;
  margin-bottom:14px;
  font-size:1.05rem;
}

.legal-section li::before{
  content:"";
  position:absolute;
  left:2px;
  top:0.8em;
  width:11px;
  height:1px;
  background:var(--gold);
}

/* ---------- FOOTER -------------------------------------------------------- */

.primary-footer{
  border-top:1px solid var(--gold);
  background:transparent;
}

.primary-footer-bottom{
  max-width:820px;
  margin:0 auto;
  padding:26px 28px 40px;
  font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:0.8rem;
  line-height:1.7;
  letter-spacing:0.02em;
  color:var(--body-ink);
  text-align:center;
}

/* ---------- SMALL SCREENS ------------------------------------------------- */

@media (max-width:640px){
  body{ font-size:17px; }
  .legal-main{ padding:0 20px 60px; }
  .legal-hero{ padding:92px 0 36px; }
  .legal-section h2{ font-size:1.3rem; }
}

/* ---------- PRINT --------------------------------------------------------- */

@media print{
  body{ background:#fff; color:#1d0048; font-size:12pt; }
  h1, h2, h3, a,
  .legal-hero p,
  .primary-footer-bottom{ color:#1d0048; }
  .legal-hero p{ border-left:3px solid #988959; }
  .legal-section h2{ border-top:1px solid #988959; }
}