/* Co-founder equity page. Internal. Tokens and shared glass and lockup rules
   come from css/tokens.css and css/style.css. */

.washes { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44rem 30rem at 10% 0%,  rgba(183, 65, 14, 0.10), transparent 70%),
    radial-gradient(40rem 30rem at 95% 35%, rgba(231, 206, 188, 0.50), transparent 70%),
    var(--bg);
}

.top { padding-top: var(--s-6); display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.top__label { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); }
a.lockup--foot:hover { background: var(--rust-soft); }

.title { padding-block: var(--s-7) var(--s-5); }
.title h1 { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.title p { color: var(--muted); max-width: 62ch; font-size: var(--t-sm); }

.facts { display: grid; gap: var(--s-4) var(--s-5); padding: var(--s-5); }
@media (min-width: 48rem) { .facts { grid-template-columns: repeat(4, 1fr); padding: var(--s-5) var(--s-6); } }
.fact dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-1); }
.fact dd { margin: 0; font-weight: 700; letter-spacing: var(--tr-snug); font-size: var(--t-sm); }

.sec { margin-top: var(--s-7); }
.sec__head { display: flex; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-4); }
.sec__n { font-family: var(--font-mono); color: var(--rust); font-size: var(--t-lg); }
.sec__h { font-size: var(--t-lg); font-weight: 800; letter-spacing: var(--tr-snug); }
.card { padding: var(--s-5); }
@media (min-width: 40rem) { .card { padding: var(--s-5) var(--s-6); } }

.says { font-size: var(--t-sm); color: var(--muted); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
.says b { color: var(--ink); font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; margin-right: var(--s-2); }

.qs { counter-reset: q; display: grid; gap: var(--s-3); }
.qs li { counter-increment: q; display: grid; grid-template-columns: 2rem 1fr auto; gap: var(--s-3); align-items: baseline; font-weight: 600; }
.qs li::before { content: counter(q); font-family: var(--font-mono); font-size: var(--t-sm); color: var(--rust); }
.tag { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; padding: 0.1rem var(--s-3);
  border-radius: var(--r-pill); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
@media (max-width: 36rem) { .qs li { grid-template-columns: 2rem 1fr; } .tag { grid-column: 2; justify-self: start; } }

.foot { padding-block: var(--s-7) var(--s-8); color: var(--muted); font-size: var(--t-sm); max-width: 70ch; }
.foot a { color: var(--rust-deep); }

/* Walkthrough layout */
.stamp { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); margin-left: auto; white-space: nowrap; }
.pts { display: grid; gap: var(--s-2); font-size: var(--t-sm); }
.pts li { padding-left: var(--s-4); position: relative; }
.pts li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 0.35rem; height: 0.35rem; border-radius: var(--r-pill); background: var(--rust); }
.sub { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted); margin: var(--s-5) 0 var(--s-3); }
.sub:first-child { margin-top: 0; }
.qs li { grid-template-columns: 2rem 1fr auto; }
.qs .at { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--muted); white-space: nowrap; font-weight: 400; }
@media (max-width: 36rem) { .qs .at { grid-column: 2; } }
.claim { font-weight: 700; font-size: var(--t-sm); margin-bottom: var(--s-2); }
.claim + .pts { margin-bottom: var(--s-4); }
.item { padding-block: var(--s-4); border-top: 1px solid var(--line); }
.item:first-of-type { border-top: 0; padding-top: 0; }
.item__top { display: flex; gap: var(--s-3); align-items: baseline; }

/* Vesting chart */
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--font); fill: var(--muted); font-size: 13px; }
.chart .lbl { fill: var(--ink); font-weight: 700; }
.chart .axis { stroke: var(--line); stroke-width: 1; }
.chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart .zone { fill: rgba(28, 21, 18, 0.04); }
.chart .area { fill: var(--rust-soft); opacity: 0.7; }
.chart .line { fill: none; stroke: var(--rust); stroke-width: 2.5; stroke-linejoin: round; }
.chart .cliff { stroke: var(--rust-deep); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .dot { fill: var(--rust); }
.phases { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 48rem) { .phases { grid-template-columns: repeat(3, 1fr); } }
.phase { border-top: 2px solid var(--rust); padding-top: var(--s-3); font-size: var(--t-sm); }
.phase b { display: block; margin-bottom: var(--s-1); }
.phase span { color: var(--muted); }
.note { font-size: var(--t-xs); color: var(--muted); margin-top: var(--s-4); }