/* ============================================================================
   Flex re-enrollment toolkit (Pages/Resources/Tools/FlexReEnrollmentToolkit.cshtml).
   Ported from "Flex Re-Enrollment Toolkit.dc.html". Razor only, no island. Shared tool-page pieces
   (.hero--tool, .tools-cta__panel, .lead, .btn) live in site.css.
   ============================================================================ */

.kit { padding: 64px 32px 96px; }
.kit__inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

/* ---- Sticky "In this toolkit" nav ---- */
.kit-nav { position: sticky; top: calc(var(--header-h) + 56px); min-width: 0; }
.kit-nav__label {
    margin: 0;
    padding: 0 12px 8px;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--steel);
}
.kit-nav__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.kit-nav__list a {
    display: block;
    padding: 10px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--muted);
}
.kit-nav__list a:hover { background: var(--mist); color: var(--ink); }

/* ---- Parts ---- */
.kit__main { min-width: 0; display: flex; flex-direction: column; gap: 60px; }
.kit-part { scroll-margin-top: calc(var(--header-h) + 60px); }
.kit-part__kicker { margin: 0; display: flex; align-items: center; gap: 12px; }
.kit-part__n {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
}
.kit-part__n--blue { background: rgba(39, 165, 221, .12); color: var(--blue-d); }
.kit-part__n--green { background: rgba(112, 190, 68, .14); color: #4a8a2c; }
.kit-part__n--gold { background: rgba(250, 175, 66, .16); color: #a06a12; }
.kit-part__eyebrow { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--steel); }
.kit-part__title { margin-top: 16px; font-size: 30px; line-height: 1.18; font-weight: 700; color: var(--ink); }
.kit-part__kicker + .kit-part__title { margin-top: 16px; }
.kit-part .lead { margin-top: 18px; line-height: 1.7; }
.kit-part .lead + .lead { margin-top: 14px; }

/* ---- Download cards ---- */
.kit-cards { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kit-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card-sm);
    background: #fff;
    padding: 22px 22px 20px;
    box-shadow: 0 12px 28px rgba(24, 34, 51, .05);
}
.kit-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.kit-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    background: var(--blue-tint);
    color: var(--blue-d);
    --duo-secondary: var(--blue);
}
.kit-card--green .kit-card__icon { background: rgba(112, 190, 68, .12); color: #4e8f2f; --duo-secondary: var(--green); --duo-opacity: .42; }
.kit-card--gold .kit-card__icon { background: rgba(250, 175, 66, .14); color: #a06a12; --duo-secondary: var(--gold); --duo-opacity: .45; }
.kit-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--blue-tint);
    color: var(--cta);
    font-size: 10.5px;
    letter-spacing: .1em;
    font-weight: 700;
    white-space: nowrap;
}
.kit-card__badge .icon { height: 9px; width: auto; }
.kit-card__title { margin-top: 14px; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--ink); }
.kit-card__body { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.kit-card__dl {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cta);
}
.kit-card__dl:hover { color: var(--blue); }
.kit-card__dl .icon { height: 11px; width: auto; }

/* Blue tip under part two. */
.kit-tip {
    margin-top: 14px;
    border: 1px solid #cde9f6;
    border-radius: var(--r-card-sm);
    background: var(--blue-tint);
    padding: 20px 24px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
.kit-tip__icon { font-size: 15px; color: var(--blue-d); --duo-secondary: var(--blue); display: flex; }
.kit-tip p { flex: 1; min-width: 240px; margin: 0; font-size: 14.5px; line-height: 1.6; color: #20586f; text-wrap: pretty; }
.kit-tip a { font-weight: 600; }

/* ---- The guide (dark panel) ---- */
.kit-guide {
    margin-top: 24px;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-card);
    background: linear-gradient(150deg, #222a4a 0%, var(--navy) 58%, #121a29 100%);
    padding: 34px 36px;
    display: flex;
    gap: 26px;
    align-items: center;
    flex-wrap: wrap;
}
.kit-guide__icon {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(250, 175, 66, .18);
    color: var(--gold);
    --duo-secondary: var(--gold);
    --duo-opacity: .4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}
.kit-guide__copy { flex: 1; min-width: 260px; position: relative; }
.kit-guide__eyebrow { margin: 0; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--gold); }
.kit-guide__title { margin-top: 10px; font-size: 26px; line-height: 1.2; font-weight: 700; color: #fff; }
.kit-guide__body { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--dk-text); max-width: 60ch; text-wrap: pretty; }
.kit-guide__btn {
    position: relative;
    flex: none;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    background: var(--gold);
    color: #2a1c05;
    box-shadow: 0 8px 22px rgba(250, 175, 66, .28);
}
.kit-guide__btn:hover { background: #ffc165; color: #2a1c05; }
.kit-guide__swoops {
    position: absolute;
    right: -20px;
    bottom: -14px;
    width: 180px;
    height: auto;
    opacity: .14;
    pointer-events: none;
}

/* ---- Related row ---- */
.kit-related {
    border-top: 1px solid var(--line);
    padding-top: 26px;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items: center;
}
.kit-related__label { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--steel); }
.kit-related a { font-size: 15px; font-weight: 600; }

/* ---- Responsive ---- */
@media (max-width: 959px) {
    .kit { padding: 40px 24px 72px; }
    .kit__inner { grid-template-columns: 1fr; gap: 32px; }
    .kit-nav { position: static; }
    .kit-nav__list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .kit-nav__list a { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; }
    .kit__main { gap: 48px; }
    .kit-part__title { font-size: 26px; }
    .kit-guide { padding: 26px 24px; }
}
@media (max-width: 559px) {
    .kit { padding: 32px 20px 56px; }
    .kit-cards { grid-template-columns: 1fr; }
    .kit-part__title { font-size: 24px; }
    .kit-guide__title { font-size: 22px; }
    .kit-guide__btn { width: 100%; }
    .tools-cta__panel .btn { width: 100%; }
}