/* =========================================================
   Legal pages — Terms of Service / Privacy Policy
   Long-form editorial document layout: compact hero, sticky
   table of contents, numbered sections, notice block.

   Every colour and typeface here comes from a main.css custom
   property or an existing shared class (.section-label, .btn),
   so this same file renders light-editorial on Simply Captivating
   and dark-cinematic on Captivated Films with no fork.

   ONE DELIBERATE DIVERGENCE: this copy uses a .legal-masthead (typographic, no photo) where the
   Simply Captivating copy uses the shared <PageHero>. Everything from "shell" down is identical in
   both copies; keep it that way when editing.
   ========================================================= */

/* ---------- masthead ----------
   NOTE: this is the one place this file intentionally differs from the Simply Captivating copy.
   Javi's call — no photo hero on the film brand's legal pages. So instead of <PageHero> these
   pages get a typographic masthead on the deepest navy, with the header forced solid
   (solidHeader) since there is no dark image behind the nav. */
.legal-masthead{
  position:relative;
  background:var(--deep);
  padding:calc(clamp(58px,7vw,92px) + 96px) var(--gut) clamp(52px,6vw,78px);
  text-align:center;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* faint ice bloom so the flat navy isn't dead — the same restraint as the film pages */
.legal-masthead::before{
  content:"";position:absolute;left:50%;top:-30%;
  width:min(900px,120%);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(126,184,220,.10),transparent 62%);
  pointer-events:none;
}
.legal-masthead-inner{position:relative;z-index:1;max-width:760px;margin:0 auto}
.legal-masthead h1{
  font-family:var(--display);color:var(--ink);
  font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.05;margin:0;
}
.legal-masthead .legal-masthead-sub{
  color:var(--ink-soft);margin:1.1rem auto 0;max-width:46ch;
}
.legal-masthead .section-label,
.legal-masthead h1,
.legal-masthead .legal-masthead-sub{
  opacity:0;transform:translateY(22px);animation:rise 1s var(--ease) forwards;
}
.legal-masthead h1{animation-delay:.12s}
.legal-masthead .legal-masthead-sub{animation-delay:.24s}
/* hairline flourish under the title */
.legal-masthead-rule{
  width:64px;height:1px;background:var(--blush);opacity:.7;
  margin:clamp(22px,3vw,32px) auto 0;
}
@media(prefers-reduced-motion:reduce){
  .legal-masthead .section-label,
  .legal-masthead h1,
  .legal-masthead .legal-masthead-sub{opacity:1;transform:none;animation:none}
}

/* ---------- shell ---------- */
.legal{
  padding:clamp(54px,7vw,100px) var(--gut) clamp(74px,9vw,130px);
  background:var(--paper);
}
.legal-grid{
  /* Narrower than --wrap (1280): the document column is capped at 70ch for readability, so the full
     site width would leave a big dead gutter on the right and pull the page off-centre. */
  max-width:1060px;margin:0 auto;
  display:grid;grid-template-columns:240px minmax(0,1fr);
  gap:clamp(38px,6vw,96px);align-items:start;
}

/* ---------- sticky table of contents ---------- */
.legal-toc{position:sticky;top:132px}
.legal-toc .section-label{margin-bottom:1.1rem}
.legal-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.legal-toc a{
  display:block;font-size:.86rem;line-height:1.5;color:var(--ink-soft);
  border-left:1px solid var(--line);padding:.16em 0 .16em 1em;
  transition:color .35s var(--ease),border-color .35s var(--ease),padding-left .35s var(--ease);
}
.legal-toc a:hover,
.legal-toc a.is-current{color:var(--ink);border-left-color:var(--blush);padding-left:1.35em}

/* ---------- the document column ---------- */
.legal-doc{max-width:70ch}

.legal-lede{
  padding-bottom:clamp(26px,3.5vw,42px);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(12px,2vw,22px);
}
.legal-lede p{
  font-size:clamp(1.02rem,1.35vw,1.18rem);
  line-height:1.82;color:var(--ink-soft);
}
.legal-lede p:first-child{color:var(--ink)}
.legal-updated{margin:1.5rem 0 0}

/* ---------- "the short version" summary panel (Privacy Policy) ----------
   The source document opens with a plain-language summary before the numbered sections.
   Given a visible frame so it reads as the intended at-a-glance answer, not a stray paragraph. */
.legal-summary{
  margin:clamp(30px,4vw,44px) 0 0;
  padding:clamp(24px,3vw,34px) clamp(24px,3.2vw,38px);
  background:var(--cream-2);
  border:1px solid var(--line);
  border-top:2px solid var(--blush);
}
.legal-summary .section-label{margin-bottom:.9rem}
.legal-summary p{
  margin:0;color:var(--ink);
  font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.8;
}

/* lead-ins inside a clause ("When you contact us:") */
.legal-sec strong{color:var(--ink);font-weight:700}

/* ---------- sections ---------- */
.legal-sec{padding-top:clamp(30px,4vw,48px);scroll-margin-top:118px}
.legal-sec + .legal-sec{
  border-top:1px solid var(--line);
  margin-top:clamp(30px,4vw,48px);
}
.legal-sec h2{
  display:flex;align-items:baseline;gap:.7em;
  font-size:clamp(1.42rem,2.4vw,1.95rem);
  margin:0 0 1.05rem;
}
.legal-num{
  font-family:var(--accent);font-style:italic;font-weight:500;
  font-size:.66em;color:var(--blush);flex:none;
}
.legal-sec p{color:var(--ink-soft);margin:0 0 1.05em}
.legal-sec p:last-child{margin-bottom:0}
.legal-sec em{color:var(--ink)}

.legal-link{
  color:var(--ink);border-bottom:1px solid var(--blush);
  padding-bottom:.1em;transition:border-color .35s var(--ease),color .35s var(--ease);
}
.legal-link:hover{color:var(--blush-deep);border-bottom-color:var(--blush-deep)}

/* ---------- liability notice ----------
   The clause is legally emphatic (all-caps in the source document). Rendering it
   as a bordered aside keeps that emphasis conspicuous without shouting in the flow. */
.legal-notice{
  margin:1.6em 0 0;padding:clamp(20px,2.6vw,30px) clamp(22px,3vw,34px);
  background:var(--cream-2);border-left:2px solid var(--blush);
}
.legal-notice p{
  margin:0;color:var(--ink);
  font-size:.82rem;line-height:1.9;letter-spacing:.055em;text-transform:uppercase;
}

/* ---------- contact card ---------- */
.legal-contact{
  margin-top:1.1em;padding:clamp(24px,3vw,34px);
  background:var(--cream-2);border:1px solid var(--line);
}
.legal-contact .legal-org{
  font-family:var(--display);font-size:1.22rem;color:var(--ink);
  margin:0 0 .5rem;line-height:1.3;
}
.legal-contact address{font-style:normal;color:var(--ink-soft);line-height:1.85}
.legal-contact address a{color:var(--ink);border-bottom:1px solid var(--blush);padding-bottom:.08em}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .legal-grid{grid-template-columns:1fr;gap:clamp(28px,5vw,42px)}
  .legal-toc{
    position:static;
    padding-bottom:clamp(22px,4vw,32px);
    border-bottom:1px solid var(--line);
  }
  .legal-toc ol{
    grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:.5rem 1.4rem;
  }
  .legal-doc{max-width:none}
}
@media (max-width:560px){
  .legal-toc ol{grid-template-columns:1fr}
  .legal-sec h2{gap:.55em}
}