/* ============================================================
   Shared styles — landing page and the app behind the login
   ============================================================ */
:root{
  --bg:#0B0B0F;
  --surface:#141419;
  --surface-2:#1C1C23;
  --border:#2A2A33;
  --text:#FFFFFF;
  --dim:#A1A1AA;
  --dim-2:#6B6B76;
  --accent:#6D5BFF;
  --accent-hover:#8273FF;
  --ok:#3DD68C;
  --warn:#FFC24C;
  --bad:#FF6B6B;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.02em;}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px;}
.narrow{max-width:520px;margin:0 auto;padding:0 22px;}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}

/* ---------- top bar ---------- */
header.bar{position:sticky;top:0;z-index:50;background:rgba(11,11,15,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);}
header.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em;}
.logo .mark{height:30px;width:auto;flex:none;display:block;}
.bar nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.bar nav a{padding:8px 14px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--dim);}
.bar nav a:hover{color:var(--text);background:var(--surface);}
.bar nav a.on{color:var(--text);background:var(--surface-2);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14.5px;
     padding:11px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;
     background:var(--accent);color:#fff;transition:background .15s,transform .1s;font-family:inherit;}
.btn:hover{background:var(--accent-hover);}
.btn:active{transform:translateY(1px);}
.btn-ghost{background:transparent;border-color:var(--border);color:var(--text);}
.btn-ghost:hover{background:var(--surface);border-color:var(--dim-2);}
.btn-danger{background:transparent;border-color:#5a2020;color:var(--bad);}
.btn-danger:hover{background:#2a1414;}
.btn-sm{padding:8px 14px;font-size:13.5px;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.45;cursor:not-allowed;}

/* ---------- forms ---------- */
label{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);margin-bottom:6px;}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{
  width:100%;font-family:inherit;font-size:15.5px;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:11px 13px;
}
textarea{min-height:110px;resize:vertical;}
.field{margin-bottom:16px;}
.hint{font-size:13px;color:var(--dim-2);margin-top:6px;}
.row{display:grid;gap:16px;}
@media(min-width:680px){ .row.two{grid-template-columns:1fr 1fr;} .row.three{grid-template-columns:1fr 1fr 1fr;} }

/* ---------- cards & layout ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.card + .card{margin-top:18px;}
.card h2{font-size:20px;margin-bottom:4px;}
.card .sub{color:var(--dim);font-size:14.5px;margin-bottom:18px;}
.page{padding:34px 0 70px;}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
.page-head h1{font-size:28px;}
.page-head p{color:var(--dim);font-size:15px;margin-top:4px;}

/* ---------- stats ---------- */
.stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:22px;}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;}
.stat .k{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim-2);margin-bottom:6px;}
.stat .v{font-size:25px;font-weight:800;letter-spacing:-.02em;}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;}
th,td{text-align:left;padding:13px 12px;border-bottom:1px solid var(--border);font-size:14.5px;vertical-align:middle;}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim-2);font-weight:700;}
tr:last-child td{border-bottom:0;}
.table-wrap{overflow-x:auto;}

/* ---------- pills ---------- */
.pill{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
      padding:4px 10px;border-radius:999px;border:1px solid var(--border);color:var(--dim);}
.pill.ok{color:var(--ok);border-color:#1d4d36;background:#0f2a1e;}
.pill.warn{color:var(--warn);border-color:#4d3d15;background:#2a2312;}
.pill.bad{color:var(--bad);border-color:#5a2020;background:#2a1414;}
.pill.info{color:var(--accent);border-color:#332c66;background:#1a1730;}

/* ---------- progress ---------- */
.bar-track{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden;}
.bar-fill{height:100%;background:var(--accent);border-radius:99px;}
.bar-fill.full{background:var(--bad);}

/* ---------- flashes ---------- */
.flash{border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:14.5px;font-weight:600;}
.flash.ok{background:#0f2a1e;color:var(--ok);border:1px solid #1d4d36;}
.flash.err{background:#2a1414;color:var(--bad);border:1px solid #5a2020;}
.errors{background:#2a1414;border:1px solid #5a2020;border-radius:10px;padding:14px 18px;margin-bottom:18px;}
.errors li{color:var(--bad);font-size:14.5px;margin-left:16px;list-style:disc;}

.empty{text-align:center;padding:48px 20px;color:var(--dim);}
.empty h3{font-size:18px;margin-bottom:8px;color:var(--text);}
.muted{color:var(--dim);}
.small{font-size:13.5px;}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;}
.right{text-align:right;}
.nowrap{white-space:nowrap;}
footer.site{border-top:1px solid var(--border);padding:30px 0;color:var(--dim-2);font-size:13.5px;}

/* ============================================================
   Landing page — audience toggle layout
   ============================================================ */
.lp-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:6px 14px;}
.lp-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);}

/* audience switch */
.switch{display:inline-flex;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:4px;gap:4px;margin-bottom:26px;}
.switch button{font-family:inherit;font-weight:700;font-size:14.5px;color:var(--dim);
  background:transparent;border:0;border-radius:999px;padding:9px 20px;cursor:pointer;transition:.18s;}
.switch button:hover{color:var(--text);}
.switch button[aria-selected="true"]{background:var(--accent);color:#fff;}

.hero-lp{padding:38px 0 54px;}
.hero-lp h1{font-size:clamp(34px,5.2vw,58px);font-weight:900;line-height:1.04;margin-bottom:18px;max-width:17ch;}
.hero-lp h1 .hl{color:var(--accent);}
.hero-lp p.lede{font-size:18px;color:var(--dim);line-height:1.6;max-width:52ch;margin-bottom:28px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;}
.pane[hidden]{display:none;}

/* numbered steps */
.steps{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;}
.step .n{width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;margin-bottom:14px;}
.step h3{font-size:17px;margin-bottom:7px;}
.step p{color:var(--dim);font-size:14.5px;line-height:1.6;}

/* section heads on the landing page */
.lp-head{margin:62px 0 22px;}
.lp-head h2{font-size:clamp(24px,3vw,34px);font-weight:900;margin-bottom:8px;}
.lp-head p{color:var(--dim);font-size:16px;max-width:60ch;}

/* campaign cards */
.camp-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));}
.camp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px;display:flex;flex-direction:column;gap:12px;transition:border-color .18s;}
.camp-card:hover{border-color:var(--dim-2);}
.camp-card h3{font-size:17px;}
.camp-card .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:6px;}
.camp-card .meta div{min-width:0;}
.camp-card .meta .k{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim-2);}
.camp-card .meta .v{font-size:17px;font-weight:800;}

/* trust/explainer cards */
.trust{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.trust .card h3{font-size:17px;margin-bottom:8px;}
.trust .card p{color:var(--dim);font-size:14.5px;line-height:1.65;}

/* closing band */
.band{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:36px;text-align:center;margin-top:28px;}
.band h2{font-size:clamp(23px,3vw,32px);font-weight:900;margin-bottom:10px;}
.band p{color:var(--dim);max-width:52ch;margin:0 auto 22px;}

/* ---------- rotating headline word ---------- */
.hero-lp h1.big-head{
  /* four short stacked lines, so it can run bigger */
  /* two uppercase lines — caps run wide, so ease the size and tracking */
  font-size:clamp(34px,5.6vw,64px);
  font-weight:900;line-height:1.02;letter-spacing:-.02em;
  text-transform:uppercase;
  max-width:18ch;margin-bottom:22px;
}
.rotator-wrap{display:inline-block;white-space:nowrap;}
.rotator{color:var(--accent);}
.caret{
  display:inline-block;width:4px;height:.78em;
  background:var(--accent);margin-left:5px;vertical-align:-.06em;
  animation:caret-blink 1.05s steps(1) infinite;
}
@keyframes caret-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media (prefers-reduced-motion:reduce){ .caret{animation:none;} }