/* ============================================================================
   RegSignal — "Aurora glass console"
   Transcribed from DESIGN.md (source: heyski.io). Tokens are normative values
   from that spec; do not invent colours outside this block.

   Guardrails from the spec, kept as comments where they are easy to violate:
     • Page field stays near-black. Aurora blooms cover only the hero's upper
       region — never a full-viewport saturated wash.
     • The italic serif face is reserved for the short hero headline accent
       clause. Never body copy, labels, or card headings.
     • Mid-page cards are transparent + blur only. No solid or gradient fills.
     • Status/accent colour is rationed to hero blooms and status glows;
       mid-page content stays grayscale-on-black.
============================================================================ */

:root{
  /* ── Colour ─────────────────────────────────────────────────────────── */
  --bg:              #001818;   /* true page field, near-black teal */
  --bg-alt:          #181818;
  --bg-deep:         #000018;
  --surface:         #07070A;   /* glass/panel base */
  --surface-nav:     rgba(11,14,20,0.72);

  --text-primary:    #EAF0F7;
  --text-secondary:  #A7B4C4;
  --text-muted:      #7F90A2;
  --text-faint:      #5E6E80;

  --border-ice:      rgba(196,216,235,0.10);   /* pale ice-blue hairline */
  --border-ice-mid:  rgba(196,216,235,0.18);
  --border-glass:    rgba(255,255,255,0.20);
  --border-glass-hi: rgba(255,255,255,0.26);

  --accent-lilac:    #C9AEFF;
  --accent-live:     #34D06A;
  --accent-live-deep:#1EA855;
  --accent-glacial:  #7FB7DD;
  --accent-ice:      #9FD0EE;
  --danger:          #F87171;
  --warn:            #FBBF24;

  /* ── Radii ──────────────────────────────────────────────────────────── */
  --r-control:  12px;
  --r-card:     20px;
  --r-card-alt: 15px;
  --r-pill:     9999px;

  /* ── Spacing ────────────────────────────────────────────────────────── */
  --s-base: 4px;
  --s-sm:   6px;
  --s-md:   16px;
  --s-lg:   18px;
  --s-xl:   21px;
  --section-pad: 112px;
  --section-gap: 220px;
  --maxw: 1200px;

  /* ── Type ───────────────────────────────────────────────────────────── */
  --font-sans:  'Instrument Sans', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', ui-serif, Georgia, serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Menlo, monospace;

  /* ── Motion — one shared ease-out across the whole system ───────────── */
  --ease: cubic-bezier(0.22, 0.75, 0.22, 1);

  /* ── Elevation ──────────────────────────────────────────────────────── */
  --shadow-panel:  rgba(0,0,0,0.55) 0 12px 28px -12px, rgba(0,0,0,0.75) 0 48px 96px -34px;
  --shadow-small:  rgba(0,0,0,0.5) 0 6px 16px -8px;
  --shadow-glass:  rgba(255,255,255,0.85) 0 1.4px 0.5px 0 inset,
                   rgba(120,140,255,0.55) 0 -14px 26px -14px inset,
                   rgba(160,180,255,0.25) 0 0 22px -6px inset,
                   rgba(120,140,255,0.5) 0 8px 20px -8px,
                   rgba(150,130,255,0.5) 0 20px 50px -16px;
  --glow-live: rgba(52,208,106,0.8) 0 0 7px;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a{ color: var(--accent-ice); text-decoration:none; transition: opacity .16s var(--ease); }
a:hover{ text-decoration:underline; }
img,svg{ max-width:100%; }
hr{ border:0; border-top:1px solid var(--border-ice); margin: 24px 0; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 24px; width:100%; }
main{ flex:1; }
.section{ padding: var(--section-pad) 0; }
.section-tight{ padding: 56px 0; }

/* ── Typography ────────────────────────────────────────────────────────── */
h1,h2,h3,h4{ color: var(--text-primary); font-family: var(--font-sans); font-weight:600; margin:0 0 12px; }
.display-lg{ font-size: clamp(40px, 7vw, 80px); line-height:1; letter-spacing:-3.6px; font-weight:600; }
.headline-md{ font-size: clamp(30px, 4.4vw, 52px); line-height:1.06; letter-spacing:-1.6px; font-weight:600; }
.headline-sm{ font-size: 26px; line-height:1.15; letter-spacing:-0.8px; font-weight:600; }
h3{ font-size: 19px; line-height:1.3; letter-spacing:-0.2px; }
.lede{ font-size:20px; line-height:1.55; color: var(--text-secondary); max-width:62ch; }
.body-sm{ font-size:16px; line-height:1.5; }
.muted{ color: var(--text-muted); font-size:14px; line-height:1.55; }
.faint{ color: var(--text-faint); font-size:13px; }

/* The ONE permitted use of the italic serif: the hero's accent clause. */
.accent-serif{
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(96deg, var(--accent-lilac), var(--accent-ice));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.eyebrow,.label-mono{
  font-family: var(--font-mono);
  font-weight:500;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color: var(--text-muted);
}

/* ── Aurora — hero only ────────────────────────────────────────────────── */
.aurora{
  position:absolute; inset:0 0 auto 0; height: 78vh; max-height: 860px;
  pointer-events:none; z-index:0; overflow:hidden;
}
.aurora::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(40% 60% at 22% 30%, rgba(52,208,106,0.30), rgba(0,0,0,0) 60%),
    radial-gradient(36% 56% at 68% 22%, rgba(166,120,255,0.30), rgba(0,0,0,0) 62%),
    radial-gradient(32% 52% at 48% 14%, rgba(127,183,221,0.24), rgba(0,0,0,0) 60%),
    radial-gradient(30% 48% at 86% 48%, rgba(52,208,106,0.16), rgba(0,0,0,0) 62%);
  animation: aurora 26s var(--ease) infinite alternate;
}
.aurora::after{
  content:""; position:absolute; inset:auto 0 -10% 0; height:70%;
  background: radial-gradient(120% 80% at 50% 118%, rgba(52,208,106,0.10), rgba(0,0,0,0) 52%);
  animation: aurora2 34s var(--ease) infinite alternate;
}
.hero{ position:relative; padding: 96px 0 64px; overflow:hidden; }
.hero > .wrap{ position:relative; z-index:1; }

@keyframes aurora{
  0%{ transform: translate3d(0,0,0) scale(1); opacity:.95; }
  100%{ transform: translate3d(-2%, 2%, 0) scale(1.08); opacity:1; }
}
@keyframes aurora2{
  0%{ transform: translate3d(0,0,0); opacity:.8; }
  100%{ transform: translate3d(2%, -1%, 0); opacity:1; }
}
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }

/* ── Navigation ────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:40; height:69px;
  background: var(--surface-nav);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom:1px solid var(--border-ice);
}
.nav .wrap{ display:flex; align-items:center; gap:18px; height:69px; }
.brand{ display:flex; align-items:center; gap:11px; color:var(--text-primary); text-decoration:none; }
.brand:hover{ text-decoration:none; }
.brand .mark{
  width:30px; height:30px; border-radius:9px; flex:none;
  background: linear-gradient(140deg, rgba(52,208,106,.22), rgba(166,120,255,.28));
  border:1px solid var(--border-glass);
  display:grid; place-items:center;
  font-family:var(--font-mono); font-weight:600; font-size:12px; color:var(--text-primary);
  box-shadow: var(--shadow-small);
}
.brand .name{ font-weight:600; letter-spacing:-0.3px; font-size:16px; line-height:1.1; }
.brand .tag{ display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-faint); font-weight:500; }
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:22px; }
.nav-links a{ color: var(--text-muted); font-size:14px; }
.nav-links a:hover{ color: var(--text-primary); text-decoration:none; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--font-sans); font-size:15px; font-weight:600;
  border-radius: var(--r-pill); padding: 13px 24px; height:52px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition: transform .16s var(--ease), opacity .16s var(--ease), background .16s var(--ease);
}
.btn:hover{ text-decoration:none; transform: translateY(-1px); }
.btn:active{ transform: translateY(0) scale(.985); }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* Solid near-white/cream pill — the single highest-contrast control. The spec
   is explicit that the hero primary must NOT be the glass gradient variant. */
.btn-primary{ background:#F2F5FA; color:#0B0E14; border-color:#F2F5FA; }
.btn-primary:hover{ background:#FFFFFF; }

.btn-glass{
  background:
    radial-gradient(135% 92% at 50% -20%, rgba(255,255,255,0.50), rgba(255,255,255,0) 52%),
    linear-gradient(rgba(255,255,255,0.16), rgba(255,255,255,0) 46%),
    linear-gradient(135deg, rgba(150,175,255,0.40), rgba(192,160,255,0.32));
  backdrop-filter: blur(20px) saturate(2);
  -webkit-backdrop-filter: blur(20px) saturate(2);
  color:#F8FAFF; border-color: var(--border-glass-hi); box-shadow: var(--shadow-glass);
}
.btn-ghost{
  background:
    radial-gradient(135% 92% at 50% -20%, rgba(255,255,255,0.28), rgba(255,255,255,0) 52%),
    linear-gradient(rgba(255,255,255,0.10), rgba(255,255,255,0) 48%);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  color:#EEF3FA; border-color: var(--border-glass);
  box-shadow: rgba(255,255,255,0.62) 0 1.2px .5px 0 inset,
              rgba(200,215,255,0.2) 0 0 18px -8px inset,
              rgba(0,0,0,0.5) 0 10px 26px -12px;
}
.btn-sm{ height:42px; padding:10px 18px; font-size:14px; }
.btn-block{ display:flex; width:100%; }

/* ── Pills / chips ─────────────────────────────────────────────────────── */
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--border-ice-mid); border-radius: var(--r-pill);
  background: rgba(7,7,10,0.5); backdrop-filter: blur(10px);
  padding:7px 15px; margin-bottom:26px;
}
.chip{
  display:inline-flex; align-items:center; gap:12px;
  background: rgba(7,7,10,0.72); border:1px solid var(--border-ice);
  border-radius: var(--r-c, 15px); padding:12px 16px;
  backdrop-filter: blur(8px);
}
.pill{
  display:inline-block; font-family:var(--font-mono); font-size:11px;
  border:1px solid var(--border-ice-mid); border-radius: var(--r-pill);
  padding:3px 10px; color: var(--text-muted); letter-spacing:.04em;
}
.pill.on{ border-color: rgba(52,208,106,.45); color: var(--accent-live); }
.pill.off{ border-color: rgba(251,191,36,.45); color: var(--warn); }
.live-dot{
  width:7px; height:7px; border-radius:50%; background: var(--accent-live);
  box-shadow: var(--glow-live); display:inline-block; animation: pulse 2.4s var(--ease) infinite;
}

/* ── Cards — glass only, never a solid fill ────────────────────────────── */
.card{
  background: rgba(7,7,10,0.42);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border:1px solid var(--border-ice);
  border-radius: var(--r-card);
  padding: 26px;
}
.card-lg{ padding:32px; }
.card-wide{ padding:28px 30px; }
.card-flush{ padding:0; overflow:hidden; }
.card-title{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.card-title .eyebrow{ margin:0; }

.grid{ display:grid; gap:16px; }
/* Explicit counts, not auto-fit: the spec's measured bands are 2 / 3 / 4 up, and
   auto-fit silently produced 3 columns inside a band meant to be 2. */
.cols-2,.cols-3,.cols-4{ grid-template-columns: 1fr; }
@media (min-width:760px){ .cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:820px){ .cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width:980px){ .cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1180px){ .cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
/* Bento asymmetry: a widened middle row on wide viewports, per the spec's
   [3][2-wide][3] rhythm. Do not normalise to equal spans. */
@media (min-width:900px){
  .bento-wide{ grid-column: span 2; }
}

/* ── KPI strip ─────────────────────────────────────────────────────────── */
.kpis{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:16px; }
.kpi{
  background: rgba(7,7,10,0.42); backdrop-filter: blur(8px);
  border:1px solid var(--border-ice); border-radius: var(--r-card);
  padding:18px;
}
.kpi .n{ font-family:var(--font-mono); font-size:26px; font-weight:600; color:var(--text-primary); letter-spacing:-0.5px; }
.kpi .l{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--text-muted); margin-top:4px; }

/* ── Tables ────────────────────────────────────────────────────────────── */
table{ width:100%; border-collapse:collapse; font-size:14px; }
th{
  text-align:left; font-family:var(--font-mono); font-weight:500; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color: var(--text-muted);
  padding:9px 12px; border-bottom:1px solid var(--border-ice-mid);
}
td{ padding:10px 12px; border-bottom:1px solid var(--border-ice); color: var(--text-secondary); vertical-align:top; }
tr:last-child td{ border-bottom:0; }
td b, td strong{ color: var(--text-primary); font-weight:600; }
tbody tr{ transition: background .16s var(--ease); }
tbody tr:hover{ background: rgba(255,255,255,0.02); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
label{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--text-muted); margin:16px 0 6px; font-weight:500; }
input[type=text],input[type=email],input[type=password],select,textarea{
  width:100%; padding:13px 15px; font-family:var(--font-sans); font-size:15px;
  background: rgba(7,7,10,0.6); border:1px solid var(--border-ice-mid);
  border-radius: var(--r-control); color: var(--text-primary);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input::placeholder{ color: var(--text-faint); }
input:focus,select:focus,textarea:focus{
  outline:none; border-color: rgba(201,174,255,.55);
  box-shadow: 0 0 0 3px rgba(201,174,255,.12);
}
input[disabled]{ opacity:.55; cursor:not-allowed; }
input[aria-invalid=true]{ border-color: rgba(248,113,113,.6); }
.check{ display:flex; gap:11px; align-items:flex-start; margin:14px 0; }
.check input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:#F2F5FA; }
.check span{ font-size:14px; line-height:1.5; color: var(--text-secondary); }
.check label{ display:inline; margin:0; font-family:var(--font-sans); font-size:14px;
  text-transform:none; letter-spacing:0; color:inherit; font-weight:400; }
.hint{ font-size:13px; color: var(--text-faint); margin-top:7px; line-height:1.5; }
.rule{ display:flex; gap:9px; align-items:center; font-size:12.5px; color: var(--text-faint);
  font-family:var(--font-mono); margin-top:5px; transition: color .16s var(--ease); }
.rule .tick{ width:13px; text-align:center; }
.rule.pass{ color: var(--accent-live); }
.rule.fail{ color: var(--text-faint); }

.msg{ border-radius: var(--r-control); padding:12px 15px; margin:0 0 16px; font-size:14px; border:1px solid; }
.msg.ok{ background: rgba(52,208,106,.08); border-color: rgba(52,208,106,.4); color:#A8EBC4; }
.msg.info{ background: rgba(127,183,221,.08); border-color: rgba(127,183,221,.38); color:#C6E3F5; }
.msg.err{ background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.42); color:#FCD0D0; }

/* ── Pricing ───────────────────────────────────────────────────────────── */
.price{ display:flex; flex-direction:column; }
/* Reserved so every card's title sits on the same baseline whether or not it
   carries the "Most popular" badge. */
.badge-slot{ min-height:27px; }
.price .amt{ font-family:var(--font-sans); font-size:38px; font-weight:600; letter-spacing:-1.6px;
  color:var(--text-primary); margin:0 0 2px; }
.price .amt small{ font-size:14px; font-weight:400; color: var(--text-muted); letter-spacing:0; }
.price ul{ list-style:none; padding:0; margin:18px 0 22px; flex:1; }
.price ul li{ padding:6px 0 6px 24px; position:relative; font-size:14px; line-height:1.5; }
.price ul li::before{ content:"✦"; position:absolute; left:0; color: var(--accent-ice); font-size:12px; }
.popular{ border-color: rgba(201,174,255,.42); box-shadow: 0 0 0 1px rgba(201,174,255,.28), var(--shadow-panel); }
.badge{
  display:inline-block; align-self:flex-start; font-family:var(--font-mono); font-size:9.5px;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px;
  border-radius: var(--r-pill); margin-bottom:12px;
  background: linear-gradient(135deg, rgba(166,120,255,.35), rgba(127,183,221,.3));
  border:1px solid var(--border-glass); color:#F0E9FF;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.footer{ border-top:1px solid var(--border-ice); padding:26px 0; margin-top: auto; }
.footer .wrap{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; }
.footer a{ color: var(--text-muted); font-size:13px; }
.footer a:hover{ color: var(--text-primary); text-decoration:none; }
.footer .copy{ font-size:13px; color: var(--text-faint); }

/* ── Utilities ─────────────────────────────────────────────────────────── */
.row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.stack{ display:flex; flex-direction:column; gap:14px; }
.right{ margin-left:auto; }
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.mt-md{ margin-top:16px; } .mt-lg{ margin-top:26px; } .mt-xl{ margin-top:40px; }
.narrow{ max-width:520px; }
.mid{ max-width:600px; }
.locked{ position:relative; overflow:hidden; }
/* Fade-out preview veil: uses the page field colour, never a gradient wash. */
.locked::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,24,24,0) 30%, rgba(0,24,24,.94) 88%); }
.todo-banner{ border:1px solid rgba(251,191,36,.4); background: rgba(251,191,36,.07);
  color:#FCE1A8; border-radius: var(--r-control); padding:12px 15px; font-size:13px; margin-bottom:22px; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
}