/* The public landing page. Uses the design-system tokens; dark mode follows them. Prefix: .ld- */
.ld { --ld-gold: #b88a44; --ld-gold-soft: #dcbb84; --ld-navy: #0a1526; --ld-navy-2: #10233f; --ld-paper: #fbf8f1; --ld-rust: #9b3f27;
  min-height: 100vh; background: var(--paper-50); color: var(--ink-900); font-family: var(--font-ui); line-height: 1.55; }
.ld *, .ld *::before, .ld *::after { box-sizing: border-box; }
.ld-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.ld :where(h1, h2, h3, h4) { margin: 0; }
.ld h1, .ld h2, .ld h3, .ld h4 { font-family: var(--font-display); }
.ld :where(p, ul, ol) { margin: 0; }
.ld ul, .ld ol { padding: 0; list-style: none; }
.ld button { font: inherit; cursor: pointer; }
.ld button:focus-visible, .ld a:focus-visible { outline: 3px solid var(--ld-gold-soft); outline-offset: 2px; }

.ld-skip { position: absolute; left: -9999px; top: 8px; background: #fff; color: #10151c; padding: 8px 12px; border-radius: 6px; z-index: 100; }
.ld-skip:focus { left: 8px; }

/* ---- Header ---- */
.ld-header { position: sticky; top: 0; z-index: 50; background: rgba(10, 21, 38, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(220, 187, 132, 0.18); }
.ld-header-row { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.ld-brand { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px; color: #fff; border-radius: 8px; }
.ld-brand-name, .ld-brand-static span { font-family: var(--font-display); font-size: 21px; letter-spacing: 0.04em; font-weight: 600; color: #fff; }
.ld-nav { display: flex; gap: 4px; margin-left: 8px; flex: 1; }
.ld-navlink { background: none; border: 0; color: #cdd6e2; padding: 8px 12px; border-radius: 8px; font-size: 14.5px; }
.ld-navlink:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.ld-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ld-burger { display: none; width: 42px; height: 42px; background: none; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ld-burger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }

/* ---- Buttons ---- */
.ld-btn { border-radius: 10px; padding: 10px 18px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease; }
.ld-btn:hover { transform: translateY(-1px); }
.ld-btn-lg { padding: 14px 24px; font-size: 16px; }
.ld-btn-gold { background: var(--ld-gold); color: var(--ld-navy); }
.ld-btn-gold:hover { background: var(--ld-gold-soft); }
.ld-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.ld-btn-ghost:hover { background: rgba(255, 255, 255, 0.09); }
.ld-btn-outline { background: transparent; color: #fff; border-color: var(--ld-gold-soft); }
.ld-btn-outline:hover { background: rgba(220, 187, 132, 0.12); }

/* ---- Hero: ruled ledger paper in the dark, with a gold margin line ---- */
.ld-hero { background-color: var(--ld-navy);
  background-image: linear-gradient(rgba(184, 138, 68, 0.3), rgba(184, 138, 68, 0.3)), repeating-linear-gradient(180deg, transparent 0 35px, rgba(255, 255, 255, 0.045) 35px 36px);
  background-repeat: no-repeat, repeat; background-size: 1px 100%, auto; background-position: max(10px, calc(50% - 604px)) 0, 0 0;
  color: #cdd6e2; padding: 72px 0 84px; }
.ld-hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.ld .ld-hero h1 { color: #fff; font-size: clamp(36px, 5.4vw, 60px); line-height: 1.06; font-weight: 600; letter-spacing: -0.01em; }
.ld-eyebrow { color: var(--ld-gold-soft); font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: 14px; }
.ld-eyebrow-dark { color: var(--gold-600); }
.ld-lead { font-size: clamp(17px, 2.2vw, 20px); margin-top: 22px; max-width: 34em; color: #d8e0ea; }
.ld-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.ld-tagline { margin-top: 28px; font-family: var(--font-display); font-style: italic; color: var(--ld-gold-soft); font-size: 18px; }

/* The proof thread illustration */
.ld-thread { margin: 0; background: var(--ld-paper); color: #1b2430; border-radius: 16px; padding: 22px 24px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(220, 187, 132, 0.4); position: relative; }
.ld-thread-head { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #5b6472; margin-bottom: 16px; }
.ld-thread-tag { background: #1b2430; color: #fff; border-radius: 999px; padding: 2px 10px; font-weight: 600; letter-spacing: 0.04em; }
.ld-beads { position: relative; display: grid; gap: 4px; }
.ld-beads::before { content: ""; position: absolute; left: 20px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, var(--ld-gold), var(--ld-gold) 72%, transparent 100%); }
.ld-bead { position: relative; padding: 0; }
.ld-bead-btn { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; width: 100%; min-height: 44px; padding: 10px 8px; margin: 0; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; color: inherit; }
.ld-bead-btn:hover { background: #f1ecdd; }
.ld-bead.is-selected .ld-bead-btn { background: #f1ecdd; border-color: #d9d3c4; }
.ld .ld-thread button:focus-visible { outline: 3px solid #0b5c56; outline-offset: 2px; }
.ld-thread.is-animated .ld-bead { animation: ld-in 0.55s ease both; animation-delay: calc(var(--i) * 0.14s + 0.1s); }
.ld-dot { width: 24px; height: 24px; border-radius: 50%; background: #8a6420; color: #fff; font-size: 14px; font-weight: 700; line-height: 24px; text-align: center; box-shadow: 0 0 0 4px var(--ld-paper); position: relative; z-index: 1; }
.ld-bead.is-missing .ld-dot { background: var(--ld-paper); color: var(--ld-rust); border: 2px dashed var(--ld-rust); }
.ld-bead-text { display: grid; gap: 1px; }
.ld-bead-text strong { font-size: 15.5px; }
.ld-bead-text span { font-size: 13.5px; color: #4b5563; }
.ld-bead-text .ld-missing { color: var(--ld-rust); font-weight: 700; }
.ld-bead-text .ld-linked { color: #3d4654; font-weight: 600; font-size: 12.5px; }
.ld-thread-detail { margin-top: 10px; padding: 10px 12px; background: #fff; border-left: 3px solid #8a6420; border-radius: 0 8px 8px 0; font-size: 14px; color: #2b3440; }
.ld-bead-text strong { display: block; }
.ld-thread figcaption { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e7dfce; font-size: 13px; color: #4b5563; }
@keyframes ld-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ---- Sections ---- */
.ld-section { padding: 76px 0; scroll-margin-top: 64px; }
.ld-alt { background: var(--paper-100); }
.ld-sechead { max-width: 46em; margin-bottom: 36px; }
.ld-sechead h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.15; color: var(--navy-900); }
.ld-sechead p { margin-top: 12px; color: var(--ink-500); font-size: 17px; }
.ld-grid { display: grid; gap: 16px; }
.ld-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ld-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ld-card { background: var(--paper-0); border: 1px solid var(--line); border-radius: 14px; padding: 22px; border-top: 3px solid var(--ld-gold); }
.ld-card h3 { font-size: 18px; line-height: 1.25; color: var(--navy-900); margin-bottom: 8px; }
.ld-card p { font-size: 14.5px; color: var(--ink-700); }
.ld-orgs { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.ld-orgs h3 { font-size: 20px; margin-bottom: 12px; }
.ld-orgs ul { display: flex; flex-wrap: wrap; gap: 8px; }
.ld-orgs li { border: 1px solid var(--line); background: var(--paper-0); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.ld-fine { font-size: 13px; color: var(--ink-500); margin-top: 12px; }
.ld-on-dark { color: #9fb0c4; }

/* How it works */
.ld-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; counter-reset: s; }
.ld-step { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.ld-stepnum { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ld-navy); color: var(--ld-gold-soft); font-family: var(--font-display); font-size: 20px; box-shadow: 0 0 0 3px var(--paper-50), 0 0 0 4px var(--ld-gold); }
.ld-step h3 { font-size: 17px; color: var(--navy-900); margin-bottom: 4px; }
.ld-step p { font-size: 14.5px; color: var(--ink-700); }

/* Security (always dark) */
.ld-dark { background: var(--ld-navy); color: #cdd6e2; }
.ld .ld-dark h2, .ld .ld-dark h3 { color: #fff; }
.ld .ld-dark .ld-sechead p { color: #b4c0d0; }
.ld .ld-dark .ld-eyebrow-dark { color: var(--ld-gold-soft); }
.ld-card-dark { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); border-top-color: var(--ld-gold); }
.ld .ld-card-dark h3 { color: #fff; }
.ld-card-dark p { color: #cdd6e2; }
.ld-status { margin-top: 32px; padding: 22px 24px; border-left: 4px solid var(--ld-gold); background: rgba(220, 187, 132, 0.09); border-radius: 0 12px 12px 0; }
.ld-status h3 { font-size: 19px; margin-bottom: 10px; }
.ld-status ul { display: grid; gap: 6px; }
.ld-status li { padding-left: 18px; position: relative; font-size: 15px; color: #e4eaf2; }
.ld-status li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 7px; height: 7px; border-radius: 50%; background: var(--ld-gold-soft); }

/* About + final call */
.ld-about { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.ld-about h2 { font-size: clamp(26px, 3.2vw, 36px); color: var(--navy-900); margin-bottom: 12px; }
.ld-about p { color: var(--ink-700); font-size: 17px; }
.ld-final { background: var(--ld-navy-2); color: #cdd6e2; border-radius: 16px; padding: 28px; box-shadow: 0 0 0 1px rgba(220, 187, 132, 0.35); }
.ld .ld-final h3 { color: #fff; font-size: 22px; margin-bottom: 8px; }
.ld-final p { color: #cdd6e2; font-size: 15px; margin-bottom: 18px; }

/* ---- Footer ---- */
.ld-footer { background: #070f1c; color: #9fb0c4; padding: 48px 0 28px; }
.ld-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.ld-brand-static { display: inline-flex; align-items: center; gap: 10px; }
.ld-footer h4 { color: #fff; font-size: 15px; margin-bottom: 10px; font-family: var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; }
.ld-footer ul { display: grid; gap: 6px; font-size: 14.5px; }
.ld-linkbtn { background: none; border: 0; padding: 2px 0; color: #cdd6e2; text-decoration: underline; text-underline-offset: 3px; }
.ld-linkbtn:hover { color: #fff; }
.ld-note { color: #8394a8; }
.ld-legal { margin-top: 32px; font-size: 13px; color: #8394a8; }
.ld-legal::before { content: ""; display: block; height: 1px; background: rgba(255, 255, 255, 0.1); margin-bottom: 18px; }

/* ---- Tablet and phone ---- */
@media (max-width: 1020px) { .ld-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ld-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ld-hero { padding: 44px 0 56px; }
  .ld-hero-grid, .ld-about { grid-template-columns: 1fr; gap: 32px; }
  .ld-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-footer-grid { grid-template-columns: 1fr 1fr; }
  .ld-section { padding: 56px 0; }
  .ld-burger { display: inline-flex; }
  .ld-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; margin: 0; padding: 8px 20px 14px; background: var(--ld-navy); border-bottom: 1px solid rgba(220, 187, 132, 0.25); }
  .ld-nav.is-open { display: flex; }
  .ld-navlink { text-align: left; padding: 12px 8px; font-size: 16px; border-radius: 6px; }
}
@media (max-width: 600px) {
  .ld-wrap { padding: 0 16px; }
  .ld-grid-4, .ld-grid-3, .ld-steps { grid-template-columns: 1fr; }
  .ld-footer-grid { grid-template-columns: 1fr; }
  .ld-header-row { gap: 10px; }
  .ld-brand-name { display: none; }
  #ld-start-top { display: none; }
  .ld-cta-row .ld-btn { flex: 1 1 100%; }
  .ld-thread { padding: 18px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) { .ld-thread.is-animated .ld-bead { animation: none; } .ld-btn { transition: none; } .ld-btn:hover { transform: none; } }