/* JIL Sovereign Retail — page sections

   Loads AFTER jil-retail-standard.css, which provides the canonical
   tokens, fonts, reset, typography, rules, layout primitives, and
   shared components (buttons, cards, chips, spec, hallmark, forms,
   utilities). This file contains only the page-structural sections
   that are retail-v2-specific: topbar, footer, auth split layout,
   and homepage sections (hero, featured, catalog, dashboard, why,
   disclosures, cta).
   ---------------------------------------------------------------- */


/* ===== Top bar ===== */

.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.topbar-inner{
  display:flex; align-items:center; gap:32px;
  padding:18px 40px;
  max-width:1360px; margin:0 auto;
}
.brand{
  display:flex; align-items:baseline; gap:10px;
  font-family:var(--serif); font-weight:500;
  font-size:18px; letter-spacing:-0.01em;
}
.brand .mark{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em;
  color:var(--ink-3); text-transform:uppercase; font-weight:500;
  border-left:1px solid var(--rule); padding-left:10px;
}
.brand a{ color:var(--ink); }

.nav{
  display:flex; gap:28px; margin-left:auto;
  font-size:13px; font-weight:500;
}
.nav a{
  color:var(--ink-2); padding:4px 0; position:relative;
}
.nav a:hover{ color:var(--ink); }
.nav a.active{ color:var(--ink); }
.nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-19px; height:2px; background:var(--crimson);
}

.topbar-actions{ display:flex; gap:12px; align-items:center; }

@media (max-width:840px){
  .topbar-inner{ padding:14px 24px; gap:16px; }
  .nav{ display:none; }
}


/* ===== Footer ===== */

.site-footer{
  background:linear-gradient(180deg, var(--surface-deep) 0%, var(--ice) 100%);
  color:var(--ink-2); padding:80px 0 28px; margin-top:80px;
  position:relative; z-index:2;
  border-top:1px solid var(--rule);
}
.site-footer .container{ max-width:1360px; }
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:64px;
  border-bottom:1px solid var(--rule);
}
.footer-brand h3{
  color:var(--ink); font-family:var(--serif); font-size:28px; font-weight:400;
  margin-bottom:16px;
}
.footer-brand p{
  color:var(--ink-2); font-size:14px; max-width:38ch; font-weight:300;
}
.footer-col h4{
  font-family:var(--mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; margin-bottom:16px;
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{
  color:var(--ink-2); font-size:14px;
}
.footer-col a:hover{ color:var(--crimson); }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding-top:28px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-3);
}
.footer-bottom a{ color:var(--ink-2); margin-left:18px; }
.footer-bottom a:hover{ color:var(--crimson); }

.pledge{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--ink-2);
}
.pledge::before{
  content:""; width:8px; height:8px; background:var(--crimson); border-radius:50%;
}

@media (max-width:840px){
  .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; }
  .site-footer{ padding-top:56px; }
}


/* ===== AUTH (signin / signup split layout) ===== */

.auth-main{
  min-height:calc(100vh - 73px);
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.auth-form{
  padding:80px 64px; display:flex; flex-direction:column; justify-content:center;
  max-width:560px; margin-left:auto; width:100%;
}
.auth-form .eyebrow{ margin-bottom:24px; }
.auth-form h1{
  font-size:clamp(40px,4.5vw,60px); line-height:0.98; letter-spacing:-0.025em; font-weight:300;
  margin-bottom:16px;
}
.auth-form h1 em{ font-style:italic; color:var(--crimson); font-weight:400; }
.auth-form .lede{ color:var(--ink-2); font-size:15px; max-width:42ch; margin-bottom:36px; }
.form{ display:grid; gap:18px; }

/* Auth-scoped tweaks on top of the standard .label / .input primitives */
.auth-form .label{
  margin-bottom:6px;
  font-size:11px; letter-spacing:0.12em; font-weight:600;
}
.auth-form .input{
  padding:14px 16px; font-size:15px;
}
.auth-form .input:focus{
  border-color:var(--ink); box-shadow:0 0 0 1px var(--ink);
}

.form-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:12px; border-top:1px solid var(--rule-soft); font-size:13px;
}
.form-footer a{ color:var(--crimson); font-weight:500; }
.bottom-line{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--rule-soft);
  font-size:13px; color:var(--ink-3);
}
.bottom-line a{ color:var(--ink); border-bottom:1px solid var(--rule); }
.bottom-line a:hover{ color:var(--crimson); border-bottom-color:var(--crimson); }

.auth-side{
  background:linear-gradient(160deg, var(--surface-deep) 0%, var(--ice) 100%);
  color:var(--ink); padding:80px 64px;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  border-left:1px solid var(--rule);
}
.auth-side::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(10,15,26,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,15,26,0.05) 1px, transparent 1px);
  background-size:48px 48px;
}
.auth-side > *{ position:relative; z-index:2; }
.vault-badge{
  font-family:var(--mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink-3);
  display:flex; align-items:center; gap:12px;
}
.vault-badge::before{ content:""; width:32px; height:1px; background:var(--gold); }
.auth-side blockquote{
  font-family:var(--serif); font-size:36px; line-height:1.15; font-weight:400;
  letter-spacing:-0.01em; color:var(--ink); margin:0; max-width:16ch;
}
.auth-side blockquote em{ font-style:italic; color:var(--crimson); }
.auth-side .sig{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3); margin-top:24px;
}
.auth-side .seal{
  position:absolute; right:64px; bottom:80px; z-index:1;
  width:180px; height:180px; border:1px solid rgba(184,145,58,0.5); border-radius:50%;
  display:grid; place-items:center; opacity:0.75;
}
.auth-side .seal::before{
  content:""; position:absolute; inset:12px; border:1px solid rgba(184,145,58,0.3); border-radius:50%;
}
.auth-side .seal-text{
  font-family:var(--mono); font-size:10px; letter-spacing:0.18em; color:var(--gold);
  text-align:center;
}
.receipt{
  border:1px solid var(--rule); padding:24px;
  background:rgba(255,255,255,0.6); margin-top:32px;
}
.receipt-row{
  display:flex; justify-content:space-between; padding:8px 0;
  border-bottom:1px dashed var(--rule-soft);
  font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:0.06em;
}
.receipt-row:last-child{ border-bottom:0; }
.receipt-row b{ color:var(--ink); font-weight:600; }

@media (max-width:960px){
  .auth-main{ grid-template-columns:1fr; }
  .auth-side{ display:none; }
  .auth-form{ padding:48px 24px; max-width:560px; margin:0 auto; }
}


/* ===============================================================
   HOMEPAGE SECTIONS (ported from Retail_v1 index.html inline styles)
   =============================================================== */

/* ===== HERO ===== */
.hero{
  padding:72px 0 56px;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.hero .grid{
  display:grid; grid-template-columns: 1.3fr 1fr; gap:72px; align-items:end;
}
.hero-eyebrow{
  margin-bottom:32px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.hero h1{
  font-size:clamp(56px, 7.5vw, 112px);
  line-height:0.94;
  letter-spacing:-0.03em;
  font-weight:300;
}
.hero h1 em{
  font-style:italic; color:var(--crimson); font-weight:400;
  display:block;
}
.hero-lead{
  font-size:17px; line-height:1.55; color:var(--ink-2); max-width:52ch;
  margin:32px 0 32px; font-weight:300;
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }

.hero-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--rule); border:1px solid var(--rule);
}
.stat{ background:var(--paper); padding:28px 24px; }
.stat .num{
  font-family:var(--serif); font-size:56px; line-height:1;
  font-weight:400; letter-spacing:-0.02em;
  display:block;
}
.stat .num sup{
  font-size:18px; font-family:var(--mono); font-weight:500;
  color:var(--ink-3); vertical-align:top;
  margin-left:2px; letter-spacing:0;
}
.stat .lbl{
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3); margin-top:10px; display:block;
}


/* ===== FEATURED ===== */
.featured{
  padding:80px 0;
  border-bottom:1px solid var(--rule);
}
.section-head{
  display:flex; justify-content:space-between; align-items:end;
  margin-bottom:48px; gap:24px; flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(32px, 3.5vw, 52px);
  font-weight:400; max-width:20ch;
}
.section-head h2 em{ font-style:italic; color:var(--crimson); }

.feature-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--rule); border:1px solid var(--rule);
}
.feature{
  background:var(--paper); padding:40px;
  display:grid; grid-template-rows:auto 1fr auto; gap:24px;
  position:relative;
}
.feature-top{
  display:flex; justify-content:space-between; align-items:start; gap:16px;
}
.feature-top .from{
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.feature-top .from strong{
  display:block; font-size:40px; font-family:var(--serif); font-weight:400;
  color:var(--ink); letter-spacing:-0.01em; margin-top:4px;
}
.feature h3{
  font-size:36px; font-weight:400; letter-spacing:-0.015em; line-height:1.1;
}
.feature .tag{
  font-family:var(--serif); font-style:italic; font-size:17px; color:var(--crimson);
  margin-top:-8px;
}
.feature p{
  font-size:15px; line-height:1.55; color:var(--ink-2); max-width:48ch;
  margin-top:20px;
}
.feature-tiers{
  display:flex; gap:0; border-top:1px solid var(--rule-soft); padding-top:20px;
  flex-wrap:wrap;
}
.feature-tiers .tier{
  padding-right:24px; margin-right:24px;
  border-right:1px solid var(--rule-soft);
  font-size:13px;
}
.feature-tiers .tier:last-child{ border-right:0; margin-right:0; padding-right:0; }
.feature-tiers .tier .tname{
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:4px;
}
.feature-tiers .tier .tprice{
  font-family:var(--serif); font-size:22px; font-weight:400; color:var(--ink);
}
.feature-cta{ margin-top:8px; }

.feature-num{
  position:absolute; top:24px; right:28px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.16em; color:var(--ink-3);
}


/* ===== CATALOG ===== */
.catalog{
  padding:80px 0;
  border-bottom:1px solid var(--rule);
}

.catalog-filters{
  display:flex; gap:0; flex-wrap:wrap;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  margin-bottom:0;
}
.catalog-filters button{
  background:transparent; border:0; cursor:pointer;
  padding:18px 20px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500;
  border-right:1px solid var(--rule-soft);
  transition:color .15s, background .15s;
}
.catalog-filters button:last-child{ border-right:0; }
.catalog-filters button .count{
  display:inline-block; margin-left:8px;
  font-variant-numeric:tabular-nums;
  color:var(--ink-3);
}
.catalog-filters button:hover{ color:var(--ink); }
.catalog-filters button.active{
  color:var(--paper); background:var(--crimson);
}
.catalog-filters button.active .count{ color:rgba(255,255,255,0.7); }

.catalog-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:var(--rule);
  border-left:1px solid var(--rule); border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.prod{
  background:var(--paper); padding:32px 28px 28px;
  display:grid; grid-template-rows:auto auto 1fr auto auto; gap:14px;
  position:relative; min-height:420px;
}
.prod-idx{
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:var(--ink-3);
}
.prod-price{
  display:flex; align-items:baseline; gap:8px;
  margin-bottom:0;
}
.prod-price .p{ font-family:var(--serif); font-size:32px; font-weight:400; letter-spacing:-0.01em; }
.prod-price .u{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-3); }
.prod h3{
  font-size:24px; font-weight:400; line-height:1.15;
}
.prod .pitch{
  font-family:var(--serif); font-style:italic; font-size:15px; color:var(--crimson);
  margin-top:-4px;
}
.prod p{
  font-size:13.5px; line-height:1.55; color:var(--ink-2);
}
.prod-tiers{
  display:flex; flex-wrap:wrap; gap:6px;
  padding-top:12px; border-top:1px solid var(--rule-soft);
}
.prod-tier{
  font-family:var(--mono); font-size:10px; letter-spacing:0.08em;
  padding:3px 8px; border:1px solid var(--rule-soft); color:var(--ink-2);
  white-space:nowrap;
}
.prod-tier b{ color:var(--ink); font-weight:600; }
.prod-link{
  margin-top:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink); font-weight:600;
  display:inline-flex; align-items:center; gap:8px;
}
.prod-link::after{
  content:"→"; transition:transform .2s;
}
.prod:hover .prod-link::after{ transform:translateX(4px); }
.prod:hover{ background:var(--paper-deep); }


/* ===== DASHBOARD PREVIEW ===== */
.dashboard{
  padding:80px 0; background:var(--paper-deep);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.dash-wrap{
  display:grid; grid-template-columns: 1fr 1.4fr; gap:72px; align-items:start;
}
.dash-wrap h2{
  font-size:clamp(32px, 3.5vw, 52px); font-weight:400;
}
.dash-wrap h2 em{ font-style:italic; color:var(--crimson); display:block; }
.dash-wrap p{ color:var(--ink-2); font-size:15px; max-width:40ch; margin-top:20px; }

.dashpanel{
  background:var(--paper); border:1px solid var(--rule);
  position:relative;
}
.dashpanel-head{
  padding:14px 20px; border-bottom:1px solid var(--rule);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.live-dot{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--moss); font-weight:600;
}
.live-dot::before{
  content:""; width:6px; height:6px; background:var(--moss); border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.35; }
}
.dash-kpis{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--rule);
  border-bottom:1px solid var(--rule);
}
.dash-kpi{
  background:var(--paper); padding:22px;
}
.dash-kpi .k{
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:10px;
}
.dash-kpi .v{
  font-family:var(--serif); font-size:40px; font-weight:400; line-height:1; letter-spacing:-0.02em;
}
.dash-kpi .sub{
  font-family:var(--mono); font-size:10px; color:var(--ink-3); margin-top:6px;
  letter-spacing:0.1em;
}
.dash-activity{ padding:4px 0; }
.actrow{
  display:grid; grid-template-columns:1.2fr 1.5fr 0.8fr 0.8fr; gap:16px; align-items:center;
  padding:16px 20px;
  border-bottom:1px solid var(--rule-soft);
  font-size:13px;
}
.actrow:last-child{ border-bottom:0; }
.actrow .type{ font-weight:500; }
.actrow .id{ font-family:var(--mono); color:var(--ink-3); font-size:12px; }
.actrow .time{ font-family:var(--mono); color:var(--ink-3); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; }
.actrow .status{
  justify-self:end;
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; font-weight:600;
}
.status.clear{ color:var(--moss); }
.status.alert{ color:var(--crimson); }
.status.anch{ color:var(--gold); }
.status.ready{ color:var(--ink); }


/* ===== WHY ===== */
.why{ padding:80px 0; border-bottom:1px solid var(--rule); }
.why-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--rule);
  border:1px solid var(--rule); margin-top:48px;
}
.why-cell{
  background:var(--paper); padding:40px 32px;
}
.why-cell h3{
  font-size:24px; margin-bottom:16px; font-weight:400;
}
.why-cell h3 em{ font-style:italic; color:var(--crimson); }
.why-cell p{ color:var(--ink-2); font-size:14.5px; line-height:1.55; }
.why-cell .num{
  font-family:var(--mono); font-size:11px; letter-spacing:0.14em; color:var(--crimson); font-weight:600;
  margin-bottom:24px;
}


/* ===== DISCLOSURES ===== */
.disclosures{
  padding:64px 0;
  background:var(--paper-deep);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.disc-wrap{
  display:grid; grid-template-columns: 0.6fr 1.4fr; gap:72px;
}
.disc-wrap h2{ font-size:26px; font-weight:400; max-width:18ch; }
.disc-wrap p{
  font-size:13.5px; color:var(--ink-2); max-width:none; margin-bottom:18px;
}
.disc-wrap a{ color:var(--crimson); }


/* ===== CTA ===== */
.cta{
  padding:120px 0 100px;
  text-align:center;
}
.cta h2{
  font-size:clamp(44px, 5.5vw, 80px); font-weight:300; letter-spacing:-0.025em;
  max-width:20ch; margin:0 auto;
  line-height:1;
}
.cta h2 em{ font-style:italic; color:var(--crimson); font-weight:400; display:block; }
.cta .cta-heading{ margin-top:24px; }
.cta p{
  font-size:16px; color:var(--ink-2); margin:32px auto 40px; max-width:42ch;
}
.cta-actions{ display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; }


/* ===== RESPONSIVE ===== */
@media (max-width:960px){
  .hero .grid{ grid-template-columns:1fr; gap:40px; }
  .feature-grid, .catalog-grid{ grid-template-columns:1fr; }
  .catalog-grid{ grid-template-columns:1fr 1fr; }
  .dash-wrap, .disc-wrap{ grid-template-columns:1fr; gap:32px; }
  .why-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .catalog-grid{ grid-template-columns:1fr; }
  .hero{ padding:48px 0 40px; }
  .featured, .catalog, .why{ padding:56px 0; }
  .feature{ padding:28px; }
  .dash-kpis{ grid-template-columns:1fr 1fr; }
}


/* ===============================================================
   LEGAL PAGE (/legal/*)
   Rendered by src/components/LegalPage.tsx
   =============================================================== */

.page-legal .hero{ padding:72px 0 48px; border-bottom:1px solid var(--rule); }
.page-legal .hero h1{
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-top: 16px;
}
.page-legal .hero p.lede-sm{
  margin-top: 24px; color: var(--ink-2); font-size: 15px; max-width: 62ch;
}
.page-legal .legal-summary{
  padding: 64px 0 96px;
  border-top: 1px solid var(--rule);
}
.page-legal .legal-prose p{
  margin-top: 16px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.7;
}
.page-legal .legal-prose p:first-of-type{ margin-top: 20px; }


/* ===============================================================
   CHECKOUT BRIDGE PAGE (/checkout)
   =============================================================== */

.page-checkout .hero{
  padding: 96px 0 80px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
}
.page-checkout .hero h1{
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-top: 24px;
}
.page-checkout .hero p.lede-sm{
  margin-top: 24px; color: var(--ink-2); font-size: 15px;
}


/* ===============================================================
   DOCS PAGE (/docs)
   Hero + three-column layout (nav / body / toc).
   =============================================================== */

.page-docs .hero{ padding:72px 0 48px; border-bottom:1px solid var(--rule); }
.page-docs .hero h1{
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  font-weight: 300;
}
.page-docs .hero h1 em{ font-style:italic; color: var(--crimson); font-weight:400; }
.page-docs .hero .lede{
  font-size: 16px;
  color: var(--ink-2);
  max-width: 56ch;
  margin-top: 24px;
}

.doc-layout{ padding: 56px 0 96px; }
.doc-grid{ display:grid; grid-template-columns: 240px 1fr 220px; gap: 56px; align-items: start; }

.doc-nav{ position:sticky; top:88px; font-size:14px; }
.doc-nav h5{
  font-family: var(--mono); font-size:10px; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--ink-3);
  margin: 20px 0 10px; font-weight:500;
}
.doc-nav h5:first-child{ margin-top:0; }
.doc-nav a{
  display:block; padding:6px 0;
  color: var(--ink-2);
  border-left: 2px solid transparent;
  padding-left: 12px; margin-left: -12px;
}
.doc-nav a:hover{ color: var(--ink); }
.doc-nav a.active{
  color: var(--crimson);
  border-left-color: var(--crimson);
  font-weight: 500;
}

.doc-body h2{
  font-family: var(--serif); font-size: 36px; font-weight: 400;
  letter-spacing: -0.015em;
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.doc-body h2:first-child{ border-top: 0; padding-top: 0; margin-top: 0; }
.doc-body h2 em{ font-style:italic; color: var(--crimson); }
.doc-body h3{
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  margin: 32px 0 10px;
}
.doc-body p{
  font-size: 15px; line-height: 1.7;
  color: var(--ink-2);
  max-width: 68ch;
  margin-bottom: 14px;
}
.doc-body ul{
  font-size: 15px; line-height: 1.8;
  color: var(--ink-2);
  max-width: 68ch;
  padding-left: 18px;
  margin-bottom: 18px;
}
.doc-body ul li::marker{ color: var(--crimson); }
.doc-body code{
  font-family: var(--mono); font-size: 13px;
  background: var(--paper-edge);
  padding: 2px 6px;
  border: 1px solid var(--rule-soft);
}
.doc-body pre{
  background: var(--ink); color: var(--paper);
  padding: 20px 24px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  overflow-x: auto;
  margin: 20px 0;
}
.doc-body pre .k{ color: var(--gold); }
.doc-body pre .s{ color: #8FB9A8; }
.doc-body pre .c{ color: rgba(240,239,233,0.45); font-style: italic; }
.doc-body table{
  width: 100%; border-collapse: collapse;
  margin: 16px 0; font-size: 13.5px;
}
.doc-body th, .doc-body td{
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.doc-body th{
  background: var(--paper-deep);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-2);
}
.doc-body a.inline-link{
  color: var(--crimson); border-bottom: 1px solid var(--crimson);
}
.doc-body .note{
  border-left: 2px solid var(--crimson);
  padding: 14px 20px;
  background: var(--paper-deep);
  margin: 20px 0;
  font-size: 14px; color: var(--ink-2);
}
.doc-body .note b{ color: var(--ink); font-weight: 600; }

.doc-toc{
  position: sticky; top: 88px;
  font-size: 13px;
  border-left: 1px solid var(--rule);
  padding-left: 20px;
}
.doc-toc h6{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px; font-weight: 500;
}
.doc-toc a{
  display: block; padding: 4px 0;
  color: var(--ink-3); font-size: 12.5px;
}
.doc-toc a:hover{ color: var(--ink); }

@media (max-width: 1080px){
  .doc-grid{ grid-template-columns: 1fr; gap: 32px; }
  .doc-nav, .doc-toc{ position: static; }
  .doc-toc{ display: none; }
}


/* ===============================================================
   ABOUT PAGE (/about)
   =============================================================== */

.page-about .hero{
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--rule);
}
.page-about .hero h1{
  font-size: clamp(56px, 7vw, 112px);
  line-height: 0.94;
  letter-spacing: -0.03em;
  font-weight: 300;
  max-width: 18ch;
  margin-top: 28px;
}
.page-about .hero h1 em{ font-style: italic; color: var(--crimson); font-weight: 400; }
.page-about .hero .lede{
  font-size: 19px; line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: 32px;
  font-weight: 300;
}

.page-about .manifesto{
  padding: 96px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
.page-about .manifesto .grid{
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 96px;
}
.page-about .manifesto h2{
  font-family: var(--serif); font-size: 44px; font-weight: 400;
  letter-spacing: -0.015em; line-height: 1.1;
  margin-top: 24px;
}
.page-about .manifesto h2 em{ font-style: italic; color: var(--crimson); }
.page-about .manifesto p{
  font-size: 16px; line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 20px;
  max-width: 52ch;
}
.page-about .manifesto p:last-child{ margin-bottom: 0; }

.page-about .pillars{ padding: 96px 0; border-bottom: 1px solid var(--rule); }
.page-about .pillars-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 56px;
}
.page-about .pillar{
  background: var(--paper); padding: 40px 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.page-about .pillar .n{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--crimson); font-weight: 600;
}
.page-about .pillar h3{
  font-family: var(--serif); font-size: 28px; font-weight: 400;
  letter-spacing: -0.01em;
}
.page-about .pillar h3 em{ font-style: italic; color: var(--crimson); }
.page-about .pillar p{ font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* Ledger — converted from dark surface to light-blue gradient with gold numerics */
.page-about .ledger{
  padding: 96px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(180deg, var(--surface-deep) 0%, var(--ice) 100%);
  position: relative;
  overflow: hidden;
}
.page-about .ledger::before{
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(10,15,26,0.05) 1px, transparent 1px);
  background-size: 64px 100%;
}
.page-about .ledger > .container{ position: relative; z-index: 2; }
.page-about .ledger h2{
  color: var(--ink);
  font-size: 56px; font-weight: 400;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.page-about .ledger h2 em{ font-style: italic; color: var(--gold); }
.page-about .ledger-stats{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 48px; margin-top: 72px;
}
.page-about .ledger-stat .n{
  font-family: var(--serif); font-size: 64px; font-weight: 400;
  letter-spacing: -0.02em; line-height: 1;
  color: var(--gold);
}
.page-about .ledger-stat .lbl{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 16px; font-weight: 500;
}
.page-about .ledger-stat .desc{
  font-size: 13px; color: var(--ink-3);
  margin-top: 6px; max-width: 24ch; line-height: 1.5;
}

.page-about .timeline{ padding: 96px 0; border-bottom: 1px solid var(--rule); }
.page-about .tl-grid{
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px;
}
.page-about .tl-head h2{
  font-size: 44px; font-weight: 400; letter-spacing: -0.015em;
}
.page-about .tl-head h2 em{ font-style: italic; color: var(--crimson); }
.page-about .tl-head .meta-lede{
  margin-top: 20px; font-size: 14px; color: var(--ink-2); max-width: 36ch;
}
.page-about .tl-list{ display: grid; gap: 0; }
.page-about .tl-item{
  display: grid; grid-template-columns: 120px 1fr;
  gap: 32px; padding: 24px 0;
  border-top: 1px solid var(--rule-soft);
}
.page-about .tl-item:first-child{ border-top: 0; }
.page-about .tl-year{
  font-family: var(--serif); font-size: 30px; font-weight: 400;
  font-style: italic;
  color: var(--crimson);
  padding-top: 2px;
}
.page-about .tl-body h4{
  font-family: var(--serif); font-size: 19px; font-weight: 400;
  margin-bottom: 6px;
}
.page-about .tl-body p{
  color: var(--ink-2); font-size: 14px; line-height: 1.6; max-width: 52ch;
}

.page-about .team{
  padding: 96px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
.page-about .team-grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 48px;
}
.page-about .member{ background: var(--paper); padding: 28px; }
.page-about .member .initials{
  font-family: var(--serif); font-size: 44px; font-weight: 400;
  color: var(--crimson); font-style: italic; line-height: 1;
  margin-bottom: 20px;
}
.page-about .member h4{
  font-family: var(--serif); font-size: 22px; font-weight: 400;
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.page-about .member .role{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px; font-weight: 500;
}
.page-about .member p{ font-size: 13px; color: var(--ink-2); line-height: 1.6; }

@media (max-width: 840px){
  .page-about .manifesto .grid{ grid-template-columns: 1fr; gap: 32px; }
  .page-about .pillars-grid,
  .page-about .team-grid{ grid-template-columns: 1fr; }
  .page-about .ledger-stats{ grid-template-columns: 1fr 1fr; gap: 32px; }
  .page-about .tl-grid{ grid-template-columns: 1fr; gap: 32px; }
  .page-about .tl-item{ grid-template-columns: 1fr; gap: 4px; }
}


/* ===============================================================
   PRICING PAGE (/pricing)
   =============================================================== */

.page-pricing .p-hero{ padding: 72px 0 48px; border-bottom: 1px solid var(--rule); }
.page-pricing .p-hero h1{
  font-size: clamp(48px, 6vw, 88px); line-height: 0.96;
  letter-spacing: -0.025em; font-weight: 300;
  margin-top: 20px;
}
.page-pricing .p-hero h1 em{
  font-style: italic; color: var(--crimson); font-weight: 400; display: block;
}
.page-pricing .p-hero .lede{
  font-size: 17px; line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch; margin-top: 28px; font-weight: 300;
}

.page-pricing .pricing-section{ padding: 72px 0; border-bottom: 1px solid var(--rule); }
.page-pricing .pricing-section:nth-child(even){ background: var(--paper-deep); }
.page-pricing .section-label{
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 28px; flex-wrap: wrap;
}
.page-pricing .section-label h2{
  font-family: var(--serif); font-size: 34px; font-weight: 400;
  letter-spacing: -0.015em;
}
.page-pricing .section-label h2 em{ font-style: italic; color: var(--crimson); }
.page-pricing .section-label .count{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 10px; border: 1px solid var(--rule-soft);
}

.page-pricing .price-table{
  width: 100%; border-collapse: collapse;
  background: var(--paper); border: 1px solid var(--rule);
  font-size: 14px;
}
.page-pricing .price-table th,
.page-pricing .price-table td{
  padding: 16px 20px; text-align: left;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.page-pricing .price-table thead th{
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500;
  border-bottom: 0;
}
.page-pricing .price-table tbody tr:last-child td{ border-bottom: 0; }
.page-pricing .price-table tbody tr:hover{ background: var(--paper-deep); }
.page-pricing .pricing-section:nth-child(even) .price-table tbody tr:hover{
  background: var(--paper-edge);
}
.page-pricing .price-table .prod{
  font-family: var(--serif); font-size: 19px; font-weight: 400;
  letter-spacing: -0.005em;
  /* Reset the homepage .prod card geometry — it has display:grid + min-height:420px
     for the product-card layout, which would otherwise inflate every table row by
     ~420px. Inside the price table, .prod is just a styling hook for the product
     name cell. */
  display: table-cell;
  min-height: 0;
  padding: 16px 20px;
  background: transparent;
  grid-template-rows: none;
  gap: 0;
}
.page-pricing .price-table .prod a{
  color: var(--ink); border-bottom: 1px solid var(--rule-soft);
}
.page-pricing .price-table .prod a:hover{
  border-bottom-color: var(--crimson); color: var(--crimson);
}
.page-pricing .price-table .pitch{
  display: block; color: var(--ink-3); font-size: 12px;
  margin-top: 3px;
  font-family: var(--serif); font-style: italic;
}
.page-pricing .price-table .tier-name{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500;
}
.page-pricing .price-table .price{
  font-family: var(--serif); font-size: 24px; font-weight: 400;
  letter-spacing: -0.01em;
}
.page-pricing .price-table .unit{
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  letter-spacing: 0.1em; display: block;
  margin-top: 2px; text-transform: uppercase;
}
.page-pricing .price-table .sla{
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.page-pricing .price-table .choose{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); font-weight: 600; white-space: nowrap;
}
.page-pricing .price-table .choose:hover{ color: var(--crimson); }

/* Enterprise strip — converted from dark surface to light-blue gradient */
.page-pricing .enterprise-strip{
  padding: 96px 0;
  background: linear-gradient(180deg, var(--surface-deep) 0%, var(--ice) 100%);
  color: var(--ink);
  border-top: 1px solid var(--rule);
}
.page-pricing .enterprise-strip .grid{
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 64px; align-items: center;
}
.page-pricing .enterprise-strip h2{
  color: var(--ink);
  font-size: clamp(36px, 4vw, 60px);
  font-weight: 400; letter-spacing: -0.02em;
  margin-top: 16px;
}
.page-pricing .enterprise-strip h2 em{ font-style: italic; color: var(--gold); }
.page-pricing .enterprise-strip p{
  color: var(--ink-2);
  font-size: 15px; max-width: 48ch;
  margin-top: 20px;
}

@media (max-width: 720px){
  .page-pricing .price-table thead{ display: none; }
  .page-pricing .price-table,
  .page-pricing .price-table tbody,
  .page-pricing .price-table tr,
  .page-pricing .price-table td{ display: block; width: 100%; }
  .page-pricing .price-table tr{ border-bottom: 1px solid var(--rule); padding: 12px 0; }
  .page-pricing .price-table td{ border: 0; padding: 6px 20px; }
  .page-pricing .enterprise-strip .grid{ grid-template-columns: 1fr; gap: 28px; }
}


/* ===============================================================
   SUPPORT PAGE (/support)
   =============================================================== */

.page-support .hero{ padding: 72px 0 48px; border-bottom: 1px solid var(--rule); }
.page-support .hero h1{
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.96; letter-spacing: -0.025em; font-weight: 300;
  margin-top: 20px;
}
.page-support .hero h1 em{
  font-style: italic; color: var(--crimson); font-weight: 400; display: block;
}
.page-support .hero .lede{
  font-size: 17px; color: var(--ink-2);
  max-width: 56ch; margin-top: 24px; font-weight: 300;
}

.page-support .channels{ padding: 64px 0; border-bottom: 1px solid var(--rule); }
.page-support .channels .channels-head h2{
  margin-top: 16px; font-size: 36px; font-weight: 400;
}
.page-support .channels-grid{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 40px;
}
.page-support .channel{
  background: var(--paper); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.page-support .channel .tag{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--crimson); font-weight: 600;
}
.page-support .channel h3{ font-size: 24px; font-weight: 400; }
.page-support .channel p{ color: var(--ink-2); font-size: 14px; }
.page-support .channel .eta{
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--rule-soft);
}

.page-support .form-section{
  padding: 80px 0; border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
.page-support .form-grid{
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px;
}
.page-support .form-grid h2{
  font-size: 36px; font-weight: 400; max-width: 16ch; margin-top: 16px;
}
.page-support .form-grid h2 em{ font-style: italic; color: var(--crimson); }
.page-support .form-grid .lede-sm{
  color: var(--ink-2); font-size: 14.5px;
  max-width: 44ch; margin-top: 20px;
}
.page-support .form-section .form{
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 32px;
  display: grid; gap: 20px;
}
.page-support .form-section .form-row{
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.page-support .form-section .textarea{ min-height: 140px; resize: vertical; }
.page-support .form-section .form-footer{
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--rule-soft);
  flex-wrap: wrap; gap: 12px;
}
.page-support .form-section .form-footer .meta{ color: var(--ink-3); }

.page-support .status-section{ padding: 64px 0; border-bottom: 1px solid var(--rule); }
.page-support .status-section .head-row{
  display: flex; justify-content: space-between; align-items: end;
  gap: 24px; flex-wrap: wrap;
}
.page-support .status-section h2{
  margin-top: 16px; font-size: 36px; font-weight: 400;
}
.page-support .status-section h2 em.ok{
  font-style: italic; color: var(--moss);
}
.page-support .status-panel{
  border: 1px solid var(--rule); background: var(--paper);
  margin-top: 24px;
}
.page-support .status-head{
  display: flex; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.page-support .status-row{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14px; align-items: center;
}
.page-support .status-row:last-child{ border-bottom: 0; }
.page-support .status-row .name{ font-family: var(--serif); font-size: 18px; }
.page-support .status-row .uptime{
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.page-support .status-row .state{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 600; justify-self: end;
}
.page-support .state.operational{ color: var(--moss); }
.page-support .state.degraded  { color: var(--amber); }

@media (max-width: 840px){
  .page-support .channels-grid{ grid-template-columns: 1fr; }
  .page-support .form-grid{ grid-template-columns: 1fr; gap: 28px; }
  .page-support .form-section .form-row{ grid-template-columns: 1fr; }
  .page-support .status-row{ grid-template-columns: 1fr 1fr; }
  .page-support .status-row .name{ grid-column: 1 / -1; }
}


/* ===============================================================
   TRUST CENTER PAGE (/trust)
   =============================================================== */

.page-trust .hero{
  padding: 96px 0 64px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-deep);
}
.page-trust .hero .hero-head{
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; margin-bottom: 24px;
}
.page-trust .hero h1{
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-weight: 300;
  max-width: 18ch;
}
.page-trust .hero h1 em{ font-style: italic; color: var(--crimson); font-weight: 400; }
.page-trust .hero .lede{
  font-size: 17px; line-height: 1.6;
  color: var(--ink-2);
  max-width: 58ch; margin-top: 32px;
}
.page-trust .hero .hallmark{ font-size: 11px; }

.page-trust .certs{ padding: 72px 0; border-bottom: 1px solid var(--rule); }
.page-trust .certs-head h2{
  margin-top: 16px;
  font-size: 44px; font-weight: 400; letter-spacing: -0.015em;
}
.page-trust .certs-head h2 em{ font-style: italic; color: var(--crimson); }
.page-trust .certs-grid{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 48px;
}
.page-trust .cert{
  background: var(--paper); padding: 32px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.page-trust .cert .mark{
  width: 60px; height: 60px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 18px;
  font-style: italic; color: var(--crimson);
}
.page-trust .cert h3{ font-family: var(--serif); font-size: 20px; font-weight: 400; }
.page-trust .cert .status{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--moss); font-weight: 600;
}
.page-trust .cert p{ font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.page-trust .cert .dl{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink); font-weight: 600;
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}
.page-trust .cert .dl:hover{ color: var(--crimson); }

.page-trust .principles{ padding: 96px 0; border-bottom: 1px solid var(--rule); }
.page-trust .principles h2{
  margin-top: 16px;
  font-size: 44px; font-weight: 400; letter-spacing: -0.015em;
}
.page-trust .principles h2 em{ font-style: italic; color: var(--crimson); }
.page-trust .principles-list{
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 48px 64px; margin-top: 56px;
}
.page-trust .principle{
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.page-trust .principle .n{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--crimson); font-weight: 600;
}
.page-trust .principle h3{
  font-family: var(--serif); font-size: 28px; font-weight: 400;
  margin-top: 10px; margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.page-trust .principle h3 em{ font-style: italic; color: var(--crimson); }
.page-trust .principle p{ color: var(--ink-2); font-size: 14.5px; line-height: 1.65; }
.page-trust .principles.principles--no-top{ border-top: 0; }

.page-trust .contact-grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px; margin-top: 48px;
}
.page-trust .contact-card{
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 32px;
}
.page-trust .contact-card h3{
  font-family: var(--serif); font-size: 26px; font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.page-trust .contact-card h3 em{ font-style: italic; color: var(--crimson); }
.page-trust .contact-card p{
  font-size: 13.5px; color: var(--ink-2);
  margin-bottom: 16px; max-width: 44ch; line-height: 1.6;
}
.page-trust .contact-card .row{
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 13.5px;
}
.page-trust .contact-card .row:last-child{ border-bottom: 0; }
.page-trust .contact-card .row span:last-child{
  font-family: var(--mono); color: var(--crimson);
}

@media (max-width: 840px){
  .page-trust .certs-grid,
  .page-trust .principles-list,
  .page-trust .contact-grid{ grid-template-columns: 1fr; }
}


/* ===============================================================
   AUTHED DASHBOARD (/dashboard)
   Formerly a <style dangerouslySetInnerHTML> block embedded in
   dashboard/page.tsx — moved here as the source of truth.
   =============================================================== */

.dash-hero{ padding: 40px 0 28px; border-bottom: 1px solid var(--rule); }
.dash-hero h1{
  font-size: 44px; font-weight: 300; letter-spacing: -0.02em;
}
.dash-hero h1 em{ font-style: italic; color: var(--crimson); font-weight: 400; }
.dash-hero .hello{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3); text-transform: uppercase;
}
.dash-stats{
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 28px;
}
.dstat{ background: var(--paper); padding: 20px 24px; }
.dstat .lbl{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
}
.dstat .v{
  font-family: var(--serif); font-size: 36px; font-weight: 400;
  letter-spacing: -0.015em;
  margin-top: 6px;
}
.dstat .v em{
  font-style: italic; color: var(--crimson);
  font-size: 16px; margin-left: 6px; font-weight: 400;
}
.dash-tabs{
  display: flex; gap: 8px; margin-top: 32px;
  border-bottom: 1px solid var(--rule);
}
.dash-tab{
  background: transparent; border: 0; padding: 12px 20px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.dash-tab.active{ color: var(--crimson); border-bottom-color: var(--crimson); }
.dash-section{ padding: 32px 0; }
.dash-section .section-title{
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 20px; gap: 24px; flex-wrap: wrap;
}
.dash-section .section-title h2{
  font-size: 24px; font-weight: 400; letter-spacing: -0.01em;
}
.dash-section .section-title h2 em{
  font-style: italic; color: var(--crimson);
  font-size: 0.7em; margin-left: 4px;
}
.dash-section .section-title .meta{
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.dash-loading{ color: var(--ink-3); padding: 32px 0; }

.rec-table{
  width: 100%; border-collapse: collapse;
  background: var(--paper); border: 1px solid var(--rule);
  font-size: 14px;
}
.rec-table th{
  background: var(--ink); color: var(--paper);
  text-align: left; padding: 12px 18px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500;
}
.rec-table td{
  padding: 16px 18px;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: middle;
}
.rec-table tr:last-child td{ border-bottom: 0; }
.rec-table tr:hover{ background: var(--paper-deep); }
.rec-table .rec-actions{ white-space: nowrap; }
.rec-id{
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.06em;
}
.rec-name{ font-family: var(--serif); font-size: 16px; font-weight: 400; }
.rec-flag{ margin-left: 8px; font-size: 11px; }
.rec-flag--crimson{ color: var(--crimson); }
.rec-link--crimson{ color: var(--crimson); }

.tag{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--rule-soft);
  font-weight: 500;
}
.tag.ok{ color: var(--moss); border-color: var(--moss); }

.check-form{ display: grid; gap: 18px; max-width: 760px; margin-top: 12px; }
.check-form .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check-form label{ display: block; }
.check-form .label{
  display: block; margin-bottom: 6px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}
.check-form .input,
.check-form .select,
.check-form .textarea{
  width: 100%; box-sizing: border-box;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 12px 14px;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  border-radius: 0;
}
.check-form .input:focus,
.check-form .select:focus,
.check-form .textarea:focus{
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.check-form .submit-row{
  display: flex; gap: 12px; align-items: center;
}

.result-card{
  background: var(--paper); border: 1px solid var(--rule);
  padding: 24px; max-width: 900px;
}
.result-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.result-body code{
  background: var(--paper-deep); padding: 2px 6px; font-size: 12px;
}
.result-body .result-pending{ color: var(--ink-3); }
.result-json{
  background: var(--ink); color: var(--paper);
  padding: 16px;
  font-size: 11px; line-height: 1.5;
  overflow-x: auto;
  margin-top: 16px; max-height: 500px;
}

.upload-drop{
  display: block;
  border: 2px dashed var(--rule);
  padding: 48px 24px;
  text-align: center; cursor: pointer;
  transition: background 0.2s;
}
.upload-drop:hover{ background: var(--paper-deep); }
.upload-progress{
  margin-top: 16px; padding: 12px;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
}
.upload-progress em{ font-style: italic; color: var(--crimson); }

.btn-inline{
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); font-weight: 600;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
}
.btn-inline:hover{ color: var(--crimson); border-bottom-color: var(--crimson); }
.btn-inline.crimson{ color: var(--crimson); }

.alert-list{ display: grid; gap: 12px; }
.alert-card{
  background: var(--paper); border: 1px solid var(--rule);
  padding: 16px 20px; border-left-width: 4px;
}
.alert-card.alert-critical{ border-left-color: var(--crimson); }
.alert-card.alert-high    { border-left-color: var(--amber); }
.alert-card.alert-medium  { border-left-color: var(--gold); }
.alert-card.alert-low,
.alert-card.alert-informational{ border-left-color: var(--ink-3); }
.alert-card.read{ opacity: 0.6; }
.alert-head{
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.14em;
}
.alert-tier{ font-weight: 600; color: var(--ink); }
.alert-title{ font-family: var(--serif); font-size: 18px; margin-top: 6px; }
.alert-desc{
  font-size: 13px; color: var(--ink-2); margin-top: 6px; line-height: 1.55;
}
.alert-card .btn-inline{ margin-top: 10px; }

.dashpanel-head--inner{
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-soft);
}
.dash-kpi .sub--alert{ color: var(--crimson); }
.stat-num--fre{ font-size: 34px; line-height: 1.2; }

@media (max-width: 960px){
  .dash-stats{ grid-template-columns: 1fr 1fr; }
  .check-form .form-row{ grid-template-columns: 1fr; }
  .rec-table{ font-size: 13px; }
  .rec-table th, .rec-table td{ padding: 10px 12px; }
}