/* Crypto Vault — Shared Cyan Styles (Module-12 dividers) */

/* ===== Root tokens ===== */
:root{
  --accent-start:#7ad4ff;
  --accent-end:#2ab8ff;
  --ring: rgba(0,169,255,.25);
  --content-max: 720px;
  --padX: clamp(16px, 3vw, 24px);
  --copy:#e9f3ff;
  --muted:#b9c9d6;
}

/* ===== Base ===== */
html, body {
  margin:0; padding:0; background:#000; color:var(--copy);
  font-family:'Manrope', system-ui, sans-serif; line-height:1.75;
}
*{ box-sizing:border-box }
a{ color:inherit; text-decoration:none }

/* ===== Container ===== */
.veil-container { max-width: var(--content-max); margin:0 auto; padding:88px var(--padX) 80px; }
h1, h2, h3 { font-family:'Satoshi', Inter, system-ui, sans-serif; font-weight:800; color:var(--copy); }

/* ===== HERO ===== */
.crypto-title{
  font-size: clamp(1.9rem,5.2vw,3rem);
  line-height:1.15;
  margin:0 0 8px 0;
  text-align:center;
  background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  padding-bottom:.08em;
}
.crypto-title .break { display:block; }

.crypto-subtitle{
  text-align:center; color:var(--muted); margin:0 0 14px;
  font:700 clamp(.95rem,2.4vw,1.1rem)/1.5 'Satoshi','Inter',system-ui,sans-serif;
}

/* ===== DIVIDER (Module 12 style) ===== */
.divider{
  height:2px;
  width:92%;
  max-width:var(--content-max);
  margin:22px auto 20px;
  background:linear-gradient(90deg, transparent, var(--accent-start), var(--accent-end), transparent);
  border-radius:4px;
  box-shadow:0 0 8px var(--ring);
  opacity:.98;
}

/* ===== Headings & text ===== */
h2.crypto-h2{
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  line-height:1.22;
  margin: 26px 0 12px;
  color: var(--accent-end);
}
h3.crypto-h3{
  font-size: clamp(1.05rem, 2.6vw, 1.22rem);
  line-height:1.25;
  margin: 16px 0 10px;
  color:#9ca3af;
}
.lead{ color:#cfe8ff; font-size:clamp(1rem,2.2vw,1.12rem); margin:0 0 12px; }
.anchor{ scroll-margin-top: 96px; }

.block{ margin:18px 0; }
.block p{ margin:0 0 8px; color:var(--copy); }

/* ===== Cards / callouts ===== */
.callout-strong {
  background:#0f141b; border:1px solid #243546; border-radius:10px; padding:12px 14px;
}
.card-grid{ display:grid; gap:12px; }
.card{
  background:#0f141b; border:1px solid #243546; border-radius:12px; padding:12px 14px;
  transition:.18s transform, .18s box-shadow;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.35); }
.tag{
  display:inline-block; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 8px; border-radius:999px; border:1px solid rgba(0,169,255,.35); margin-right:8px; color:#bfe6ff;
}

/* ===== CTA & Back link ===== */
.cta{ display:flex; justify-content:center; margin:24px 0 0; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:12px 20px;
  border-radius:10px; font-weight:800; font-size:1rem;
  cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  text-decoration:none;
}
.btn.primary{
  color:#091017; background:linear-gradient(90deg,var(--accent-start),var(--accent-end));
  box-shadow:0 6px 18px rgba(0,0,0,.45); border:0;
}
.btn.primary:hover{ transform:translateY(-2px); filter:brightness(1.05); }

.back-link{ text-align:center; margin-top:20px; }
.back-link a{
  display:inline-block; font-weight:700; font-size:.95rem; padding:10px 18px; border-radius:999px;
  border:1px solid rgba(0,169,255,.35); background:#17171b; color:#e9f3ff; transition:.15s ease; text-decoration:none;
}
.back-link a:hover{ border-color:var(--accent-end); transform:translateY(-1px); }

/* ===== Footer logo ===== */
.footer-logo{ text-align:center; margin-top:28px; }
.footer-logo img{ height:clamp(96px,18vw,112px); opacity:.85; transition:opacity .25s ease; }
.footer-logo img:hover{ opacity:1; }

/* ===== Mobile tighten ===== */
@media (max-width: 420px){
  .crypto-title{ font-size:1.9rem; }
  h2.crypto-h2{ font-size:1.18rem; }
  h3.crypto-h3{ font-size:1.05rem; }
  .veil-container{ padding:72px var(--padX) 68px; }
}

/* =========================
   Card internals (titles, copy, lists, chips)
   ========================= */
.card h3{
  margin:2px 0 8px;
  font-size:clamp(1.02rem,2.3vw,1.18rem);
  font-weight:800;
  color:#eaf6ff;
  letter-spacing:.2px;
}
.card .desc{
  margin:0;
  color:#cfe0ef;
  font-size:.98rem;
  line-height:1.6;
}
.card p + .desc{ margin-top:6px; }

.card .meta{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
  font-weight:700; font-size:.82rem; color:#bfe6ff;
}
.card .meta .dot{ opacity:.6; }

/* Lists inside cards */
.card .list,
.card ul,
.card ol{
  margin:10px 0 0 18px;
  padding:0;
}
.card li{
  margin:6px 0;
  color:#cfe0ef;
}
.card .list--tight li{ margin:4px 0; }

/* Pills/Tags row inside card footers */
.card .pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.card .pill{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  background:#121923;
  border:1px solid #244055;
  color:#d7ecff;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.2px;
  white-space:nowrap;
}
.card .pill:is(:hover,:focus-visible){
  border-color:color-mix(in oklab, var(--accent-end) 45%, transparent);
  outline:none;
}

/* Optional: subtle divider line inside card content blocks */
.card .inner-divider{
  height:1px;
  margin:12px 0;
  background:linear-gradient(90deg, transparent, var(--accent-start), var(--accent-end), transparent);
  border-radius:4px;
  opacity:.6;
}

/* Compact grid helper (single-column on narrow; use on wrappers) */
.card-grid{
  display:grid; gap:12px; grid-template-columns:minmax(260px,1fr);
}

/* =========================
   Back buttons & CTA variants
   ========================= */
.btn{ /* already defined in shared CSS; add focus + active polish */
  position:relative;
}
.btn:focus-visible{
  outline:2px solid color-mix(in oklab, var(--accent-end) 60%, white 0%);
  outline-offset:3px;
}
.btn:active{ transform:translateY(0) scale(.99); }

/* Secondary (neutral) button */
.btn.secondary{
  color:#e9f3ff;
  background:#121923;
  border:1px solid #263a4a;
}
.btn.secondary:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklab, var(--accent-end) 45%, transparent);
}

/* Ghost back button (light border, transparent bg) */
.btn.ghost{
  background:transparent;
  color:#e9f3ff;
  border:1px solid rgba(255,255,255,.18);
}
.btn.ghost:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklab, var(--accent-start) 45%, transparent);
  background:rgba(255,255,255,.03);
}

/* Dedicated back-link pattern (inline text button) */
.back-link{
  text-align:center; margin-top:20px;
}
.back-link a{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:.95rem;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid rgba(0,169,255,.35);
  background:#17171b;
  color:#e9f3ff; text-decoration:none;
  transition:.15s ease transform, .15s ease border-color, .15s ease background;
}
.back-link a:hover{
  border-color:var(--accent-end);
  transform:translateY(-1px);
}
.back-link a:focus-visible{
  outline:2px solid var(--accent-end);
  outline-offset:3px;
}

/* Crypto Vault — Secure Wallets (local additions only)
   NOTE: This file assumes crypto-vault-shared.css is already loaded.
*/

/* Slightly wider container for this long-form page */
:root { --content-max: 820px; }
.veil-container { max-width: var(--content-max); }

/* Section spacing specific to this page */
.section { margin: 26px 0 0; }
.section p,
.section ul,
.section ol { margin: 0 0 12px; }

/* Quick Compare table */
.cv-table { display: grid; gap: 6px; margin: 10px 0 4px; }
.cv-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 10px;
  background: #10141b;
  border: 1px solid #1b2630;
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--copy);
}
.cv-head {
  background: #121923;
  border-color: #243544;
  color: var(--accent-end);
  font-weight: 800;
}
@media (max-width: 780px) {
  .cv-row { grid-template-columns: 1fr; }
}

/* Risk banner for hot wallets */
.cv-banner{
  background: rgba(0,169,255,.08);
  border: 1px solid rgba(0,169,255,.35);
  color: #e7f4ff;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 8px 0 12px;
}

/* Affiliate disclaimer */
.disclaimer { color:#a9c2d6; text-align:center; font-size:.92rem; margin:18px auto 6px; }

/* Optional: slight readability bump for long lists on larger screens */
@media (min-width: 900px){
  .section { margin-top: 28px; }
  .section li { margin: 8px 0; }
}

/* Cyan outbound links inside vault sections */
.crypto-topic-page .cyan a,
.crypto-topic-page .row a {
  color:#8fe1ff;
  font-weight:700;
  border-bottom:1px dashed rgba(0,169,255,.35);
  text-decoration:none;
  transition: color .2s ease, border-color .2s ease;
}

.crypto-topic-page .cyan a:hover,
.crypto-topic-page .row a:hover {
  color:#bff0ff;
  border-bottom-style:solid;
  text-shadow:0 0 6px rgba(0,169,255,.35);
}