/* ============================================================================
   Flex administration (Pages/Platform/Flex.cshtml). Ported from "Flex Administration.dc.html".
   Hero backdrop: "Hero Backdrop", pattern "Concentric arcs", tone Light. Shared pieces (.hero, .subnav, .section,
   .split, .icon-well, .cta-panel, ...) live in site.css. Razor only, no JS.
   ============================================================================ */

/* ---- Hero ---- */
.flx-hero { padding: 80px 32px 68px; }
.flx-hero .hero__title { font-size: 66px; line-height: 1.03; }
.flx-hero .hero__lead { max-width: 740px; margin-top: 26px; }

/* ---- Decision support ---- */
.flx-support__grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}
.flx-mini {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card-sm);
    padding: 18px 18px 20px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(24, 34, 51, .05);
}
.flx-mini__icon { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }
.flx-mini__title { margin-top: 13px; font-size: 15px; font-weight: 700; color: var(--ink); }
.flx-mini__body { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.flx-chat {
    margin-top: 22px;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    border: 1px solid rgba(122, 92, 224, .26);
    border-radius: var(--r-card-sm);
    background: rgba(122, 92, 224, .06);
    padding: 16px 18px;
}
.flx-chat__icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--purple);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(122, 92, 224, .30);
    color: #fff;
    --duo-secondary: #c9b8ff;
    --duo-opacity: .5;
    font-size: 14px;
}
.flx-chat__body { margin: 0; padding-top: 6px; font-size: 14.5px; line-height: 1.55; color: #3f3168; }
.flx-chat__body strong { color: #2f2452; }

/* Browser-window frame around the screenshot. */
.flx-shot {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(24, 34, 51, .07);
}
.flx-window {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    background: var(--mist);
}
.flx-window__dots { display: flex; gap: 5px; }
.flx-window__dots span { width: 9px; height: 9px; border-radius: 50%; background: #dfe3e7; }
.flx-window__title {
    margin: 0 auto;
    font-size: 11px;
    color: var(--steel);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 12px;
}
/* Crop from the design's image-slot state (slot "flex-decision-support": y 17.18%). */
.flx-shot img { width: 100%; height: 470px; object-fit: cover; object-position: 0 17.2%; }

/* ---- Re-enrollment timeline ---- */
.flx-reenroll .section__intro { max-width: 820px; }
.flx-steps { position: relative; margin-top: 52px; }
.flx-steps__line {
    position: absolute;
    left: 0;
    right: 0;
    top: 26px;
    height: 2px;
    background: linear-gradient(90deg, rgba(122, 92, 224, .10) 0%, rgba(122, 92, 224, .45) 12%, rgba(122, 92, 224, .45) 88%, rgba(122, 92, 224, .10) 100%);
}
.flx-steps__grid {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}
.flx-step { min-width: 0; }
.flx-step__n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--purple);
    color: #fff;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    border: 4px solid var(--mist);
    box-shadow: 0 8px 20px rgba(122, 92, 224, .28);
}
.flx-step__title { margin-top: 18px; font-size: 18px; line-height: 1.25; font-weight: 700; color: var(--ink); }
.flx-step__body { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* ---- Life events (dark) ---- */
.flx-events { padding: 88px 32px; }
.flx-events__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
}
.flx-events .section__title--md { font-size: 38px; line-height: 1.12; }
.flx-events .lead { margin-top: 18px; }
.flx-events__card {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-card);
    background: rgba(255, 255, 255, .05);
    padding: 30px 28px;
}
.flx-events__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.flx-event { display: flex; align-items: flex-start; gap: 13px; }
.flx-event__icon {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .09);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    --duo-secondary: #ffd694;
    --duo-opacity: .38;
    font-size: 13px;
}
.flx-event__body { margin: 0; padding-top: 6px; font-size: 14.5px; line-height: 1.55; color: #c7d4e2; }

/* ---- "More of the platform" cross-links (Pages/Shared/_PlatformMore.cshtml). Shared CSS candidate: all four product pages carry this block. ---- */

/* ---- Demo panel: product-page variant (Shared CSS candidate: same as .platform-demo in platform.css). ---- */

/* ---- Responsive ---- */
@media (max-width: 959px) {
    
    .flx-hero { padding: 64px 24px 56px; }
    .flx-hero .hero__title { font-size: 46px; }
    .flx-shot img { height: 360px; }
    .flx-steps__line { display: none; }
    .flx-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
    .flx-events { padding: 72px 24px; }
    .flx-events__grid { grid-template-columns: 1fr; gap: 28px; }
    .flx-events .section__title--md { font-size: 30px; }
    .platform-more { padding: 56px 24px 0; }
    .platform-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-demo .cta-panel { padding: 64px 28px 72px; }
}
@media (max-width: 559px) {
    .flx-hero { padding: 48px 20px 40px; }
    .flx-hero .hero__title { font-size: 36px; }
    .flx-support__grid { grid-template-columns: 1fr; }
    .flx-shot img { height: 280px; }
    .flx-steps__grid { grid-template-columns: 1fr; }
    .flx-events { padding: 56px 20px; }
    .flx-events__card { padding: 22px 18px; }
    .platform-more { padding: 48px 20px 0; }
    .platform-more__list { grid-template-columns: 1fr; }
    .pf-demo .cta-panel { padding: 48px 20px 56px; }
}