/* === DVKV-TOKENS v1 — KEEP BYTE-IDENTICAL ACROSS hub.css AND legal.css === */
@property --m { syntax: "<number>"; inherits: true; initial-value: 0.5; }
@property --s { syntax: "<number>"; inherits: true; initial-value: 0.28; }
@property --draw { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --glow-a { syntax: "<number>"; inherits: true; initial-value: 0.37; }
@property --grain-a { syntax: "<number>"; inherits: true; initial-value: 0.0625; }
@property --border-a { syntax: "<number>"; inherits: true; initial-value: 0.15; }
@property --near { syntax: "<number>"; inherits: false; initial-value: 0.5; }

:root{
  /* ---- brand endpoints. These eight hexes are the source of truth for JS too. ---- */
  --dv-1:#6C3AE0;  --dv-2:#00E5FF;  --dv-3:#FF0080;  --dv-bg:#0A0A1A;
  --kv-1:#2D6CDF;  --kv-2:#5AC8FA;  --kv-3:#E8A33D;  --kv-bg:#0B0F16;

  /* ---- the axis. JS writes ONLY this (and --s). ---- */
  --m: .5;
  --m-inv: calc(1 - var(--m));
  --p: calc(var(--m-inv) * 100%);      /* DiscoVision weight, as a percentage */

  /* ---- morphed colour tokens. Everything on the page reads these, never a raw brand hex. ---- */
  --c1: color-mix(in oklab, var(--dv-1) var(--p), var(--kv-1));
  --c2: color-mix(in oklab, var(--dv-2) var(--p), var(--kv-2));
  --c3: color-mix(in oklab, var(--dv-3) var(--p), var(--kv-3));
  --bg: color-mix(in oklab, var(--dv-bg) var(--p), var(--kv-bg));
  --bg2:color-mix(in oklab, #12122A var(--p), #17202E);

  /* ---- morphed mood scalars: DiscoVision is louder, KeynoteVision is calmer ---- */
  --glow-a:   calc(.22 + var(--m-inv) * .30);
  --grain-a:  calc(.040 + var(--m-inv) * .045);
  --radius:   calc(14px + var(--m-inv) * 8px);
  --border-a: calc(.10 + var(--m-inv) * .10);
  --border:   rgba(255,255,255,var(--border-a));
  --glow:     0 18px 60px -28px color-mix(in oklab, var(--c1) calc(var(--glow-a)*100%), transparent),
              0 0 46px -20px color-mix(in oklab, var(--c2) calc(var(--glow-a)*100%), transparent);

  /* ---- fixed neutrals: NEVER morph. Contrast must not depend on the axis. ---- */
  --ink:#EEF0F8;  --muted:#9AA0B6;  --dim:#6B7088;
  --surface:rgba(255,255,255,.035);

  /* ---- motion tokens. Every transition on this site uses one of these. ---- */
  --ease:      cubic-bezier(.2,.7,.3,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast: 160ms;  --t: 280ms;  --t-slow: 520ms;

  --wrap:1120px;
  --font-display:"Unbounded",system-ui,sans-serif;
  --font-body:"General Sans",system-ui,sans-serif;
}
/* === END DVKV-TOKENS === */

/* Legal pages run the axis FIXED — a policy document does not shimmy.
   No cursor tracking, no rAF, no canvas. --m is whatever the hub last stored. */
:root{ --wrap:820px; }

/* ---------- ancient-engine fallback: a fixed, handsome mid-axis palette ---------- */
@supports not (color: color-mix(in oklab, #000 50%, #fff)){
  :root{
    --m:.5;
    --c1:#4E53B0; --c2:#2DD6FA; --c3:#F0568E; --bg:#0A0A18; --bg2:#151528;
    --border:rgba(255,255,255,.15);
    --glow:0 18px 60px -28px rgba(78,83,176,.55), 0 0 46px -20px rgba(45,214,250,.42);
  }
}

@font-face{
  font-family:"Unbounded";
  src:url("../fonts/unbounded-var.woff2") format("woff2");
  font-weight:200 900;font-display:swap;font-style:normal;
}
@font-face{
  font-family:"General Sans";
  src:url("../fonts/general-sans-var.woff2") format("woff2");
  font-weight:200 700;font-display:swap;font-style:normal;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.7;
  overflow-x:hidden; min-height:100vh; -webkit-font-smoothing:antialiased;
}
a{ color:var(--c2); text-decoration:none;
   border-bottom:1px solid color-mix(in oklab,var(--c2) 35%,transparent); }
a:hover{ border-bottom-color:var(--c2); }
img,svg{ max-width:100%; }
:focus-visible{ outline:2px solid var(--c2); outline-offset:3px; border-radius:inherit; }

.skip-link{
  position:fixed; left:50%; top:0; translate:-50% -140%; z-index:100;
  background:var(--bg2); color:var(--ink); border:1px solid var(--c2);
  border-radius:0 0 14px 14px; padding:.7rem 1.4rem; font-weight:600;
  font-family:var(--font-display); font-size:.82rem; letter-spacing:.04em;
  transition:translate var(--t) var(--ease-out);
}
.skip-link:focus-visible{ translate:-50% 0; outline-offset:-4px; }

/* ---------- background: same stack as the hub, held still ---------- */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.aurora{
  position:absolute; border-radius:50%; filter:blur(90px); mix-blend-mode:screen;
  opacity:calc(.24 + var(--m-inv) * .20);
}
.aurora.a{
  width:60vw; height:60vw; left:-18vw; top:-24vw;
  background:radial-gradient(circle at 40% 40%,var(--c1),transparent 62%),
             radial-gradient(circle at 70% 60%,var(--c2),transparent 60%);
}
.aurora.b{
  width:56vw; height:56vw; right:-20vw; bottom:-26vw;
  background:radial-gradient(circle at 60% 40%,var(--c1),transparent 62%),
             radial-gradient(circle at 40% 70%,var(--c3),transparent 58%);
}
.grain{
  position:absolute; inset:0; opacity:var(--grain-a); mix-blend-mode:overlay;
  background-image: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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(0,0,0,.55) 100%);
}

/* ---------- shell + header ---------- */
.shell{
  position:relative; z-index:2; max-width:var(--wrap); margin:0 auto;
  padding:0 clamp(1.1rem,4vw,2.4rem);
}
header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 0; flex-wrap:wrap;
}
.brand{
  display:inline-flex; align-items:center; gap:.62rem; border:0; color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:1.02rem; letter-spacing:.01em;
  border-radius:12px; padding:.2rem .3rem; margin-inline-start:-.3rem;
}
.brand:hover{ border:0; }
.brand .mark{ width:34px; height:34px; color:var(--c2); flex:none; }
.brand .mark svg{ width:100%; height:100%; display:block; }
.pill{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--border); border-radius:100px; padding:.42rem .85rem;
  background:var(--surface); white-space:nowrap;
}

/* ---------- page head ---------- */
.head{ padding:clamp(1.6rem,6vh,3.4rem) 0 clamp(1rem,3vh,2rem); }
h1{
  font-family:var(--font-display); font-weight:800; line-height:1.02; margin:0;
  font-size:clamp(2.1rem,7vw,3.4rem); letter-spacing:-.015em;
  background:linear-gradient(100deg,var(--c1),var(--c2) 55%,var(--c3));
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
}
.updated{
  display:inline-block; margin:1.1rem 0 0; color:var(--muted);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--border); border-radius:100px; padding:.3rem .8rem;
  background:var(--surface);
}
.lede{
  font-family:var(--font-display); font-weight:500; line-height:1.45;
  font-size:clamp(1.05rem,2.6vw,1.35rem); margin:1.5rem 0 0; color:var(--ink);
}

/* ---------- prose: rules, not cards ---------- */
h2{
  position:relative; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.15rem,3vw,1.5rem); letter-spacing:-.015em; margin:3.2rem 0 .4rem;
}
h2::before{
  content:""; position:absolute; left:-1.1rem; top:.42em; width:2px; height:1.05em;
  background:var(--c2); box-shadow:0 0 12px var(--c2); border-radius:2px;
}
h2 + p{ margin-top:.4rem; }
h3{
  font-family:var(--font-display); font-weight:600; font-size:1.02rem;
  margin:1.8rem 0 .4rem; color:var(--c2);
}
p{ margin:0 0 1rem; color:var(--muted); }
p strong,li strong{ color:var(--ink); font-weight:600; }
ul{ margin:0 0 1.2rem; padding-left:1.2rem; color:var(--muted); }
li{ margin:.45rem 0; }
li::marker{ color:var(--c2); }
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;
  background:var(--surface); border:1px solid var(--border); border-radius:6px;
  padding:.08em .38em; color:var(--ink);
}

.callout{
  border:1px solid var(--border); background:var(--bg2);
  border-radius:calc(var(--radius) * 1.2); box-shadow:var(--glow);
  padding:clamp(1.2rem,3vw,1.8rem); margin:1.8rem 0; position:relative; overflow:hidden;
}
.callout::before{
  content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:linear-gradient(180deg,var(--c1),var(--c2));
}
.callout p:last-child{ margin-bottom:0; }

/* ---------- permissions table ----------
   .tablewrap already scrolled; what was missing is the AFFORDANCE that it does,
   plus a narrow-viewport density pass. The <table> keeps its semantics — this is a
   permissions disclosure, so row/column roles have to survive. */
.tablewrap{
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--c2) transparent;
  margin:1.4rem 0 1.8rem;
  border:1px solid var(--border); border-radius:16px;
  background:
    linear-gradient(to right, var(--bg2) 30%, transparent) left / 36px 100% no-repeat local,
    linear-gradient(to left,  var(--bg2) 30%, transparent) right / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), transparent) right / 14px 100% no-repeat scroll,
    var(--bg2);
}
.tablewrap::-webkit-scrollbar{ height:8px; }
.tablewrap::-webkit-scrollbar-thumb{ background:var(--c2); border-radius:8px; }
.tablewrap::-webkit-scrollbar-track{ background:transparent; }
table{ border-collapse:collapse; width:100%; min-width:520px; font-size:.95rem; }
th,td{
  text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--border);
  vertical-align:top; color:var(--muted);
}
th{
  font-family:var(--font-display); font-weight:600; font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); background:var(--surface);
}
tr:last-child td{ border-bottom:0; }
td:first-child{ color:var(--ink); font-weight:600; }

/* ---------- footer ---------- */
footer{
  position:relative; z-index:2; border-top:1px solid var(--border);
  margin-top:clamp(3rem,10vh,5rem); padding:2rem 0 3rem;
}
footer p{ color:var(--dim); font-size:.85rem; text-align:center; margin:.45rem 0; }
footer a{ color:var(--muted); border-bottom:1px solid transparent; }
footer a:hover{ border-bottom-color:currentColor; }
/* declared here so the two footers cannot drift if the block is ever added to these pages */
.foot-legal{ margin:2rem 0 0; border-top:1px solid var(--border); padding-top:1.2rem; }
.foot-legal > summary{
  cursor:pointer; list-style:none; color:var(--muted); font-size:.74rem;
  letter-spacing:.16em; text-transform:uppercase;
}
.foot-legal-body{ margin-top:.9rem; max-width:940px; }
.foot-legal-body p{ margin:0 0 .6rem; color:var(--dim); font-size:.74rem; line-height:1.65; text-align:left; }

/* ---------- narrow viewports ---------- */
@media (max-width:760px){
  h2::before{ left:0; top:-.85rem; width:44px; height:2px; }
}
@media (max-width:559px){
  table{ min-width:0; font-size:.875rem; }
  th,td{ padding:.6rem .55rem; }
  td:first-child{ white-space:normal; }
  th{ font-size:.68rem; letter-spacing:.06em; }
}

/* ---------- preferences ---------- */
@media (prefers-contrast: more){
  :root{ --glow-a:0; --border-a:.3; }
  .grain{ display:none; }
  .callout{ box-shadow:none; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
}