/* ===========================================================
   RPM Provisioning Management - Console redesign
   Aesthetic: Dark-mode developer tool. Geist + violet signal.
   =========================================================== */

:root{
  /* surfaces */
  --bg:           #0a0a0f;
  --bg-elev:      #11111a;
  --bg-card:      #15151f;
  --bg-card-hi:   #1c1c27;
  --bg-inset:     #0d0d14;

  /* text */
  --text:         #ededf0;
  --text-2:       #a8a8b0;
  --text-3:       #6a6a73;
  --text-4:       #4a4a52;

  /* borders */
  --line:         #1f1f29;
  --line-2:       #2a2a36;
  --line-3:       #3a3a48;

  /* signal */
  --violet:       #a78bfa;
  --violet-2:     #8b5cf6;
  --violet-3:     #7c3aed;
  --violet-glow:  rgba(167, 139, 250, 0.18);
  --violet-soft:  rgba(167, 139, 250, 0.08);

  /* semantic */
  --good:         #34d399;
  --warn:         #fbbf24;
  --bad:          #f87171;

  /* typography */
  --sans: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  /* layout */
  --max:        1180px;
  --pad:        clamp(1.25rem, 4vw, 2rem);
}

/* reset */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; background:var(--bg) }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.55;
  font-feature-settings: "kern", "ss01", "cv11";
  font-variant-ligatures: contextual;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* subtle tech-grid background */
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0;
}
img,svg{ display:block; max-width:100%; height:auto }
a{ color:var(--violet); text-decoration:none; transition: color .12s ease }
a:hover{ color:#c4b5fd }
::selection{ background:var(--violet); color:var(--bg) }

/* ----- typography ----- */
h1,h2,h3,h4{
  color:var(--text); font-weight:600; line-height:1.08;
  letter-spacing:-0.02em; margin:0 0 .5em;
}
h1{ font-size: clamp(2.25rem, 4vw + 1rem, 4.25rem); font-weight:600; letter-spacing:-0.03em; line-height:1.02 }
h2{ font-size: clamp(1.75rem, 2.4vw + .75rem, 2.625rem); letter-spacing:-0.025em; line-height:1.1 }
h3{ font-size: 1.0625rem; font-weight:600; letter-spacing:-0.01em; line-height:1.3 }
h4{ font-size: .875rem; font-weight:600 }

p{ margin:0 0 1em; color:var(--text-2) }
strong, b{ color:var(--text); font-weight:600 }
em{ color:var(--text); font-style:italic }
small{ font-size:.8125rem; color:var(--text-3) }

.mono, code, kbd{ font-family:var(--mono); font-feature-settings:"kern","ss02" }

/* mono accent labels */
.eyebrow{
  font-family:var(--mono); font-size: .75rem; color:var(--text-3);
  letter-spacing:.02em; display:inline-block; margin-bottom:1rem;
}
.eyebrow::before{ content:"// "; color:var(--violet); font-weight:500 }

.tag{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size: .75rem;
  color:var(--text-2); padding:.25rem .55rem;
  border:1px solid var(--line-2); border-radius: 4px;
  background:var(--bg-card); white-space:nowrap;
}
.tag .dot{ width:6px; height:6px; border-radius:50%; background:var(--violet); display:inline-block; box-shadow: 0 0 8px var(--violet-glow) }
.tag-good .dot{ background:var(--good); box-shadow: 0 0 8px rgba(52, 211, 153, 0.4) }

/* ----- container / layout ----- */
.container{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad) }

section{
  padding-top:    clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  position:relative;
}
section + section{ border-top:1px solid var(--line) }

/* ----- skip ----- */
.skip{ position:absolute; left:-9999px; top:0 }
.skip:focus{ position:fixed; left:1rem; top:1rem; padding:.5rem 1rem; background:var(--violet); color:var(--bg); font-family:var(--mono); font-size:.8125rem; z-index:99 }

/* ----- nav ----- */
.nav{
  position:sticky; top:0; z-index:30;
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding-top: 1rem; padding-bottom: 1rem; gap: 1.25rem;
}
.brand{
  display:inline-flex; align-items:center; gap:.625rem;
  text-decoration:none; color:var(--text);
  font-weight:600; font-size:1rem; letter-spacing:-0.01em;
}
.brand .status{
  width:8px; height:8px; border-radius:50%;
  background:var(--violet);
  box-shadow: 0 0 0 2px rgba(167,139,250,0.18), 0 0 16px var(--violet-glow);
  flex-shrink:0;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%, 100% { box-shadow: 0 0 0 2px rgba(167,139,250,0.18), 0 0 8px rgba(167,139,250,0.4); opacity: 1; }
  50%       { box-shadow: 0 0 0 4px rgba(167,139,250,0.10), 0 0 22px rgba(167,139,250,0.7); opacity: .85; }
}
@media (prefers-reduced-motion: reduce){
  .brand .status{ animation:none }
}
.brand .brand-rest{ color:var(--text-2); font-weight:400 }
@media (max-width: 520px){ .brand .brand-rest{ display:none } }

.nav-links{ display:flex; gap:1.25rem; align-items:center }
.nav-links a{
  font-family:var(--mono); font-size:.8125rem;
  color:var(--text-2); text-decoration:none;
  padding:.4rem .25rem;
  position:relative;
}
.nav-links a:hover{ color:var(--text) }
.nav-links a[aria-current="page"]{ color:var(--violet) }
.nav-links a[aria-current="page"]::after{
  content:""; position:absolute; left:.25rem; right:.25rem; bottom:.1rem;
  height:1px; background:var(--violet);
}
@media (max-width: 680px){
  .nav-links a:not(.nav-cta){ display:none }
}
.nav-cta{
  background:var(--violet) !important; color:var(--bg) !important;
  padding:.5rem .85rem !important;
  border-radius:6px; font-weight:500;
  font-size:.8125rem !important;
}
.nav-cta:hover{ background:#c4b5fd !important; color:var(--bg) !important }

/* ----- buttons ----- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--sans);
  background:var(--violet); color:var(--bg);
  padding:.7rem 1.1rem;
  font-size:.9375rem; font-weight:500;
  text-decoration:none;
  border:1px solid var(--violet);
  border-radius:6px;
  transition: background .14s ease, border-color .14s ease, transform .12s ease;
  white-space:nowrap;
}
.btn:hover{ background:#c4b5fd; border-color:#c4b5fd; color:var(--bg) }
.btn:active{ transform:translateY(1px) }
.btn .arr{ font-family:var(--mono); transition: transform .14s ease }
.btn:hover .arr{ transform: translateX(2px) }
.btn-ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--line-3);
}
.btn-ghost:hover{ border-color:var(--text-2); background:var(--bg-card); color:var(--text) }

.link-arrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--mono); font-size:.875rem;
  color:var(--violet); text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:1px;
  transition: border-color .14s ease, color .14s ease;
}
.link-arrow:hover{ border-bottom-color: var(--violet); color: #c4b5fd }
.link-arrow .arr{ transition: transform .14s ease }
.link-arrow:hover .arr{ transform: translateX(2px) }

/* ----- hero ----- */
.hero{
  padding-top: clamp(3rem, 6vw, 6rem);
  position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; pointer-events:none;
  top:-20%; right:-15%; width:48rem; height:48rem;
  background: radial-gradient(closest-side, var(--violet-glow), transparent 65%);
  z-index:0; filter: blur(40px);
}
.hero > *{ position:relative; z-index:1 }
.hero .tag{ margin-bottom:1.5rem }
.hero h1{ max-width:18ch; margin-bottom:1.25rem }
.hero h1 .accent{ color: var(--violet); font-weight:600 }
.hero .lede{
  font-size: clamp(1.0625rem, 1vw + .5rem, 1.25rem);
  color:var(--text-2); max-width: 42rem; line-height:1.55;
  margin-bottom: 2rem;
}
.hero .lede .accent{ color: var(--text); font-weight:500 }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center }

/* hero stats grid */
.stats{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:1px;
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--line);
  border:1px solid var(--line);
  border-radius: 8px;
  overflow:hidden;
}
@media (min-width:760px){ .stats{ grid-template-columns: repeat(4, 1fr) } }
.stat{
  background: var(--bg-card);
  padding: 1.5rem 1.25rem;
  display:flex; flex-direction:column; gap:.4rem;
}
.stat dt{
  font-family:var(--mono); font-size:.6875rem; color:var(--text-3);
  letter-spacing:.06em; text-transform:uppercase; font-weight:500;
}
.stat dd{
  margin:0;
  font-size: clamp(1.5rem, 1.5vw + .75rem, 2rem);
  font-weight:600; color: var(--text);
  letter-spacing:-0.02em; line-height:1.05;
}
.stat dd .unit{ color:var(--text-3); font-size: .75em; font-weight:400; font-family:var(--mono); margin-left:.2rem }

/* ----- pillars (cards on a grid) ----- */
.pillars{
  display:grid; grid-template-columns: 1fr; gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width:760px){ .pillars{ grid-template-columns: repeat(3, 1fr) } }
.pillar{
  background:var(--bg-card);
  border:1px solid var(--line-2);
  border-radius: 10px;
  padding: 1.75rem;
  position:relative;
  transition: border-color .15s ease, transform .15s ease;
}
.pillar:hover{ border-color: var(--line-3); transform: translateY(-1px) }
.pillar .num{
  font-family:var(--mono); font-size:.6875rem; color: var(--violet);
  letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:1rem; display:block;
}
.pillar h3{ font-size:1.125rem; margin-bottom:.5rem; line-height:1.25 }
.pillar h3 .accent{ color:var(--violet) }
.pillar p{ font-size:.9375rem; line-height:1.55 }

/* ----- prose ----- */
.prose{ max-width: 38rem }
.prose p{ font-size:1rem; line-height:1.65 }
.prose h2{ margin-top:1.75em; margin-bottom:.5em }
.prose h2:first-child{ margin-top:0 }
.prose ul, .prose ol{ font-size:1rem; padding-left:1.25rem; margin:0 0 1rem }
.prose li{ margin-bottom:.4rem; color:var(--text-2) }
.prose strong{ color:var(--text); font-weight:600 }

/* code-comment style aside (for marginalia) */
.note{
  font-family:var(--mono); font-size:.8125rem; line-height:1.55;
  color:var(--text-3);
  border-left:2px solid var(--line-3);
  padding: 1rem 1.25rem;
  background:var(--bg-card);
  border-radius: 0 6px 6px 0;
}
.note .label{ display:block; color:var(--violet); font-weight:500; margin-bottom:.4rem; font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase }
.note p{ margin:0; color:var(--text-3) }
.note p + p{ margin-top:.5rem }

.split{
  display:grid; grid-template-columns:1fr; gap:2.5rem;
}
@media (min-width: 920px){ .split{ grid-template-columns: minmax(0, 1fr) 17rem; gap: 4rem } }

/* ----- features (terminal-style listing) ----- */
.features{
  margin-top: 2rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.feature-row{
  display:grid; grid-template-columns: 1fr; gap: .5rem;
  padding: 1.5rem 0;
  border-top: 1px dashed var(--line);
}
.feature-row:first-child{ border-top:none }
@media (min-width:760px){
  .feature-row{ grid-template-columns: 18rem 1fr; gap:2.5rem; align-items:baseline }
}
.feature-row .name{
  font-family:var(--mono); font-size:.875rem; color:var(--text);
  letter-spacing: 0;
}
.feature-row .name::before{ content:"› "; color:var(--violet) }
.feature-row .desc{
  font-size: .9375rem; color:var(--text-2); line-height:1.55;
}

/* ----- feature-blocks (solutions large blocks) ----- */
.feature-blocks{ display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:2rem }
.feature-blocks .block{
  background:var(--bg-card);
  border:1px solid var(--line-2);
  border-radius:10px;
  padding: clamp(1.5rem, 2vw, 2rem);
  display:grid; grid-template-columns:1fr; gap:.75rem;
}
@media (min-width:840px){
  .feature-blocks .block{ grid-template-columns: 16rem 1fr; gap:2.5rem }
}
.feature-blocks .block-name{
  font-family:var(--mono); font-size:.75rem; color:var(--text-3);
  letter-spacing:.04em;
}
.feature-blocks .block-name .num{
  display:inline-block; padding:.15rem .45rem;
  font-size:.6875rem; color:var(--violet);
  border:1px solid var(--violet); border-radius: 3px;
  margin-right:.4rem;
}
.feature-blocks .block-name strong{
  display:block; margin-top:.6rem;
  color:var(--text); font-family:var(--sans); font-weight:600;
  font-size:1.0625rem; letter-spacing:-0.01em; line-height:1.2;
}
.feature-blocks .block-body p{ font-size:.9375rem; color:var(--text-2); margin:0 0 .5rem }
.feature-blocks .block-body ul{ list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:.3rem }
.feature-blocks .block-body li{ font-family:var(--mono); font-size:.875rem; color:var(--text-2); padding-left:1.2rem; position:relative }
.feature-blocks .block-body li::before{ content:"›"; position:absolute; left:0; color:var(--violet) }

/* ----- screenshots ----- */
.screenshots{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:1.5rem }
@media (min-width:680px){ .screenshots{ grid-template-columns:1fr 1fr; gap:1rem } }
.screenshot{ margin:0 }
.screenshot img{
  width:100%; max-width:420px; height:auto; display:block;
  border:1px solid var(--line-2); border-radius:6px;
  background: #fff;
  box-shadow: 0 1px 0 var(--line-3), 0 12px 28px -10px rgba(0,0,0,0.6);
}
.screenshot figcaption{
  font-family:var(--mono); font-size:.75rem; color:var(--text-3);
  margin-top:.6rem; line-height:1.45;
}
.screenshot figcaption::before{ content:"// "; color:var(--violet) }

/* ----- comparison table (CLI flag listing) ----- */
.cmp-wrap{
  border:1px solid var(--line-2);
  border-radius: 10px; overflow:hidden;
  background:var(--bg-card);
  margin-top: 1.5rem;
}
.cmp-head{
  display:grid; grid-template-columns: 9rem 1fr 1fr; gap:1rem;
  padding: 1rem 1.25rem;
  background: var(--bg-card-hi);
  border-bottom:1px solid var(--line-2);
  font-family:var(--mono); font-size:.6875rem;
  color:var(--text-3); letter-spacing:.08em; text-transform:uppercase;
  font-weight:500;
}
.cmp-head .us-col{ color:var(--violet) }
.cmp-row{
  display:grid; grid-template-columns: 9rem 1fr 1fr; gap:1rem;
  padding: 1.1rem 1.25rem;
  border-top:1px dashed var(--line-2);
  align-items:start;
}
.cmp-row:first-of-type{ border-top:none }
.cmp-row .key{
  font-family:var(--mono); font-size:.75rem;
  color: var(--text-3); letter-spacing:.04em;
  padding-top:.1rem;
}
.cmp-row .key::before{ content:"--"; color: var(--text-4); margin-right:.4rem }
.cmp-row .us, .cmp-row .them{ font-size:.9375rem; line-height:1.5 }
.cmp-row .us{ color: var(--text); font-weight:500; position:relative; padding-left:1.2rem }
.cmp-row .us::before{ content:"+"; position:absolute; left:0; color:var(--good); font-family:var(--mono); font-weight:600 }
.cmp-row .them{ color: var(--text-3); position:relative; padding-left:1.2rem }
.cmp-row .them::before{ content:"-"; position:absolute; left:0; color:var(--bad); font-family:var(--mono); font-weight:600 }
@media (max-width:760px){
  .cmp-head{ display:none }
  .cmp-row{ grid-template-columns: 1fr; gap:.5rem }
  .cmp-row .key{ color:var(--violet); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase }
  .cmp-row .key::before{ content:"" }
}

/* ----- Q&A (code-comment block) ----- */
.qa{ display:grid; gap:1rem; max-width: 48rem; margin-top: 2rem }
.qa .item{
  background:var(--bg-card);
  border:1px solid var(--line-2);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
}
.qa .q{
  font-family:var(--mono); font-size:.6875rem; color:var(--violet);
  letter-spacing:.08em; text-transform:uppercase;
  display:inline-block; margin-bottom:.5rem;
}
.qa .q::before{ content:"# "; color:var(--text-3) }
.qa h3{
  font-size: 1.125rem; color: var(--text); margin-bottom:.6rem;
  font-weight:500; line-height:1.35;
}
.qa h3::before{ content:"\""; color:var(--text-3); margin-right:.05em }
.qa h3::after{ content:"\""; color:var(--text-3); margin-left:.05em }
.qa p{ font-size:.9375rem; color:var(--text-2); margin:0 }

/* ----- big-number pricing ----- */
.bignum-block{
  display:grid; grid-template-columns:1fr; gap:2rem; align-items:center;
  background:var(--bg-card);
  border:1px solid var(--line-2);
  border-radius: 12px;
  padding: clamp(2rem, 4vw, 3.5rem);
  position:relative;
  overflow:hidden;
}
.bignum-block::before{
  content:""; position:absolute; pointer-events:none;
  top:-20%; left:-10%; width:32rem; height:32rem;
  background: radial-gradient(closest-side, var(--violet-glow), transparent 65%);
  filter: blur(40px); z-index:0;
}
.bignum-block > *{ position:relative; z-index:1 }
@media (min-width:760px){ .bignum-block{ grid-template-columns: minmax(0, .9fr) 1.4fr; gap: 4rem } }

.bignum-block .prompt{
  font-family:var(--mono); font-size:.8125rem; color:var(--text-3);
  margin-bottom:.5rem;
}
.bignum-block .prompt::before{ content:"$ "; color:var(--violet); font-weight:600 }
.bignum{
  font-size: clamp(5rem, 14vw, 9.5rem);
  font-weight:600; color:var(--text);
  letter-spacing:-0.05em; line-height:.85;
  display:inline-flex; align-items:flex-start; gap:.05em;
}
.bignum .sym{
  font-size: .35em; color: var(--violet); font-weight:500;
  margin-top:.2em;
}
.bignum .frac{ color:var(--text-2); font-size: .55em; font-weight:500 }
.bignum-block .unit{
  display:inline-block; margin-top:.5rem;
  font-family:var(--mono); font-size:.875rem; color:var(--text-3);
}
.bignum-block .copy h2{ margin-bottom:1rem; max-width:24ch }
.bignum-block .copy h2 .accent{ color:var(--violet) }
.bignum-block .copy p{ font-size:1rem; color:var(--text-2); margin:0 0 .75rem }
.bignum-block .copy .footnote{
  display:block; margin-top:1.25rem;
  font-family:var(--mono); font-size:.75rem; color:var(--text-3);
  border-top: 1px solid var(--line-2); padding-top:.875rem;
}

/* ----- form ----- */
.contact-grid{
  display:grid; grid-template-columns:1fr; gap:2.5rem;
}
@media (min-width:920px){ .contact-grid{ grid-template-columns: 1.4fr 1fr; gap:4rem } }
.form{ display:grid; gap:1.25rem; max-width:36rem }
.field{ display:grid; gap:.4rem }
.field label{
  font-family:var(--mono); font-size:.75rem; color: var(--text-2);
  letter-spacing:.04em; font-weight:500;
}
.field label .req{ color:var(--violet) }
.field input, .field textarea{
  font-family:var(--sans); font-size:.9375rem; line-height:1.5;
  padding:.7rem .85rem;
  background:var(--bg-card); color:var(--text);
  border:1px solid var(--line-2);
  border-radius:6px;
  -webkit-appearance:none; appearance:none;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--text-4) }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--violet);
  box-shadow: 0 0 0 3px var(--violet-soft);
}
.field textarea{ min-height:9rem; resize:vertical; font-family:var(--sans) }
.field .hint{ font-family:var(--mono); font-size:.75rem; color:var(--text-3) }
.field-honeypot{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.form-submit{ margin-top:.5rem }

.contact-side{ display:grid; gap:1rem; align-content:start }
.contact-side .card{
  background:var(--bg-card);
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:1.5rem;
}
.contact-side .card .label{
  font-family:var(--mono); font-size:.6875rem; color:var(--violet);
  letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:.5rem; display:block;
}
.contact-side .card .value{
  font-size:1.5rem; color:var(--text);
  font-weight:600; line-height:1.1;
}
.contact-side .card .value a{ color:var(--text); text-decoration:none; border-bottom:1px solid var(--violet) }
.contact-side .card .value a:hover{ color:var(--violet) }
.contact-side .card p{ font-size:.875rem; color:var(--text-2); margin:.75rem 0 0; line-height:1.5 }

.notice{
  border:1px solid var(--line-2); padding: 1rem 1.25rem;
  border-radius:8px; margin-bottom:2rem;
  font-size:.9375rem; background:var(--bg-card);
}
.notice strong{ color:var(--text) }
.notice.ok{ border-color:var(--good); background: rgba(52, 211, 153, 0.08) }
.notice.ok strong{ color:var(--good) }
.notice.err{ border-color:var(--bad); background: rgba(248, 113, 113, 0.08) }
.notice.err strong{ color:var(--bad) }

/* ----- final cta ----- */
.final-cta{
  text-align:center;
  padding-top: clamp(4rem, 8vw, 6rem);
  padding-bottom: clamp(4rem, 8vw, 6rem);
  position:relative; overflow:hidden;
}
.final-cta::before{
  content:""; position:absolute; pointer-events:none;
  top:50%; left:50%; transform:translate(-50%, -50%);
  width:42rem; height:42rem;
  background: radial-gradient(closest-side, var(--violet-glow), transparent 65%);
  filter: blur(50px); z-index:0;
}
.final-cta > *{ position:relative; z-index:1 }
.final-cta .eyebrow{ display:inline-block; margin-bottom:1.5rem }
.final-cta h2{
  font-size: clamp(2rem, 3.5vw + .5rem, 3.5rem);
  max-width: 22ch; margin-left:auto; margin-right:auto;
  font-weight:600;
}
.final-cta p{ font-size:1.0625rem; max-width:34rem; margin: 1.25rem auto 1.75rem; color:var(--text-2) }

/* ----- page header ----- */
.page-header{
  padding-top: clamp(4rem, 6vw, 6rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
}
.page-header::before{
  content:""; position:absolute; pointer-events:none;
  top:-30%; right:-10%; width:36rem; height:36rem;
  background: radial-gradient(closest-side, var(--violet-glow), transparent 65%);
  filter: blur(40px); z-index:0;
}
.page-header > *{ position:relative; z-index:1 }
.page-header .eyebrow{ margin-bottom:1.25rem }
.page-header h1{
  font-size: clamp(2rem, 3.5vw + .5rem, 3.25rem); max-width: 22ch;
}
.page-header h1 .accent{ color: var(--violet) }
.page-header .lede{
  font-size: clamp(1rem, .75vw + .5rem, 1.125rem);
  color: var(--text-2); max-width: 42rem; margin-top:1rem; line-height:1.55;
}

/* ----- footer ----- */
footer{
  border-top:1px solid var(--line);
  background: var(--bg-elev);
  padding-top: 3rem; padding-bottom: 2rem;
  font-family: var(--sans);
}
.footer-grid{
  display:grid; gap:2rem; grid-template-columns: 1fr;
  margin-bottom: 2rem;
}
@media (min-width:760px){ .footer-grid{ grid-template-columns: 2.5fr 1fr 1fr } }
.footer-grid h4{
  font-family: var(--mono); font-size:.6875rem;
  color: var(--violet); letter-spacing:.08em; text-transform:uppercase;
  margin: 0 0 1rem; font-weight:500;
}
.footer-grid p{ font-size:.875rem; color: var(--text-2); margin: 0 0 .5rem; max-width: 32ch }
.footer-grid .colofon{
  font-size: 1rem; color: var(--text); font-weight:600;
  display:flex; align-items:center; gap:.5rem;
}
.footer-grid .colofon .status{
  width:7px; height:7px; border-radius:50%; background:var(--violet);
  box-shadow: 0 0 8px var(--violet-glow);
}
.footer-grid ul{ list-style:none; padding:0; margin:0 }
.footer-grid li{ margin-bottom:.45rem; font-family: var(--mono); font-size:.8125rem }
.footer-grid a{ color: var(--text-2); text-decoration:none; transition: color .14s ease }
.footer-grid a:hover{ color: var(--violet) }
.footer-meta{
  border-top:1px solid var(--line);
  padding-top: 1.25rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem;
  font-family: var(--mono); font-size:.75rem; color: var(--text-3);
}

/* ----- reveal animations ----- */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform: translateY(8px); animation: reveal .9s cubic-bezier(.2,.65,.25,1) forwards }
  .reveal-1{ animation-delay: .04s }
  .reveal-2{ animation-delay: .14s }
  .reveal-3{ animation-delay: .26s }
  .reveal-4{ animation-delay: .38s }
  .reveal-5{ animation-delay: .50s }
}
@keyframes reveal{ to { opacity: 1; transform: none } }

/* ----- a11y ----- */
a:focus-visible, .btn:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--violet); outline-offset: 2px;
}

/* ----- helpers ----- */
.center{ text-align:center }
.mt-2{ margin-top:2rem }
.lead-link{ display:inline-block; margin-top:1.5rem }

/* mono inline accent for key terms */
.kw{
  font-family: var(--mono); font-size: .92em;
  background: var(--bg-card-hi);
  color: var(--text);
  padding: .1em .4em; border-radius: 3px;
  border: 1px solid var(--line-2);
}