/* Investor Dashboard v4 (owner designs 2026-10-17/18): the first-run "Your Next Steps" page (design_handoff_dashboard),
   the active dashboard (Investor Dashboard 2) and its raised gold material (Investor Dashboard 4), which also styles Pending
   Deals and Active Investments. Global (not scoped) so the HTML preview under docs/previews/ loads this same file.
   Every class is prefixed ihd- and resets the global uppercase/letter-spaced h1–h3 from main.css. */

.ihd {
    --ihd-gold: #e3b651;
    --ihd-gold-bright: #ffd76b;
    --ihd-gold-light: #ffe7a3;
    --ihd-text: #f5f7fb;
    --ihd-text-2: #cbd2e1;
    --ihd-muted: #98a4bf;
    --ihd-inactive: #6f7c97;
    --ihd-card: rgba(9, 19, 42, 0.9);
    --ihd-tile: #0c1734;
    --ihd-tile-border: #2a3554;
    --ihd-border-step1: rgba(227, 182, 81, 0.55);
    --ihd-border-step2: #24305a;
    --ihd-border-locked: #1b2647;
    --ihd-panel-border: #26314b;
    --ihd-green: #62cc8e;
    --ihd-red: #e2554f;
    --ihd-blue: #5899ff;
    --ihd-radius: 16px;
    --ihd-font-head: 'Outfit', system-ui, sans-serif;
    --ihd-font-body: 'DM Sans', system-ui, sans-serif;
    --ihd-font-num: 'JetBrains Mono', ui-monospace, monospace;

    /* The approved raised gold (Investor Dashboard 4 tokens): live CSS layers, no baked artwork. */
    --ihd-gold-face:
        radial-gradient(ellipse at 25% 0%, rgb(255 252 205 / 82%) 0%, rgb(255 239 146 / 38%) 32%, transparent 68%),
        radial-gradient(ellipse at 82% 90%, rgb(255 211 95 / 62%) 0%, transparent 63%),
        linear-gradient(112deg, rgb(255 244 151 / 48%) 0%, transparent 44%, rgb(235 152 26 / 18%) 100%),
        linear-gradient(180deg, #ffe79a 0%, #ffda76 30%, #f7bc4c 68%, #ffd061 100%);
    --ihd-gold-bevel:
        inset 0 1px 0 rgb(255 255 227 / 96%),
        inset 0 3px 6px rgb(255 250 195 / 54%),
        inset 0 -2px 0 rgb(208 130 14 / 68%),
        inset 0 -6px 10px rgb(205 116 16 / 15%),
        inset 1px 0 2px rgb(255 248 195 / 68%),
        inset -1px 0 2px rgb(218 140 24 / 37%);
    --ihd-gold-shadow:
        var(--ihd-gold-bevel),
        0 0 0 1px #db921d,
        0 0 5px 1px rgb(255 218 100 / 82%),
        0 0 13px 3px rgb(255 153 24 / 46%),
        0 2px 22px 2px rgb(235 131 12 / 20%),
        0 4px 6px -2px rgb(0 0 0 / 72%);
    --ihd-gold-shadow-hover:
        var(--ihd-gold-bevel),
        0 0 0 1px rgb(242 176 43 / 80%),
        0 0 6px 1px rgb(255 223 123 / 86%),
        0 0 15px 3px rgb(255 161 31 / 50%),
        0 2px 24px 2px rgb(235 139 21 / 23%),
        0 4px 7px -2px rgb(0 0 0 / 72%);
    --ihd-gold-shadow-pressed:
        inset 0 2px 5px rgb(152 84 9 / 30%),
        inset 0 1px 0 rgb(255 247 194 / 75%),
        inset 0 -1px 0 rgb(232 170 53 / 80%),
        0 0 0 1px rgb(205 132 14 / 70%),
        0 0 5px 1px rgb(255 208 78 / 56%),
        0 0 10px 2px rgb(248 142 15 / 30%),
        0 2px 3px -1px rgb(0 0 0 / 68%);
    --ihd-bar-face:
        radial-gradient(ellipse at 19% 0%, rgb(255 255 199 / 79%) 0%, rgb(255 240 143 / 36%) 35%, transparent 76%),
        linear-gradient(109deg, rgb(255 239 116 / 75%) 0%, rgb(255 228 130 / 18%) 40%, rgb(215 136 16 / 14%) 100%),
        linear-gradient(180deg, #ffdf78 0%, #f2c158 42%, #dda439 82%, #edb243 100%);
    --ihd-bar-shadow:
        inset 0 1px 1px rgb(255 255 230 / 98%),
        inset 0 4px 9px rgb(255 249 174 / 55%),
        inset 2px 0 5px rgb(255 247 176 / 63%),
        inset -2px 0 4px rgb(193 111 8 / 28%),
        inset 0 -2px 1px rgb(208 129 11 / 70%),
        inset 0 -7px 13px rgb(216 137 13 / 22%),
        0 0 0 1px #d98913,
        0 0 7px 1px rgb(255 205 68 / 65%),
        0 0 19px 3px rgb(231 139 12 / 34%),
        0 5px 11px -2px rgb(0 0 0 / 79%);

    position: relative;
    font-family: var(--ihd-font-body);
    color: var(--ihd-text);
}

.ihd, .ihd *, .ihd *::before, .ihd *::after {
    box-sizing: border-box;
}

.ihd h1, .ihd h2, .ihd h3 {
    text-transform: none;
    letter-spacing: normal;
    margin: 0;
}

.ihd p {
    margin: 0;
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.ihd-hero {
    position: relative;
    isolation: isolate;
    padding: 56px 0 8px;
    min-height: 240px;
}

/* Fades in from the left, out at the bottom, and softly at the top and right so it never shows a hard box edge. */
.ihd-hero-art {
    position: absolute;
    z-index: -1;
    top: -30px;
    right: 0;
    width: min(760px, 58%);
    height: auto;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 58%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 58%, transparent 100%);
    mask-composite: intersect;
}

.ihd-eyebrow {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--ihd-gold);
}

.ihd-hero h1.ihd-hero-title {
    margin-top: 10px;
    max-width: 900px;
    font-family: var(--ihd-font-head);
    font-size: clamp(38px, 5.2vw, 68px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ihd-text);
    text-wrap: balance;
}

.ihd-gold-text {
    background: linear-gradient(180deg, var(--ihd-gold-light) 0%, var(--ihd-gold-bright) 40%, var(--ihd-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ihd-hero-sub {
    margin-top: 14px;
    max-width: 720px;
    font-size: clamp(16px, 1.6vw, 22px);
    color: var(--ihd-text-2);
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.ihd-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 26px;
    border-radius: 999px;
    font-family: var(--ihd-font-body);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.ihd-btn:focus-visible {
    outline: 2px solid var(--ihd-gold-light);
    outline-offset: 5px;
}

.ihd-btn--gold {
    border: 1.5px solid #fff4b8;
    background: var(--ihd-gold-face);
    color: #100b02;
    box-shadow: var(--ihd-gold-shadow);
    text-shadow: 0 1px 0 rgb(255 248 200 / 22%);
}

.ihd-btn--gold::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    border: 1px solid rgb(255 242 164 / 66%);
    border-radius: inherit;
    box-shadow: inset 0 1px 2px rgb(255 255 231 / 34%);
    pointer-events: none;
}

.ihd-btn--gold:hover {
    color: #100b02;
    box-shadow: var(--ihd-gold-shadow-hover);
    filter: brightness(1.035) saturate(1.035);
}

.ihd-btn--gold:active {
    box-shadow: var(--ihd-gold-shadow-pressed);
    filter: brightness(0.975) saturate(1.025);
    transform: translateY(1px);
}

.ihd-btn--gold:disabled, .ihd-btn--gold[aria-disabled="true"] {
    background: linear-gradient(180deg, #d8c68c 0%, #b9a775 100%);
    border-color: #b7a579;
    box-shadow: none;
    color: #403a27;
    opacity: 0.64;
    filter: saturate(0.45);
    cursor: not-allowed;
    transform: none;
}

.ihd-btn--outline {
    border: 1.5px solid var(--ihd-gold);
    background: transparent;
    color: var(--ihd-gold-bright);
}

.ihd-btn--outline:hover {
    color: var(--ihd-gold-light);
    background: rgba(227, 182, 81, 0.08);
    box-shadow: 0 0 14px rgba(255, 215, 107, 0.22);
}

.ihd-btn--sm {
    min-height: 40px;
    padding: 8px 20px;
    font-size: 14px;
}

.ihd-btn--upper {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ihd-btn .ihd-arrow {
    font-size: 1.1em;
    line-height: 1;
}

.ihd-chip-done {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 12px;
    border: 1px solid rgba(98, 204, 142, 0.45);
    background: rgba(33, 104, 64, 0.35);
    color: #8ee0ae;
    font-family: var(--ihd-font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.ihd-chip-done:hover:not(:disabled) {
    background: rgba(33, 104, 64, 0.55);
    color: #b6f0cc;
}

.ihd-chip-done:disabled {
    opacity: 0.55;
    cursor: default;
}

.ihd-chip-done:focus-visible {
    outline: 2px solid var(--ihd-gold-light);
    outline-offset: 3px;
}

.ihd-chip-done svg {
    flex: 0 0 auto;
}

/* ── First-run: Your Next Steps header with the two-step tracker ───── */
.ihd-steps {
    margin-top: 72px;
}

.ihd-steps-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.ihd-steps-title {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.ihd-bolt-tile {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 14px;
    border: 1.5px solid var(--ihd-gold);
    background: rgba(12, 23, 52, 0.7);
    color: var(--ihd-gold-bright);
    box-shadow: 0 0 18px rgba(255, 215, 107, 0.18);
}

.ihd-steps h2.ihd-h2 {
    font-family: var(--ihd-font-head);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--ihd-text);
}

.ihd-steps-sub {
    margin-top: 6px;
    font-size: 17px;
    color: var(--ihd-text-2);
}

.ihd-tracker {
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto 64px auto;
    align-items: start;
    column-gap: 14px;
}

.ihd-tracker-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--ihd-text-2);
    text-align: center;
}

.ihd-tracker-dot {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid #8a96b3;
    font-family: var(--ihd-font-num);
    font-size: 15px;
    font-weight: 700;
    color: var(--ihd-text);
}

.ihd-tracker-step.is-current .ihd-tracker-dot,
.ihd-tracker-step.is-done .ihd-tracker-dot {
    border-color: #fff1c2;
    background: linear-gradient(180deg, var(--ihd-gold-bright), var(--ihd-gold));
    color: #1a1204;
    box-shadow: 0 0 22px rgba(255, 215, 107, 0.4);
}

.ihd-tracker-step.is-current {
    color: var(--ihd-gold-bright);
    font-weight: 600;
}

.ihd-tracker-bar {
    position: relative;
    height: 4px;
    margin-top: 17px;
    border-radius: 4px;
    background: #2a3554;
    overflow: hidden;
}

.ihd-tracker-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 60%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ihd-gold-bright), var(--ihd-gold));
}

/* ── First-run step cards ───────────────────────────────────────────── */
.ihd-step-list {
    display: grid;
    gap: 22px;
}

.ihd-step {
    position: relative;
    display: grid;
    grid-template-columns: 4px 76px auto minmax(0, 1fr) minmax(260px, 400px) 24px;
    align-items: center;
    column-gap: 28px;
    padding: 26px 28px;
    border-radius: var(--ihd-radius);
    border: 1px solid var(--ihd-border-step2);
    background: var(--ihd-card);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ihd-step:hover {
    color: inherit;
    border-color: rgba(227, 182, 81, 0.45);
}

.ihd-step:focus-within {
    border-color: rgba(227, 182, 81, 0.7);
}

.ihd-step--primary {
    border-color: var(--ihd-border-step1);
    box-shadow: 0 0 26px rgba(255, 215, 107, 0.12), inset 0 0 0 1px rgba(227, 182, 81, 0.08);
}

.ihd-step-rail {
    align-self: stretch;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--ihd-gold-light), var(--ihd-gold));
    box-shadow: 0 0 10px rgba(255, 215, 107, 0.45);
}

.ihd-icon-tile {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    border: 1px solid var(--ihd-tile-border);
    background: var(--ihd-tile);
    color: var(--ihd-gold-bright);
}

.ihd-step-label {
    align-self: start;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--ihd-gold);
    white-space: nowrap;
}

.ihd-step h3.ihd-step-title {
    font-family: var(--ihd-font-head);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ihd-text);
}

.ihd-step-desc {
    max-width: 520px;
    margin-top: 6px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--ihd-text-2);
}

.ihd-step-cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.ihd-step-cta .ihd-btn {
    width: 100%;
}

.ihd-step-cta .ihd-btn--gold {
    min-height: 62px;
    font-size: 22px;
}

.ihd-step-cta .ihd-btn--outline {
    min-height: 54px;
    font-size: 19px;
}

.ihd-step-note {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ihd-text-2);
}

.ihd-step-note strong {
    font-family: var(--ihd-font-num);
    color: var(--ihd-gold-bright);
}

.ihd-chevron {
    color: var(--ihd-text-2);
    font-size: 26px;
    line-height: 1;
    text-align: center;
}

/* ── Locked ("unlocks as you go") cards ─────────────────────────────── */
.ihd-unlock {
    position: relative;
    isolation: isolate;
    margin-top: 56px;
    padding-bottom: 8px;
}

.ihd-unlock-art {
    position: absolute;
    z-index: -1;
    top: -36px;
    right: -2vw;
    width: min(620px, 52%);
    height: auto;
    pointer-events: none;
    user-select: none;
    opacity: 0.9;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 25%, #000 70%, transparent 100%);
    mask-composite: intersect;
}

.ihd-unlock-head {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 22px;
}

.ihd-lock-ring {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 1.5px solid var(--ihd-gold);
    color: var(--ihd-gold-bright);
    box-shadow: 0 0 18px rgba(255, 215, 107, 0.2);
}

.ihd-unlock h2.ihd-unlock-title {
    font-family: var(--ihd-font-head);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ihd-text);
}

.ihd-unlock-text {
    margin-top: 4px;
    max-width: 860px;
    font-size: 16px;
    color: var(--ihd-text-2);
}

.ihd-locked-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.ihd-locked-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ihd-locked {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 22px;
    border-radius: 14px;
    border: 1px solid var(--ihd-border-locked);
    background: rgba(9, 19, 42, 0.72);
    cursor: default;
}

.ihd-locked .ihd-icon-tile {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    color: var(--ihd-gold);
    opacity: 0.85;
}

.ihd-locked-lock {
    display: block;
    margin-bottom: 4px;
    color: #8a96b3;
}

.ihd-locked h3.ihd-locked-title {
    font-family: var(--ihd-font-head);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ihd-text);
}

.ihd-locked-desc {
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ihd-muted);
}

.ihd-locked-when {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #b9a46d;
}

/* ── Active dashboard: outside-investment callout (Investor Dashboard 2) ─ */
.ihd-callout {
    display: grid;
    grid-template-columns: 4px 64px minmax(0, 1fr) minmax(240px, 400px) 24px;
    align-items: center;
    column-gap: 24px;
    margin-top: 40px;
    padding: 20px 26px;
    border-radius: var(--ihd-radius);
    border: 1px solid var(--ihd-border-step2);
    background: var(--ihd-card);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.ihd-callout:hover {
    color: inherit;
    border-color: rgba(227, 182, 81, 0.45);
}

.ihd-callout .ihd-icon-tile {
    width: 64px;
    height: 64px;
}

.ihd-callout h2.ihd-callout-title {
    font-family: var(--ihd-font-head);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ihd-text);
}

.ihd-callout-text {
    margin-top: 4px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ihd-text-2);
}

/* ── Luminous section bar (Your Next Steps, Your Portfolio, Pending Deals, Active Investments) ─ */
.ihd-section {
    margin-top: 28px;
}

.ihd-bar {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 17px;
    min-height: 86px;
    padding: 15px 24px 13px;
    border: 1.5px solid #fff5b2;
    border-radius: 17px;
    background: var(--ihd-bar-face);
    box-shadow: var(--ihd-bar-shadow);
    color: #0e0b01;
}

.ihd-bar::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    border: 1px solid rgb(255 240 157 / 58%);
    border-radius: 15px;
    box-shadow: inset 0 1px 3px rgb(255 255 221 / 36%);
    pointer-events: none;
}

.ihd-bar-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 52px;
    height: 50px;
    border: 1px solid #382402;
    border-radius: 13px;
    background: linear-gradient(145deg, #201802 0%, #0c0900 55%, #1b1200 100%);
    box-shadow: inset 0 1px 0 rgb(240 196 86 / 12%), 0 3px 5px rgb(73 44 0 / 46%);
    color: #ffcf4a;
}

.ihd-bar-text {
    min-width: 0;
}

.ihd-bar h2.ihd-bar-title {
    font-family: var(--ihd-font-head);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #0e0b01;
}

.ihd-bar-meta {
    font-size: 16px;
    line-height: 1.4;
    color: #2a1d02;
}

.ihd-bar-end {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ihd-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 20px;
    border-radius: 999px;
    border: 1px solid #5b3b0d;
    background: linear-gradient(180deg, #171000, #040300);
    box-shadow: 0 2px 5px rgb(88 53 0 / 36%);
    color: #ffe38c;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

.ihd-pill .ihd-num {
    font-family: var(--ihd-font-num);
}

a.ihd-pill {
    text-decoration: none;
}

a.ihd-pill:hover {
    color: #fff1c2;
    border-color: #8a5d16;
}

a.ihd-pill:focus-visible {
    outline: 2px solid #1a1204;
    outline-offset: 3px;
}

/* Small green Open / Close control on the Portfolio, Pending Deals and Active Investments bars (owner request 2026-10-18). */
.ihd-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    min-height: 34px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid #0e4d2c;
    background: linear-gradient(180deg, #1f8a4c 0%, #166b3b 100%);
    box-shadow: inset 0 1px 0 rgb(190 255 214 / 45%), 0 2px 5px rgb(40 25 0 / 35%);
    color: #ffffff;
    font-family: var(--ihd-font-body);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
}

.ihd-toggle:hover {
    background: linear-gradient(180deg, #23964f 0%, #187542 100%);
}

.ihd-toggle:focus-visible {
    outline: 2px solid #1a1204;
    outline-offset: 3px;
}

/* The Portfolio, Pending Deals and Active Investments bars toggle on a click or tap anywhere on them (owner request
   2026-10-19); the Open / Close button is still the keyboard control. */
.ihd-bar--toggle {
    cursor: pointer;
    user-select: none;   /* a drag to select text would end in a click and toggle the section */
    transition: filter 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.ihd-bar--toggle:hover {
    filter: brightness(1.04);
}

/* "View all" on Active Investments: the house brown secondary, sized to the bar's pills. */
.ihd-bar-end .nea-brown-btn.ihd-viewall {
    min-height: 42px;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 15px;
    text-decoration: none;
}

.ihd-bar-end .nea-brown-btn.ihd-viewall:focus-visible {
    outline: 2px solid #1a1204;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .ihd-bar--toggle { transition: none; }
}

/* The dark panel under a bar, with the small visible gap the design keeps. */
.ihd-panel {
    margin-top: 8px;
    padding: 16px 22px 20px;
    border: 1px solid var(--ihd-panel-border);
    border-radius: 17px;
    background: linear-gradient(117deg, #071226 0%, #09172e 100%);
}

.ihd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 22px;
}

.ihd-empty {
    padding: 22px 6px;
    font-size: 15px;
    color: var(--ihd-muted);
}

/* ── Task cards (Next Steps) ────────────────────────────────────────── */
.ihd-task {
    position: relative;
    min-width: 0;
    padding: 22px 24px 20px 30px;
    border: 1px solid #21304b;
    border-radius: 15px;
    background: linear-gradient(140deg, #060d1c 0%, #0a1224 100%);
}

.ihd-task::before, .ihd-deal::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 5px;
    border: 1px solid #ffe596;
    border-radius: 5px;
    background: linear-gradient(#ffe196, #f5b933);
    box-shadow: 0 0 8px rgba(255, 215, 107, 0.35);
}

.ihd-task.is-urgent::before {
    border-color: #ffb3ae;
    background: linear-gradient(#ff9c94, var(--ihd-red));
    box-shadow: 0 0 8px rgba(226, 85, 79, 0.45);
}

.ihd-task-doc {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(145deg, #182746, #15213c);
    color: #dbe6ff;
}

.ihd-task h3.ihd-task-title {
    padding-right: 58px;
    font-family: var(--ihd-font-head);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ihd-text);
    overflow-wrap: anywhere;
}

.ihd-co {
    color: var(--ihd-gold-bright);
}

.ihd-urgent-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    border: 1px solid rgba(226, 85, 79, 0.55);
    background: rgba(226, 85, 79, 0.14);
    color: #ffb3ae;
    font-family: var(--ihd-font-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.ihd-task-desc {
    margin-top: 6px;
    font-size: 15.5px;
    line-height: 1.5;
    color: #afb9d1;
}

.ihd-task-state {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ihd-gold);
}

.ihd-task-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.ihd-task-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 180px;
    border: 1px dashed #2a3858;
    border-radius: 15px;
    color: var(--ihd-muted);
    font-size: 15px;
}

.ihd-task-placeholder span {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid #3a4870;
    color: var(--ihd-text-2);
    font-size: 26px;
    line-height: 1;
}

.ihd-caught-up {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 6px;
    font-size: 15.5px;
    color: var(--ihd-text-2);
}

/* ── Deal cards (Pending Deals / Active Investments) ───────────────── */
.ihd-deal {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    padding: 20px 22px 18px 30px;
    border: 1px solid #21304b;
    border-radius: 15px;
    background: linear-gradient(140deg, #060d1c 0%, #0a1224 100%);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ihd-deal:hover {
    border-color: rgba(227, 182, 81, 0.5);
    box-shadow: 0 0 18px rgba(255, 215, 107, 0.08);
}

.ihd-deal-top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.ihd-deal-tile {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--ihd-tile-border);
    background: var(--ihd-tile);
    color: var(--ihd-gold-bright);
}

.ihd-deal-id {
    flex: 1 1 auto;
    min-width: 0;
}

.ihd-deal h3.ihd-deal-name {
    font-family: var(--ihd-font-head);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ihd-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ihd-deal h3.ihd-deal-name.is-gold {
    color: var(--ihd-gold-bright);
}

.ihd-deal-line {
    margin-top: 2px;
    font-size: 14px;
    color: var(--ihd-text-2);
}

.ihd-deal-line strong {
    color: var(--ihd-text);
    font-weight: 600;
}

.ihd-deal-sub {
    margin-top: 2px;
    font-size: 13.5px;
    color: var(--ihd-muted);
}

.ihd-score {
    flex: 0 0 auto;
    text-align: right;
}

.ihd-score-value {
    font-family: var(--ihd-font-num);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ihd-gold-bright);
}

.ihd-score-label {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ihd-muted);
}

.ihd-tag {
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(88, 153, 255, 0.45);
    background: rgba(88, 153, 255, 0.12);
    color: #b8d1ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ihd-progress-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
    color: var(--ihd-muted);
}

.ihd-progress-head span:last-child {
    font-family: var(--ihd-font-num);
    color: var(--ihd-text-2);
}

.ihd-progress-track {
    height: 6px;
    margin-top: 6px;
    border-radius: 6px;
    background: #1b2647;
    overflow: hidden;
}

.ihd-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--ihd-gold-bright), var(--ihd-gold));
}

.ihd-deal-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.ihd-stat-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ihd-muted);
}

.ihd-stat-value {
    margin-top: 2px;
    font-family: var(--ihd-font-num);
    font-size: 18px;
    font-weight: 700;
    color: var(--ihd-text);
}

.ihd-deal-stats {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
}

.ihd-health {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
}

.ihd-health-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.ihd-deal-funded {
    padding-top: 12px;
    border-top: 1px solid #1b2647;
}

.ihd-deal-funded .ihd-btn {
    width: 100%;
    white-space: normal;
    text-align: center;
}

.ihd-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 16px;
}

.ihd-pager-btn {
    min-height: 36px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid #2c3b5e;
    background: #0f172a;
    color: #d5dbe8;
    font-family: var(--ihd-font-body);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ihd-pager-btn:hover:not([aria-disabled="true"]):not(:disabled) {
    border-color: var(--ihd-gold);
    color: #fff;
}

.ihd-pager-btn[aria-disabled="true"], .ihd-pager-btn:disabled {
    opacity: 0.45;
    cursor: default;
}

.ihd-pager-btn:focus-visible {
    outline: 2px solid var(--ihd-gold-light);
    outline-offset: 2px;
}

.ihd-pager-info {
    font-family: var(--ihd-font-num);
    font-size: 13px;
    color: var(--ihd-muted);
}

/* The Your Portfolio KPI cards keep their own markup inside an ihd panel. */
.ihd-panel .dash-kpi-row {
    margin-bottom: 14px;
}

.ihd-panel .dash-quick-stats-row {
    margin-bottom: 0;
}

/* investor-express-interest-only.css spaces every "ol li" globally. */
.ihd-tracker > li {
    margin-bottom: 0;
}

.ihd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .ihd-step {
        grid-template-columns: 4px 64px minmax(0, 1fr) minmax(220px, 300px) 20px;
        column-gap: 20px;
    }

    .ihd-step .ihd-icon-tile {
        width: 64px;
        height: 64px;
    }

    /* The STEP n label joins the title column. */
    .ihd-step-label {
        display: none;
    }

    .ihd-step-label-inline {
        display: block !important;
    }

    .ihd-locked-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ihd-callout {
        grid-template-columns: 4px 56px minmax(0, 1fr) minmax(220px, 300px) 20px;
        column-gap: 18px;
    }
}

.ihd-step-label-inline {
    display: none;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--ihd-gold);
}

@media (max-width: 900px) {
    .ihd-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ihd-task-placeholder {
        display: none;
    }
}

@media (max-width: 768px) {
    /* Full-bleed artwork: the hero reaches into the page gutter and clips there, so the image never widens the page.
       At this width admin-interviewscore-only.css (linked on every page) sets the gutter to main { padding-inline:
       .75rem !important } and caps every element at max-width: 100% !important, so both are undone here. */
    .ihd-hero {
        margin-inline: -0.75rem;
        max-width: none !important;
        padding: 92px 0.75rem 8px;
        min-height: 0;
        overflow-x: clip;
    }

    .ihd-hero-art {
        top: -12px;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none !important;
        height: 124px;
        object-position: center 35%;
        object-fit: cover;
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }

    .ihd-unlock-art {
        right: 0;
        width: 70%;
    }

    .ihd-steps {
        margin-top: 40px;
    }

    .ihd-steps-head {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .ihd-steps-title {
        gap: 14px;
    }

    .ihd-bolt-tile {
        width: 52px;
        height: 52px;
    }

    .ihd-steps h2.ihd-h2 {
        font-size: 26px;
    }

    .ihd-steps-sub {
        font-size: 15px;
    }

    .ihd-tracker {
        justify-content: center;
        padding: 14px 16px;
        border: 1px solid var(--ihd-border-step2);
        border-radius: 14px;
        background: rgba(9, 19, 42, 0.7);
    }

    .ihd-step, .ihd-callout {
        grid-template-columns: 4px minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 14px;
        padding: 20px 18px;
    }

    .ihd-step-rail {
        grid-row: 1 / span 3;
    }

    /* Long labels ("Add Outside Investment →" at 360px) wrap instead of widening the card. */
    .ihd-btn {
        white-space: normal;
        text-align: center;
    }

    .ihd-step .ihd-icon-tile, .ihd-callout .ihd-icon-tile {
        width: 52px;
        height: 52px;
    }

    .ihd-step h3.ihd-step-title {
        font-size: 21px;
    }

    .ihd-step-desc, .ihd-callout-text {
        font-size: 15px;
    }

    .ihd-step-cta .ihd-btn--gold {
        min-height: 54px;
        font-size: 19px;
    }

    .ihd-step-cta .ihd-btn--outline {
        min-height: 50px;
        font-size: 17px;
    }

    .ihd-chevron {
        display: none;
    }

    .ihd-unlock-head {
        align-items: flex-start;
        gap: 14px;
    }

    .ihd-lock-ring {
        width: 52px;
        height: 52px;
    }

    .ihd-locked-grid, .ihd-locked-grid--compact {
        grid-template-columns: minmax(0, 1fr);
    }

    .ihd-locked {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
        border-radius: 12px;
    }

    .ihd-locked .ihd-icon-tile {
        width: 44px;
        height: 44px;
    }

    .ihd-bar {
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    .ihd-bar h2.ihd-bar-title {
        font-size: 22px;
    }

    .ihd-bar-end {
        width: 100%;
        justify-content: flex-start;
    }

    /* A bar that ends in just a count pill (Your Next Steps) keeps it on the title's line: the pill, the icon and the
       gaps shrink so it fits beside the text instead of wrapping to its own row. */
    .ihd-bar:has(> .ihd-bar-end--pill) {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .ihd-bar:has(> .ihd-bar-end--pill) .ihd-bar-icon {
        width: 44px;
        height: 42px;
    }

    .ihd-bar:has(> .ihd-bar-end--pill) h2.ihd-bar-title {
        font-size: 20px;
    }

    .ihd-bar:has(> .ihd-bar-end--pill) .ihd-bar-meta {
        font-size: 14px;
    }

    .ihd-bar-end.ihd-bar-end--pill {
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-end;
    }

    .ihd-bar-end--pill .ihd-pill {
        min-height: 30px;
        padding: 4px 11px;
        font-size: 12.5px;
    }

    .ihd-panel {
        padding: 12px;
    }

    .ihd-task, .ihd-deal {
        padding: 18px 16px 16px 24px;
    }

    .ihd-task-actions .ihd-btn, .ihd-deal-foot .ihd-btn {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ihd-btn, .ihd-step, .ihd-deal {
        transition: none;
    }

    .ihd-btn--gold:active {
        transform: none;
    }
}

@media (forced-colors: active) {
    .ihd-bar {
        border-color: CanvasText;
        background: Canvas;
        color: CanvasText;
        box-shadow: none;
    }

    .ihd-bar h2.ihd-bar-title, .ihd-bar-meta {
        color: CanvasText;
    }

    .ihd-btn--gold {
        border-color: ButtonText;
        background: ButtonFace;
        color: ButtonText;
        box-shadow: none;
        filter: none;
    }

    .ihd-btn--gold::before, .ihd-bar::before {
        display: none;
    }
}