/* ============================================================
   landing/legal.css
   Shared editorial brand system for privacy.html, terms.html and
   support.html — the same one index.html uses.

   These three pages previously each carried their own inline copy of an
   older Poppins/gradient/blob system, which drifted from the landing page
   and had to be restyled three times for every change. One stylesheet now
   serves all three: same type, same paper, same accent, same film grain.

   Type   : Fraunces (display) / Inter (text & UI). Poppins is gone from
            these pages — small uppercase labels are Inter 600, not a
            second display face.
   Color  : indigo ink on periwinkle paper, iris-blue accent; violet and
            purple only as atmosphere, never as text or surface.
   Motion : one entrance rise on the header block, disabled under
            prefers-reduced-motion. These pages ship no JavaScript.

   Legacy variable names (--iris, --muted, --cream, --lav) are kept as
   aliases so the rules below read the same as index.html's while any
   inline leftovers still resolve.
   ============================================================ */

:root {
  --paper:#F5F6FB;         /* periwinkle-tinted paper */
  --card:#FFFFFF;
  --ink:#1E1B3A;           /* brand ink */
  --ink-soft:#51557A;      /* 6.9:1 on paper */
  --navy:#221C4A;          /* deep indigo panels */
  --navy-deep:#12102B;
  --accent:#3B4FD9;        /* iris, text-safe on light (5.9:1) */
  --accent-2:#4C6EF5;      /* iris bright — hovers, large graphics */
  --accent-bright:#8FA0FF; /* iris tint on dark (6.6:1 on navy) */
  --violet:#7A5AE6;        /* atmosphere only */
  --purple:#9B4FD0;        /* atmosphere only */
  --line:#E2E4F2;
  --line-dark:rgba(255,255,255,.16);
  --tint:#EBEEFA;

  --font-display:'Fraunces',Georgia,serif;
  --font-text:'Inter',system-ui,sans-serif;

  --r-sm:10px; --r-md:18px; --r-lg:28px;
  --ease:cubic-bezier(.32,.72,0,1);
  --shadow:0 32px 64px -48px rgba(30,27,74,.28);
  --shadow-sm:0 12px 40px -28px rgba(20,18,52,.26);
  --shadow-pop:0 12px 40px -16px rgba(20,18,52,.28);

  /* aliases from the previous system */
  --iris:var(--accent); --iris-deep:var(--navy); --lav:var(--violet);
  --cream:var(--paper); --muted:var(--ink-soft);
}

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

html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-text);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
h1 em, h2 em { font-style: italic; font-weight: 500; }
a { color: var(--accent); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--accent-2); }
img { display: block; max-width: 100%; }

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* film grain — same fixed, pointer-safe overlay as the landing page */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 150; pointer-events: none;
  opacity: .022; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ---------- NAV ---------- */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 24px; height: 76px;
  display: flex; align-items: center; justify-content: space-between;
}
@media (min-width: 760px) { .nav-inner { padding: 0 48px; } }
.logo { display: flex; align-items: center; gap: 11px; }
.logo-img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; display: block; }
/* One-colour Fraunces wordmark, as on the landing page. The .lt-a/.lt-b
   split is a leftover of the old two-tone gradient logo — both halves are
   styled identically here so the markup needs no change. */
.logo-text { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: var(--ink); }
.logo-text .lt-a, .logo-text .lt-b {
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.nav-back { font-size: 14.5px; color: var(--ink-soft); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.nav-back:hover { color: var(--ink); }

/* ---------- LAYOUT ---------- */
.page-wrapper { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; padding: 72px 24px 112px; }

/* ---------- EYEBROW ---------- */
/* The rule-and-caps mark from the landing page. The .dot span in the markup
   becomes the rule itself, so no page needs editing. */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 22px;
}
.eyebrow .dot { width: 28px; height: 1.5px; border-radius: 0; background: currentColor; flex: none; }

/* ---------- PAGE HEADER ---------- */
.page-header { text-align: left; margin-bottom: 52px; padding-bottom: 38px; border-bottom: 1px solid var(--line); }
.page-header h1 { font-size: clamp(38px,5.4vw,58px); margin-bottom: 20px; }
.page-header h1 em { color: var(--accent); }
.page-header .standfirst { font-size: 17.5px; color: var(--ink-soft); line-height: 1.62; margin-bottom: 24px; max-width: 56ch; }
.page-header .sub { font-size: 17.5px; color: var(--ink-soft); line-height: 1.62; max-width: 52ch; margin: 0; }
.page-header .meta { display: flex; flex-wrap: wrap; gap: 0; font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.page-header .meta span { padding: 0 14px; border-left: 1px solid var(--line); }
.page-header .meta span:first-child { padding-left: 0; border-left: none; }

/* ---------- CONTROLLER / PROVIDER CARD ---------- */
.controller-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px; margin-bottom: 48px; box-shadow: var(--shadow-sm); }
.controller-card h3 { font-family: var(--font-text); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: 14px; }
.controller-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.72; }
.controller-card strong { color: var(--ink); font-weight: 600; }
.controller-card .sub-note { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; }

/* ---------- SECTIONS ---------- */
.policy-section { margin-bottom: 52px; }
.policy-section h2 { font-size: 27px; margin-bottom: 18px; display: flex; align-items: baseline; gap: 14px; }
/* Editorial numeral — italic Fraunces in accent, no chip, matching the
   section marks on the landing page. */
.policy-section h2 .num {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 20px; color: var(--accent); background: none;
  width: auto; height: auto; display: inline; border-radius: 0; flex: none;
}
.policy-section h3 { font-family: var(--font-text); font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--ink); margin: 26px 0 8px; }
.policy-section p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.72; margin-bottom: 13px; }
.policy-section p:last-child { margin-bottom: 0; }
.policy-section ul, .policy-section ol { padding-left: 22px; margin: 10px 0 13px; }
.policy-section li { font-size: 15.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 8px; }
.policy-section li::marker { color: var(--accent); }
.policy-section strong { color: var(--ink); font-weight: 600; }
.policy-section em { font-style: italic; }
.policy-section code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; background: var(--tint); border-radius: 5px; padding: 1px 6px; color: var(--navy); }
.policy-section .fine { font-size: 13.5px; }

/* ---------- LEGAL BASIS CHIP ---------- */
.legal-basis {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  background: var(--tint); border: 1px solid #D9DEF5;
  border-radius: 999px; padding: 6px 14px; margin: 10px 0 4px;
}
.legal-basis .lb-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; font-weight: 600; }

/* ---------- TABLES ---------- */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); margin: 18px 0; }
.sp-table, .retention-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sp-table th, .retention-table th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-soft); padding: 14px 18px;
  background: #F7F8FD; border-bottom: 1px solid var(--line);
}
.sp-table td, .retention-table td { padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; line-height: 1.58; }
.sp-table td strong { color: var(--ink); display: block; margin-bottom: 2px; font-weight: 600; }
.retention-table td:first-child { color: var(--ink); font-weight: 500; }
.sp-table tr:last-child td, .retention-table tr:last-child td { border-bottom: none; }

/* ---------- RIGHTS GRID ---------- */
.rights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.right-card { padding: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); }
.right-card h4 { font-family: var(--font-text); font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.right-card p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.62; margin: 0; }

/* ---------- NOTICE BOXES ---------- */
.notice-box { padding: 20px 22px; background: #EFEEFB; border: 1px solid #E0DEF6; border-left: 2.5px solid var(--violet); border-radius: 12px; margin: 18px 0; }
.notice-box p { font-size: 14px; color: #4E4877; margin: 0; line-height: 1.68; }
.notice-box p + p { margin-top: 11px; }
.notice-box strong { color: var(--navy); font-weight: 600; }
.notice-box a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.notice-box .nb-label { display: block; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--violet); margin-bottom: 8px; }
.notice-box.warn { background: #FDF1E9; border-color: #F5DAC6; border-left-color: #D97A45; }
.notice-box.warn p { color: #7E4526; }
.notice-box.warn strong { color: #6B3419; }
.notice-box.warn a { color: #A8501F; }
.notice-box.warn .nb-label { color: #B75F2C; }

/* ---------- REVISION HISTORY ---------- */
.revisions { border-top: 1px solid var(--line); padding-top: 34px; margin-top: 8px; }
.revisions h2 { font-size: 22px; margin-bottom: 8px; }
.revisions .rev-intro { font-size: 14.5px; color: var(--ink-soft); margin-bottom: 20px; line-height: 1.65; }
.rev { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 20px; padding: 18px 0; border-top: 1px solid var(--line); }
.rev dt { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rev dt span { display: block; font-weight: 400; color: var(--ink-soft); font-size: 12.5px; margin-top: 3px; }
.rev dd { font-size: 14.5px; color: var(--ink-soft); line-height: 1.68; }
.rev dd ul { padding-left: 18px; margin: 8px 0 0; }
.rev dd li { margin-bottom: 6px; }
.rev dd li::marker { color: var(--accent); }
.rev dd strong { color: var(--ink); font-weight: 600; }

/* ---------- SUPPORT: CONTACT PANEL ---------- */
/* The indigo slab from the landing page's demo CTA, not the old gradient. */
.contact-card {
  background: var(--navy); border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-lg); padding: 52px 40px; margin-bottom: 60px;
  text-align: center; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--shadow);
}
.contact-card .c-ic { width: 56px; height: 56px; border-radius: 17px; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.contact-card h2 { font-size: 30px; color: #fff; margin-bottom: 12px; }
.contact-card p { font-size: 16px; color: rgba(255,255,255,.75); max-width: 46ch; margin: 0 auto 26px; line-height: 1.62; }
.contact-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: #fff; font-weight: 600; font-size: 15px;
  padding: 14px 28px; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
  transition: background-color .45s var(--ease), transform .35s var(--ease);
}
.contact-btn:hover { background: var(--accent-2); color: #fff; transform: translateY(-1px); }
/* glare sweep, as on the landing CTAs */
.contact-btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform: skewX(-20deg); transition: left .55s var(--ease); pointer-events: none;
}
.contact-btn:hover::after { left: 125%; }

/* ---------- SUPPORT: SECTIONS ---------- */
.sec-title { font-family: var(--font-display); font-size: clamp(26px,3.2vw,34px); font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.sec-sub { font-size: 16px; color: var(--ink-soft); margin-bottom: 28px; }
.block { margin-bottom: 64px; }

/* ---------- SUPPORT: TOPIC CARDS ---------- */
.topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.topic-card { padding: 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.topic-card .t-ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.t-ic.ic-iris  { background: #E7EAFA; color: var(--accent); }
.t-ic.ic-coral { background: #E7EAFA; color: var(--accent); }
.t-ic.ic-mint  { background: #EDEAFA; color: var(--violet); }
.t-ic.ic-lav   { background: #EDEAFA; color: var(--violet); }
.topic-card h3 { font-family: var(--font-text); font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--ink); margin-bottom: 7px; }
.topic-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.62; }
.topic-card strong { color: var(--ink); font-weight: 600; }

/* ---------- SUPPORT: FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 24px;
  font-family: var(--font-text); font-weight: 600; font-size: 15.5px; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); transition: transform .25s var(--ease); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .faq-a { padding: 18px 24px 22px; font-size: 15px; color: var(--ink-soft); line-height: 1.72; }
.faq .faq-a p + p { margin-top: 11px; }
.faq .faq-a strong { color: var(--ink); font-weight: 600; }
.faq .faq-a em { font-style: italic; }
.faq .faq-a .notice-box { margin: 0 0 16px; }
.faq-group { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); margin: 34px 0 14px; }
.faq-group:first-of-type { margin-top: 0; }

/* ---------- FOOTER ---------- */
footer { position: relative; z-index: 1; border-top: 1px solid var(--line); background: var(--paper); }
.foot-inner { max-width: 1160px; margin: 0 auto; padding: 56px 24px 48px; display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; align-items: flex-start; }
@media (min-width: 760px) { .foot-inner { padding-left: 48px; padding-right: 48px; } }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.foot-brand .logo-img { width: 28px; height: 28px; }
.foot-brand .logo-text { font-size: 19px; }
.foot-addr { font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }
.foot-addr strong { color: var(--ink); font-weight: 600; }
.foot-links { list-style: none; display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
.foot-links a { font-size: 14px; color: var(--ink-soft); font-weight: 500; }
.foot-links a:hover { color: var(--ink); }

/* ---------- ENTRANCE ---------- */
@media (prefers-reduced-motion: no-preference) {
  .page-header, .controller-card, .contact-card { animation: rise .7s var(--ease) both; }
  .controller-card, .contact-card { animation-delay: .08s; }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px) {
  .page-wrapper { padding: 48px 20px 80px; }
  .rights-grid { grid-template-columns: 1fr; }
  .topic-grid { grid-template-columns: 1fr; }
  .contact-card { padding: 36px 24px; }
  .rev { grid-template-columns: 1fr; gap: 6px; }
  .foot-inner { flex-direction: column; gap: 28px; padding: 44px 20px 40px; }
  .nav-inner { height: 68px; }
}
@media (max-width: 600px) {
  /* Location folds into the safeguard column rather than scrolling the table */
  .sp-table th:nth-child(3), .sp-table td:nth-child(3) { display: none; }
  .policy-section h2 { font-size: 24px; }
}