/* Session™ Vault — shared marketing/legal page shell.
   Aurora bg, vignette, nav, hero, TL;DR card, doc layout, spec block, footer. */
@import url('/vendor/fonts/fonts.css?v=20260609-no-inter');

:root {
  --bg: #06060a;
  --ink: rgba(255,255,255,0.92);
  --ink-2: rgba(255,255,255,0.62);
  --ink-3: rgba(255,255,255,0.42);
  --ink-4: rgba(255,255,255,0.22);
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --accent: #d46128;
  --accent-2: #2c66b1;
  --max-w: 880px;
  --max-w-wide: 1080px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  font-family: 'Geist', 'DM Sans', system-ui, sans-serif;
  font-feature-settings: 'ss01','cv01'; -webkit-font-smoothing: antialiased;
}
body { min-height: 100vh; position: relative; overflow-x: hidden; }

/* ── Aurora ───────────────────────────────────────────────────────── */
.bg-aurora { position: fixed; inset: 0; overflow: hidden; z-index: 0; animation: bg-aurora-hue 22s linear infinite; }
.bg-aurora__blob { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; will-change: transform, opacity; }
.bg-aurora__blob--1 { width: 65vw; height: 65vh; left: -15%; top: -20%; background: radial-gradient(circle, rgba(28,53,120,0.95), transparent 60%); animation: a1 14s ease-in-out infinite alternate; }
.bg-aurora__blob--2 { width: 58vw; height: 58vh; right: -18%; top: 5%; background: radial-gradient(circle, rgba(212,97,40,0.75), transparent 60%); animation: a2 17s ease-in-out infinite alternate; }
.bg-aurora__blob--3 { width: 52vw; height: 52vh; left: 15%; bottom: -25%; background: radial-gradient(circle, rgba(177,58,115,0.65), transparent 60%); animation: a3 19s ease-in-out infinite alternate; }
.bg-aurora__blob--4 { width: 48vw; height: 48vh; right: 0%; bottom: -15%; background: radial-gradient(circle, rgba(44,102,177,0.75), transparent 60%); animation: a4 15s ease-in-out infinite alternate; }
.bg-aurora::before { content:""; position:absolute; left:30%; top:30%; width:40vw; height:40vh; border-radius:50%; filter:blur(60px); mix-blend-mode:screen; background: radial-gradient(circle, rgba(94,72,149,0.7), transparent 60%); animation: a5 12s ease-in-out infinite alternate; }
.bg-aurora::after { content:""; position:absolute; inset:-20%; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.04) 48%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 52%, transparent 70%); mix-blend-mode:screen; animation: a-sweep 9s ease-in-out infinite; pointer-events:none; }
.bg-vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 105% 95% at 50% 45%, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.55) 70%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.50) 100%);
}
@keyframes a1 { 0% { transform: translate(0,0) scale(1); opacity:.55; } 50% { opacity:.85; } 100% { transform: translate(12vw,8vh) scale(1.25); opacity:.65; } }
@keyframes a2 { 0% { transform: translate(0,0) scale(1); opacity:.5; } 50% { opacity:.8; } 100% { transform: translate(-9vw,12vh) scale(1.18); opacity:.6; } }
@keyframes a3 { 0% { transform: translate(0,0) scale(1); opacity:.4; } 50% { opacity:.7; } 100% { transform: translate(8vw,-10vh) scale(1.22); opacity:.5; } }
@keyframes a4 { 0% { transform: translate(0,0) scale(1); opacity:.55; } 50% { opacity:.85; } 100% { transform: translate(-10vw,-8vh) scale(1.15); opacity:.6; } }
@keyframes a5 { 0% { transform: translate(0,0) scale(.9); opacity:.35; } 50% { opacity:.7; } 100% { transform: translate(-6vw,7vh) scale(1.2); opacity:.45; } }
@keyframes a-sweep { 0% { transform: translateX(-30%); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(30%); opacity: 0; } }
@keyframes bg-aurora-hue { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }

/* ── Nav ──────────────────────────────────────────────────────────── */
.nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 28px 40px; }
.nav__brand { display: flex; align-items: center; gap: 14px; }
.nav__bar { width: 140px; display: block; }
.nav__bar img { width: 100%; display: block; }
.nav__back { color: var(--ink-3); text-decoration: none; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; transition: color .2s; }
.nav__back:hover { color: var(--ink); }
.nav__links { display: flex; gap: 24px; align-items: center; }
.nav__links a { color: var(--ink-3); text-decoration: none; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; transition: color .2s; }
.nav__links a:hover, .nav__links a.is-current { color: var(--ink); }

/* 2026-05-22: on phones the multi-link nav row (Privacy/Terms/Status/Help on
   help.html and status.html) plus the 140px brand and 80px horizontal padding
   overran a 390px viewport, pushing the whole document ~48-97px wide. The
   shared shell had media queries for .doc and .tldr-card but never for .nav.
   Shrink the padding, tighten the link gap, and let the links wrap so the
   page stays inside the viewport. */
@media (max-width: 560px) {
  .nav { padding: 20px 18px; flex-wrap: wrap; gap: 10px 14px; }
  .nav__bar { width: 116px; }
  .nav__links { gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { position: relative; z-index: 5; padding: 64px 40px 32px; max-width: var(--max-w); margin: 0 auto; }
.hero--wide { max-width: var(--max-w-wide); }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 99px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.06em;
  border: 1px solid var(--line); background: rgba(255,255,255,0.025);
  color: var(--ink-2); backdrop-filter: blur(6px); margin-bottom: 24px;
}
.hero__eyebrow .dot { width: 5px; height: 5px; border-radius: 99px; background: rgb(0,255,90); box-shadow: 0 0 8px rgba(0,255,90,.6); }
.hero__eyebrow .dot--amber { background: rgb(255,180,40); box-shadow: 0 0 8px rgba(255,180,40,.6); }
.hero__eyebrow .dot--red { background: rgb(255,80,80); box-shadow: 0 0 8px rgba(255,80,80,.6); }
.hero h1 { margin: 0 0 14px; font-family: 'Geist', sans-serif; font-size: clamp(40px, 6vw, 64px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.05; }
.hero p { margin: 0; max-width: 620px; font-size: 17px; line-height: 1.55; color: var(--ink-2); font-weight: 400; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase; }
.hero__meta span strong { color: var(--ink); font-weight: 500; }

/* ── Strobe-halo card ─────────────────────────────────────────────── */
.tldr-wrap { position: relative; z-index: 5; max-width: var(--max-w); margin: 24px auto 0; padding: 0 40px; }
.tldr-card-wrap { position: relative; }
.sv-halo { position: absolute; inset: 0; border-radius: 20px; pointer-events: none; }
.sv-halo svg { width: 100%; height: 100%; display: block; overflow: visible; }
@keyframes sv-strobe-march { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -10000; } }
.tldr-card {
  position: relative; border-radius: 20px;
  background: rgba(8,8,14,0.5);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.10);
  padding: 32px 36px;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.85), 0 8px 24px -4px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.tldr-card::before { content: ""; position: absolute; inset: 0; border-radius: 20px; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 100%); }
.tldr-card h2 { margin: 0 0 18px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.tldr-card ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.tldr-card li { font-size: 14px; line-height: 1.5; color: var(--ink); display: flex; gap: 10px; }
.tldr-card li::before { content: ""; flex: 0 0 auto; margin-top: 7px; width: 5px; height: 5px; border-radius: 99px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: 0 0 8px rgba(212,97,40,0.5); }
@media (max-width: 700px) { .tldr-card ul { grid-template-columns: 1fr; } }

/* ── Doc body ─────────────────────────────────────────────────────── */
.doc { position: relative; z-index: 5; max-width: var(--max-w); margin: 80px auto 0; padding: 0 40px 80px; display: grid; grid-template-columns: 220px 1fr; gap: 56px; }
@media (max-width: 880px) { .doc { grid-template-columns: 1fr; gap: 32px; } .toc { position: static; top: auto; margin-bottom: 8px; } }
.toc { position: sticky; top: 32px; align-self: start; font-family: 'Geist Mono', ui-monospace, monospace; }
.toc__head { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: section; }
.toc li { counter-increment: section; }
.toc a { display: flex; gap: 12px; padding: 7px 0; color: var(--ink-2); text-decoration: none; font-size: 12.5px; line-height: 1.4; letter-spacing: 0.01em; border-left: 1px solid transparent; padding-left: 12px; margin-left: -13px; transition: color .15s, border-color .15s; }
.toc a::before { content: counter(section, decimal-leading-zero); color: var(--ink-3); font-size: 10px; letter-spacing: 0.04em; flex: 0 0 auto; }
.toc a:hover { color: var(--ink); border-left-color: rgba(255,255,255,0.25); }
.toc a.is-active { color: var(--ink); border-left-color: var(--accent); }

.body { font-size: 15.5px; line-height: 1.65; color: var(--ink); }
.body section { padding-top: 24px; }
.body section + section { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.body h2 { margin: 0 0 18px; font-family: 'Geist', sans-serif; font-size: 26px; font-weight: 500; letter-spacing: -0.015em; display: flex; align-items: baseline; gap: 14px; }
.body h2[data-num]::before { content: attr(data-num); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: var(--ink-3); letter-spacing: 0.08em; font-weight: 400; }
.body h3 { margin: 28px 0 10px; font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: 0; font-family: 'Geist', sans-serif; }
.body p { margin: 0 0 14px; color: var(--ink-2); }
.body p strong, .body li strong { color: var(--ink); font-weight: 500; }
.body ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-2); }
.body li { margin: 6px 0; }
.body code, .body kbd { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,0.05); border: 1px solid var(--line); color: var(--ink); }
.body a { color: #d4a060; text-decoration: none; border-bottom: 1px solid rgba(212,160,96,0.3); transition: color .15s, border-color .15s; }
.body a:hover { color: #fff; border-bottom-color: #fff; }

/* Spec block */
.spec { margin: 14px 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,0.02); }
.spec__row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 12px 18px; align-items: baseline; font-size: 13.5px; }
.spec__row + .spec__row { border-top: 1px solid var(--line); }
.spec__key { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.spec__val { color: var(--ink); }
@media (max-width: 700px) { .spec__row { grid-template-columns: 1fr; gap: 4px; } }

/* ── Footer ───────────────────────────────────────────────────────── */
.sv-footer { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 32px 40px 40px; color: var(--ink-3); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; line-height: 1; border-top: 1px solid var(--line); margin-top: 40px; flex-wrap: wrap; }
.sv-footer a { color: inherit; text-decoration: none; transition: color .2s; }
.sv-footer a:hover { color: var(--ink); }
.sv-footer__sep { color: rgba(255,255,255,0.2); }
.sv-footer__what sup { vertical-align: baseline; font-size: inherit; line-height: inherit; }
.sv-footer a.is-current { color: var(--ink); }

/* ── Reusable bits ────────────────────────────────────────────────── */
.glass {
  position: relative; border-radius: 16px;
  background: rgba(8,8,14,0.45);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
}
.tier-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--ink-2); vertical-align: middle; }
.tier-pill--starter { color: #c8d6f0; border-color: rgba(120,160,220,0.3); background: rgba(44,102,177,0.12); }
.tier-pill--pro { color: #f4d4a8; border-color: rgba(212,160,96,0.3); background: rgba(212,97,40,0.12); }
.tier-pill--max { color: #f0a8b8; border-color: rgba(220,120,140,0.3); background: rgba(177,58,115,0.12); }
.tier-pill--label { color: #d4b8f0; border-color: rgba(160,120,220,0.3); background: rgba(94,72,149,0.16); }

/* 2026-05-21 Tommy: headlines should never render italic. Many marketing
   pages use <em class="sv-holo"> for the rainbow gradient on emphasised
   words; that's a visual treatment, not an italic. Force normal font-style
   inside every heading. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em { font-style: normal; }

/* 2026-05-21 Tommy: shared .sv-holo iridescent gradient — was inline-only
   in privacy.html / what-is.html / signin.html so status.html, help.html,
   terms.html and other pages using <em class="sv-holo"> didn't get the
   rainbow effect. Now applies everywhere page-shell.css is loaded. */
@property --sv-holo-tilt {
  syntax: "<angle>";
  inherits: false;
  initial-value: 110deg;
}
@property --sv-holo-mx {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
.sv-holo {
  position: relative;
  display: inline-block;
  font-style: normal;
  --sv-holo-tilt: 110deg;
  --sv-holo-mx: 50%;
  background:
    linear-gradient(105deg, transparent 25%, rgba(255,255,255,0.55) 46%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.55) 54%, transparent 75%),
    radial-gradient(circle at var(--sv-holo-mx) 50%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(var(--sv-holo-tilt),
      oklch(0.82 0.13 250) 0%,
      oklch(0.88 0.10 200) 12%,
      oklch(0.92 0.10 110) 24%,
      oklch(0.85 0.18 70)  34%,
      oklch(0.80 0.20 25)  44%,
      oklch(0.78 0.22 340) 55%,
      oklch(0.80 0.18 295) 67%,
      oklch(0.86 0.13 220) 78%,
      oklch(0.90 0.12 175) 88%,
      oklch(0.82 0.13 250) 100%);
  background-size: 220% 100%, 100% 100%, 260% 100%;
  background-position: -120% 0, 50% 50%, 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px oklch(0.82 0.13 250 / 0.18))
          drop-shadow(0 0 40px oklch(0.78 0.18 340 / 0.10));
  animation: sv-holo-flow-shared 7.5s linear infinite;
  will-change: background-position, filter;
}
@keyframes sv-holo-flow-shared {
  0%   { background-position: -130% 0,   0% 50%,   0% 50%; }
  100% { background-position:  130% 0, 200% 50%, 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-holo { animation: none; background-position: 0 0, 50% 50%, 0 50%; }
}

/* 2026-05-22 narrow-phone overflow fix.
   At 390px viewport (iPhone 15/16 baseline), the hero h1 clamp min of 40px +
   the section's 40px horizontal padding left "Terms of Service." and the
   second word of every long hero h1 spilling past the right edge. The doc
   grid's 40px padding ate the body text the same way. Same root cause as the
   .nav fix above: hard-coded 40px paddings + clamp() mins that assumed a
   wider viewport. Reduce hero/doc/tldr-wrap padding to 18px, lower hero h1
   font-size to 32px, hero p to 15px, and let the .body h2 / TL;DR card breathe
   inside 390px without touching any of the desktop styles. */
@media (max-width: 440px) {
  .hero { padding: 48px 18px 24px; }
  .hero h1 { font-size: 32px; letter-spacing: -0.02em; }
  .hero p { font-size: 15px; }
  .hero__meta { gap: 12px; }
  .tldr-wrap { padding: 0 18px; }
  .tldr-card { padding: 24px 22px; }
  .tldr-card li { font-size: 13.5px; }
  .doc { padding: 0 18px 56px; margin-top: 56px; gap: 24px; }
  .body { font-size: 15px; }
  .body h2 { font-size: 22px; gap: 10px; }
  .body section + section { margin-top: 40px; padding-top: 40px; }
  .sv-footer { padding: 24px 18px 32px; gap: 14px; font-size: 10.5px; }
}

/* 2026-06-27 (Tommy): the customer legal pages (terms, privacy, refunds) opt
   OUT of the monospace accents by setting body.no-mono. Every eyebrow, meta
   line, TL;DR heading, TOC, section number, and inline code chip renders in the
   site sans instead. Scoped to body.no-mono so the other page-shell consumers
   (tiers, status, dmca, acceptable-use, security) keep their mono accent. No
   monospace anywhere on the no-mono pages. */
body.no-mono .hero__eyebrow,
body.no-mono .hero__meta,
body.no-mono .tldr-card h2,
body.no-mono .toc,
body.no-mono .body h2[data-num]::before,
body.no-mono .body code,
body.no-mono .body kbd,
body.no-mono .spec__key,
body.no-mono .tier-pill {
  font-family: 'Geist', 'DM Sans', system-ui, sans-serif;
}