:root {
  --haven-guide-ink: #20283a;
  --haven-guide-paper: #f0eadf;
  --haven-guide-surface: var(--color-surface);
  --haven-guide-muted: var(--color-text-muted);
  --haven-guide-rule: color-mix(in srgb, var(--haven-guide-ink) 20%, transparent);
  --haven-guide-accent: var(--color-accent-accessible);
  --haven-guide-market: #8a8f99;
}

.haven-guide { overflow: hidden; color: var(--haven-guide-ink); }
.haven-guide h1,
.haven-guide h2,
.haven-guide h3 { color: var(--haven-guide-ink); font-family: var(--font-serif); font-weight: 500; }
.haven-guide h2 { max-width: 18ch; margin: .35rem 0 2rem; font-size: clamp(2.5rem, 5vw, 4.8rem); line-height: 1; letter-spacing: -.035em; }
.haven-guide p { margin-top: 0; }
.haven-guide-kicker { margin-bottom: .8rem; color: var(--haven-guide-accent); font-size: .69rem; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
.haven-guide-lede { max-width: 68rem; color: var(--haven-guide-muted); font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.haven-guide-brand { margin: 0; font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: .22em; line-height: 1; text-transform: uppercase; }

.haven-guide-cover { min-height: calc(100svh - 5rem); padding-block: clamp(3rem, 7vw, 6rem); background: var(--haven-guide-paper); }
.haven-guide-cover-inner { display: flex; min-height: min(46rem, calc(100svh - 11rem)); flex-direction: column; }
.haven-guide-cover .haven-guide-brand { margin-top: clamp(1rem, 4vw, 3rem); }
.haven-guide-cover-title { margin: auto 0 clamp(2rem, 5vw, 4rem); }
.haven-guide-cover h1 { margin: 0; padding-bottom: .6rem; border-bottom: 2px solid var(--haven-guide-ink); font-size: clamp(5.5rem, 16vw, 12rem); letter-spacing: -.055em; line-height: .8; text-transform: uppercase; }
.haven-guide-cover-title p { margin-top: 1.25rem; font-family: var(--font-serif); font-size: clamp(1.2rem, 2.1vw, 1.8rem); }
.haven-guide-cover-shapes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1rem; }
.haven-guide-cover-shapes > div { min-width: 0; }
.haven-guide-cover-shapes span { display: block; margin-top: -.7rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; }
.haven-guide-cover-note { margin: 2rem 0 0; font-size: .76rem; }

.haven-guide-shape { display: block; width: 100%; height: auto; }
.haven-guide-shape .shape-axis { stroke: color-mix(in srgb, var(--haven-guide-ink) 25%, transparent); stroke-width: 1.5; }
.haven-guide-shape .shape-market { fill: none; stroke: var(--haven-guide-market); stroke-width: 2.5; stroke-dasharray: 5 5; }
.haven-guide-shape .shape-you { fill: none; stroke: var(--haven-guide-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.haven-guide-shape text { fill: var(--haven-guide-ink); font-family: var(--font-sans); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.haven-guide-shape .shape-axis-label { letter-spacing: 0; text-transform: none; }
.haven-guide-shape .shape-legend text { font-size: 6px; font-weight: 650; letter-spacing: 0; text-transform: none; }
.haven-guide-shape .shape-legend-everyone { stroke: var(--haven-guide-market); stroke-width: 1.5; stroke-dasharray: 4 3; }
.haven-guide-shape .shape-legend-vera { stroke: var(--haven-guide-ink); stroke-width: 2.5; stroke-linecap: round; }
.haven-guide-shape.is-compact .shape-you { stroke-width: 6; }

.haven-guide-alt-chart { display: block; width: 100%; height: auto; }
.haven-guide-alt-chart .alt-axis { stroke: color-mix(in srgb, var(--haven-guide-ink) 30%, transparent); stroke-width: 1.5; }
.haven-guide-alt-chart .alt-starting-capital { stroke: var(--haven-guide-accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.haven-guide-alt-chart .alt-outcomes circle,
.haven-guide-alt-chart .alt-legend circle { fill: var(--haven-guide-ink); }
.haven-guide-alt-chart text { fill: var(--haven-guide-ink); font-family: var(--font-sans); }
.haven-guide-alt-chart .alt-axis-label,
.haven-guide-alt-chart .alt-reference-label { font-size: 6px; }
.haven-guide-alt-chart .alt-reference-label { fill: var(--haven-guide-accent); font-weight: 700; }
.haven-guide-alt-chart .alt-legend text { font-size: 6.5px; font-weight: 650; }
.haven-guide-alt-chart.is-compact .alt-outcomes circle { r: 5px; }

.haven-guide-section { padding-block: clamp(4rem, 8vw, 7rem); }
.haven-guide-traditional { background: var(--haven-guide-paper); }
.haven-guide-mixes { max-width: 66rem; margin-top: 2.5rem; }
.haven-guide-mix { display: grid; grid-template-columns: minmax(9rem, .3fr) minmax(12rem, 1fr) 4rem; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.haven-guide-mix > span { font-family: var(--font-serif); line-height: 1.15; }
.haven-guide-mix > div { display: flex; height: 1.4rem; }
.haven-guide-mix i { display: block; background: var(--haven-guide-ink); }
.haven-guide-mix b { display: block; background: color-mix(in srgb, var(--haven-guide-ink) 22%, var(--haven-guide-paper)); }
.haven-guide-mix .is-10 { width: 10%; }
.haven-guide-mix .is-20 { width: 20%; }
.haven-guide-mix .is-40 { width: 40%; }
.haven-guide-mix .is-60 { width: 60%; }
.haven-guide-mix .is-80 { width: 80%; }
.haven-guide-mix .is-90 { width: 90%; }
.haven-guide-mix strong { font-size: .75rem; font-weight: 650; text-align: right; }
.haven-guide-mix-key { display: flex; justify-content: space-between; margin: .4rem 5rem 0 calc(30% + 1rem); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; }
.haven-guide-copy { max-width: 66rem; margin-top: clamp(3rem, 7vw, 6rem); }
.haven-guide-copy h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-style: italic; }
.haven-guide-copy p { color: var(--haven-guide-muted); }

.haven-guide-different { background: var(--haven-guide-surface); }
.haven-guide-different h2 { max-width: 13ch; }
.haven-guide-math { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 7vw, 7rem); align-items: end; max-width: 68rem; margin-top: clamp(3rem, 7vw, 6rem); }
.haven-guide-math h3 { margin: 0 0 .6rem; font-size: clamp(1.6rem, 3vw, 2.25rem); font-style: italic; }
.haven-guide-math p { color: var(--haven-guide-muted); }
.haven-guide-math > div:last-child { display: grid; grid-template-columns: auto auto; column-gap: 1.4rem; align-items: baseline; }
.haven-guide-math strong { font-family: var(--font-serif); font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 400; line-height: 1; }
.haven-guide-math span { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; }

.haven-guide-timeline { background: var(--haven-guide-paper); }
.haven-guide-time-axis { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin-top: 3rem; font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; }
.haven-guide-time-axis i { border-top: 2px solid var(--haven-guide-ink); }
.haven-guide-timeline ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.haven-guide-timeline li { position: relative; min-width: 0; padding: 1.5rem 1rem 0 0; border-top: 2px solid var(--haven-guide-ink); }
.haven-guide-timeline li::before { position: absolute; width: 2px; height: 1rem; top: -1rem; left: 0; background: var(--haven-guide-ink); content: ""; }
.haven-guide-timeline li > span { font-size: .72rem; }
.haven-guide-timeline li h3 { margin: .15rem 0; font-size: clamp(1.25rem, 2vw, 1.75rem); }
.haven-guide-timeline li strong,
.haven-guide-timeline li small { display: block; }
.haven-guide-timeline li strong { font-size: .8rem; }
.haven-guide-timeline li small { margin-top: .3rem; color: var(--haven-guide-muted); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.haven-guide-timeline li p { margin: 1rem 0 0; font-family: var(--font-serif); font-style: italic; line-height: 1.35; }
.haven-guide-timeline-alt { display: grid; grid-template-columns: minmax(12rem, .4fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin-top: 2.5rem; padding-block: 1.5rem; border-block: 1px solid var(--haven-guide-rule); }
.haven-guide-timeline-alt h3 { margin: 0 0 .3rem; font-size: clamp(1.25rem, 2vw, 1.75rem); }
.haven-guide-timeline-alt strong,
.haven-guide-timeline-alt small { display: block; }
.haven-guide-timeline-alt strong { font-size: .8rem; }
.haven-guide-timeline-alt small { margin-top: .3rem; color: var(--haven-guide-muted); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.haven-guide-timeline-alt p { margin: 0; font-family: var(--font-serif); font-style: italic; line-height: 1.35; }
.haven-guide-tradeoffs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(4rem, 8vw, 7rem); }
.haven-guide-tradeoffs h3 { margin: 0 0 .6rem; font-size: 1.5rem; font-style: italic; }
.haven-guide-tradeoffs p { color: var(--haven-guide-muted); }

.haven-guide-buckets { background: var(--haven-guide-surface); }
.haven-guide-bucket-list { margin-top: 3rem; border-top: 1px solid var(--haven-guide-rule); }
.haven-guide-bucket { display: grid; grid-template-columns: minmax(15rem, .65fr) minmax(0, 1.35fr); gap: clamp(2rem, 7vw, 7rem); padding-block: clamp(2.5rem, 6vw, 5rem); border-bottom: 1px solid var(--haven-guide-rule); }
.haven-guide-bucket-chart { align-self: center; }
.haven-guide-bucket-chart > span { display: block; margin-top: -.4rem; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; }
.haven-guide-alt-mark { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; width: min(100%, 19rem); margin-inline: auto; }
.haven-guide-alt-mark b { display: grid; min-height: 7rem; padding: .75rem; place-items: center; border: 1px solid currentColor; border-radius: .7rem; background: color-mix(in srgb, currentColor 9%, transparent); font-size: .9rem; }
.haven-guide-alt-mark:not(.is-compact) b:last-child { grid-column: 1 / -1; min-height: 5rem; }
.haven-guide-alt-mark.is-compact { display: block; width: auto; }
.haven-guide-alt-mark.is-compact b { min-height: 4.4rem; padding: .25rem; border-radius: .35rem; font-size: .65rem; letter-spacing: .12em; }
.haven-guide-bucket .haven-guide-kicker { display: flex; gap: 1rem; }
.haven-guide-bucket .haven-guide-kicker span { color: var(--haven-guide-muted); }
.haven-guide-bucket h3 { margin: 0; font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1; }
.haven-guide-bucket blockquote { margin: .8rem 0 1.4rem; font-family: var(--font-serif); font-size: clamp(1.1rem, 2vw, 1.35rem); font-style: italic; }
.haven-guide-bucket p:not(.haven-guide-kicker) { color: var(--haven-guide-muted); }
.haven-guide-bucket > div:last-child > strong { display: block; padding-top: 1rem; border-top: 1px solid var(--haven-guide-rule); font-size: .9rem; }
.haven-guide-shapes-note { margin-top: 2.5rem; padding: 1.5rem; background: var(--haven-guide-paper); border-left: .25rem solid var(--haven-guide-accent); }
.haven-guide-shapes-note h3 { margin: 0 0 .5rem; font-size: 1.35rem; }
.haven-guide-shapes-note p { margin: 0; color: var(--haven-guide-muted); }

.haven-guide-plain { background: var(--haven-guide-paper); }
.haven-guide-plain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 7vw, 7rem); }
.haven-guide-plain-grid h3 { margin: 0 0 1.5rem; font-size: clamp(2rem, 4vw, 3.2rem); }
.haven-guide-plain-grid p { padding-top: 1rem; border-top: 1px solid var(--haven-guide-rule); }
.haven-guide-plain-close { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: clamp(3rem, 7vw, 6rem); padding-top: 1.5rem; border-top: 2px solid var(--haven-guide-ink); }
.haven-guide-plain-close p { margin: 0; font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.45rem); font-style: italic; }
.haven-guide-plain-close .button { flex: none; }

.haven-guide-year { background: var(--haven-guide-surface); }
.haven-guide-year ol { margin: 2.5rem 0 0; padding: 0; list-style: none; }
.haven-guide-year li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--haven-guide-rule); }
.haven-guide-year li span { color: var(--haven-guide-accent); font-family: var(--font-serif); font-size: 1.4rem; }
.haven-guide-year li p { margin: 0; color: var(--haven-guide-muted); }
.haven-guide-year li strong { color: var(--haven-guide-ink); }
.haven-guide-eligibility { max-width: 64rem; margin: 2.5rem 0 0; padding: 1.25rem; background: var(--haven-guide-paper); }

.haven-guide-footnote { padding-block: clamp(4rem, 8vw, 7rem); color: #fff; background: var(--haven-guide-ink); }
.haven-guide-footnote h2 { color: #fff; }
.haven-guide-footnote-columns { columns: 2 22rem; column-gap: clamp(2rem, 5vw, 5rem); }
.haven-guide-footnote-columns p { break-inside: avoid; color: rgba(255, 255, 255, .72); font-size: .76rem; line-height: 1.7; }

@media (max-width: 780px) {
  .haven-guide-cover { min-height: auto; }
  .haven-guide-cover-inner { min-height: 43rem; }
  .haven-guide-cover-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .haven-guide-cover-shapes > div:last-child { grid-column: 1 / -1; width: 50%; }
  .haven-guide-mix { grid-template-columns: minmax(7rem, .5fr) 1fr 3.5rem; }
  .haven-guide-mix-key { margin-left: calc(35% + 1rem); }
  .haven-guide-math,
  .haven-guide-tradeoffs,
  .haven-guide-bucket,
  .haven-guide-plain-grid { grid-template-columns: 1fr; }
  .haven-guide-timeline ol { grid-template-columns: 1fr; }
  .haven-guide-timeline li { display: grid; grid-template-columns: 2rem minmax(6rem, .35fr) 1fr; gap: .7rem; align-items: baseline; padding: 1.2rem 0; border-top: 1px solid var(--haven-guide-rule); }
  .haven-guide-timeline li::before { display: none; }
  .haven-guide-timeline li h3,
  .haven-guide-timeline li strong,
  .haven-guide-timeline li small,
  .haven-guide-timeline li p { margin: 0; }
  .haven-guide-timeline li small { grid-column: 2; }
  .haven-guide-timeline li p { grid-column: 3; grid-row: 1 / span 2; }
  .haven-guide-timeline-alt { grid-template-columns: 1fr; gap: 1rem; }
  .haven-guide-plain-close { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .haven-guide-cover h1 { font-size: clamp(4.5rem, 24vw, 7rem); }
  .haven-guide-mix { grid-template-columns: 1fr 3.2rem; }
  .haven-guide-mix > div { grid-column: 1 / -1; grid-row: 2; }
  .haven-guide-mix > strong { grid-column: 2; grid-row: 1; }
  .haven-guide-mix-key { display: none; }
  .haven-guide-math > div:last-child { grid-template-columns: 1fr 1fr; }
  .haven-guide-timeline li { grid-template-columns: 2rem 1fr; }
  .haven-guide-timeline li p { grid-column: 2; grid-row: auto; }
}