/*
  MUAH public site — shared "Rouge Noir" editorial foundation.
  Loaded by every page (landing, privacy, terms, guidelines, 404).
  Extends the approved beta-page identity (beta.css) across the whole muah-app.co.uk domain.
  Self-contained, theme-aware (light/dark), responsive. Served from the Firebase Hosting `app` target.
  Landing-only section styles live in landing.css; this file holds tokens, base, chrome, and legal-document typography.
*/

/* ── Tokens (light default) — mirror the beta page's Rouge Noir system ───────── */
:root {
  --serif: 'Didot', 'Bodoni 72', 'Bodoni MT', 'Hoefler Text', 'Times New Roman', serif;
  --ground:   #F1E6DE;
  --ground-2: #FBF5F1;
  --ink:      #271A16;
  --muted:    #8A6F64;
  --line:     rgba(39, 26, 22, 0.14);
  --line-2:   rgba(39, 26, 22, 0.07);
  --rose:     #A9505A;
  --gold:     #A9764C;
  --gloss:    linear-gradient(103deg, #E7C6A6 0%, #D2917E 46%, #B15E67 100%);
  --gloss-ink:#2B1A14;
  --glow-a:   rgba(210, 145, 126, 0.42);
  --glow-b:   rgba(177, 94, 103, 0.16);
  --field-bg: #ffffff;
  --screen:   linear-gradient(180deg, #FBF3EC 0%, #F3E7DE 100%);
  --shadow:   0 40px 90px -34px rgba(90, 45, 45, 0.55);
  --card-shadow: 0 24px 60px -34px rgba(90, 45, 45, 0.42);
  --banner-bg: rgba(169, 118, 76, 0.08);
  --max: 72rem;
  --read: 46rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:   #140D0B;  --ground-2: #201613;
    --ink:      #F6ECE6;  --muted:    #B29A8F;
    --line:     rgba(255, 246, 240, 0.13);  --line-2: rgba(255, 246, 240, 0.06);
    --rose:     #E39BA0;  --gold:     #E4B79C;
    --gloss:    linear-gradient(103deg, #F4DBC1 0%, #E3A98C 48%, #CE8890 100%);
    --gloss-ink:#2A1712;
    --glow-a:   rgba(227, 169, 140, 0.30);  --glow-b: rgba(206, 136, 144, 0.16);
    --field-bg: rgba(255, 246, 240, 0.05);
    --screen:   linear-gradient(180deg, #241A16 0%, #170F0D 100%);
    --shadow:   0 44px 100px -38px rgba(0, 0, 0, 0.8);
    --card-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.7);
    --banner-bg: rgba(228, 183, 156, 0.07);
  }
}
:root[data-theme="dark"] {
  --ground: #140D0B; --ground-2: #201613; --ink: #F6ECE6; --muted: #B29A8F;
  --line: rgba(255,246,240,0.13); --line-2: rgba(255,246,240,0.06);
  --rose: #E39BA0; --gold: #E4B79C;
  --gloss: linear-gradient(103deg, #F4DBC1 0%, #E3A98C 48%, #CE8890 100%);
  --gloss-ink: #2A1712; --glow-a: rgba(227,169,140,0.30); --glow-b: rgba(206,136,144,0.16);
  --field-bg: rgba(255,246,240,0.05);
  --screen: linear-gradient(180deg, #241A16 0%, #170F0D 100%);
  --shadow: 0 44px 100px -38px rgba(0,0,0,0.8);
  --card-shadow: 0 30px 70px -40px rgba(0,0,0,0.7);
  --banner-bg: rgba(228,183,156,0.07);
}
:root[data-theme="light"] {
  --ground: #F1E6DE; --ground-2: #FBF5F1; --ink: #271A16; --muted: #8A6F64;
  --line: rgba(39,26,22,0.14); --line-2: rgba(39,26,22,0.07);
  --rose: #A9505A; --gold: #A9764C;
  --gloss: linear-gradient(103deg, #E7C6A6 0%, #D2917E 46%, #B15E67 100%);
  --gloss-ink: #2B1A14; --glow-a: rgba(210,145,126,0.42); --glow-b: rgba(177,94,103,0.16);
  --field-bg: #ffffff;
  --screen: linear-gradient(180deg, #FBF3EC 0%, #F3E7DE 100%);
  --shadow: 0 40px 90px -34px rgba(90,45,45,0.55);
  --card-shadow: 0 24px 60px -34px rgba(90,45,45,0.42);
  --banner-bg: rgba(169,118,76,0.08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Helvetica Neue', Helvetica, -apple-system, system-ui, 'Segoe UI', sans-serif;
  font-weight: 300;
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46vw 44vw at 78% 6%, var(--glow-a), transparent 60%),
    radial-gradient(50vw 46vw at 6% 0%, var(--glow-b), transparent 62%);
}

.shell { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.35rem, 4vw, 3rem); }

/* ── Shared helpers ──────────────────────────────────────────────────────────── */
.gl { background: var(--gloss); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow {
  display: inline-block;
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--rose);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.36rem 0.72rem 0.32rem;
}
.label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.26em; color: var(--muted); }

.wordmark {
  font-family: var(--serif); font-size: 1.32rem; letter-spacing: 0.42em; text-indent: 0.42em;
  font-weight: 400; color: var(--ink); text-decoration: none;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: inherit; font-size: 0.64rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.22em; text-decoration: none;
  border-radius: 12px; padding: 0.92rem 1.5rem; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.btn-primary { color: var(--gloss-ink); background: var(--gloss); border: none; box-shadow: 0 12px 30px -14px var(--glow-a); }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 18px 38px -15px var(--glow-a); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { color: var(--ink); background: transparent; border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--rose); color: var(--rose); transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

/* ── Site chrome — shared sticky nav + footer (landing AND legal pages) ────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--ground) 78%, transparent);
  border-bottom: 1px solid var(--line-2);
}
.nav .shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.4rem; }
.nav-links { display: none; gap: 2rem; align-items: center; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; transition: color 0.2s ease; }
.nav-links a:hover { color: var(--rose); }
.nav-cta { font-size: 0.58rem; padding: 0.62rem 1.05rem; }
@media (min-width: 820px) { .nav-links { display: flex; } }

.foot { border-top: 1px solid var(--line-2); padding: clamp(2.6rem, 5vw, 3.6rem) 0; margin-top: clamp(1.5rem, 5vw, 3rem); position: relative; z-index: 1; }
.foot .shell { display: grid; gap: 1.6rem; }
@media (min-width: 720px) { .foot .shell { grid-template-columns: 1fr auto; align-items: center; } }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-top: 1rem; }
.foot-links a { color: var(--muted); text-decoration: none; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; }
.foot-links a:hover { color: var(--rose); }
.foot-legal { color: var(--muted); font-size: 0.74rem; opacity: 0.85; margin: 0; }
.foot-legal a { color: var(--rose); text-decoration: none; }

/* ── Legal-document typography (scoped to .wrap so it never leaks into the landing) ─ */
.wrap { max-width: var(--read); margin: 0 auto; padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.35rem, 4vw, 3rem) 4rem; position: relative; z-index: 1; }

/* Editorial masthead — mirrors the beta hero: eyebrow pill + big serif title with a gloss accent */
.doc-hero { margin: 0 0 clamp(2rem, 5vw, 3rem); }
.doc-hero .eyebrow { margin-bottom: 1.2rem; }
.doc-hero .meta { margin: 0; }
.doc-hero::after { content: ""; display: block; height: 1px; background: var(--line-2); margin-top: clamp(1.8rem, 4vw, 2.4rem); }

.wrap h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 6.4vw, 3.9rem); line-height: 1.0; letter-spacing: -0.017em; text-wrap: balance; margin: 0 0 1rem; }
.wrap h1 em { font-style: italic; }
.wrap h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.12; margin: 2.8rem 0 0.7rem; padding-top: 1.4rem; border-top: 1px solid var(--line-2); }
.wrap h3 { font-family: var(--serif); font-weight: 400; font-size: 1.24rem; margin: 1.7rem 0 0.4rem; }
.wrap p, .wrap li { color: var(--ink); }
.wrap p { margin: 0.8rem 0; }
.wrap a { color: var(--rose); text-underline-offset: 2px; }
.wrap ul, .wrap ol { padding-left: 1.4rem; }
.wrap li { margin: 0.35rem 0; }
.wrap strong { font-weight: 500; }
.wrap hr { border: none; border-top: 1px solid var(--line-2); margin: 2rem 0; }

.meta { color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; margin: 0 0 1.6rem; }
.muted { color: var(--muted); }

.note-banner {
  background: var(--banner-bg); border: 1px solid var(--line);
  border-left: 3px solid var(--rose); border-radius: 12px;
  padding: 0.9rem 1.1rem; font-size: 0.9rem; color: var(--muted); margin: 1.2rem 0 1.8rem;
}
.draft-banner {
  background: var(--banner-bg); border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 12px; padding: 0.9rem 1.1rem; font-size: 0.9rem; color: var(--muted); margin: 1.2rem 0 1.8rem;
}
.placeholder { background: var(--ground-2); border-bottom: 2px dotted var(--rose); padding: 0 4px; border-radius: 4px; }

.wrap table {
  width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 0.88rem;
  display: block; overflow-x: auto;
}
.wrap th, .wrap td { border: 1px solid var(--line); padding: 0.5rem 0.65rem; text-align: left; vertical-align: top; }
.wrap th { background: var(--ground-2); font-weight: 500; }
.wrap code {
  background: var(--ground-2); padding: 1px 6px; border-radius: 5px; font-size: 90%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}