/* ============================================================================
   Allied Insurance, Cookie Notice (legal) -- v2 grammar
   Dark warm-brown hero band + cream prose canvas. Every token inherited from
   styles.css (no :root here; parallel agents share that file). Colour = Allied
   gold / amber / brown on warm dark + cream ONLY. Flat: zero box-shadows.
   ========================================================================== */

/* ---------- hero band (dark warm-brown panel, same field as the card-stack) ---------- */
.legal-hero{
  position:relative; background:var(--brand-dark); color:var(--cream-on-dark); overflow:hidden;
  padding:calc(var(--nav-h) + clamp(52px,9vh,104px)) 0 clamp(52px,8vh,96px);
}
.legal-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(125% 120% at 12% 0%, #2a2013 0%, var(--brand-dark) 58%);
}
.legal-hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line-dark);
}
.legal-hero__inner{ position:relative; z-index:2; }
.legal-hero__eyebrow{ margin-bottom:20px; }
.legal-hero h1{
  font-weight:500; letter-spacing:-.035em; line-height:.94;
  font-size:clamp(44px,7vw,104px); max-width:13ch;
}
.legal-hero__lead{
  margin-top:26px; max-width:50ch; color:var(--cream-70);
  font-size:clamp(17px,1.5vw,22px); line-height:1.5;
}
.legal-hero__meta{
  margin-top:30px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-45);
}

/* ---------- body (cream canvas, single readable column) ---------- */
.legal-body{ background:var(--canvas); padding:clamp(56px,9vh,120px) 0; }
.legal-shell{ max-width:880px; margin-inline:auto; padding-inline:var(--pad); }
.legal-prose{ color:var(--ink-70); font-size:clamp(16px,1.15vw,18px); line-height:1.72; }
.legal-prose p{ margin-top:14px; }
.legal-prose a{
  color:var(--amber); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .3s ease;
}
.legal-prose a:hover{ color:var(--brown); }
.legal-prose strong{ color:var(--ink); font-weight:500; }

.legal-lead{
  font-size:clamp(20px,2.1vw,27px); line-height:1.42; letter-spacing:-.015em;
  color:var(--ink); font-weight:400; max-width:26ch;
}

/* ---------- the gold "short version" card (al-card gold gradient echo) ---------- */
.legal-flag{
  margin-top:clamp(30px,5vh,44px); border-radius:var(--r-card);
  background:linear-gradient(150deg,#f0cd8c,#d4a24e); color:var(--ink);
  padding:clamp(26px,3.4vw,40px);
  display:flex; gap:clamp(18px,2.4vw,28px); align-items:flex-start;
}
.legal-flag__ic{ width:clamp(40px,4.4vw,56px); height:auto; flex:none; color:var(--brown); opacity:.92; }
.legal-flag__ic svg{ width:100%; height:100%; }
.legal-flag__body{ flex:1; }
.legal-flag__k{
  font-size:clamp(12px,1vw,13px); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(28,23,16,.6); margin-bottom:10px;
}
.legal-flag h2{
  font-size:clamp(26px,3.6vw,44px); font-weight:500; letter-spacing:-.03em; line-height:1; color:var(--ink);
}
.legal-flag p{ margin-top:14px; max-width:46ch; color:rgba(28,23,16,.74); font-size:clamp(15px,1.1vw,17px); line-height:1.5; }

/* ---------- content blocks: gold cover-icon + heading + prose ---------- */
.legal-block{ margin-top:clamp(40px,6vh,64px); }
.legal-block__head{ display:flex; align-items:center; gap:16px; margin-bottom:12px; }
.legal-ic{
  width:46px; height:46px; flex:none; color:var(--amber);
  border:1px solid var(--line); border-radius:14px; background:var(--surface);
  display:grid; place-items:center;
}
.legal-ic svg{ width:24px; height:24px; }
.legal-block h2{
  color:var(--ink); font-weight:500; letter-spacing:-.02em; line-height:1.04;
  font-size:clamp(23px,2.8vw,34px);
}

/* ---------- cookie table (v2 surface card, flat) ---------- */
.legal-table-wrap{
  overflow-x:auto; margin-top:22px; border:1px solid var(--line);
  border-radius:var(--r-card); background:var(--surface);
}
.legal-table{ width:100%; border-collapse:collapse; font-size:15px; min-width:34rem; }
.legal-table th,
.legal-table td{ text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); vertical-align:top; }
.legal-table tbody tr:last-child td{ border-bottom:0; }
.legal-table th{ color:var(--ink); font-weight:500; letter-spacing:.01em; background:var(--canvas); }
.legal-table td{ color:var(--ink-70); }
.legal-table td:first-child{ color:var(--ink); font-weight:500; }

/* ---------- regulatory callout (cream surface, gold left rule) ---------- */
.legal-callout{
  margin-top:clamp(44px,6vh,64px); padding:clamp(24px,3vw,34px);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius:var(--r-card);
}
.legal-callout h2{ font-size:clamp(18px,1.7vw,22px); font-weight:500; letter-spacing:-.01em; color:var(--ink); margin-bottom:12px; }
.legal-callout p{ margin-top:12px; color:var(--ink-70); font-size:15.5px; line-height:1.62; }
.legal-callout p:first-of-type{ margin-top:0; }

/* ---------- starter-notice foot ---------- */
.legal-note{
  margin-top:clamp(36px,5vh,52px); padding-top:22px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-50); font-style:italic; line-height:1.62;
}

@media (max-width:560px){
  .legal-flag{ flex-direction:column; gap:16px; }
  .legal-block__head{ gap:13px; }
  .legal-ic{ width:42px; height:42px; }
}

/* ============================================================================
   RICHNESS PASS (cookies.html): animated Lottie cover-icons + canvas backdrop +
   kinetic hero. Colour stays gold/amber/brown on warm-dark + cream. All motion
   reduced-motion-safe (the shared runtimes fail-closed). Shared styles.css and
   app.js are untouched; every hook below is scoped to the legal grammar here.
   ========================================================================== */

/* 097 Text Glow -- gold halo on the dark-band eyebrow (styles.css scopes this to .hero__eyebrow) */
.legal-hero__eyebrow[data-component="097"]{ text-shadow:0 0 20px rgba(224,182,87,.35); }

/* 084 Animated Text Reveal -- word/char clip so the split headline slides up from a mask
   (styles.css scopes the clip to .hero h1; mirror it for the legal hero) */
.legal-hero h1 .beat{ display:block; }
.legal-hero h1 .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; }
.legal-hero h1 .word .ch{ display:inline-block; will-change:transform; }

.legal-hero /* 204 Lottie Player -- the animated cover-icons occupy the existing icon frames.
   cover-lottie is width/height:100%, so the frames need a definite square. */
.legal-flag__ic{ height:clamp(40px,4.4vw,56px); }
.legal-flag__ic .cover-lottie{ width:100%; height:100%; }
.legal-ic .cover-lottie{ width:24px; height:24px; }

@media (prefers-reduced-motion: reduce){
  .legal-hero h1 .word .ch{ transform:none !important; }
}