/* ============================================================
   LANGVIE - legal pages (privacy.html, terms.html)
   The landing's world, rebuilt as frosted glass: every surface
   is semi-transparent and blurs what sits behind it, so the
   ambient pop glow reads through the panels rather than under
   them. Tokens are the landing's verbatim; only the glass
   layer and the prose scale are new.
   ============================================================ */

:root{
  --ink:#0B0B0C; --stage:#151517; --riser:#1E1E22; --riser-2:#26262B;
  --edge:#2C2C31; --edge-hi:#3A3A41;
  --pop:#FFD84D; --pop-d:#E0B92F; --salt:#F6F5F1;
  --dim:#8B8B93; --dimmer:#5E5E66;

  --salt-2:#C9C7C0;
  --faint:#85858D;   /* smallest text: 5.4:1 on ink, 5.0:1 on stage, 4.5:1 on riser */

  /* ---- glass ----
     Panels sit around 50-60% opacity. Any lower and the text
     loses its contrast floor once a glow passes behind it. */
  --glass:rgba(24,24,28,.56);
  --glass-lo:rgba(30,30,34,.55);
  --glass-edge:rgba(255,255,255,.07);
  --blur:blur(28px) saturate(165%);
  --blur-lo:blur(18px) saturate(140%);

  --display:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scrollbar-color:var(--edge-hi) var(--ink); -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--ink); color:var(--salt);
  font-family:var(--sans); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; caret-color:var(--pop);
}

body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 860px at 76% -12%, rgba(255,216,77,.055), transparent 70%),
    radial-gradient(1000px 900px at 6%  44%, rgba(255,255,255,.026), transparent 68%),
    radial-gradient(1300px 980px at 92%  98%, rgba(255,216,77,.038), transparent 72%);
}
body::after{
  content:""; position:fixed; inset:0; background-image:var(--grain);
  opacity:.03; pointer-events:none; z-index:200;
}

::selection{ background:var(--pop); color:var(--ink); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--edge-hi); border-radius:8px; border:3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--dimmer); }
:focus-visible{ outline:2px solid var(--pop); outline-offset:3px; border-radius:4px; }

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }

h1,h2,h3{ font-family:var(--display); margin:0; text-wrap:balance; }
h1{ font-size:clamp(38px, 5.6vw, 66px); font-weight:800; font-stretch:104%; letter-spacing:-.045em; line-height:1; }
h2{ font-size:clamp(23px, 2.6vw, 31px); font-weight:730; font-stretch:102%; letter-spacing:-.032em; line-height:1.12; }
h3{ font-size:17px; font-weight:680; letter-spacing:-.022em; line-height:1.3; }
p{ margin:0; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px, 4vw, 40px); }
.data{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--dim); }

/* ---------- masthead ---------- */
.mast{
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:rgba(11,11,12,.72);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.mast.stuck{ border-bottom-color:var(--edge); background:rgba(11,11,12,.88); }
.mast .wrap{ display:flex; align-items:center; gap:14px; height:62px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand .mk{ width:26px; height:26px; border-radius:7px; flex:none; }
.brand .wd{ font-family:var(--display); font-weight:750; font-stretch:98%; font-size:17px; letter-spacing:-.035em; }
.mast .sp{ flex:1; }
.mlink{ font-size:13.5px; color:var(--dim); padding:8px 4px; transition:color .2s var(--ease); }
.mlink:hover, .mlink[aria-current="page"]{ color:var(--salt); }
@media (max-width:680px){ .mlink{ display:none; } }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:38px; padding:0 16px; border-radius:var(--r-sm);
  font-weight:640; font-size:14px; letter-spacing:-.012em;
  background:rgba(255,216,77,.9); color:var(--ink);
  backdrop-filter:var(--blur-lo); -webkit-backdrop-filter:var(--blur-lo);
  box-shadow:0 2px 0 rgba(224,185,47,.8), 0 14px 26px -14px rgba(0,0,0,.9);
  transition:transform .2s var(--ease), background .2s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{ background:#FFE07A; transform:translateY(-2px); }
.btn:active{ transform:translateY(0); box-shadow:0 1px 0 var(--pop-d); }

/* ---------- document head ---------- */
.doc-head{ padding-block:clamp(46px, 6vw, 88px) clamp(26px, 3vw, 40px); }
.eyebrow{ display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.eyebrow .data{ color:var(--pop); }
.eyebrow .bar{ height:1px; flex:1; max-width:80px; background:linear-gradient(90deg, var(--edge-hi), transparent); }
.doc-head .lead{
  margin-top:22px; font-size:clamp(16.5px, 1.4vw, 19px); line-height:1.58;
  color:var(--salt-2); max-width:58ch;
}
.stamp{ margin-top:26px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; }

/* ---------- glass ---------- */
.glass{
  background:var(--glass);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 40px 80px -50px rgba(0,0,0,.7);
}
.glass-lo{
  background:var(--glass-lo);
  backdrop-filter:var(--blur-lo); -webkit-backdrop-filter:var(--blur-lo);
  border:1px solid var(--glass-edge);
  border-radius:var(--r-md);
}

/* ---------- the two column body ---------- */
.doc{ padding-bottom:clamp(56px, 7vw, 96px); display:grid; gap:clamp(30px, 4vw, 56px); }
@media (min-width:960px){ .doc{ grid-template-columns:210px minmax(0,1fr); align-items:start; } }

.toc{ display:none; }
@media (min-width:960px){
  .toc{ display:block; position:sticky; top:86px; padding:18px 16px; }
  .toc .data{ display:block; margin-bottom:12px; }
  .toc ol{ list-style:none; margin:0; padding:0; counter-reset:t; }
  .toc li{ counter-increment:t; }
  .toc a{
    display:block; padding:5px 0 5px 22px; position:relative;
    font-size:13px; line-height:1.45; color:var(--dim);
    transition:color .2s var(--ease);
  }
  .toc a::before{
    content:counter(t); position:absolute; left:0; top:5px;
    font-family:var(--mono); font-size:10px; color:var(--dimmer);
    transition:color .2s var(--ease);
  }
  .toc a:hover{ color:var(--salt-2); }
  .toc a.on{ color:var(--pop); }
  .toc a.on::before{ color:var(--pop); }
}

/* ---------- prose ---------- */
.prose{ max-width:68ch; }
.prose section{ scroll-margin-top:84px; padding-block:clamp(30px, 3.4vw, 46px) clamp(38px, 4.4vw, 60px); }
.prose section + section{
  border-top:0;
  background-image:linear-gradient(90deg, transparent, var(--edge) 10%, var(--edge) 90%, transparent);
  background-size:100% 1px; background-repeat:no-repeat; background-position:left top;
}
.prose section:first-child{ padding-top:0; }
.prose section:last-child{ padding-bottom:0; }
.prose h2{ margin-bottom:16px; }
.prose p{ color:var(--dim); line-height:1.68; }
.prose p + p, .prose ul + p{ margin-top:14px; }
.prose strong{ color:var(--salt-2); font-weight:600; }
.prose a:not(.btn){ color:var(--salt-2); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--edge-hi); transition:color .2s var(--ease), text-decoration-color .2s var(--ease); }
.prose a:not(.btn):hover{ color:var(--pop); text-decoration-color:var(--pop); }
.prose h3{ margin-top:26px; color:var(--salt); }
.prose h3 + p{ margin-top:9px; }
.prose ul{ margin:14px 0 0; padding:0; list-style:none; }
.prose ul li{
  position:relative; padding-left:20px; color:var(--dim); line-height:1.62;
}
.prose ul li + li{ margin-top:9px; }
.prose ul li::before{
  content:""; position:absolute; left:2px; top:.72em;
  width:5px; height:5px; border-radius:50%; background:var(--edge-hi);
}
.prose ul li strong{ color:var(--salt-2); }

/* a glass note inside the prose */
.note{ margin-top:20px; padding:18px 20px; }
.note p{ font-size:14.5px; line-height:1.62; color:var(--salt-2); }
.note .data{ display:block; margin-bottom:8px; color:var(--pop); }

/* the third-party table, as glass rows */
.rows{ margin-top:18px; display:grid; gap:1px; background:var(--edge); border-radius:var(--r-md); overflow:hidden; }
.row{ background:rgba(21,21,23,.8); padding:15px 18px; display:grid; gap:4px; }
@media (min-width:620px){ .row{ grid-template-columns:180px minmax(0,1fr); gap:18px; align-items:baseline; } }
.row dt{ font-size:14.5px; font-weight:620; color:var(--salt); }
.row dd{ margin:0; font-size:14px; line-height:1.58; color:var(--dim); }
.rows dl{ margin:0; }

/* the imprint block */
.imprint{ margin-top:22px; padding:20px 22px; }
.imprint p{ font-size:14.5px; line-height:1.7; color:var(--salt-2); }
.imprint .data{ display:block; margin-bottom:10px; }

/* ---------- footer ---------- */
.foot{
  padding-block:clamp(44px, 5.4vw, 66px) clamp(34px, 4vw, 48px);
  border-top:1px solid var(--edge);
}
.foot-top{ display:grid; gap:clamp(26px, 4vw, 52px); }
@media (min-width:720px){ .foot-top{ grid-template-columns:minmax(0,1fr) auto; align-items:start; } }
.foot-say{ margin-top:14px; font-size:14px; color:var(--dim); line-height:1.6; max-width:38ch; }
.foot-nav{ display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; }
.foot-nav a{ font-size:14px; color:var(--dim); padding:4px 0; transition:color .2s var(--ease); }
.foot-nav a:hover{ color:var(--salt); }
.foot-go{ display:inline-flex; align-items:center; gap:7px; color:var(--pop) !important; font-weight:620; transition:gap .25s var(--ease); }
.foot-go:hover{ gap:11px; }
.foot-legal{
  margin-top:clamp(28px, 3.4vw, 42px); padding-top:clamp(18px, 2.2vw, 26px);
  border-top:1px solid var(--edge);
  display:flex; flex-wrap:wrap; gap:8px 28px; align-items:baseline;
}
.foot-legal p{ font-size:12.5px; color:var(--faint); line-height:1.6; }
.foot-legal a{ font-size:12.5px; color:var(--faint); transition:color .2s var(--ease); }
.foot-legal a:hover{ color:var(--salt-2); }
.foot-fine{ margin-left:auto; }
@media (max-width:560px){ .foot-fine{ margin-left:0; } }


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* Safari on iOS drops backdrop-filter under memory pressure, and a
   browser without it would show bare text on the glow. Both get an
   opaque floor instead. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mast{ background:rgba(11,11,12,.94); }
  .glass{ background:#1B1B1F; }
  .glass-lo{ background:#151517; }
  .row{ background:#17171A; }
}