/* Copyright (c) 2026 Lee Hetherington. All Rights Reserved. */

/*
   Closed-beta container styling — mirrors the ISPForge marketing site design
   system (marketing/closed-beta/assets/styles.css) so closedbeta.ispforge.com is
   visually one product with ispforge.com AND the core UI: Inter (self-hosted, incl.
   the 800/-0.08em wordmark) + system monospace for data (same as core). Palette:
   Ground Navy / Paper / Steel / Stone, Signal Blue for state + primary action,
   Copper for pending/beta status. No external font hosts (CSP-clean).

   The old dark-theme var names (--text/--muted/--bg/--panel/--border/--accent/…) are
   ALIASED to the new tokens below, so the inline `style="color:var(--text)"` scattered
   through the templates keeps working without touching them.
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* marketing tokens */
  --ink:#0B1B2C; --ink-soft:#4D545B; --ink-faint:#8A8478;   /* Ground Navy / Steel / Stone */
  --paper:#F3F2EE; --card:#FBFAF7; --card-2:#F7F6F2;
  --line:rgba(11,27,44,0.10); --line-strong:rgba(11,27,44,0.16);
  --stop:#1F8FE6; --stop-tint:rgba(31,143,230,0.12);
  --stop-text:#1272BD; --copper:#B4643C;   /* AA-safe blue text on paper; copper = pending/beta status */
  --amber:#b5820a; --amber-tint:rgba(225,173,1,0.10);
  --red:#b23b34; --red-tint:rgba(178,59,52,0.09);
  --ok:#2f8f4e; --ok-tint:rgba(47,143,78,0.12);
  --radius:16px; --radius-sm:10px;
  --shadow:0 2px 6px rgba(59,43,28,0.07);      /* warm (paper-tinted) shadow */
  --shadow-lg:0 18px 50px rgba(59,43,28,0.16);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;   /* system mono, matches core UI */

  /* aliases so existing inline var() refs resolve to the light theme */
  --text:var(--ink); --muted:var(--ink-soft); --faint:var(--ink-faint);
  --bg:var(--paper); --panel:var(--card); --panel-alt:var(--card-2);
  --border:var(--line); --accent:var(--stop); --accent-2:var(--stop);
}

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  background:var(--paper); color:var(--ink);
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--stop-text); text-decoration:none; }
a:hover { text-decoration:underline; }
.mono { font-family:var(--mono); }
::selection { background:rgba(31,143,229,0.22); color:var(--ink); }
:focus-visible { outline:2px solid var(--stop); outline-offset:3px; border-radius:4px; }

/* ---------- layout ---------- */
.page { max-width:780px; margin:0 auto; padding:56px 24px 72px; }
@media (max-width:640px){ .page{ padding:40px 20px 56px; } }

/* ---------- header ---------- */
.site-head {
  position:sticky; top:0; z-index:50; background:rgba(243,242,238,0.85);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.head-inner { max-width:1080px; margin:0 auto; padding:0 24px; height:64px;
  display:flex; align-items:center; gap:18px; }
.brand { display:inline-flex; align-items:center; gap:11px; }
.brand:hover { text-decoration:none; }
.wm { font-family:"Inter",sans-serif; font-weight:800; letter-spacing:-0.08em;   /* matches core UI wordmark */
  color:var(--ink); font-size:22px; line-height:1; white-space:nowrap; }
.wm .dot { color:var(--stop); }
.wm.rev { color:var(--paper); }
.betatag { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px 11px; }
.betatag .d { width:6px; height:6px; border-radius:50%; background:var(--copper); }   /* beta = pending status → copper */
.head-cta { margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  font-size:13.5px; }
.head-cta a:not(.btn) { color:var(--ink-soft); font-weight:500; }
.head-cta a:not(.btn):hover { color:var(--ink); text-decoration:none; }
.head-cta .muted { color:var(--ink-faint); }
@media (max-width:520px){ .betatag{ display:none; } }

/* ---------- footer ---------- */
.site-foot { background:var(--ink); color:rgba(255,255,255,0.6); margin-top:72px; }
.foot-inner { max-width:1080px; margin:0 auto; padding:44px 24px 34px;
  display:flex; flex-direction:column; gap:22px; }
.foot-brand .wm { color:var(--paper); font-size:24px; }
.foot-links { display:flex; flex-wrap:wrap; gap:10px 26px; }
.foot-links a { color:rgba(255,255,255,0.66); font-size:14px; font-weight:500; }
.foot-links a:hover { color:#fff; text-decoration:none; }
.foot-bar { display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between;
  align-items:center; border-top:1px solid rgba(255,255,255,0.12); padding-top:20px;
  font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,0.4); }

/* ---------- type ---------- */
h1 { font-size:clamp(28px,4vw,38px); font-weight:600; letter-spacing:-0.035em; line-height:1.05;
  margin-bottom:12px; color:var(--ink); }
h2 { font-size:20px; font-weight:600; letter-spacing:-0.02em; margin:30px 0 12px; color:var(--ink); }
h3 { font-family:var(--mono); font-size:11px; font-weight:400; text-transform:uppercase;
  letter-spacing:0.14em; color:var(--ink-faint); margin:32px 0 12px; }
p { color:var(--ink-soft); margin-bottom:13px; }
.lead { font-size:clamp(16px,1.5vw,18.5px); line-height:1.6; color:var(--ink-soft);
  margin-bottom:28px; max-width:60ch; }
.lead b, .lead strong { color:var(--ink); font-weight:600; }
.muted { color:var(--ink-faint); }
strong, b { color:var(--ink); }
ul, ol { color:var(--ink-soft); }
em { font-style:italic; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--stop); color:var(--ink); border:1px solid transparent; border-radius:10px;
  padding:11px 18px; font-size:14px; font-weight:600; font-family:inherit; line-height:1;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, background .12s, border-color .12s; }
.btn:hover { box-shadow:0 8px 20px var(--stop-tint); transform:translateY(-1px); text-decoration:none; }
.btn:active { transform:translateY(0); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-ghost:hover { background:var(--card); border-color:var(--ink); box-shadow:none; }
.btn-sm { padding:8px 13px; font-size:13px; border-radius:8px; }
.btn-lg { padding:14px 22px; font-size:15px; }
.btn .arrow { transition:transform .14s; }
.btn:hover .arrow { transform:translateX(3px); }
.btn-stop { background:var(--stop); color:var(--ink); }   /* marketing alias — navy label */
.textlink { color:var(--ink); font-weight:600; border-bottom:1px solid var(--line-strong);
  padding-bottom:2px; }
.textlink:hover { border-color:var(--stop); text-decoration:none; }

/* ---------- cards ---------- */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 26px; margin-bottom:16px; box-shadow:var(--shadow); }
.card h2:first-child, .card h3:first-child { margin-top:0; }

/* ---------- notices ---------- */
.notice { background:var(--stop-tint); border:1px solid color-mix(in oklch, var(--stop) 26%, transparent);
  border-radius:var(--radius-sm); padding:14px 18px; font-size:14.5px; line-height:1.55;
  color:#2c3a48; margin-bottom:18px; }
.notice a { color:var(--stop); }
.notice.warn { background:var(--amber-tint); border-color:rgba(225,173,1,0.35); color:#6b5308; }
.notice.err { background:var(--red-tint); border-color:rgba(178,59,52,0.30); color:#8a2822; }
.notice ul { margin:0 0 0 18px; color:inherit; }

/* ---------- badges ---------- */
.badge { display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:500;
  padding:3px 9px; border-radius:999px; text-transform:capitalize; letter-spacing:0.02em;
  border:1px solid transparent; }
.b-invited { background:var(--card); border-color:var(--line); color:var(--ink-soft); }
.b-accepted { background:var(--amber-tint); border-color:rgba(225,173,1,0.3); color:#7a5c07; }
.b-onboarded, .b-approved { background:var(--ok-tint); border-color:rgba(47,143,78,0.3); color:#256b3c; }
.b-revoked, .b-expired, .b-declined { background:var(--red-tint); border-color:rgba(178,59,52,0.28); color:#8a2822; }

/* ---------- pill (legacy alias → marketing tag) ---------- */
.pill { display:inline-flex; align-items:center; font-family:var(--mono); font-size:10.5px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px 11px;
  vertical-align:middle; }

/* ---------- forms ---------- */
label { display:block; font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; }
.input, input.input, select.input, textarea.input,
input[type=email], input[type=text], input[type=number] {
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  padding:11px 13px; transition:border-color .14s, box-shadow .14s; }
.input:focus, input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--stop); box-shadow:0 0 0 3px var(--stop-tint); }
.input::placeholder, input::placeholder, textarea::placeholder { color:var(--ink-faint); }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; }
th, td { text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); font-size:14px;
  vertical-align:top; color:var(--ink-soft); }
th { font-family:var(--mono); color:var(--ink-faint); font-weight:400; text-transform:uppercase;
  letter-spacing:0.06em; font-size:10.5px; }
tbody tr:last-child td { border-bottom:0; }
/* Wide admin tables (8-col invitations / applications / demo-leads on the
   ~780px admin pages) scroll horizontally inside their card instead of
   overflowing it. Cards without a table are unaffected. */
.card:has(> table) { overflow-x:auto; }

/* ---------- metrics ---------- */
.metrics { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.metric { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 18px; min-width:96px; box-shadow:var(--shadow); }
.metric .n { font-size:1.6rem; font-weight:600; letter-spacing:-0.03em; color:var(--ink); }
.metric .l { font-family:var(--mono); font-size:10px; color:var(--ink-faint);
  text-transform:uppercase; letter-spacing:0.1em; margin-top:2px; }

/* ---------- beta agreement terms box ---------- */
.terms { background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:16px 18px; max-height:300px; overflow-y:auto; font-size:13.5px; line-height:1.6;
  color:var(--ink-soft); white-space:pre-wrap; }

/* ---------- helpers ---------- */
.cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }