/* Shared styling for Handleshare subpages (privacy, terms, support).
   Mirrors the tokens in index.html so the whole site reads as one system. */
:root{
  --ink:#ffffff;
  --muted:rgba(255,255,255,.52);
  --muted2:rgba(255,255,255,.74);
  --canvas:#0d0020;
  --violet:#7100BA;
  --magenta:#C21FD4;
  --glow:#9D47D5;
  --surface:rgba(255,255,255,.055);
  --surface2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.1);
  --ease:cubic-bezier(0.2,0,0,1);
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
  line-height:1.62;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background-image:radial-gradient(58% 30% at 50% 0%,rgba(113,0,186,.26),transparent 72%);
  background-repeat:no-repeat;
}
a{color:var(--glow)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;color:#000;
  padding:12px 20px;border-radius:0 0 14px 0;font-weight:600}
.skip:focus{left:0}

.wrap{max-width:720px;margin:0 auto;padding:32px 24px 96px}

nav{font-size:15px}
nav a{color:var(--muted2);text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 12px 0 0;border-radius:12px;
  transition-property:color;transition-duration:150ms;transition-timing-function:var(--ease)}
nav a:hover{color:var(--ink)}
nav img{width:26px;height:26px;border-radius:7px;outline:1px solid oklch(1 0 0 / 0.1);outline-offset:-1px}

.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--glow);
  font-weight:600;margin:30px 0 0}
h1{font-size:clamp(32px,6vw,44px);font-weight:300;letter-spacing:-.025em;margin:8px 0 6px;
  text-wrap:balance}
.updated{color:var(--muted);font-size:14px;margin:0 0 8px}
h2{font-size:19px;font-weight:600;margin:36px 0 6px;letter-spacing:-.01em;text-wrap:balance}
p,li{font-size:16px;color:var(--muted2);font-weight:300;text-wrap:pretty}
ol,ul{padding-left:22px}
li{margin:6px 0}
strong{color:var(--ink);font-weight:600}

.card{background:var(--surface);border-radius:22px;padding:22px 26px;margin-top:22px;
  box-shadow:inset 0 0 0 1px var(--line),0 1px 3px rgba(0,0,0,.3)}
.card p:first-child{margin-top:0}
.card p:last-child{margin-bottom:0}
.card.accent{background:linear-gradient(150deg,rgba(194,31,212,.16),rgba(113,0,186,.1));
  box-shadow:inset 0 0 0 1px rgba(194,31,212,.34)}

hr{border:none;border-top:1px solid var(--line);margin:44px 0}

footer{margin-top:52px;padding-top:24px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted)}
footer a{color:var(--muted);text-decoration:none;
  transition-property:color;transition-duration:150ms;transition-timing-function:var(--ease)}
footer a:hover{color:var(--ink)}
.fsep{opacity:.4;margin:0 6px}

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