/* ============================================================
   Contented Capital — design tokens
   Ledger / maturity-line motif: fixed income is about time,
   discipline and a known endpoint. The visual language borrows
   from bond certificates and ledger books rather than "fintech".
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,340..600&family=Fraunces:ital,opsz,wght@1,9..144,400..500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#15211D;
  --ink-soft:#1F2E28;
  --paper:#ECE7DA;
  --paper-alt:#E1DAC7;
  --card:#F5F1E6;
  --text:#1B231F;
  --muted:#5B6560;
  --forest:#3B5B4D;
  --forest-deep:#28402F5;
  --brass:#A17F31;
  --line: rgba(21,33,29,0.16);
  --line-strong: rgba(21,33,29,0.32);
  --radius: 2px;
  --maxw: 1180px;
  --shadow: 0 18px 40px -24px rgba(21,33,29,0.35);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:'IBM Plex Sans', -apple-system, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--forest);
}
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:480;
  line-height:1.08;
  margin:0 0 .4em;
  letter-spacing:-.01em;
  color:var(--ink);
}
h1{font-size:clamp(2.4rem,5vw,4.1rem); font-weight:420;}
h2{font-size:clamp(1.7rem,3vw,2.5rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em; color:var(--text);}
.lede{font-size:1.15rem; color:var(--ink-soft); max-width:52ch;}
.muted{color:var(--muted);}
.mono{font-family:'IBM Plex Mono',monospace;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--paper);
  padding:10px 16px; z-index:1000; font-family:'IBM Plex Mono',monospace; font-size:13px;
}
.skip-link:focus{left:12px; top:12px;}

/* ---------- nav ---------- */
.site-nav{
  position:sticky; top:0; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(21,33,29,0.04);
}
/* NOTE: intentionally no backdrop-filter/filter here — either one makes
   this element a containing block for descendant position:fixed nodes
   in WebKit/Blink, which traps the fixed mobile menu inside the 78px
   nav bar instead of letting it cover the viewport. */
.site-nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:78px;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none;
}
.brand-mark{
  height:44px; width:auto; flex-shrink:0;
}
.brand-text{display:flex; flex-direction:column; gap:2px;}
.brand .name{
  font-family:'Fraunces',serif; font-size:1.28rem; font-weight:500; color:var(--ink);
}
.brand .sub{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--forest);
}
.nav-links{
  display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  text-decoration:none; font-size:14.5px; color:var(--ink-soft); position:relative; padding:4px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--forest);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);}
.nav-links a[aria-current="page"]{color:var(--ink); font-weight:500;}
.nav-toggle{display:none;}

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:78px 0 0 0; background:var(--ink); flex-direction:column;
    justify-content:flex-start; padding:36px 28px; gap:22px; transform:translateX(100%);
    transition:transform .3s ease; border-top:1px solid var(--line); z-index:60;
    box-shadow:-12px 0 32px rgba(0,0,0,0.25);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{font-size:1.1rem; color:var(--paper);}
  .nav-links a::after{background:var(--brass);}
  .nav-links a[aria-current="page"]{color:#fff;}
  .nav-toggle{
    display:block; background:none; border:1px solid var(--line-strong); border-radius:var(--radius);
    width:42px; height:38px; position:relative; cursor:pointer;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    content:""; position:absolute; left:10px; right:10px; height:1.5px; background:var(--ink);
  }
  .nav-toggle span{top:18px; transition:background .2s ease;}
  .nav-toggle span::before{top:-6px; transition:transform .2s ease, top .2s ease;}
  .nav-toggle span::after{top:6px; transition:transform .2s ease, top .2s ease;}
  .nav-toggle.active span{background:transparent;}
  .nav-toggle.active span::before{top:0; transform:rotate(45deg);}
  .nav-toggle.active span::after{top:0; transform:rotate(-45deg);}
}

/* ---------- maturity line (signature divider) ---------- */
.maturity-line{
  position:relative; height:1px; background:var(--line-strong);
  margin:64px 0; width:100%;
}
.maturity-line::before{
  content:""; position:absolute; left:0; top:-3px; width:7px; height:7px; border-radius:50%;
  background:var(--forest);
}
.maturity-line::after{
  content:attr(data-label); position:absolute; right:0; top:-24px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.maturity-line[data-tick]::before{ }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:96px 0 84px;
  background:
    linear-gradient(180deg, rgba(236,231,218,0) 60%, var(--paper) 100%),
    var(--paper);
}
.hero-curve{
  position:absolute; right:-6%; top:8%; width:62%; max-width:760px; opacity:.9; pointer-events:none;
}
.hero-inner{position:relative; z-index:2; max-width:640px;}
.hero .eyebrow{display:block; margin-bottom:18px;}
.hero-badges{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:34px;
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft);
}
.hero-badges span{display:flex; align-items:center; gap:8px;}
.hero-badges span::before{content:"—"; color:var(--brass);}
.hero-ctas{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Sans',sans-serif; font-size:14.5px; font-weight:500;
  padding:14px 26px; border-radius:var(--radius); text-decoration:none; cursor:pointer;
  border:1px solid transparent; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary{background:var(--ink); color:var(--paper);}
.btn-primary:hover{background:var(--forest);}
.btn-ghost{border-color:var(--line-strong); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink); background:rgba(21,33,29,0.04);}

/* ---------- sections ---------- */
section{padding:8px 0;}
.section-head{max-width:640px; margin-bottom:44px;}
.two-col{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
}
@media (max-width:860px){ .two-col{grid-template-columns:1fr;} }

.pillars{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); margin:36px 0 12px;
}
.pillar{background:var(--card); padding:30px 24px;}
.pillar .tick{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--brass); letter-spacing:.08em;
  display:block; margin-bottom:14px;
}
.pillar h4{font-size:1.02rem; margin-bottom:8px;}
.pillar p{font-size:.92rem; color:var(--muted); margin:0;}
@media (max-width:860px){ .pillars{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .pillars{grid-template-columns:1fr;} }

.card-row{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px;}
@media (max-width:900px){ .card-row{grid-template-columns:1fr;} }
.info-card{
  background:var(--card); border:1px solid var(--line); padding:30px 28px; border-radius:var(--radius);
}
.info-card h3{font-size:1.08rem; margin-bottom:10px;}
.info-card p{font-size:.94rem; color:var(--muted); margin:0;}

.callout{
  background:var(--ink); color:var(--paper); padding:48px; border-radius:var(--radius);
  display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap;
}
.callout h3{color:var(--paper); font-size:1.5rem; max-width:34ch;}
.callout p{color:rgba(236,231,218,0.72); max-width:44ch;}
.callout .btn-primary{background:var(--paper); color:var(--ink);}
.callout .btn-primary:hover{background:#fff;}

.definition-list{border-top:1px solid var(--line);}
.definition{
  display:grid; grid-template-columns:220px 1fr; gap:32px; padding:26px 0; border-bottom:1px solid var(--line);
}
@media (max-width:700px){ .definition{grid-template-columns:1fr; gap:8px;} }
.definition dt{
  font-family:'IBM Plex Mono',monospace; font-size:13px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--forest); margin:0;
}
.definition dd{margin:0; color:var(--text);}

.principle-list{list-style:none; margin:28px 0; padding:0; display:grid; gap:0; border-top:1px solid var(--line);}
.principle-list li{
  padding:20px 0; border-bottom:1px solid var(--line); display:flex; gap:20px; align-items:baseline;
}
.principle-list .mk{font-family:'IBM Plex Mono',monospace; color:var(--brass); font-size:13px; min-width:28px;}

blockquote.pull{
  border-left:2px solid var(--forest); margin:40px 0; padding:4px 0 4px 28px;
  font-family:'Fraunces',serif; font-style:italic; font-size:1.4rem; font-weight:400; color:var(--ink);
  max-width:52ch;
}

/* ---------- about page brand lockup ---------- */
.about-hero{display:flex; align-items:flex-end; gap:40px; flex-wrap:wrap;}
.about-logo{width:180px; height:auto; flex-shrink:0;}
@media (max-width:700px){
  .about-hero{flex-direction:column; align-items:flex-start; gap:24px;}
  .about-logo{width:140px;}
}

/* ---------- notice / warning boxes ---------- */
.notice{
  border:1px solid var(--line-strong); background:var(--card); padding:24px 26px; border-radius:var(--radius);
  font-size:.92rem; color:var(--ink-soft); margin:28px 0;
}
.notice strong{color:var(--ink);}
.notice.warn{border-color:var(--brass);}

/* ---------- footer ---------- */
footer{
  margin-top:100px; background:var(--ink); color:rgba(236,231,218,0.82);
  padding:64px 0 40px; font-size:13.5px;
}
footer a{color:var(--paper); text-decoration:none; border-bottom:1px solid rgba(236,231,218,0.35);}
footer a:hover{border-color:var(--paper);}
.footer-top{
  display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:36px;
  border-bottom:1px solid rgba(236,231,218,0.16); margin-bottom:28px;
}
.footer-brand .name{font-family:'Fraunces',serif; font-size:1.3rem; color:var(--paper);}
.footer-cols{display:flex; gap:56px; flex-wrap:wrap;}
.footer-col h5{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(236,231,218,0.55); margin:0 0 14px;
}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:9px;}
.legal-block{color:rgba(236,231,218,0.55); line-height:1.7; max-width:980px;}
.legal-block p{color:inherit; font-size:12.5px; margin:0 0 10px;}

/* ---------- investor gate ---------- */
#investor-gate{
  position:fixed; inset:0; z-index:200; background:var(--ink);
  display:flex; align-items:center; justify-content:center; padding:28px;
}
#investor-gate[hidden]{display:none;}
.gate-card{
  max-width:720px; width:100%; background:var(--paper); border-radius:var(--radius);
  padding:44px 44px 36px; max-height:88vh; overflow-y:auto; box-shadow:var(--shadow);
}
.gate-card .eyebrow{margin-bottom:10px;}
.gate-card h2{font-size:1.7rem; margin-bottom:10px;}
.gate-card > p{color:var(--muted); font-size:.95rem;}
.gate-options{display:grid; gap:12px; margin:26px 0 22px;}
.gate-option{
  border:1px solid var(--line-strong); border-radius:var(--radius); padding:16px 18px;
  display:flex; gap:14px; cursor:pointer; background:var(--card);
  transition:border-color .15s ease, background .15s ease;
}
.gate-option:hover{border-color:var(--forest);}
.gate-option input{margin-top:3px; accent-color:var(--forest);}
.gate-option .t{font-weight:600; font-size:.95rem; margin-bottom:3px; color:var(--ink);}
.gate-option .d{font-size:.85rem; color:var(--muted); line-height:1.5;}
.gate-option.selected{border-color:var(--forest); background:#F8F5EA;}
.gate-ack{
  display:flex; gap:10px; align-items:flex-start; font-size:.85rem; color:var(--ink-soft);
  margin:18px 0 26px;
}
.gate-ack input{margin-top:3px; accent-color:var(--forest);}
.gate-actions{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.gate-error{color:#8A3B2B; font-size:.82rem; display:none;}
.gate-error.show{display:block;}
.gate-exit{font-size:.82rem; color:var(--muted); text-decoration:underline; background:none; border:none; cursor:pointer; padding:0;}
.btn[disabled]{opacity:.45; cursor:not-allowed;}
.btn[disabled]:hover{background:var(--ink);}

.reveal{opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{transition:none; opacity:1; transform:none;}
}