/* PP Editorial New, the headline face. Two weights only, feather light and
   very heavy, and the contrast between them is the look. */
@font-face { font-family:'PP Editorial New'; src:url('/fonts/PPEditorialNew-Ultralight.woff2') format('woff2'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Editorial New'; src:url('/fonts/PPEditorialNew-UltralightItalic.woff2') format('woff2'); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'PP Editorial New'; src:url('/fonts/PPEditorialNew-Ultrabold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'PP Editorial New'; src:url('/fonts/PPEditorialNew-UltraboldItalic.woff2') format('woff2'); font-weight:800; font-style:italic; font-display:swap; }

/* Privacy and Terms always use their light presentation. */
:root {
  --bg:#f4f1eb; --bg2:#f4f1eb; --text:#1c1b19; --muted:rgba(0,0,0,.6); --faint:rgba(0,0,0,.4);
  --line:rgba(0,0,0,.1); --card:#ffffff; --accent:#51493c; --pill:#51493c; --vignette:transparent; color-scheme:light;
}
/* The two voices, named as the app names them: one for headlines, one for
   every other word in the light presentation. */
:root {
  --font-display:'PP Editorial New', Georgia, serif;
  --font-text:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body { margin: 0; color: var(--text); background: linear-gradient(135deg, var(--bg2), var(--bg) 50%, var(--bg2)) fixed; background-color: var(--bg);
  font: 15px/1.7 var(--font-text); -webkit-font-smoothing: antialiased; transition: color .6s, background-color .6s; }
.glow { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; background: radial-gradient(circle at center, transparent 0%, var(--vignette) 100%); }
.glow i { position: absolute; border-radius: 50%; }
.g1 { top: -20%; right: -10%; width: 60vw; height: 60vw; background: rgba(255,135,111,.025); filter: blur(120px); }
.g2 { bottom: -20%; left: -10%; width: 50vw; height: 50vw; background: rgba(28,27,25,.025); filter: blur(100px); }
a { color: var(--accent); text-underline-offset: 3px; }

header { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; pointer-events: none; background: linear-gradient(var(--bg) 35%, transparent); }
header > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); font-size: 10px; font-weight: 900; letter-spacing: .3em; }
.brand img { width: 30px; height: 30px; object-fit: contain; }
.logo-light{display:block}.logo-dark{display:none}
nav { display: flex; align-items: center; gap: 20px; }
nav a { text-decoration: none; font-size: 10px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); transition: color .3s; }
nav a:hover { color: var(--text); } nav a[aria-current="page"] { color: var(--accent); }


main { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.hero { min-height: 82vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 0 40px; }
.mark { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 40px; font-size: 10px; font-weight: 900; letter-spacing: .3em; }
.mark i { width: 32px; height: 1px; background: var(--line); }
.bar { width: 48px; height: 6px; background: var(--text); margin-bottom: 32px; }
h1 { margin: 0; font-family: var(--font-display); font-size: clamp(52px, 11vw, 96px); font-weight: 300; letter-spacing: -.05em; line-height: .85; }
h1 em { display: block; font-weight: 700; }
.updated { margin: 28px 0 0; font-size: 10px; font-weight: 900; letter-spacing: .3em; text-transform: uppercase; color: var(--faint); }
.intro { max-width: 540px; margin-top: 28px; }
.intro p { color: var(--muted); font-size: 15px; letter-spacing: -.01em; }

.card { background: color-mix(in srgb, var(--card) 85%, transparent); border: 1px solid var(--line); border-radius: 32px; padding: 32px 40px; margin: 0 0 20px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.card h2 { margin: 0 0 14px; font-size: 12px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); scroll-margin-top: 100px; }
.card-lead { border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.card-lead h2 { color: var(--accent); }
h3 { font-size: 15px; font-weight: 700; margin: 22px 0 4px; color: var(--text); }
p, li { color: var(--muted); }
strong { color: var(--text); }
.card > :last-child { margin-bottom: 0; }
ul { padding-left: 20px; } li { margin: 7px 0; } li::marker { color: var(--accent); }

.cta { text-align: center; margin: 56px 0 0; }
.pill { display: inline-flex; align-items: center; gap: 12px; padding: 12px 32px; border-radius: 999px; background: var(--pill); color: #fff; text-decoration: none; font-size: 11px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 20px 50px rgba(20,184,166,.2); transition: transform .5s; }
.pill:hover { transform: scale(1.05); }

footer { max-width: 900px; margin: 80px auto 0; padding: 28px 16px 48px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; font-weight: 500; display: flex; flex-wrap: wrap; gap: 8px 22px; }
footer a { color: var(--faint); text-decoration: none; } footer a:hover { color: var(--accent); }

@media (max-width: 600px) {
  header { padding: 16px; } .brand span { display: none; } nav { gap: 14px; }
  .card { padding: 24px 20px; border-radius: 24px; }
  .hero { min-height: 70vh; padding-top: 100px; }
}

/* The original hero retains its exact content width and presentation. */
main{max-width:none;padding:0}
.hero{width:calc(100% - 32px);max-width:868px;margin-inline:auto}

/* The reading experience uses the homepage's charcoal, ivory, stone, and coral palette. */
.legal-content{--text:#1c1b19;--muted:#565249;--faint:#625c51;--accent:#51493c;--line:#1c1b1930;background:#f4f1eb;color:var(--text);font-family:var(--font-text);padding:34px 5% 75px}
.legal-body-label{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;gap:25px}
.legal-body-label,.intro-label p{font:400 9px/1.7 var(--font-text);letter-spacing:.13em}
.intro-label p{color:#1c1b19;text-transform:uppercase}
.legal-layout{max-width:1280px;display:grid;grid-template-columns:220px minmax(0,1fr);gap:8%;margin:65px auto 0;align-items:start}
.legal-toc{position:sticky;top:100px;min-width:0;padding:15px 0 25px}
.legal-toc>p{font-size:9px;letter-spacing:.16em;color:#51493c;margin:0 0 23px}
.legal-toc nav{display:grid;gap:0;align-items:stretch}
.legal-toc nav a{display:flex;gap:15px;align-items:baseline;font:400 11px/1.5 var(--font-text);letter-spacing:0;text-transform:none;padding:8px 0;color:#565249;text-decoration:none;border-bottom:1px solid transparent}
.legal-toc nav a>span{font-size:8px;letter-spacing:.1em;color:#625c51;min-width:15px}
.legal-toc nav a:hover,.legal-toc nav a:focus-visible{color:#1c1b19;border-bottom-color:#625c5166}
.legal-sections{min-width:0}
.legal-content .card{background:transparent;border:0;border-top:1px solid #1c1b1940;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:38px 0 45px;margin:0;scroll-margin-top:100px}
.legal-content .card h2{font-family:var(--font-display);font-weight:200;font-size:clamp(28px,3vw,43px);line-height:1.2;letter-spacing:-.03em;text-transform:none;color:#1c1b19;margin:0 0 25px;scroll-margin-top:110px;overflow:visible}
.legal-content .card h3{font:600 14px/1.6 var(--font-text);color:#1c1b19;margin:28px 0 10px}
.legal-content .card p,.legal-content .card li{font-size:14px;line-height:1.9;color:#565249;letter-spacing:0}
.legal-content .card strong{color:#1c1b19;font-weight:600}
.legal-content .card a{color:#51493c;text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere}
.legal-content .card ul{padding-left:20px;margin-block:20px}
.legal-content .card li{padding-left:5px;margin-block:12px}
.legal-content .card li::marker{color:#625c51}
.legal-content .card-lead{background:#e7e5df;border:0;padding:35px 36px 38px;margin-bottom:35px}
.legal-content .card-lead h2{color:#1c1b19}
.legal-content .card-lead li::marker{color:#625c51}
.legal-content .cta{text-align:left;margin:25px 0 0}
.legal-content .pill{font:400 12px/1.6 var(--font-text);text-transform:none;letter-spacing:0;gap:40px;box-shadow:none;background:#1c1b19;color:#f4f1eb;padding:18px 25px;transition:background .25s,gap .25s}
.legal-content .pill:hover{transform:none;background:#36332e;gap:50px}
.legal-content a:focus-visible,footer a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
footer{max-width:none;margin:0;padding:38px 5% 45px;border-top:1px solid #e7e5df40;background:#1c1b19;color:#e7e5df;font:400 11px/1.8 var(--font-text);gap:12px 30px}
footer>span{margin-right:auto}footer a{color:#e7e5df}footer a:hover{color:#ff876f}
header nav a[aria-current="page"]{color:#51493c}
@media(min-width:601px) and (max-width:900px){.legal-layout{grid-template-columns:170px minmax(0,1fr);gap:6%}.legal-toc nav a{font-size:10px}.legal-content .card-lead{padding:27px}}
@media(max-width:600px){.legal-content{padding:28px 6% 55px}.legal-body-label{gap:15px}.legal-body-label,.intro-label p{font-size:7px;letter-spacing:.08em}.legal-layout{display:block;margin-top:30px}.legal-toc{top:65px;z-index:3;background:#f4f1eb;padding:14px 0;border-bottom:1px solid #1c1b1940;margin-bottom:30px}.legal-toc>p{font-size:8px;margin:0 0 8px}.legal-toc nav{display:flex;overflow-x:auto;gap:22px;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:#625c51 transparent}.legal-toc nav a{white-space:nowrap;gap:8px;font-size:11px;padding:7px 0}.legal-content .card{padding:30px 0 35px}.legal-content .card h2{font-size:32px;scroll-margin-top:180px;margin-bottom:20px}.legal-content .card h3{font-size:13px}.legal-content .card p,.legal-content .card li{font-size:13px;line-height:1.9}.legal-content .card-lead{padding:26px 23px;margin-bottom:30px}.legal-content .cta{margin-top:15px}footer{padding:30px 6% 38px;font-size:10px;gap:13px 23px}footer>span{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.legal-content *{scroll-behavior:auto;transition:none!important}}
:root[data-reading="true"] header{background:#e7e5df;border-bottom:1px solid #1c1b1930;--text:#1c1b19;--faint:#565249;--card:#e7e5df;--line:#1c1b1930}
.legal-toc nav a[aria-current="location"]{color:#1c1b19;font-weight:600;border-bottom-color:#625c5166}
/* Clip horizontal overflow without creating an extra sticky scroll container. */
body{overflow-x:clip}
@media(max-width:600px){.legal-toc{top:67px}}

footer{background:#e7e5df;border-top-color:#1c1b1930;color:#565249}footer a{color:#565249}footer a:hover{color:#51493c}

/* The hero reveals in layers on every page load, independent of navigation support. */
.hero .legal-title-line { display:block; }
.hero .mark, .hero .bar, .hero .legal-title-line, .hero h1 em,
.hero .updated, .hero .intro {
  animation: memorix-hero-rise 1100ms cubic-bezier(.16, 1, .3, 1) both;
}
.hero .mark { animation-delay:80ms; }
.hero .bar { animation-delay:160ms; }
.hero .legal-title-line { animation-delay:240ms; }
.hero h1 em { animation-delay:380ms; }
.hero .updated { animation-delay:520ms; }
.hero .intro { animation-delay:640ms; }
@keyframes memorix-hero-rise {
  from { opacity:0; transform:translateY(34px); filter:blur(5px); }
  to { opacity:1; transform:translateY(0); filter:blur(0); }
}
@media(prefers-reduced-motion:reduce) {
  .hero .mark, .hero .bar, .hero .legal-title-line, .hero h1 em,
  .hero .updated, .hero .intro { animation:none; }
}
