/* ==========================================================================
   components.css — component-level styling, shared across pages
   ========================================================================== */

/* ===== HEADER / NAV (injected by js/layout.js on every page) ===== */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(7,26,28,0.8);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
nav{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Instrument Sans',sans-serif;
  font-weight:600;
  font-size:18px;
  letter-spacing:-0.01em;
  text-decoration:none;
  color:var(--text);
}
.logo .mark{
  width:26px; height:26px;
  border-radius:7px;
  overflow:hidden;
  flex-shrink:0;
  display:block;
}
.logo small{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  letter-spacing:0.14em;
  color:var(--text-dim);
  font-weight:400;
  margin-top:1px;
}
.navlinks{
  display:flex; gap:26px;
  font-size:14px; font-weight:500;
  color:var(--text-muted);
}
.navlinks a{ text-decoration:none; transition:color .15s ease; white-space:nowrap; }
.navlinks a:hover{ color:var(--text); }
.navlinks a.active{ color:var(--signal); }
.navcta{ display:flex; gap:12px; }

.navtoggle{
  display:none;
  background:none;
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:8px 10px;
  color:var(--text);
  cursor:pointer;
}
.navtoggle .bar{
  display:block;
  width:18px; height:2px;
  background:var(--text);
  margin:4px 0;
  transition:transform .2s ease, opacity .2s ease;
}
.navtoggle[aria-expanded="true"] .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-mobile{
  display:none;
  flex-direction:column;
  gap:4px;
  padding:8px 32px 22px;
  border-bottom:1px solid var(--hairline);
}
.nav-mobile.open{ display:flex; }
.nav-mobile a{
  padding:12px 4px;
  color:var(--text-muted);
  text-decoration:none;
  font-size:15px;
  border-bottom:1px solid var(--hairline);
}
.nav-mobile a.active{ color:var(--signal); }
.nav-mobile a:last-of-type{ border-bottom:none; }
.nav-mobile .btn{ margin-top:14px; justify-content:center; }

/* ===== SURFACE ELEVATION ===== */
.product-card,
.explore-card,
.sec-card,
.principle,
.credential-node,
.checklist li,
.ledger-panel,
.endpoint-table,
.cta-band{
  box-shadow:var(--shadow);
}

/* ===== HOME HERO ===== */
.hero{
  position:relative;
  overflow:hidden;
  min-height:640px;
  padding:150px 0 80px;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:78% 50%;
  display:block;
}
.hero-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(100deg, var(--ink) 0%, var(--ink) 36%, rgba(7,26,28,0.94) 48%, rgba(7,26,28,0.62) 62%, rgba(7,26,28,0.18) 78%),
    linear-gradient(0deg, var(--ink) 0%, rgba(7,26,28,0) 30%);
}
.hero-content{
  position:relative;
  z-index:1;
}
.hero-text{
  max-width:560px;
}
.hero h1{
  font-size:clamp(38px,5vw,60px);
  line-height:1.04;
  font-weight:700;
}
.hero h1 .accent{
  background:linear-gradient(100deg,var(--gold),var(--signal));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p.lead{
  margin-top:22px;
  font-size:17.5px;
  color:var(--text-muted);
  max-width:520px;
}
.hero-cta{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.hero-stats{
  display:flex; gap:32px;
  margin-top:48px;
  padding-top:28px;
  border-top:1px solid rgba(237,243,241,0.16);
  flex-wrap:wrap;
}
.stat b{
  font-family:'Instrument Sans',sans-serif;
  font-size:24px;
  display:block;
  color:var(--text);
}
.stat span{ font-size:12.5px; color:var(--text-dim); }
.corridor-head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--text-dim);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.corridor-head .live{ color:var(--signal); }
.corridor-svg{ width:100%; height:260px; }
.ledger-line{
  margin-top:18px;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--text-dim);
  height:18px;
  overflow:hidden;
  transition:opacity .25s ease;
}

/* ===== PAGE HERO (inner pages: Products, For You, Architecture, Developers, Security, Policies) ===== */
.page-hero{ padding:52px 0 40px; }
.page-hero h1{ font-size:clamp(32px,4.4vw,46px); font-weight:700; }
.page-hero p.lead{ margin-top:16px; color:var(--text-muted); font-size:16.5px; max-width:640px; }

/* ===== EXPLORE GRID (home page, links out to inner pages) ===== */
.explore-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.explore-card{
  display:block;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:26px 24px;
  text-decoration:none;
  color:var(--text);
  transition:border-color .2s ease, transform .2s ease;
}
.explore-card:hover{ border-color:var(--signal); transform:translateY(-3px); }
.explore-card .eyebrow{ margin-bottom:14px; }
.explore-card h3{ font-size:17px; font-weight:600; margin-bottom:8px; }
.explore-card p{ font-size:14px; color:var(--text-muted); margin:0 0 14px; }
.explore-card .go{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--signal); }

/* ===== DEVICE FRAME (app screenshots, e.g. the Customers tab) ===== */
.device-frame{
  max-width:320px;
  margin:28px 0 0;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--hairline);
  box-shadow:var(--shadow);
  background:var(--surface);
}
.device-frame img{
  width:100%;
  display:block;
}

/* ===== PRODUCT SHOWCASE (home page — real product photography) ===== */
.showcase-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:56px;
  align-items:center;
}
.showcase-media{
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--hairline);
  box-shadow:var(--shadow);
  background:var(--surface-2);
}
.showcase-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.showcase-copy h2{ font-size:clamp(26px,3.2vw,34px); font-weight:600; line-height:1.18; }
.showcase-copy p{ margin-top:16px; color:var(--text-muted); font-size:16px; }
.showcase-copy .checklist{ margin-top:22px; }
.showcase-copy .hero-cta{ margin-top:28px; }

/* ===== PROBLEM ===== */
.problem-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.problem-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:14px; }
.problem-grid li{
  display:flex; gap:14px;
  padding:16px 0;
  border-bottom:1px solid var(--hairline);
  font-size:15px;
  color:var(--text-muted);
}
.problem-grid li b{ color:var(--text); font-weight:500; }
.problem-grid li .num{
  font-family:'IBM Plex Mono',monospace;
  color:var(--text-dim);
  font-size:13px;
  min-width:26px;
}
.problem-intro h2{ font-size:32px; font-weight:600; line-height:1.15; }
.problem-intro p{ color:var(--text-muted); margin-top:18px; font-size:15.5px; }

/* ===== PRODUCTS ===== */
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.product-card{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:28px 26px;
  transition:border-color .2s ease, transform .2s ease;
}
.product-card:hover{ border-color:var(--signal); transform:translateY(-3px); }
.product-card .icon{
  width:40px; height:40px;
  border-radius:10px;
  background:var(--gold-soft);
  display:grid; place-items:center;
  margin-bottom:18px;
  color:var(--gold);
}
.product-card h3{ font-size:17px; font-weight:600; margin-bottom:8px; }
.product-card p{ font-size:14px; color:var(--text-muted); margin:0; }

/* ===== AUDIENCE TABS (For You page) ===== */
.tabbar{
  display:flex; gap:8px;
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:6px;
  width:fit-content;
  margin-bottom:38px;
  flex-wrap:wrap;
}
.tabbtn{
  background:none; border:none; cursor:pointer;
  padding:10px 20px;
  border-radius:999px;
  font-family:'Inter',sans-serif;
  font-weight:600; font-size:14px;
  color:var(--text-muted);
  transition:background .2s ease, color .2s ease;
}
.tabbtn.active{ background:var(--surface-2); color:var(--text); }
.tabpanel{ display:none; }
.tabpanel.active{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
.tabpanel h3{ font-size:24px; font-weight:600; margin-bottom:16px; }
.tabpanel > div:first-child p{ color:var(--text-muted); font-size:15.5px; }
.checklist{ list-style:none; margin:0; padding:0; display:grid; gap:12px; align-content:start; }
.checklist li{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:14px 16px;
  font-size:14.5px;
  color:var(--text);
}
.checklist li::before{
  content:"";
  min-width:8px; height:8px; margin-top:6px;
  border-radius:2px;
  background:var(--signal);
}

/* ===== LEDGER SHOWCASE (Architecture page) ===== */
.ledger-panel{
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:16px;
  overflow-x:auto;
}
.ledger-panel table{ width:100%; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:13px; }
.ledger-panel th{
  text-align:left;
  padding:14px 20px;
  color:var(--text-dim);
  font-weight:400;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  border-bottom:1px solid var(--hairline);
  white-space:nowrap;
}
.ledger-panel td{
  padding:13px 20px;
  border-bottom:1px solid var(--hairline);
  color:var(--text-muted);
  white-space:nowrap;
}
.ledger-panel tr:last-child td{ border-bottom:none; }
.tag{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  font-size:10.5px;
  letter-spacing:0.04em;
}
.tag.debit{ background:var(--gold-soft); color:var(--gold); }
.tag.credit{ background:var(--signal-soft); color:var(--signal); }
.tag.pending{ background:rgba(71,84,103,0.10); color:var(--text-muted); }

.principles-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px; }
.principle{ border:1px solid var(--hairline); border-radius:12px; padding:18px; }
.principle .n{ font-family:'IBM Plex Mono',monospace; color:var(--text-dim); font-size:11px; }
.principle p{ margin:8px 0 0; font-size:13.5px; color:var(--text-muted); }
.principle b{ color:var(--text); }

/* ===== CORRIDORS (Architecture page) ===== */
.corridor-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.corridor-item{
  border:1px solid var(--hairline);
  border-radius:12px;
  padding:20px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:'IBM Plex Mono',monospace;
}
.corridor-item .route{ font-size:15px; color:var(--text); }
.corridor-item .rate{ font-size:12px; color:var(--signal); }

/* ===== SECURITY ===== */
.sec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.sec-card{ border:1px solid var(--hairline); border-radius:14px; padding:24px 20px; background:var(--surface); }
.sec-card h3{ font-size:15px; font-weight:600; margin-bottom:12px; color:var(--signal); }
.sec-card ul{ margin:0; padding-left:18px; color:var(--text-muted); font-size:13.5px; display:grid; gap:6px; }

/* ===== POLICIES ACCORDION ===== */
.accordion{ border-top:1px solid var(--hairline); }
.acc-item{ border-bottom:1px solid var(--hairline); }
.acc-head{
  width:100%;
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 4px;
  color:var(--text);
  font-family:'Instrument Sans',sans-serif;
  font-size:17px; font-weight:600;
  text-align:left;
}
.acc-head .plus{
  font-family:'IBM Plex Mono',monospace;
  font-size:20px; color:var(--text-dim);
  transition:transform .25s ease;
  min-width:20px; text-align:center;
}
.acc-item.open .acc-head .plus{ transform:rotate(45deg); color:var(--signal); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.acc-body-inner{ padding:0 4px 26px; color:var(--text-muted); font-size:14.5px; max-width:760px; }
.acc-body-inner ul{ padding-left:18px; display:grid; gap:8px; margin:12px 0 0; }
.acc-note{
  margin-top:14px; padding:12px 14px;
  border-left:2px solid var(--gold);
  background:var(--gold-soft);
  font-size:13px;
  color:#E4C77E;
  border-radius:0 8px 8px 0;
}

/* ===== CTA BAND (every page) ===== */
.cta-band{
  background:linear-gradient(135deg, var(--surface-2), var(--ink-soft));
  border:1px solid var(--hairline);
  border-radius:24px;
  padding:64px 56px;
  text-align:center;
  margin:0 32px;
}
.cta-band h2{ font-size:clamp(26px,3.6vw,36px); }
.cta-band p{ color:var(--text-muted); margin-top:14px; max-width:520px; margin-left:auto; margin-right:auto; }
.cta-band .hero-cta{ justify-content:center; margin-top:28px; }

/* ===== FOOTER (injected by js/layout.js on every page) ===== */
footer{ padding:80px 0 40px; }
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid var(--hairline);
}
.footer-grid h4{
  font-size:12px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--text-dim); margin-bottom:16px; font-family:'IBM Plex Mono',monospace; font-weight:400;
}
.footer-grid a{
  display:block; color:var(--text-muted); text-decoration:none;
  font-size:14px; margin-bottom:10px; transition:color .15s ease;
}
.footer-grid a:hover{ color:var(--text); }
.footer-about p{ color:var(--text-muted); font-size:13.5px; max-width:280px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:28px; font-size:12.5px; color:var(--text-dim); flex-wrap:wrap; gap:12px;
}