/* =========================================================
   CMZ2 Legal Pages — legal.css
   Matches your existing HTML classes:
   .bg .circle(.c1/.c2/.c3), .wrap.legal-page, .card, header h1,
   .inner (scroll), .pill, .divider, h2, footer
   ========================================================= */

:root{
  /* Paper + ink (softer, easier on eyes) */
  --bg: #f2f2f2;                  /* warm paper */
  --ink: #262b33;                 /* headings */
  --text: rgba(38,43,51,.82);     /* body */
  --muted: rgba(38,43,51,.62);    /* meta/footer */
  --hair: rgba(38,43,51,.12);     /* dividers */

  /* CMZ2 gold */
  --accent: #b79a5a;
  --accent-weak: rgba(183,154,90,.22);

  /* Card */
  --card: rgba(255,255,255,.72);
  --card-border: rgba(38,43,51,.10);
  --shadow: 0 14px 40px rgba(0,0,0,.08);
  --radius: 22px;

  /* Layout / type */
  --maxw: 900px;
  --pad: clamp(18px, 2.4vw, 30px);
  --fs-body: 18px;
  --lh: 1.75;
  --fs-h1: clamp(38px, 5.2vw, 56px);
  --fs-h2: clamp(22px, 3vw, 28px);

  /* Watermark seal (optional)
     Put your seal here when ready, e.g.
     --seal-url: url("../brand/cmz2_seal.svg");
  */
  --seal-url: url("../brand/cmz2_seal.svg");
  --seal-opacity: .045;
  --seal-blur: 1.2px;
}

*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{
  color: color-mix(in srgb, var(--ink) 15%, var(--accent) 85%);
  text-decoration: none;
  text-underline-offset: .18em;
}
a:hover{ text-decoration: underline; }

/* =========================================================
   Background circles (your existing .bg markup)
   ========================================================= */
.bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* soft ambient circles */
.circle{
  position:absolute;
  border-radius: 999px;
  filter: blur(10px);
  opacity: .55;
}

/* You can tune these to taste */
.circle.c1{
  width: 520px; height: 520px;
  left: -140px; top: -160px;
  background: radial-gradient(circle at 30% 30%,
    rgba(183,154,90,.22), transparent 60%);
}
.circle.c2{
  width: 620px; height: 620px;
  right: -220px; top: 40px;
  background: radial-gradient(circle at 40% 40%,
    rgba(0,0,0,.06), transparent 60%);
}
.circle.c3{
  width: 780px; height: 780px;
  left: 20%; bottom: -360px;
  background: radial-gradient(circle at 40% 40%,
    rgba(183,154,90,.14), transparent 62%);
}

/* =========================================================
   Main layout
   ========================================================= */
.wrap.legal-page{
  position: relative;
  z-index: 1;
  height: 100vh;          /* force full viewport */
  padding: 32px var(--pad);
  display: grid;
  place-items: center;
  overflow: hidden;       /* prevents page scrollbar */
}
/* =========================================================
   Card (Option B)
   ========================================================= */
.card{
  width: 100%;
  max-width: var(--maxw);
  height: calc(100vh - 64px); /* viewport minus wrap padding */
  display: flex;
  flex-direction: column;
}

/* Watermark seal behind the content (optional) */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--seal-url);
  background-repeat: no-repeat;
  background-position: center 62%;
  background-size: min(600px, 70%);
  opacity: var(--seal-opacity);
  filter: blur(var(--seal-blur));
  pointer-events:none;
  z-index: 0;
}

/* Keep real content above watermark */
.card > *{ position: relative; z-index: 1; }

/* =========================================================
   Header
   ========================================================= */
.card header{
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px) 14px;
  text-align: center;
}

/* Title: still bold, but less harsh */
.card header h1{
  margin: 0;
  font-size: var(--fs-h1);
  line-height: 1.05;
  font-weight: 760;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Quiet “ceremony” line under title (adds the missing polish) */
.card header::after{
  content:"";
  display:block;
  height: 2px;
  width: 120px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), rgba(183,154,90,.15));
}

/* =========================================================
   Inner scroll area (Option B scroll)
   ========================================================= */
.inner{
  flex: 1;                 /* fills available space */
  padding: 18px clamp(22px, 3vw, 34px);
  overflow-y: auto;        /* ONLY this scrolls */
}

/* Softer scrollbar (Chromium/WebKit) */
.inner::-webkit-scrollbar{ width: 12px; }
.inner::-webkit-scrollbar-track{
  background: rgba(0,0,0,.03);
  border-radius: 999px;
}
.inner::-webkit-scrollbar-thumb{
  background: rgba(38,43,51,.18);
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
.inner::-webkit-scrollbar-thumb:hover{ background: rgba(38,43,51,.24); }

/* Typography */
.inner p,
.inner li{
  font-size: var(--fs-body);
  line-height: var(--lh);
  color: var(--text);
}

.inner p{ margin: 0 0 18px 0; }

/* Pill label */
.pill{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent-weak);
  background: rgba(255,255,255,.60);
  color: var(--muted);
  font-size: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.05);
  vertical-align: middle;
  margin-right: 8px;
}

/* Effective date strong */
.inner strong{
  color: var(--ink);
  font-weight: 650;
}

/* Section headings: strong but not “dashboard bold” */
.inner h2{
  margin: 26px 0 10px 0;
  font-size: var(--fs-h2);
  line-height: 1.2;
  font-weight: 720;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Dividers */
.divider{
  height: 1px;
  background: var(--hair);
  margin: 22px 0;
}

/* =========================================================
   Footer
   ========================================================= */
.card footer{
  padding: 14px clamp(22px, 3vw, 34px) 18px;
  border-top: 1px solid rgba(38,43,51,.10);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
.card footer a{
  color: color-mix(in srgb, var(--muted) 35%, var(--accent) 65%);
}
.card footer a:hover{ text-decoration: underline; }

/* =========================================================
   Footer Branding
   ========================================================= */

/* Footer layout */
.card footer{
  padding: 18px clamp(22px, 3vw, 34px) 22px;
  border-top: 1px solid rgba(38,43,51,.10);
  text-align: center;
}

/* Horizontal emblem */
.footer-emblem{
  margin-bottom: 10px;
}

.footer-emblem img{
  max-width: 220px;       /* adjust if needed */
  width: 100%;
  height: auto;
  opacity: .85;           /* subtle, not loud */
  transition: opacity .3s ease;
}

.footer-emblem img:hover{
  opacity: 1;
}

/* Footer meta text */
.footer-meta{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
/* =========================================================
   Mobile tweaks
   ========================================================= */
@media (max-width: 520px){
  :root{ --fs-body: 17px; }
  .card header::after{ width: 96px; }
  .inner{ max-height: min(70vh, 720px); }
}

/* =========================================================
   Quick toggle for a stronger/lighter seal (optional)
   Add class "seal-strong" to <body> to test.
   ========================================================= */
body.seal-strong{
  --seal-opacity: .08;
  --seal-blur: 1.0px;
}
body.seal-light{
  --seal-opacity: .04;
  --seal-blur: 1.6px;
}

/* =========================
   Contact form styles
   ========================= */
.contact-form{
  display: grid;
  gap: 14px;
}

.contact-form label{
  display: grid;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.contact-form input,
.contact-form textarea{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(38,43,51,.14);
  background: rgba(255,255,255,.65);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  outline: none;
}

.contact-form textarea{
  resize: vertical;
  min-height: 160px;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color: rgba(183,154,90,.55);
  box-shadow: 0 0 0 4px rgba(183,154,90,.16);
}

.btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid rgba(183,154,90,.35);
  background: rgba(183,154,90,.14);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.btn:hover{
  background: rgba(183,154,90,.20);
}

.form-note{
  margin: 6px 0 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* honeypot hidden */
.hp{
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.center{
	text-align: center;
}