/* ============================================================================
   Allied Insurance, Terms of Use, page-scoped v2 styles.
   Sits on the homepage system (styles.css): same tokens, same nav + footer shell.
   Adds only the legal reading grammar: a dark warm-brown hero-band and a cream
   reading canvas with gold accents and a gold-lined IPEC callout. Flat, no shadow.
   Every hue reuses a :root brand token (gold / amber / brown on warm dark + cream).
   ========================================================================== */

/* ---------- Hero band (dark warm-brown panel, giant cream headline) --------- */
.page-hero{
  position:relative; background:var(--brand-dark); color:var(--cream-on-dark); overflow:hidden;
  padding:calc(var(--nav-h) + clamp(56px,10vh,120px)) 0 clamp(48px,8vh,96px);
}
.page-hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 130% at 12% 0%, #2a2116 0%, var(--brand-dark) 56%),
    radial-gradient(70% 90% at 100% 100%, rgba(201,154,59,.15) 0%, transparent 62%);
}
.page-hero::after{ /* faint gold hairline closing the band */
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(224,182,87,.5), transparent);
}
.page-hero__inner{ position:relative; z-index:2; }
.page-hero__eyebrow{ color:var(--gold-bright); margin-bottom:22px; }
.page-hero__title{
  font-weight:500; letter-spacing:-.035em; line-height:.94;
  font-size:clamp(44px,7vw,104px); max-width:14ch;
}
.page-hero__lead{
  margin-top:26px; max-width:52ch; color:var(--cream-70);
  font-size:clamp(17px,1.5vw,22px); line-height:1.5; font-weight:400;
}
.page-hero__meta{
  margin-top:30px; display:inline-flex; align-items:center; gap:.6em;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-70);
  border:1px solid var(--line-dark); border-radius:var(--pill); padding:9px 18px;
}
.page-hero__meta::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--gold-bright); }

/* ---------- Legal reading canvas (light cream) ------------------------------ */
.legal{ padding:clamp(56px,10vh,130px) 0 clamp(64px,11vh,150px); background:var(--canvas); }
.legal__prose{ max-width:74ch; margin-inline:auto; }

.legal__lead{
  font-size:clamp(20px,2.1vw,28px); font-weight:500; letter-spacing:-.02em; line-height:1.32;
  color:var(--ink); margin-bottom:clamp(26px,4vh,42px); max-width:38ch;
}
.legal__lead strong{ color:var(--amber); font-weight:500; }

.legal__prose h2{
  font-weight:500; letter-spacing:-.02em; line-height:1.12; font-size:clamp(23px,2.5vw,33px);
  color:var(--ink); margin-top:clamp(32px,5vh,52px); margin-bottom:14px;
  padding-top:22px; border-top:1px solid var(--line); position:relative;
}
.legal__prose h2::after{ /* short gold accent riding the section rule */
  content:""; position:absolute; top:-1px; left:0; width:46px; height:2px; background:var(--gold);
}
.legal__prose p{
  color:var(--ink-70); margin-bottom:16px; font-size:clamp(16px,1.15vw,18px); line-height:1.62;
}
.legal__prose p strong{ color:var(--ink); font-weight:500; }
.legal__prose a{
  color:var(--amber); border-bottom:1px solid rgba(175,95,5,.4); padding-bottom:1px;
  transition:color .3s ease, border-color .3s ease; word-break:break-word;
}
.legal__prose a:hover{ color:var(--brown); border-bottom-color:var(--brown); }

.legal__prose ul{ margin:4px 0 18px; padding:0; list-style:none; }
.legal__prose li{
  position:relative; padding-left:26px; margin-bottom:11px; color:var(--ink-70);
  font-size:clamp(16px,1.15vw,18px); line-height:1.6;
}
.legal__prose li::before{
  content:""; position:absolute; left:3px; top:.66em; width:9px; height:2px; background:var(--gold);
}

/* ---------- IPEC / regulatory callout (gold-lined dark card) ---------------- */
.legal__callout{
  margin-top:clamp(40px,6vh,66px); border-radius:var(--r-card);
  background:radial-gradient(120% 130% at 12% 0%, #241c11 0%, var(--brand-dark) 60%);
  border:1px solid rgba(224,182,87,.3); color:var(--cream-on-dark);
  padding:clamp(28px,4vw,46px);
}
.legal__callout h2{
  border:0; padding:0; margin:0 0 6px; color:var(--gold-bright);
  font-size:clamp(19px,1.9vw,25px); letter-spacing:.01em;
}
.legal__callout h2::after{ display:none; }
.legal__callout p{ color:var(--cream-70); margin-top:14px; margin-bottom:0; }
.legal__callout p + p{ margin-top:14px; }
.legal__callout p strong{ color:var(--cream-on-dark); }
/* regulatory umbrella glyph (component 204, Lottie Player; gold, calm) */
.legal__callout-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:18px; color:var(--gold-bright);
  border:1px solid rgba(224,182,87,.3); border-radius:12px;
  background:rgba(224,182,87,.06); padding:8px;
}
.legal__callout-ic .cover-lottie{ width:100%; height:100%; }

/* ---------- Fine print ------------------------------------------------------ */
.legal__note{
  margin-top:clamp(28px,4vh,42px); padding-top:20px; border-top:1px solid var(--line);
  font-size:14px; line-height:1.62; color:var(--ink-50);
}

/* ---------- Responsive nudges ---------------------------------------------- */
@media (max-width:560px){
  .page-hero__title{ font-size:clamp(38px,11vw,64px); }
  .legal__prose h2{ padding-top:20px; }
}