/* =============================================================
   Adumbrate — Corporate polish  (Phase 3, OPTIONAL layer)
   -------------------------------------------------------------
   Outward-register primitives that make marketing sites, landing
   pages, and corporate shells feel premium: heroes, accent rails,
   elevated panels, feature/stat grids, CTAs, footers, blueprint
   texture. NOT in design-kit.css core (keeps instrument apps lean)
   — import explicitly when you need the marketing surface:

     <link rel="stylesheet" href="css/design-kit.css">
     <link rel="stylesheet" href="css/polish.css">

   Deliberately avoids glassmorphism / soft-rounded — the sharp
   operator voice still governs. Everything composes tokens.
   ============================================================= */

/* ---- Marketing type scale (outward register) ----------------- */
.display-1 { font-family: var(--family-display); font-weight: var(--weight-semibold); font-size: clamp(34px, 5vw, 56px); line-height: 1.04; letter-spacing: var(--track-tight); }
.display-2 { font-family: var(--family-display); font-weight: var(--weight-semibold); font-size: clamp(26px, 3.6vw, 40px); line-height: 1.1; letter-spacing: var(--track-tight); }
.lead-lg   { font-size: clamp(15px, 1.6vw, 19px); line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }

/* Big marketing CTA button (the kit's .btn is dense) */
.btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--size-body); }
.btn-lg.btn-mono { letter-spacing: var(--track-wide); }

/* ---- Hero ---------------------------------------------------- */
.hero { position: relative; padding-block: clamp(var(--space-12), 9vw, 96px); overflow: hidden; }
.hero-split { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 992px) { .hero-split { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-12); } }
.hero-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }

/* ---- Accent rail / gradient panel ---------------------------- */
/* The signature "operator rail": solid graphite gradient, used on
   login sides, hero accents, section blocks. */
.rail-accent {
  color: var(--accent-ink);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(155deg, var(--accent-2) 0%, var(--accent) 46%, var(--accent-navy) 100%);
}
.rail-accent .kicker, .rail-accent .eyebrow { color: rgba(255,255,255,0.72); }
.on-accent { color: var(--accent-ink); }
.on-accent .lead-lg, .on-accent p { color: rgba(255,255,255,0.82); }

/* ---- Blueprint / dot-grid surface (extends texture-dotgrid) --- */
.bg-blueprint {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 24px 24px;
}
.bg-grade { background: linear-gradient(180deg, var(--paper-2), var(--paper)); }

/* ---- Elevated panel (corporate card) ------------------------- */
.panel {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--elev-card);
  padding: var(--space-6);
}
.panel-hover { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.panel-hover:hover { box-shadow: var(--elev-pop); transform: translateY(-2px); }
.panel-accent { border-top: var(--border-emph) solid var(--accent); }

/* ---- Feature grid -------------------------------------------- */
.features { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.feature { display: flex; flex-direction: column; gap: var(--space-3); }
.feature h3 { font-size: var(--size-h3); }
.feature p { color: var(--ink-muted); font-size: var(--size-body-sm); }

/* ---- Stat band ----------------------------------------------- */
.stat-band { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat .stat-num { font-family: var(--family-display); font-size: clamp(28px, 4vw, 40px); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight); }
.stat .stat-label { font-family: var(--family-mono); font-size: var(--size-mono-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-muted); }
.rail-accent .stat .stat-label { color: rgba(255,255,255,0.66); }

/* ---- Logo / trust strip -------------------------------------- */
.logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); opacity: 0.7; }
.logo-strip img, .logo-strip svg { height: 22px; width: auto; }

/* ---- CTA band ------------------------------------------------ */
.cta-band { padding-block: clamp(var(--space-10), 6vw, 72px); text-align: center; }
.cta-band .display-2 { margin-bottom: var(--space-4); }

/* ---- Pricing cards ------------------------------------------- */
.price { font-family: var(--family-display); font-size: clamp(28px, 4vw, 38px); font-weight: var(--weight-semibold); letter-spacing: var(--track-tight); }
.price .price-per { font-family: var(--family-mono); font-size: var(--size-mono-sm); color: var(--ink-muted); letter-spacing: var(--track-tight); }
.plan-featured { border-top: var(--border-emph) solid var(--accent); box-shadow: var(--elev-pop); }
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.plan-list li { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-soft); font-size: var(--size-body-sm); }
.plan-list .icon { color: var(--accent); }

/* ---- Footer -------------------------------------------------- */
.footer { padding-block: var(--space-10) var(--space-6); border-top: 1px solid var(--rule-strong); background: var(--paper-2); }
.footer-grid { display: grid; gap: var(--space-6); grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer h4 { font-family: var(--family-mono); font-size: var(--size-mono-xs); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--space-3); }
.footer a { display: block; color: var(--ink-soft); text-decoration: none; padding-block: 3px; font-size: var(--size-body-sm); }
.footer a:hover { color: var(--accent); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--rule); color: var(--ink-muted); font-size: var(--size-caption); }

/* ---- Registration-mark section divider ----------------------- */
.divider-mark { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-mute-2); }
.divider-mark::before, .divider-mark::after { content: ""; height: 1px; flex: 1; background: var(--rule-strong); }
.divider-mark .label-mono { flex: none; }

/* ---- Section heading (marketing) ----------------------------- */
.section-lead { max-width: 640px; margin-bottom: var(--space-8); }
.section-lead .eyebrow { margin-bottom: var(--space-3); }

/* ---- Anchor-scroll offset for sticky navbar ------------------ */
:where([id]) { scroll-margin-top: 72px; }