/* Shared styling for the legal pages (terms, privacy, refund, contact). Standalone pages, not
   tabs in the app: Paddle's reviewer opens URLs, and a #hash route is blank without JavaScript.
   Palette and type copied from index.html so they read as the same site. */
:root{
  --page-bg:#352f2b;
  --bg:#202020;
  --bg-soft:#292929;
  --text:#ffffff;
  --text-dim:#dcdce3;
  --cyan:#25e2ea;
  --line:#37373f;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--page-bg);scrollbar-gutter:stable}
body{
  /* The ribbon is an absolutely positioned child of body, so body is its containing block and
     it covers the full height of the document. overflow-x guards against any rounding on the
     3000px background tile widening the page. */
  position:relative;overflow-x:hidden;
  /* --page-bg, NOT --bg: the rest of the site paints its body with the warm brown and lets
     sections sit transparent on top, so a legal page on flat #202020 read as a colder, greyer
     page than everything around it. This is the one value that makes them the same site. */
  background:var(--page-bg);color:var(--text);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.65;
}
a{color:var(--cyan);text-decoration:none}
a:hover{text-shadow:0 0 3px currentColor}
img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none}

nav{
  position:sticky;top:0;z-index:50;
  background:rgba(30,30,35,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* Wider than the prose column on purpose: the text stays at a readable 820px while the bar
   itself can hold the full navigation without cramping. */
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;max-width:820px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;color:var(--text)}
.brand:hover{text-shadow:none}
.brand img{width:26px;height:26px}
.brand .shift{color:var(--cyan)}
/* Navigation and footer links sit quiet: dim until hovered, then cyan like every other link.
   Only links inside the prose stay cyan by default, because there they are the point. */
/* The app's own close button, copied: dim glyph on nothing, and on hover the box fills with
   the accent while the glyph goes dark, with the same small radius. text-shadow is cancelled
   because links on these pages glow on hover and a filled button should not. */
.nav-close{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:3px;flex:none;
  color:var(--text-dim);font-size:13px;line-height:1;
  transition:background .1s,color .1s;
}
.nav-close:hover{background:var(--cyan);color:#1e1e1e;text-shadow:none}

/* ---------- drifting ribbon, lifted from index.html so these pages move like the rest of
   the site. Same artwork, same opacity, same 90s period. It spans the WHOLE PAGE rather than
   the text column: inside <main> it was clipped to 820px and read as a stripe behind the
   words instead of a band across the page, which is not what it does anywhere else. It is
   invisible to the pointer and to screen readers. ---------- */
main{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:44px 24px 64px}
/* Everything with its own background sits above the ribbon; only the page ground is below. */
nav,footer{position:relative;z-index:1}
.wide-ribbon{
  position:absolute;left:0;right:0;z-index:0;pointer-events:none;opacity:.13;
  /* Short pages get shorter bands, so the gaps stay honest instead of closing up: at a
     flat 380px the Contact page left only 49px between two of them. */
  height:min(380px,22%);
  background:url(ribbon-wide.svg?v=1) repeat-x 0 0;background-size:3000px 100%;
  animation:wideRibbonDrift 90s linear infinite;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}
/* Three separate bands rather than one page-tall sweep. Their tops are PERCENTAGES of the
   page, so the spacing holds on a short page and a long one alike; at 380px each, even the
   shortest of these pages keeps a clear gap between them and they never overlap.
   Each one runs at its own period with a negative delay, and the middle one is flipped, for
   the same reason the home page does it: matched periods read as one repeating texture
   instead of separate shapes drifting. 71, 83 and 90 share no factors, so they never resync. */
.wide-ribbon.r1{top:6%;animation-duration:71s;animation-delay:-26s}
.wide-ribbon.r2{top:42%;animation-duration:83s;animation-delay:-47s;transform:scaleY(-1)}
.wide-ribbon.r3{top:76%;animation-duration:90s;animation-delay:-58s}
@keyframes wideRibbonDrift{from{background-position:0 0}to{background-position:-3000px 0}}
@media (prefers-reduced-motion:reduce){.wide-ribbon{animation:none}}
h1{font-size:36px;font-weight:700;letter-spacing:-.5px;line-height:1.2}
.updated{color:var(--text-dim);font-size:14px;margin-top:10px}
.lead{color:var(--text-dim);font-size:18px;margin-top:20px}
h2{font-size:21px;font-weight:600;margin-top:38px;letter-spacing:-.2px}
p{color:var(--text-dim);margin-top:14px}
ul{color:var(--text-dim);margin-top:14px;padding-left:22px}
li{margin-top:8px}
/* Bold inside a sentence stays white. Only headings carry the accent here, or the prose
   turns into a field of cyan and the actual links stop standing out. */
strong{color:var(--text);font-weight:600}
.note{
  background:var(--bg-soft);border:1px solid #44444c;border-radius:12px;
  padding:18px 20px;margin-top:26px;
}
.note p{margin-top:0}
hr{border:none;border-top:1px solid var(--line);margin:44px 0 0}

footer{border-top:1px solid var(--line);background:var(--bg);position:relative;z-index:1;padding:22px 0;text-align:center;color:var(--text-dim);font-size:14px}
.foot-links{margin-top:8px;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 12px}
.foot-links a{color:var(--text-dim);font-size:13px}
.foot-links a:hover{color:var(--cyan)}
/* Dividers are their own elements rather than pseudo-elements on the links, so hovering the
   bar between two links does not light one of them up. */
.foot-links span{color:#4a4a52;font-size:13px;user-select:none}