/* ===== GLOBAL ===== */
:root{
  --bg-1000:#080808; --bg-900:#0c0c0c; --bg-800:#121212; --bg-700:#171717;

  /* Warm palette (reds only + neighbors) */
  --accent:#ff3a3a;    /* ruby */
  --accent-2:#ff6b6b;  /* ember */
  --rose:#ff5b7f;      /* soft rose */
  --coral:#ff8a66;     /* coral */

  --panel:#141414; --panel-2:#101010;
  --text:#f2f2f2; --muted:#bdbdbd;

  --card-radius:16px; --btn-radius:12px;
  --shadow-1:0 10px 30px rgba(0,0,0,.45);
  --shadow-2:0 18px 60px rgba(0,0,0,.55);

  /* Global mesh (subtle red haze used across sections) */
  --mesh:
    radial-gradient(900px 380px at 12% 8%,  rgba(255,74,74,.08), transparent 60%),
    radial-gradient(700px 340px at 88% 12%, rgba(255,110,98,.08), transparent 60%),
    radial-gradient(780px 360px at 18% 92%, rgba(255,91,127,.06), transparent 60%),
    radial-gradient(680px 320px at 82% 88%, rgba(255,138,102,.06), transparent 60%),
    radial-gradient(900px 420px at 50% 50%, rgba(255,74,74,.04), transparent 70%);
}

*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }

/* IMPORTANT: turn off CSS smooth so JS animator is perfectly fluid */
html{ scroll-behavior:auto }

body{
  margin:0; color:var(--text);
  background:
    var(--mesh),
    linear-gradient(180deg, var(--bg-1000), var(--bg-900));
  font: 16px/1.5 "Inter","Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%; display:block}
a{ color:#f0eaea; text-decoration:none }
a:hover{ color:#ffd1d1 }

.container{ max-width:1200px; margin:0 auto; padding:24px 20px }

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(6px);
  background: rgba(12,12,12,.82);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px }
.brand{ display:flex; align-items:center; gap:12px }
.brand img{ height:56px; width:auto; border-radius:12px }
.brand h1{ margin:0; font-size:20px; letter-spacing:.5px; color:var(--accent) }
.brand-link{ display:flex; align-items:center; gap:12px }
nav a{ margin-left:18px; font-weight:600; color:#dadada }

#navDashboard{ display:none }
html.authed #navDashboard{ display:inline-block }
html.authed #navLogin{ display:none }

/* Buttons */
.btn{
  --bgA: var(--accent); --bgB: var(--accent-2);
  display:inline-block; padding:12px 18px; border-radius:var(--btn-radius);
  background: linear-gradient(135deg,var(--bgA),var(--bgB));
  color:#0b0b0b !important; font-weight:800; letter-spacing:.3px; border:none; cursor:pointer;
  box-shadow: 0 8px 26px rgba(255,74,74,.22), inset 0 0 0 1px rgba(0,0,0,.2);
  transition: transform .22s cubic-bezier(.22,1,.36,1),
              filter .22s ease, box-shadow .25s ease;
}
.btn:hover{ transform: translateY(-3px); filter:saturate(1.06); box-shadow:0 16px 36px rgba(255,74,74,.28) }
.btn:active{ transform: none; box-shadow:0 8px 20px rgba(0,0,0,.25) }
.btn-pill{ border-radius:999px }

/* Hollow CTA */
.btn-hollow-red{
  background: transparent; color:#0b0b0b !important;
  border:2px solid var(--accent); position:relative; overflow:hidden;
}
.btn-hollow-red::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin:left; transition:transform .26s cubic-bezier(.22,1,.36,1);
}
.btn-hollow-red:hover::after{ transform: scaleX(1) }

/* Utility */
.section{
  padding:120px 0;               /* bigger sections only on index */
  position:relative;
}
.section::before{
  /* mesh overlay for every section to “evenly” sprinkle the red hue */
  content:""; position:absolute; inset:-10%;
  background: var(--mesh);
  opacity:.55; filter:saturate(1.0) blur(22px);
  z-index:0; pointer-events:none;
}
.section > *{ position:relative; z-index:1 }

.muted{ color:var(--muted) }
.reveal{
  opacity:0; transform: translateY(26px) scale(.985);
  transition: opacity .9s cubic-bezier(.22,1,.36,1),
              transform .9s cubic-bezier(.22,1,.36,1);
}
.reveal.active{ opacity:1; transform:none }

/* Offset for #plans */
#plans{ scroll-margin-top: calc(var(--navH, 80px) + 12px); }

/* Nav CTA */
nav .btn-cta{
  background:transparent !important; border:2px solid var(--accent);
  color:#fff !important; padding:10px 16px;
  transition: background .22s cubic-bezier(.22,1,.36,1),
              color .22s cubic-bezier(.22,1,.36,1),
              transform .18s ease, box-shadow .25s ease;
}
nav .btn-cta:hover, nav .btn-cta:focus-visible{
  background:var(--accent) !important; color:#000 !important;
  box-shadow:0 14px 30px rgba(255,74,74,.25); transform: translateY(-3px);
}
nav .btn-cta:active{ transform:none }
/* === ONYX tweaks (drop-in overrides) ============================== */
/* Warm red palette only (no blue/green) */
:root{
  --ruby:#ff3a3a;
  --rose:#ff5b7f;
  --coral:#ff8a66;
}

/* Global animated red mesh — randomized feeling via drifting layers */
body::before{
  content:"";
  position:fixed; inset:-15%;
  z-index:-1; pointer-events:none;
  opacity:.45; filter: blur(26px) saturate(1.05);
  mix-blend-mode: screen; /* keeps it soft on dark bg */
  background-image:
    radial-gradient(520px 280px at 12% 18%,  rgba(255,74,74,.12), transparent 60%),
    radial-gradient(720px 360px at 88% 12%,  rgba(255,139,110,.10), transparent 62%),
    radial-gradient(680px 340px at 18% 86%,  rgba(255,91,127,.10),  transparent 60%),
    radial-gradient(820px 420px at 78% 88%,  rgba(255,90,90,.08),   transparent 64%),
    radial-gradient(900px 480px at 50% 50%,  rgba(255,74,74,.06),   transparent 70%);
  background-repeat:no-repeat;
  background-size:
    520px 280px,
    720px 360px,
    680px 340px,
    820px 420px,
    900px 480px;
  background-position:
    12% 18%,
    88% 12%,
    18% 86%,
    78% 88%,
    50% 50%;
  animation:
    meshDrift 34s ease-in-out infinite alternate,
    meshDrift2 47s ease-in-out infinite alternate-reverse,
    meshPulse 10s ease-in-out infinite;
}

@keyframes meshDrift{
  0%   { background-position: 12% 18%, 88% 12%, 18% 86%, 78% 88%, 50% 50%; }
  100% { background-position: 18% 12%, 82% 18%, 22% 78%, 72% 92%, 46% 54%; }
}
@keyframes meshDrift2{
  0%   { background-position: 12% 18%, 88% 12%, 18% 86%, 78% 88%, 50% 50%; }
  100% { background-position: 10% 24%, 90% 10%, 24% 84%, 70% 82%, 54% 46%; }
}
@keyframes meshPulse{
  0%,100%{ opacity:.43 }
  50%    { opacity:.52 }
}

/* Section mesh (lighter now, body::before does the heavy lift) */
.section::before{
  opacity:.35; filter: blur(20px) saturate(1.0);
}

/* Nav underline (hover + active page) */
.nav a{
  position:relative;
}
.nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, var(--accent, #ff3a3a), var(--rose, #ff5b7f));
  transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
  opacity:.9;
}
.nav a:hover::after,
.nav a[aria-current="page"]::after,
.nav a.active::after{
  transform: scaleX(1);
}

/* Hollow buttons: white label before hover → black after hover (fill) */
.btn-hollow-red{
  border:2px solid var(--accent);
  background:transparent;
  color:#fff !important;                 /* readable on dark bg */
}
.btn-hollow-red::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(135deg, var(--ruby), var(--rose));
  transform: scaleX(0); transform-origin:left;
  transition: transform .26s cubic-bezier(.22,1,.36,1);
}
.btn-hollow-red:hover::after{ transform: scaleX(1) }
.btn-hollow-red:hover{ color:#000 !important; }

/* Also fix nav CTA (if you use .btn-cta) to match the same behavior */
nav .btn-cta{
  background:transparent !important;
  border:2px solid var(--accent);
  color:#fff !important;
}
nav .btn-cta:hover{
  background:var(--accent) !important;
  color:#000 !important;
}
/* Limit nav underline to text links only (exclude button-style links) */
header .nav a:not(.btn):not(.btn-getstarted):not(.btn-hollow-red):not(.btn-cta){
  position: relative;
}
header .nav a:not(.btn):not(.btn-getstarted):not(.btn-hollow-red):not(.btn-cta)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, var(--accent, #ff3a3a), #ff5b7f);
  transform: scaleX(0); transform-origin:left;
  transition: transform .25s ease;
  opacity:.9;
}
header .nav a:not(.btn):not(.btn-getstarted):not(.btn-hollow-red):not(.btn-cta):hover::after,
header .nav a:not(.btn):not(.btn-getstarted):not(.btn-hollow-red):not(.btn-cta)[aria-current="page"]::after,
header .nav a:not(.btn):not(.btn-getstarted):not(.btn-hollow-red):not(.btn-cta).active::after{
  transform: scaleX(1);
}

/* Safety: if any underline was applied earlier to button links, remove it */
header .nav a.btn::after,
header .nav a.btn-getstarted::after,
header .nav a.btn-hollow-red::after,
header .nav a.btn-cta::after{
  content: none !important;
}
/* === Button legibility fixes (safe across the app) === */

/* Generic button base: let variants set the color explicitly */
.btn { text-decoration: none; }

/* Outline-red: white text idle, black text on red fill hover */
.btn-outline-red{
  background: transparent;
  border: 2px solid var(--accent, #ff3a3a);
  color: #fff !important;
}
.btn-outline-red:hover,
.btn-outline-red:focus-visible{
  background: var(--accent, #ff3a3a);
  color: #0b0b0b !important;
}

/* Dark/neutral buttons: always white text */
.btn-dark{
  background: #141414;
  border: 1px solid #2a2a2a;
  color: #fff !important;
}
.btn-dark:hover{ background:#191919; }

/* Safety: inside the dashboard area, force white text unless a variant overrules it */
.dashboard .btn,
.dashboard .btn * { color:#fff !important; }

/* Keep nav CTA behavior you wanted (white idle, black on red hover) */
header .nav a.btn-getstarted,
header .nav a.btn-getstarted:link,
header .nav a.btn-getstarted:visited{
  color:#fff !important;
  border-color: var(--accent, #ff3a3a);
}
header .nav a.btn-getstarted:hover,
header .nav a.btn-getstarted:focus-visible{
  background: var(--accent, #ff3a3a) !important;
  color:#0b0b0b !important;
}

/* Remove any animated underline from button-style links */
header .nav a.btn::after,
header .nav a.btn-getstarted::after,
header .nav a.btn-outline-red::after,
header .nav a.btn-dark::after{ content:none !important; }
/* ===== Login Modal (global) ===== */
.auth-modal{
  position: fixed; inset: 0; z-index: 1000;
  display: none; place-items: center; padding: 20px;
  background: rgba(10,10,10,.55);
  backdrop-filter: blur(8px) saturate(115%);
}
.auth-modal.open{ display: grid; }

/* prevent page scroll when modal open */
body.modal-open{ overflow: hidden; }

/* Reuse ONYX auth card look */
.auth-card{
  width: min(520px, 92vw);
  background: linear-gradient(180deg,#121212,#0f0f0f);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; padding: 22px 22px 18px;
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
  position: relative; overflow: hidden;
  animation: authPop .18s ease;
}
.auth-card::after{
  content:""; position:absolute; inset:-1px;
  background: radial-gradient(600px 120px at 8% -10%, rgba(255,60,60,.12), transparent);
  pointer-events:none;
}
@keyframes authPop{
  from{ transform: translateY(8px); opacity: .0 }
  to  { transform: none;            opacity: 1  }
}
.auth-card h2{ margin:0 0 6px; font-size:22px }
.auth-card p.muted{ color:var(--muted); margin:0 0 14px }

.auth-row{ display:grid; gap:12px; margin-top:10px }
.auth-row label{ font-size:12px; color:#bfbfbf }
.auth-row input{
  background:#0e0e0e; color:#fff; border:1px solid #232323;
  border-radius:12px; padding:12px; outline:none; width:100%;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.auth-row input:focus{ border-color:#343434; box-shadow:0 0 0 3px rgba(255,60,60,.15) }

.auth-actions{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:14px }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; font-weight:800; text-decoration:none; cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-red{ background:var(--accent); color:#000; border:0; }
.btn-red:hover{ background:#e03030; transform: translateY(-1px); box-shadow:0 10px 24px rgba(255,60,60,.22) }
.btn-ghost{ background:#0f0f0f; border:1px solid #232323; color:#eee; }
.btn-ghost:hover{ border-color:#444; transform: translateY(-1px) }

.auth-error{ margin-top:10px; color:#ff7a7a; font-size:13px; display:none }
.auth-success{ margin-top:10px; color:#7ef59b; font-size:13px; display:none }

/* close (X) */
.auth-close{
  position:absolute; top:10px; right:10px;
  background:#0f0f0f; border:1px solid #242424; width:36px; height:36px;
  border-radius:10px; color:#eee; font-weight:900; line-height:36px; text-align:center; cursor:pointer;
}
.auth-close:hover{ border-color:#444 }
.user-menu { position: relative; display: inline-block; margin-left: 8px; }
.user-menu[hidden] { display: none !important; }

.user-menu .um-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:10px; border:1px solid #222;
  background:#0f0f0f; color:#fff; font-weight:800; cursor:pointer;
}
.user-menu .um-btn .avatar{
  width:24px; height:24px; border-radius:50%; display:inline-grid; place-items:center;
  background:#ff3a3a; color:#000; font-size:12px; font-weight:900;
}
.user-menu .um-btn .caret{ opacity:.8; }

.user-menu .dropdown{
  position:absolute; right:0; top:100%; margin-top:8px; min-width:200px;
  background:#101010; border:1px solid #222; border-radius:12px; padding:6px;
  box-shadow:0 14px 40px rgba(0,0,0,.45); z-index:1000;
}
.user-menu .dropdown[hidden]{ display:none; }
.user-menu .dropdown .item{
  display:block; width:100%; text-align:left; border:0; background:transparent;
  color:#e9e9e9; padding:10px 12px; border-radius:10px; font-weight:700; cursor:pointer;
  text-decoration:none;
}
.user-menu .dropdown .item:hover{ background:#171717; }
.user-menu .dropdown .item.danger{ color:#ffb3b3; }
.user-menu .dropdown .item.danger:hover{ background:#1a1111; }
/* === Auth modal: layout + buttons (global) === */
#onyxAuth .actions{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr; /* stacked on all screens per your request */
  margin-top: 10px;
}

#onyxAuth .btn{
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  font-weight: 800;
  border: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .18s, box-shadow .18s, filter .18s;
}

/* Both buttons use the same red hue and are readable */
#onyxAuth .btn-primary{
  background: linear-gradient(135deg, #ff3a3a, #ff6b6b);
  color: #000;
}
#onyxAuth .btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,58,58,.25);
}

/* Replace old .btn-hollow with this class in the HTML */
#onyxAuth .btn-secondary{
  background: #ff3a3a;    /* solid red, readable */
  color: #000;
}
#onyxAuth .btn-secondary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255,58,58,.25);
}

/* Inputs keep your original look; included here for completeness */
#onyxAuth .field input{
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #232323;
  background: #0c0c0c;
  color: #fff;
  outline: none;
}
#onyxAuth .field input:focus{
  border-color: #333;
  box-shadow: 0 0 0 3px rgba(255,58,58,.16);
}
/* Force the hollow button to be solid red inside the auth modal */
#onyxAuth .btn-hollow{
  background: linear-gradient(135deg, #ff3a3a, #ff6b6b ) !important;
  border-color: #ff3a3a !important;
  color: #000 !important;      /* readable text */
  width: 100%;
}
#onyxAuth .btn-hollow:hover{
  filter: brightness(1.05);
  box-shadow: 0 10px 24px rgba(255,58,58,.25);
  transform: translateY(-1px);
}
.onyx-auth .auth-logo{
  width:72px; height:72px;
  border-radius:14px;
  display:block;
  margin:2px auto 10px;
  box-shadow:0 10px 30px rgba(255,51,51,.18);
}
/* ONYX login modal – single source of truth */
#onyxAuth[hidden]{ display:none !important; }
#onyxAuth{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
}
html.modal-open { overflow:hidden; }

/* Dialog */
.onyx-auth{
  width:min(92vw,420px);
  background:linear-gradient(180deg,#101010,#0d0d0d);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px; padding:22px 20px;
  box-shadow:0 22px 60px rgba(0,0,0,.6);
  position:relative; margin:0;  /* ensure no extra boxes/margins */
}

/* Close button */
.onyx-auth .x{
  position:absolute; top:10px; right:10px; width:34px; height:34px;
  border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background:#0e0e0e; color:#eee; cursor:pointer;
}

/* Form + fields */
.onyx-auth .field{ display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.onyx-auth .field label{ font-size:12px; color:#c8c8c8; font-weight:700; letter-spacing:.2px; }
.onyx-auth .field input{
  width:100%; padding:12px; border-radius:12px; border:1px solid #232323;
  background:#0c0c0c; color:#fff; outline:none;
}
.onyx-auth .field input:focus{ border-color:#333; box-shadow:0 0 0 3px rgba(255,58,58,.16); }

/* Buttons – stacked and full width */
.onyx-auth .actions{
  display:grid; gap:10px; margin-top:10px;
  grid-template-columns:1fr; /* stack by default */
}
@media (min-width:460px){
  .onyx-auth .actions{ grid-template-columns:1fr 1fr; } /* side-by-side on wider screens */
}
.onyx-auth .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; font-weight:800; cursor:pointer; text-decoration:none; border:0;
  transition:transform .18s, box-shadow .18s, background .18s, color .18s;
}

/* Make BOTH buttons readable red (no black) */
:root { --onyx-accent:#ff3a3a; }
.onyx-auth .btn-primary{
  background:linear-gradient(135deg,var(--onyx-accent),#ff6b6b); color:#000;
}
.onyx-auth .btn-primary:hover{
  transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,58,58,.25);
}
.onyx-auth .btn-hollow{
  background:transparent; color:#fff; border:2px solid var(--onyx-accent);
}
.onyx-auth .btn-hollow:hover{
  background:var(--onyx-accent); color:#000; box-shadow:0 10px 24px rgba(255,58,58,.25);
}

.onyx-auth .err{ color:#ff7b7b; font-size:13px; min-height:1.2em; text-align:center; margin-top:6px; }

/* Optional logo */
.onyx-auth .auth-logo{
  width:72px; height:72px; border-radius:14px; display:block; margin:2px auto 10px;
  box-shadow:0 10px 30px rgba(255,51,51,.18);
}
/* === ONYX Auth Modal (scoped) === */
:root { --onyx-accent:#ff3a3a; }

html.modal-open { overflow:hidden; }

#onyxAuth[hidden]{ display:none !important; }
#onyxAuth{
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
}

.onyx-auth{
  width:min(92vw,420px);
  background:linear-gradient(180deg,#101010,#0d0d0d);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;               /* square-ish like index */
  padding:22px 20px;
  box-shadow:0 22px 60px rgba(0,0,0,.6);
  position:relative;
}

.onyx-auth .x{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:#0e0e0e; color:#eee; cursor:pointer;
}

.auth-logo{
  display:block; margin:6px auto 10px; width:72px; height:72px;
  border-radius:12px; box-shadow:0 10px 30px rgba(255,51,51,.18);
}

.onyx-auth h3{
  margin:6px 0 8px; text-align:center;
  font:800 20px/1.2 Inter,system-ui; color:#fff;
}
.onyx-auth p.sub{ color:#bdbdbd; text-align:center; margin:0 0 12px; font-size:13px; }

.onyx-auth .field{ display:flex; flex-direction:column; gap:6px; margin:12px 0; }
.onyx-auth .field label{ font-size:12px; color:#c8c8c8; font-weight:700; letter-spacing:.2px; }
.onyx-auth .field input{
  width:100%; padding:12px; border-radius:12px; border:1px solid #232323;
  background:#0c0c0c; color:#fff; outline:none;
}
.onyx-auth .field input:focus{ border-color:#333; box-shadow:0 0 0 3px rgba(255,58,58,.16); }

/* Buttons: FULL WIDTH only inside the modal */
.onyx-auth .actions{ display:grid; gap:10px; margin-top:10px; grid-template-columns:1fr; }
.onyx-auth .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; font-weight:800; cursor:pointer; text-decoration:none; border:0;
  transition:transform .18s, box-shadow .18s, background .18s, color .18s;
  width:100%;
}
.onyx-auth .btn-primary{ background:linear-gradient(135deg,var(--onyx-accent),#ff6b6b); color:#000; }
.onyx-auth .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(255,58,58,.25); }
.onyx-auth .btn-hollow{ background:transparent; color:#fff; border:2px solid var(--onyx-accent); }
.onyx-auth .btn-hollow:hover{ background:var(--onyx-accent); color:#000; box-shadow:0 10px 24px rgba(255,58,58,.25); }

.onyx-auth .err{ color:#ff7b7b; font-size:13px; min-height:1.2em; text-align:center; margin-top:6px; }
/* === /ONYX Auth Modal (scoped) === */
/* Mini-legal footer styles */
footer .legal-mini {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
footer .legal-mini .risk { margin: 0 0 6px; }
footer .legal-mini .links { margin: 0; }
footer .legal-mini a {
  color: #bdbdbd;
  text-decoration: underline;
  text-underline-offset: 2px;
}
footer .legal-mini a:hover { color: #ffffff; }
/* ===== Pre-footer Legal Band (shared) ===== */
.legal-band{
  margin: 28px 0 0;
  padding: 24px 0;
  background: linear-gradient(180deg, #0f0f0f, #101010);
  border-top: 1px solid #1f1f1f;
  border-bottom: 1px solid #1f1f1f;
}
.legal-band__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}
.legal-band h3{
  margin: 0 0 12px;
  font-weight: 800;
}
.legal-band__grid{
  display: grid;
  gap: 12px;
  margin: 12px auto 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 780px){
  .legal-band__grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1080px){
  .legal-band__grid{ grid-template-columns: 1fr 1fr 1fr; }
}

.legal-card{
  background:#111;
  border:1px solid #222;
  border-radius:12px;
  padding:14px;
  text-align:left;
}
.legal-card h4{
  margin:0 0 6px;
  font-weight:800;
}
.legal-card p{
  margin:0;
  color:#cfcfcf;
  line-height:1.55;
}
.legal-card p + p{ margin-top:8px; }
.legal-card .micro{
  font-size:12px;
  color:#b8b8b8;
  line-height:1.5;
}

.legal-band__links{
  margin: 12px 0 0;
  font-size: 13px;
}
.legal-band__links a{
  color:#cfcfcf;
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal-band__links a:hover{ color:#fff; }

/* Keep the existing footer mini-legal readable & centered */
footer .legal-mini{
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  text-align: center;
}
footer .legal-mini .links a{
  color:#bdbdbd; text-decoration:underline; text-underline-offset:2px;
}
footer .legal-mini .links a:hover{ color:#fff; }
/* ===== Simple Legal Text (shared) ===== */
.legal-text { padding: 20px 0 16px; }
.legal-text__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}
.legal-text h3 { margin: 0 0 10px; font-weight: 800; }
.legal-text p { margin: 8px 0; color: #cfcfcf; line-height: 1.6; }
.legal-text p strong { color: #fff; }
.legal-text .micro { font-size: 12px; color: #b8b8b8; }
.legal-text hr {
  margin: 14px auto;
  max-width: 760px;
  border: 0;
  border-top: 1px solid #1f1f1f;
}
.legal-links a {
  color: #cfcfcf;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-links a:hover { color: #fff; }
/* ===== ONYX Legal (shared) ===== */
.legal-text {
  padding: 22px 0 10px;
  background: transparent; /* no panel look */
}
.legal-text__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.legal-text h3 {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 16px;           /* small, understated */
  letter-spacing: .2px;
  color: #e9e9e9;
}

.legal-text p {
  margin: 8px 0;
  color: #c9c9c9;
  line-height: 1.55;
  font-size: 13px;
}

.legal-text p strong { color: #fff; }

.legal-links {
  margin-top: 8px;
  font-size: 13px;
}

.legal-links a {
  color: #d6d6d6;
  text-decoration: none;
  border-bottom: 1px dashed #555;        /* subtle ONYX style */
  padding-bottom: 1px;
}
.legal-links a:hover {
  color: #fff;
  border-bottom-color: var(--accent, #ff3a3a);
}

/* bullet separators without looking like TPT */
.legal-links a + a::before {
  content: "•";
  margin: 0 10px;
  color: #555;
}

/* © footer centered, narrow + muted */
.site-footer {
  padding: 8px 0 24px;
  text-align: center;
}
.site-footer p {
  margin: 0;
  font-size: 12px;
  color: #bdbdbd;
}
/* Segmented control container */
.size-switch{
  display:inline-flex;
  gap:10px;
  background:#0f0f0f;
  border:1px solid #222;
  padding:6px;
  border-radius:12px;
}

/* Size buttons (bigger + readable) */
.size-switch .seg-btn{
  padding:12px 18px;            /* bigger */
  font-size:16px;                /* more readable */
  font-weight:800;
  border-radius:10px;
  border:1px solid #2a2a2a;
  background:#121212;
  color:#fff;
  cursor:pointer;
  transition:background .15s, color .15s, box-shadow .15s, transform .15s;
}
.size-switch .seg-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.size-switch .seg-btn.active{
  border-color:#ff3a3a;
  box-shadow:0 0 0 2px rgba(255,58,58,.18) inset;
  background:linear-gradient(180deg,#151515,#101010);
}
/* Plan-type tabs */
.plan-type-tabs{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:8px 0 12px;
}
.plan-type-tabs .plan-tab{
  padding:12px 18px;
  font-size:16px; font-weight:800;
  border-radius:12px;
  border:1px solid #2a2a2a;
  background:#121212; color:#fff; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.plan-type-tabs .plan-tab:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.25); }
.plan-type-tabs .plan-tab.active{
  border-color:#ff3a3a;
  box-shadow:0 0 0 2px rgba(255,58,58,.18) inset;
  background:linear-gradient(180deg,#151515,#101010);
}

/* Size chips */
.size-row{ display:flex; gap:10px; flex-wrap:wrap; margin:6px 0 14px; }
.size-row .chip{
  padding:12px 18px;
  font-size:16px; font-weight:900; letter-spacing:.2px;
  border-radius:12px;
  border:1px solid #2a2a2a;
  background:#121212; color:#fff; cursor:pointer;
  transition:transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
}
.size-row .chip:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(0,0,0,.25); }
.size-row .chip.active{
  border-color:#ff3a3a;
  box-shadow:0 0 0 2px rgba(255,58,58,.18) inset;
  background:linear-gradient(180deg,#151515,#101010);
}
/* --- Universal button readability upgrades --- */
:root{
  --onyx-accent: #ff3a3a;
  --onyx-text: #ffffff;
  --onyx-muted: #cfcfcf;
}

/* Base btn already exists, we just ensure legibility */
.btn{
  font-weight: 800;
  letter-spacing: .2px;
  padding: 12px 16px;              /* comfortable hit area */
}

/* Primary stays as-is but ensure readable text */
.btn-primary{ color: #000 !important; }

/* Hollow buttons: increase contrast so they’re never “black”/faint */
.btn-hollow{
  background: #111;                /* was transparent; too dark on dark bg */
  color: var(--onyx-text) !important;
  border: 2px solid var(--onyx-accent);
}
.btn-hollow:hover{
  background: var(--onyx-accent);
  color: #000 !important;
  box-shadow: 0 10px 24px rgba(255,58,58,.25);
}

/* CANCEL / secondary destructive actions
   Add data-variant="cancel" on those buttons/links */
.btn[data-variant="cancel"],
button[data-variant="cancel"],
a.btn[data-variant="cancel"]{
  background: #1d1d1d;
  color: #f1f1f1 !important;
  border: 1.5px solid #3a3a3a;
}
.btn[data-variant="cancel"]:hover,
button[data-variant="cancel"]:hover,
a.btn[data-variant="cancel"]:hover{
  background: #2a2a2a;
  border-color: #5a5a5a;
}

/* Extra: if any “Cancel” uses a plain .btn (no variant), make it readable too */
.btn-cancel{
  background: #1d1d1d;
  color: #f1f1f1 !important;
  border: 1.5px solid #3a3a3a;
}
.btn-cancel:hover{ background:#2a2a2a; border-color:#5a5a5a; }

/* --- Leaderboard "Sort by" chips --- */
.chip{
  background: #181818;             /* brighter than #121212 */
  color: var(--onyx-text);
  border: 1.5px solid #3a3a3a;     /* higher contrast than #222 */
  font-weight: 700;
}
.chip:hover{ border-color:#5a5a5a; }
.chip.active{
  border-color: var(--onyx-accent);
  box-shadow: 0 0 0 2px rgba(255,58,58,.18) inset;
  background: rgba(255,58,58,.10); /* subtle red tint */
  color: var(--onyx-text);
}

/* Keyboard focus visibility (a11y) */
.btn:focus-visible,
.chip:focus-visible{
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
/* High-contrast secondary/cancel and reset buttons site-wide */
.btn-cancel,
.btn[data-variant="cancel"]{
  background:#141414;
  color:#fff !important;
  border:2px solid #363636;
}
.btn-cancel:hover,
.btn[data-variant="cancel"]:hover{
  background:#1b1b1b;
  border-color:#4a4a4a;
}

/* Reset evaluation button */
.btn-reset-eval{
  background:#161616;
  color:#fff !important;
  border:2px solid rgba(255,58,58,.6);
}
.btn-reset-eval:hover{
  background:linear-gradient(135deg, #ff3a3a,#ff6b6b);
  color:#000 !important;
  border-color:linear-gradient(135deg, #ff3a3a, #ff6b6b );
}
/* === MOBILE ADD-ONS (non-invasive; desktop unchanged) ==================== */
@media (max-width: 720px){

  :root{
    --navPadX: 10px; /* tighter link padding on mobile */
  }

  /* Layout breathing */
  .container{ padding: 20px 14px; }
  .section{ padding: 72px 0; }

  /* Header + nav */
  header{ position: sticky; top: 0; }
  .nav{
    padding: 12px 12px;
    gap: 10px;
    flex-wrap: wrap;               /* allow brand + nav to wrap neatly */
    align-items: center;
  }
  header .brand img{ height: 44px; }
  header .brand h1{ font-size: 18px; }

  /* Keep flex, but allow horizontal scroll for long menus */
  header nav{
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
  }
  header nav::-webkit-scrollbar{ display: none; }

  /* Mobile link sizing */
  header nav a{
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 var(--navPadX);
    margin-left: 0;                /* remove big desktop gap */
  }

  /* Buttons/CTA: stop text clipping and ensure tap targets */
  .btn,
  nav .btn-cta,
  .btn-hollow-red{
    min-height: 42px;
    line-height: 1.2;
    padding-block: 10px;           /* ensures descenders aren’t cut off */
  }

  /* CTA placement — stays at far right in the scrolling row */
  header nav .btn-getstarted{ margin-left: auto; }

  /* Leaderboard page also enforces the far-right CTA */
  body[data-page="leaderboard"] header nav .btn-getstarted{ margin-left: auto; }

  /* Make sure animated underline never applies to button-style links */
  header nav a.btn::after,
  header nav a.btn-getstarted::after,
  header nav a.btn-cta::after,
  header nav a.btn-hollow-red::after{ content: none; }

  /* Prevent dropdowns or shadows from being clipped */
  header, .nav{ overflow: visible; }
}

/* Small Safari safeguard for descenders on buttons */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px){
    .btn, nav .btn-cta, .btn-hollow-red { padding-bottom: 11px; }
  }
}
/* === MOBILE: center everything + full nav visible ======================= */
@media (max-width: 720px){

  /* Global visual centering */
  html, body { text-align: center; }
  .container, .section, header, footer,
  .legal-text__inner, .legal-band__inner { text-align: inherit; }

  /* Header: stack + center */
  header .nav{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 12px;
  }
  .brand{ justify-content: center; text-align: center; gap: 10px; }
  .brand img{ height: 44px; }

  /* Full nav visible: wrap + center (no horizontal scroll) */
  header nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    gap: 8px 12px;
    white-space: normal;
    overflow: visible;
  }
  header nav a{
    margin: 0;                     /* remove desktop gap */
    height: 40px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Keep underline close to text on small screens */
  header .nav a:not(.btn)::after{ bottom: -4px; }

  /* Never animate underline on button-style links */
  header nav a.btn::after,
  header nav a.btn-getstarted::after,
  header nav a.btn-cta::after,
  header nav a.btn-hollow-red::after{ content: none !important; }

  /* CTA / Get Started: centered + not clipped */
  header nav .btn-getstarted{
    order: 99;
    margin: 6px auto 0;
  }
  /* Leaderboard page: same centered behavior */
  [data-page="leaderboard"] header nav .btn-getstarted{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Buttons: comfy tap target, avoid descender clipping */
  .btn,
  nav .btn-cta,
  .btn-hollow-red{
    min-height: 44px;
    line-height: 1.2;
    padding-block: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;           /* center standalone buttons */
  }

  /* Center common UI groups */
  .actions,
  .size-switch,
  .plan-type-tabs,
  .size-row,
  .user-menu,
  .auth-actions,
  .auth-row,
  .legal-band__grid{
    justify-content: center;
    align-items: center;
    place-items: center;
  }
  .chip, .seg-btn, .plan-tab,
  .btn-dark, .btn-outline-red, .btn-red, .btn-ghost{
    margin-inline: auto;
  }

  /* Cards, tables, modals centered within viewport */
  .card, .cardish, .auth-card, .onyx-auth, .legal-card,
  .table-wrap, table{ margin-inline: auto; }

  /* Images/logos centered */
  img, .auth-logo{ display: block; margin-inline: auto; }

  /* Tighter sections on phones */
  .section{ padding: 72px 0; }

  /* Dropdown aligns under trigger on narrow screens */
  .user-menu .dropdown{ right: 50%; transform: translateX(50%); }
}

/* iOS Safari: tiny padding boost to prevent bottom crop of text in buttons */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px){
    .btn, nav .btn-cta, .btn-hollow-red { padding-bottom: 12px; }
  }
}
/* Make the header "Get Started" a rounded-rect instead of a capsule */
header nav .btn-cta{
  border-radius: 12px !important;   /* tweak: 10px or 8px if you want squarer */
}
@media (max-width: 980px){
  header nav .btn-cta{ border-radius: 10px !important; }
}