/* ============================================================================
   Platform overview (Pages/Platform/Index.cshtml). Ported from "Platform Overview.dc.html"
   with the design's defaults: "Radial fan" hero mesh, "Navy bar" sub-nav, "Orbit rings" diagram, "Light" hub card.
   Shared pieces (.hero, .subnav, .section, .card, .marquee, .chat-card, .cta-panel, ...) live in site.css.
   No JavaScript: the phone slideshow is a CSS keyframe animation.
   ============================================================================ */

/* ---- Hero ---- */
.platform-hero__sub {
    margin: 14px 0 0;
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1.16;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--blue-d);
}

/* ---- Market reach ---- */
.market__links { margin-top: 26px; display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }

/* ---- Market reach diagram ---- */
.market-diagram { position: relative; margin-top: 56px; padding: 104px 0; overflow-x: clip; }
.market-diagram__orbits {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: grid;
    place-items: center;
}
.market-diagram__orbits span { position: absolute; border-radius: 50%; }
.market-diagram__orbits span:nth-child(1) { width: 300px; height: 300px; background: rgba(122, 92, 224, .115); filter: blur(34px); }
.market-diagram__orbits span:nth-child(2) { width: 300px; height: 300px; border: 1px solid rgba(122, 92, 224, .32); }
.market-diagram__orbits span:nth-child(3) { width: 470px; height: 470px; border: 1px solid rgba(122, 92, 224, .24); }
.market-diagram__orbits span:nth-child(4) { width: 650px; height: 650px; border: 1px solid rgba(122, 92, 224, .17); }
.market-diagram__orbits span:nth-child(5) { width: 840px; height: 840px; border: 1px dashed rgba(122, 92, 224, .14); }

.market-diagram__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    max-width: 1060px;
    margin: 0 auto;
}
.market-node {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 30px 28px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(24, 34, 51, .07);
}
.market-node__label {
    margin: 0;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--steel);
}
.market-node__title {
    margin: 10px 0 0;
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ink);
}
.market-node__body { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

.market-hub { display: flex; align-items: center; gap: 12px; padding: 0 2px; }
.market-hub__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--purple);
    border: 1px solid #6a4ed1;
    box-shadow: 0 6px 16px rgba(122, 92, 224, .34);
    color: #fff;
    font-size: 16px;
}
.market-hub__card {
    flex: 1;
    min-width: 0;
    border: 1px solid #cde9f6;
    border-radius: var(--r-card);
    padding: 26px 24px;
    background: #fff;
    text-align: center;
    box-shadow: 0 22px 48px rgba(24, 34, 51, .12);
}
.market-hub__card img { height: 28px; width: auto; margin: 0 auto; }
.market-hub__caption { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: #20586f; font-weight: 600; }

/* ---- Enrollment: phone slideshow ---- */
.enrollment__note { margin: 20px 0 0; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.enrollment .check-list { margin-top: 16px; }
.enrollment .btn { margin-top: 28px; }
.enrollment__phone-col { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.phone {
    position: relative;
    width: 308px;
    max-width: 100%;
    padding: 5px;
    border-radius: 12px;
    background: linear-gradient(160deg, #2b3444 0%, #141b26 46%, #2b3444 100%);
    box-shadow: 0 26px 60px rgba(24, 34, 51, .30), inset 0 0 0 1px rgba(255, 255, 255, .10);
}
.phone__screen { position: relative; border-radius: 8px; overflow: hidden; background: #000; aspect-ratio: 787 / 1277; }
.phone__reel {
    position: absolute;
    inset: 0;
    display: flex;
    width: 1000%;
    animation: phone-reel 30s cubic-bezier(.4, 0, .2, 1) infinite;
}
.phone__reel img {
    flex: 0 0 10%;
    width: 10%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    background: #fff;
}
/* Nine screens plus a copy of the first, so the loop back to 0 is invisible. Hold 2.4s, slide 0.6s. */
@keyframes phone-reel {
    0%, 8% { transform: translateX(0); }
    10%, 18% { transform: translateX(-10%); }
    20%, 28% { transform: translateX(-20%); }
    30%, 38% { transform: translateX(-30%); }
    40%, 48% { transform: translateX(-40%); }
    50%, 58% { transform: translateX(-50%); }
    60%, 68% { transform: translateX(-60%); }
    70%, 78% { transform: translateX(-70%); }
    80%, 88% { transform: translateX(-80%); }
    90%, 100% { transform: translateX(-90%); }
}
@media (prefers-reduced-motion: reduce) {
    .phone__reel { animation: none; }
}

/* ---- Compliance (dark) ---- */
.compliance { position: relative; overflow: hidden; }
.compliance__inner { position: relative; }
.compliance__intro { max-width: 820px; }
.compliance__grid { margin-top: 44px; gap: 18px; }
.compliance-card {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--r-card-sm);
    padding: 26px 24px;
    background: rgba(255, 255, 255, .05);
}
.compliance-card .icon-well { background: rgba(255, 255, 255, .08); color: var(--gold); --duo-secondary: #ffd694; --duo-opacity: .38; font-size: 16px; }
.compliance-card__title { margin-top: 18px; font-size: 17px; font-weight: 700; color: #fff; }
.compliance-card__body { margin: 9px 0 0; font-size: 14.5px; line-height: 1.6; color: #a8bbd0; }
.compliance .link-arrow { margin-top: 34px; }

/* ---- Integrations ---- */
.integrations__payoff { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 600; color: var(--ink); }
.integrations .stat-tiles { margin-top: 20px; }
.integrations .marquee { margin-top: 24px; }
.integrations .card { padding: 36px; }

/* ---- Flex ---- */
.flex__copy { order: 2; }
.flex__shot {
    order: 1;
    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);
}
.window-bar {
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    background: var(--mist);
}
.window-bar__title {
    margin: 0 auto;
    font-size: 11px;
    color: var(--steel);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 12px;
}
.flex__shot img { width: 100%; height: 400px; object-fit: cover; object-position: 0 4.3%; }

/* ---- Billing ---- */
.billing__intro { max-width: 820px; }
.billing__grid { margin-top: 44px; }
.billing-card { padding: 30px 26px; }
.billing-card .icon-well { width: 42px; height: 42px; }
.billing-card__tag {
    margin: 18px 0 0;
    font-size: 11.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--steel);
}
.billing-card__title { margin-top: 8px; font-size: 19px; font-weight: 700; }
.billing-card__body { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.billing .link-arrow { margin-top: 32px; }

/* ---- Demo panel: platform variant is a little tighter ---- */
.platform-demo .cta-panel { padding: 88px 56px 104px; }
.platform-demo .cta-panel__inner { max-width: 740px; }
.platform-demo .cta-panel__swoops { top: auto; bottom: -40px; left: -190px; }

/* ---- Responsive ---- */
@media (max-width: 959px) {
    
    .platform-hero__sub { font-size: 24px; }
    .market-diagram { padding: 56px 0; margin-top: 40px; }
    .market-diagram__grid { grid-template-columns: 1fr; max-width: 420px; }
    .market-hub { flex-direction: column; }
    .market-hub__arrow { transform: rotate(90deg); }
    .market-hub__card { width: 100%; }
    .market-diagram__orbits span:nth-child(3),
    .market-diagram__orbits span:nth-child(4),
    .market-diagram__orbits span:nth-child(5) { display: none; }
    .flex__copy { order: 1; }
    .flex__shot { order: 2; }
    .integrations .card { padding: 28px 22px; }
    .platform-demo .cta-panel { padding: 64px 28px 72px; }
}
@media (max-width: 559px) {
    .platform-hero__sub { font-size: 20px; }
    .flex__shot img { height: 300px; }
    .enrollment .btn { width: 100%; }
    .platform-demo .cta-panel { padding: 48px 20px 56px; }
}