/* Henry Advisory Group: component styles. Every value comes from tokens.css custom properties. */

/* ---------- base ---------- */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.eyebrow { text-transform: uppercase; color: var(--ink-muted); margin: 0; }
.stat, .figure { font-variant-numeric: tabular-nums lining-nums; }
.display-xl, .display, .headline { margin: 0; font-optical-sizing: auto; text-wrap: balance; }
.footnote { color: var(--ink-muted); margin: 0; }
.ha-preview { padding: var(--space-3); }
.ha-preview-flush { padding: 0; }
.ha-accent { color: var(--green); }
.ha-muted { color: var(--ink-muted); }
.ha-rule { border: 0; border-top: var(--stroke-hair) solid var(--rule); margin: 0; }
.ha-rule-strong { border: 0; border-top: var(--stroke-strong) solid var(--ink); margin: 0; }
.ha-steprule { display: block; width: 100%; height: 12px; overflow: visible; }
.ha-steprule path { fill: none; stroke: var(--rule-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ha-steprule.is-green path { stroke: var(--green); }
.ha-mark, .ha-lockup { display: block; }
a { color: inherit; }
[data-theme] { color: var(--ink); }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* ---------- buttons and links ---------- */
.ha-btn { display: inline-flex; align-items: center; gap: var(--space-1); height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: var(--stroke-hair) solid var(--rule-strong); background: transparent; color: var(--ink); font: 500 15px/1 var(--font-sans); text-decoration: none; cursor: pointer; }
.ha-btn-primary { background: var(--green); border-color: var(--green); color: var(--on-green); }
.ha-btn-primary:hover { filter: brightness(1.08); }
.ha-btn:not(.ha-btn-primary):hover { border-color: var(--ink); }
.ha-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 4px; text-decoration-thickness: 1px; font-weight: 500; }
.ha-link:hover { text-decoration-color: var(--green); color: var(--green); }
.ha-btn svg, .ha-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ---------- document pages (US Letter at 96 px per inch: 816 x 1056) ---------- */
.ha-page { box-sizing: border-box; position: relative; width: 816px; height: 1056px; padding: 96px; background: var(--paper-raised); color: var(--ink); overflow: hidden; font-size: 14px; line-height: 21px; }
.ha-page-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gutter); }
.ha-page-head, .ha-page-foot { position: absolute; left: 96px; right: 96px; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.ha-page-head { top: 48px; padding-bottom: var(--space-1); border-bottom: var(--stroke-hair) solid var(--rule); }
.ha-page-foot { bottom: 40px; padding-top: var(--space-1); border-top: var(--stroke-hair) solid var(--rule); }
.ha-page-head .footnote, .ha-page-foot .footnote { letter-spacing: 0.02em; }
.ha-page-foot .figure { font-size: 11px; color: var(--ink-muted); }
.ha-guides { position: absolute; inset: 96px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gutter); pointer-events: none; }
.ha-guides span { background: var(--green-soft); opacity: .55; }

.ha-cover { padding: 96px; display: flex; flex-direction: column; }
.ha-cover-top { display: flex; justify-content: space-between; align-items: center; }
.ha-cover-body { margin-top: 248px; }
.ha-cover-body .eyebrow { margin-bottom: var(--space-2); }
.ha-cover-body .display-xl { font-size: 44px; line-height: 50px; text-wrap: wrap; }
.ha-cover-sub { margin: var(--space-3) 0 0; font-size: 17px; line-height: 26px; color: var(--ink-muted); max-width: 52ch; }
.ha-cover-step { margin-top: var(--space-6); }
.ha-meta { margin: auto 0 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--grid-gutter); padding-top: var(--space-2); border-top: var(--stroke-hair) solid var(--ink); }
.ha-meta dt { margin-bottom: var(--space-hair); }
.ha-meta dd { margin: 0; font-size: 13px; line-height: 20px; }

.ha-section { padding-top: var(--space-2); }
.ha-section-num { font: 400 13px/20px var(--font-mono); color: var(--ink-muted); display: flex; justify-content: space-between; border-top: var(--stroke-strong) solid var(--ink); padding-top: var(--space-1); }
.ha-section .eyebrow { margin-top: var(--space-6); }
.ha-section .display { margin-top: var(--space-1); max-width: calc(100% * 9 / 12); }
.ha-section-lede { margin: var(--space-3) 0 0; font-size: 17px; line-height: 27px; max-width: calc(100% * 8 / 12); color: var(--ink); }

.ha-body { position: absolute; top: 120px; left: 96px; right: 96px; }
.ha-body .headline { grid-column: 1 / span 8; margin-bottom: var(--space-2); }
.ha-body-main { grid-column: 1 / span 8; }
.ha-body-main p { margin: 0 0 var(--space-2); }
.ha-body-side { grid-column: 10 / span 3; padding-top: var(--space-hair); }
.ha-body-side .footnote { padding-top: var(--space-1); border-top: var(--stroke-hair) solid var(--rule); margin-bottom: var(--space-2); }
.ha-pull { grid-column: 1 / span 8; margin: var(--space-3) 0; padding: var(--space-2) 0; border-top: var(--stroke-hair) solid var(--ink); border-bottom: var(--stroke-hair) solid var(--rule); font: 400 22px/30px var(--font-display); }
.ha-body-figure { grid-column: 1 / span 12; margin-top: var(--space-2); }

/* letterhead */
.ha-letter-top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: var(--space-3); border-bottom: var(--stroke-hair) solid var(--rule); }
.ha-letter-addr { text-align: right; font-size: 11px; line-height: 16px; color: var(--ink-muted); }
.ha-letter-meta { margin-top: var(--space-6); font-size: 13px; line-height: 20px; }
.ha-letter-body { margin-top: var(--space-4); width: calc(100% * 9 / 12); }
.ha-letter-body p { margin: 0 0 var(--space-2); }
.ha-sign { margin-top: var(--space-4); }
.ha-sign-name { font: 400 20px/26px var(--font-display); }

/* tables */
.ha-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 19px; }
.ha-table caption { text-align: left; caption-side: top; padding-bottom: var(--space-1); }
.ha-table th { text-align: left; font: 500 11px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); padding: var(--space-1) var(--space-2) var(--space-1) 0; border-bottom: var(--stroke-hair) solid var(--ink); vertical-align: bottom; }
.ha-table td { padding: var(--space-2) var(--space-2) var(--space-2) 0; border-bottom: var(--stroke-hair) solid var(--rule); vertical-align: top; }
.ha-table td.num, .ha-table th.num { text-align: right; padding-right: 0; }
.ha-table .figure { font-size: 12px; line-height: 19px; }
.ha-table .ha-cell-title { font-weight: 500; display: block; }
.ha-table .ha-cell-detail { color: var(--ink-muted); display: block; margin-top: 2px; }
.ha-table tr.is-highlight td { background: var(--green-soft); }
.ha-table tr.is-highlight td:first-child { box-shadow: inset 2px 0 0 var(--green); padding-left: var(--space-1); }
.ha-table tr.is-highlight .ha-cell-title { color: var(--green); }
.ha-table-note { margin-top: var(--space-1); }

/* 90-day plan */
.ha-plan { position: relative; }
.ha-plan-track { position: relative; height: 40px; }
.ha-plan-track svg { display: block; width: 100%; height: 40px; overflow: visible; }
.ha-plan-cols { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--grid-gutter); margin-top: var(--space-2); }
.ha-plan-col { border-top: var(--stroke-hair) solid var(--rule); padding-top: var(--space-2); }
.ha-plan-col.is-active { border-top: var(--stroke-strong) solid var(--green); }
.ha-plan-col .figure { color: var(--ink-muted); font-size: 12px; }
.ha-plan-col .headline { font-size: 22px; line-height: 28px; margin: var(--space-hair) 0 var(--space-1); }
.ha-plan-col ul { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 20px; }
.ha-plan-col li { padding: 6px 0; border-bottom: var(--stroke-hair) solid var(--rule); }
.ha-plan-ms { margin-top: var(--space-2); font-size: 12px; line-height: 18px; }
.ha-plan-ms b { font-weight: 500; color: var(--ink); }
.ha-plan-col.is-active .ha-plan-ms b { color: var(--green); }

/* proof */
.ha-proof { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--grid-gutter); row-gap: var(--space-4); }
.ha-proof-item { border-top: var(--stroke-hair) solid var(--ink); padding-top: var(--space-2); }
.ha-proof-item .stat { display: block; margin-bottom: var(--space-1); }
.ha-proof-item.is-highlight .stat { color: var(--green); }
.ha-proof-item p { margin: 0; font-size: 14px; line-height: 21px; }
.ha-proof-head { margin-bottom: var(--space-3); }
.ha-proof-head .headline { margin-top: var(--space-hair); }

/* testimonial (gated) */
.ha-quote { position: relative; border-top: var(--stroke-hair) solid var(--ink); padding-top: var(--space-3); max-width: 720px; }
.ha-gate { display: inline-flex; align-items: center; gap: var(--space-1); font: 500 11px/16px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); border: var(--stroke-hair) solid var(--ink); border-radius: var(--radius-sm); padding: 4px var(--space-1); }
.ha-gate::before { content: ""; width: 8px; height: 8px; background: var(--ink); }
.ha-quote blockquote { margin: var(--space-3) 0 var(--space-2); font: 400 28px/38px var(--font-display); }
.ha-quote figcaption { font-size: 14px; line-height: 21px; color: var(--ink-muted); }

/* ---------- slides (16:9 at 1280 x 720) ---------- */
.ha-slide { box-sizing: border-box; position: relative; width: 1280px; height: 720px; padding: 64px 80px; background: var(--paper); color: var(--ink); overflow: hidden; }
.ha-slide-foot { position: absolute; left: 80px; right: 80px; bottom: 32px; display: flex; justify-content: space-between; align-items: center; color: var(--ink-muted); }
.ha-slide-foot .figure { font-size: 12px; }
.ha-slide .eyebrow { font-size: 14px; line-height: 20px; }
.ha-slide-title .display-xl { font-size: 72px; line-height: 78px; max-width: 1120px; text-wrap: wrap; margin-top: var(--space-2); }
.ha-slide-title .ha-slide-sub { margin-top: var(--space-4); font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.ha-slide-title .ha-steprule { margin-top: 64px; }
.ha-slide-divider { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gutter); align-content: center; }
.ha-slide-divider .ha-divnum { grid-column: 1 / span 3; font: 400 120px/1 var(--font-mono); letter-spacing: -0.04em; color: var(--green); }
.ha-slide-divider .ha-divtext { grid-column: 5 / span 8; border-top: var(--stroke-strong) solid var(--ink); padding-top: var(--space-3); }
.ha-slide-divider .display { font-size: 52px; line-height: 60px; margin-top: var(--space-2); }
.ha-slide-finding { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gutter); }
.ha-slide-finding .ha-find-head { grid-column: 1 / span 12; }
.ha-slide-finding .ha-find-stat { grid-column: 1 / span 5; margin-top: 72px; font: 400 168px/1 var(--font-mono); letter-spacing: -0.05em; color: var(--green); }
.ha-slide-finding .ha-find-text { grid-column: 6 / span 7; margin-top: 88px; border-top: var(--stroke-hair) solid var(--ink); padding-top: var(--space-3); }
.ha-slide-finding .ha-find-text .display { font-size: 40px; line-height: 48px; }
.ha-slide-finding .ha-find-text p { margin: var(--space-3) 0 0; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.ha-slide-data { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gutter); }
.ha-slide-data .ha-data-head { grid-column: 1 / span 12; }
.ha-slide-data .ha-data-head .display { font-size: 40px; line-height: 48px; margin-top: var(--space-1); max-width: 980px; }
.ha-slide-data .ha-data-chart { grid-column: 1 / span 8; margin-top: var(--space-4); }
.ha-slide-data .ha-data-side { grid-column: 9 / span 4; margin-top: var(--space-4); border-top: var(--stroke-hair) solid var(--ink); padding-top: var(--space-2); }
.ha-slide-data .ha-data-side p { margin: var(--space-1) 0 var(--space-3); font-size: 17px; line-height: 26px; }
.ha-slide-plan .display { font-size: 40px; line-height: 48px; margin: var(--space-1) 0 var(--space-6); }
.ha-slide-plan .ha-plan-col .headline { font-size: 28px; line-height: 34px; }
.ha-slide-plan .ha-plan-col ul { font-size: 16px; line-height: 24px; }
.ha-slide-plan .ha-plan-col .figure { font-size: 14px; }
.ha-slide-plan .ha-plan-ms { font-size: 14px; line-height: 20px; }
.ha-slide-close { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gutter); align-content: end; padding-bottom: 120px; }
.ha-slide-close .ha-close-main { grid-column: 1 / span 7; }
.ha-slide-close .display { font-size: 52px; line-height: 60px; margin-top: var(--space-2); }
.ha-slide-close .ha-close-contact { grid-column: 9 / span 4; border-top: var(--stroke-hair) solid var(--ink); padding-top: var(--space-2); font-size: 17px; line-height: 28px; }
.ha-slide-close .ha-close-contact .headline { font-size: 24px; }
.ha-slide-close .ha-close-top { position: absolute; top: 64px; left: 80px; }

/* ---------- LinkedIn ---------- */
.ha-li { box-sizing: border-box; position: relative; overflow: hidden; background: var(--paper); color: var(--ink); }
.ha-li-banner { width: 1584px; height: 396px; padding: 64px 96px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gutter); align-content: center; }
.ha-li-banner .ha-li-safe { grid-column: 6 / span 7; }
.ha-li-banner .display { font-size: 52px; line-height: 60px; margin-top: var(--space-2); }
.ha-li-banner .ha-li-desc { margin-top: var(--space-3); display: flex; gap: var(--space-3); align-items: center; color: var(--ink-muted); font-size: 18px; }
.ha-li-banner .ha-li-photo { position: absolute; left: 0; bottom: 0; width: 568px; height: 396px; }
.ha-li-banner .ha-li-photo span { position: absolute; left: 56px; bottom: -120px; width: 400px; height: 400px; border-radius: 50%; border: 1px dashed var(--rule-strong); }
.ha-li-banner .ha-li-steps { position: absolute; left: 0; right: 0; top: 0; height: 396px; pointer-events: none; }
.ha-li-post { width: 1200px; height: 1200px; padding: 96px; display: flex; flex-direction: column; }
.ha-li-post .display-xl { font-size: 88px; line-height: 94px; margin-top: var(--space-4); }
.ha-li-post .ha-li-body { margin-top: var(--space-6); font-size: 28px; line-height: 40px; color: var(--ink-muted); max-width: 820px; }
.ha-li-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-3); border-top: var(--stroke-hair) solid var(--rule); color: var(--ink-muted); }
.ha-li-foot .figure { font-size: 20px; line-height: 28px; }
.ha-li-post .eyebrow, .ha-li-carousel .eyebrow { font-size: 20px; line-height: 28px; }
.ha-li-carousel { width: 1080px; height: 1350px; padding: 96px; display: flex; flex-direction: column; }
.ha-li-carousel .ha-li-page { font: 400 22px/28px var(--font-mono); color: var(--ink-muted); display: flex; justify-content: space-between; border-top: var(--stroke-strong) solid var(--ink); padding-top: var(--space-2); }
.ha-li-carousel .display { font-size: 88px; line-height: 96px; margin-top: 160px; }
.ha-li-carousel .ha-li-body { margin-top: var(--space-6); font-size: 36px; line-height: 52px; color: var(--ink-muted); }
.ha-li-carousel .ha-li-stat { margin-top: var(--space-8); font: 400 200px/1 var(--font-mono); letter-spacing: -0.05em; color: var(--green); }
.ha-li-carousel .ha-li-stat-cap { margin-top: var(--space-3); font-size: 30px; line-height: 42px; color: var(--ink-muted); max-width: 820px; }
.ha-avatar-demo { display: flex; gap: var(--space-4); align-items: flex-end; flex-wrap: wrap; }
.ha-avatar-demo figure { margin: 0; text-align: center; }
.ha-avatar-demo figcaption { margin-top: var(--space-1); }
.ha-avatar-demo .is-round svg { border-radius: 50%; }

/* ---------- website ---------- */
.ha-site { container-type: inline-size; background: var(--paper); color: var(--ink); }
.ha-wrap { box-sizing: border-box; max-width: 1280px; margin: 0 auto; padding: var(--space-8) var(--grid-margin-web); }
.ha-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gutter); }
.ha-nav { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--space-2); border-bottom: var(--stroke-hair) solid var(--rule); }
.ha-nav ul { display: flex; gap: var(--space-3); list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ha-nav a { text-decoration: none; color: var(--ink-muted); }
.ha-nav a:hover { color: var(--ink); }
.ha-hero .ha-hero-main { grid-column: 1 / span 11; padding-top: var(--space-12); }
.ha-hero .display-xl { margin-top: var(--space-2); }
.ha-hero .ha-hero-lede { margin: var(--space-3) 0 0; font-size: 19px; line-height: 30px; color: var(--ink-muted); max-width: 58ch; }
.ha-hero .ha-hero-cta { margin-top: var(--space-4); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.ha-hero .ha-steprule { margin-top: var(--space-8); }
.ha-hero .ha-hero-note { grid-column: 1 / span 12; display: flex; justify-content: space-between; margin-top: var(--space-1); }
.ha-sec-head { grid-column: 1 / span 12; display: grid; grid-template-columns: subgrid; padding-top: var(--space-1); border-top: var(--stroke-strong) solid var(--ink); }
.ha-sec-head .eyebrow { grid-column: 1 / span 3; padding-top: var(--space-1); }
.ha-sec-head .display { grid-column: 4 / span 9; }
.ha-cols3 { grid-column: 4 / span 9; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--grid-gutter); margin-top: var(--space-6); }
.ha-col { border-top: var(--stroke-hair) solid var(--rule); padding-top: var(--space-2); }
.ha-col .figure { color: var(--ink-muted); }
.ha-col .headline { margin: var(--space-1) 0; font-size: 22px; line-height: 30px; }
.ha-col p { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.ha-col p b { color: var(--ink); font-weight: 500; }
.ha-offer { border-top: var(--stroke-hair) solid var(--ink); padding-top: var(--space-2); display: flex; flex-direction: column; }
.ha-offer .headline { font-size: 24px; line-height: 32px; margin: var(--space-1) 0 var(--space-1); }
.ha-offer > p { margin: 0 0 var(--space-2); font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.ha-offer dl { margin: 0; font-size: 14px; line-height: 21px; }
.ha-offer dl div { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-2); padding: var(--space-1) 0; border-top: var(--stroke-hair) solid var(--rule); }
.ha-offer dt { font: 500 11px/21px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.ha-offer dd { margin: 0; }
.ha-about-portrait { grid-column: 1 / span 4; margin: var(--space-6) 0 0; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; background: var(--paper-sunk); display: flex; align-items: flex-end; }
.ha-about-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ha-about-portrait .footnote { padding: var(--space-2); }
.ha-about-text { grid-column: 6 / span 7; margin-top: var(--space-6); }
.ha-about-text p.headline { margin-bottom: var(--space-hair); font-size: 28px; line-height: 34px; }
.ha-about-text p { margin: 0 0 var(--space-2); font-size: 17px; line-height: 28px; }
.ha-about-text ul { margin: var(--space-3) 0 0; padding: 0; list-style: none; border-top: var(--stroke-hair) solid var(--rule); }
.ha-about-text li { padding: var(--space-1) 0; border-bottom: var(--stroke-hair) solid var(--rule); font-size: 15px; line-height: 24px; }
.ha-contact-main { grid-column: 4 / span 9; }
.ha-contact-main .display-xl { font-size: 56px; line-height: 62px; }
.ha-contact-main p { margin: var(--space-3) 0 0; font-size: 18px; line-height: 28px; color: var(--ink-muted); max-width: 52ch; }
.ha-contact-main .ha-hero-cta { margin-top: var(--space-4); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.ha-footer { grid-column: 1 / span 12; margin-top: var(--space-12); padding-top: var(--space-2); border-top: var(--stroke-hair) solid var(--rule); display: grid; grid-template-columns: subgrid; row-gap: var(--space-2); }
.ha-footer > :first-child { grid-column: 1 / span 4; }
.ha-footer > :nth-child(2) { grid-column: 5 / span 4; }
.ha-footer > :nth-child(3) { grid-column: 9 / span 4; }
@container (max-width: 760px) {
  .ha-wrap { padding: var(--space-6) 16px; }
  .ha-nav ul { display: none; }
  .ha-hero .ha-hero-main, .ha-sec-head .eyebrow, .ha-sec-head .display, .ha-cols3, .ha-about-portrait, .ha-about-text, .ha-contact-main, .ha-footer > * { grid-column: 1 / -1 !important; }
  .ha-hero .ha-hero-main { padding-top: var(--space-8); }
  .ha-hero .display-xl, .ha-contact-main .display-xl { font-size: 40px; line-height: 46px; }
  .ha-sec-head .display { font-size: 30px; line-height: 36px; margin-top: var(--space-1); }
  .ha-cols3 { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .ha-about-portrait { max-width: 280px; }
  .ha-hero .ha-hero-note { flex-direction: column; gap: var(--space-hair); }
}

/* ---------- email signature: inline styles live in the markup; this only frames the preview ---------- */
.ha-sig-canvas { background: var(--paper-raised); border: var(--stroke-hair) solid var(--rule); padding: var(--space-3); max-width: 560px; }

/* ---------- charts ---------- */
.ha-chart { margin: 0; }
.ha-chart figcaption .eyebrow { margin-bottom: var(--space-hair); }
.ha-chart figcaption .ha-chart-title { font: 500 17px/24px var(--font-sans); margin: 0 0 var(--space-2); }
.ha-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ha-chart .ha-source { margin-top: var(--space-1); padding-top: var(--space-1); border-top: var(--stroke-hair) solid var(--rule); }
.c-t { font: 400 12px/1 var(--font-mono); fill: var(--data-label); font-variant-numeric: tabular-nums; }
.c-t-ink { font: 400 13px/1 var(--font-mono); fill: var(--ink); font-variant-numeric: tabular-nums; }
.c-l { font: 400 13px/1 var(--font-sans); fill: var(--ink); }
.c-l-strong { font: 500 13px/1 var(--font-sans); fill: var(--green); }
.c-t-strong { font: 500 13px/1 var(--font-mono); fill: var(--green); }
.c-axis { stroke: var(--rule-strong); stroke-width: 1px; fill: none; shape-rendering: crispEdges; }
.c-grid { stroke: var(--rule); stroke-width: 1px; fill: none; shape-rendering: crispEdges; }
.c-ctx1 { fill: var(--data-context-1); }
.c-ctx2 { fill: var(--data-context-2); }
.c-hi { fill: var(--data-highlight); }
.c-s1 { fill: var(--data-seq-1); stroke: var(--rule-strong); stroke-width: 1px; }
.c-s2 { fill: var(--data-seq-2); } .c-s3 { fill: var(--data-seq-3); } .c-s4 { fill: var(--data-seq-4); } .c-s5 { fill: var(--data-seq-5); }
.c-line-hi { fill: none; stroke: var(--data-highlight); stroke-width: 2.5px; stroke-linejoin: round; }
.c-line-ctx { fill: none; stroke: var(--data-context-2); stroke-width: 1.5px; stroke-dasharray: 5 4; stroke-linejoin: round; }
.c-dot-hi { fill: var(--data-highlight); }
.c-dot-ctx { fill: var(--paper); stroke: var(--data-context-2); stroke-width: 1.5px; }
.c-ann { stroke: var(--ink); stroke-width: 1px; fill: none; }
.ha-kpis { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); border-top: var(--stroke-hair) solid var(--ink); }
.ha-kpi { padding: var(--space-2) var(--space-3) var(--space-2) 0; }
.ha-kpi + .ha-kpi { border-left: var(--stroke-hair) solid var(--rule); padding-left: var(--space-3); }
.ha-kpi .stat { display: block; margin: var(--space-1) 0 var(--space-hair); }
.ha-kpi.is-highlight .stat { color: var(--green); }
.ha-kpi .ha-kpi-note { font-size: 13px; line-height: 20px; color: var(--ink-muted); margin: 0; }
.ha-kpi .figure { color: var(--ink-muted); font-size: 12px; }
@container (max-width: 640px) { .ha-kpis { grid-template-columns: 1fr 1fr; } .ha-kpi:nth-child(3) { border-left: 0; padding-left: 0; } }

/* ---------- diagram ---------- */
.ha-diagram svg { display: block; width: 100%; height: auto; overflow: visible; }
.d-lane { font: 500 11px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-muted); }
.d-lane-rule { stroke: var(--rule); stroke-width: 1px; shape-rendering: crispEdges; }
.d-node { fill: var(--paper); stroke: var(--ink); stroke-width: 1px; }
.d-node.is-hi { stroke: var(--green); stroke-width: 2px; fill: var(--green-soft); }
.d-label { font: 400 13px/1 var(--font-sans); fill: var(--ink); }
.d-label.is-hi { font-weight: 600; fill: var(--green); }
.d-num { font: 400 11px/1 var(--font-mono); fill: var(--ink-muted); }
.d-edge { fill: none; stroke: var(--ink); stroke-width: 1px; }
.d-edge.is-hi { stroke: var(--green); stroke-width: 2px; }
.d-head { fill: var(--ink); }
.d-head.is-hi { fill: var(--green); }

/* ---------- logo board ---------- */
.ha-logos { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--grid-gutter); }
.ha-logo-opt { border-top: var(--stroke-strong) solid var(--ink); padding-top: var(--space-2); }
.ha-logo-opt .headline { font-size: 22px; line-height: 28px; margin: var(--space-hair) 0 var(--space-1); }
.ha-logo-opt > p:not(.eyebrow) { margin: 0 0 var(--space-3); font-size: 14px; line-height: 21px; color: var(--ink-muted); min-height: 84px; }
.ha-logo-cell { border-top: var(--stroke-hair) solid var(--rule); padding: var(--space-3) 0; display: flex; align-items: center; justify-content: center; min-height: 72px; }
.ha-logo-cell.is-left { justify-content: flex-start; }
.ha-logo-cell .eyebrow { font-size: 10px; letter-spacing: .12em; }
.ha-logo-label { display: block; font: 500 10px/14px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); margin-top: var(--space-1); }
.ha-logo-small { display: flex; gap: var(--space-3); align-items: flex-end; }
.ha-logo-small div { text-align: center; }
.ha-logo-ground { padding: var(--space-3); display: flex; gap: var(--space-3); align-items: center; justify-content: center; }
.ha-logo-ground.is-green { background: var(--green); color: var(--on-green); }
.ha-logo-ground.is-ink { background: var(--ink); color: var(--paper); }
.ha-clear { position: relative; display: inline-block; padding: 19px; outline: 1px dashed var(--rule-strong); outline-offset: 0; background: var(--paper-sunk); }
.ha-clear > * { background: var(--paper); }

/* ---------- logo kit ---------- */
.ha-kit { display: grid; gap: var(--space-3); }
.ha-kit-hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-3); }
.ha-kit-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.ha-kit-cell { border-top: var(--stroke-hair) solid var(--rule); padding: var(--space-3) var(--space-2) var(--space-2); display: flex; flex-direction: column; justify-content: space-between; min-height: 160px; background: var(--paper); color: var(--ink); }
.ha-kit-hero .ha-kit-cell { border-top: var(--stroke-strong) solid var(--ink); min-height: 260px; }
.ha-kit-art { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
.ha-kit-art svg.ha-lockup { max-width: 100%; height: auto; }
.ha-kit-cell.is-dark { background: var(--paper); }
.ha-kit-cell.is-green { background: var(--green); color: var(--on-green); border-top-color: var(--green); }
.ha-kit-cell.is-green .ha-logo-label { color: var(--on-green); }
.ha-kit-round svg { border-radius: 50%; }
.ha-kit .ha-logo-small { align-items: center; }

/* ---------- founder bio sheet ---------- */
.ha-bio-pages { display: grid; gap: var(--space-3); justify-content: start; }
.ha-bio-id { display: flex; justify-content: space-between; align-items: flex-end; margin: var(--space-4) 0 var(--space-1); padding-bottom: var(--space-2); border-bottom: var(--stroke-hair) solid var(--rule); }
.ha-bio-id .display { margin-bottom: var(--space-hair); }
.ha-bio-photo { width: 96px; height: 120px; object-fit: cover; object-position: 50% 25%; border-radius: var(--radius-md); display: block; }
.ha-bio-block { margin-top: var(--space-3); }
.ha-bio-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--space-hair); border-bottom: var(--stroke-hair) solid var(--green); }
.ha-bio-head .figure { font-size: 11px; color: var(--ink-muted); }
.ha-bio-use { margin: var(--space-hair) 0 var(--space-1); font-style: italic; }
.ha-bio-block p:not(.footnote) { margin: 0 0 var(--space-1); font-size: 13px; line-height: 19px; }
.ha-bio-cont { padding-top: var(--space-4); }

/* ---------- LinkedIn company page cover (1128 x 191) ---------- */
.ha-li-cover { width: 1128px; height: 191px; padding: 0 64px; display: flex; align-items: center; justify-content: flex-end; }
.ha-li-cover .ha-li-cover-text { width: 640px; }
.ha-li-cover .eyebrow { font-size: 12px; line-height: 16px; }
.ha-li-cover .display { font-size: 30px; line-height: 36px; margin-top: var(--space-1); }
.ha-li-cover .ha-li-steps { position: absolute; left: 0; top: 0; width: 1128px; height: 191px; }