/* Our Platform page: two-slide endless components carousel */
.pcar {
    position: relative;
    margin-top: 28px;
    /* break out of the page container: near full viewport, capped */
    width: min(100vw - 48px, 1600px);
    left: 50%;
    transform: translateX(-50%);
}

.pcar-viewport {
    overflow: hidden;
}

.pcar-loop {
    display: flex;
    gap: 24px;
    will-change: transform;
}

.pcar-slidewrap {
    flex: 0 0 78%;
}

.pslide {
    background: #fff;
    border: 1px solid #e0e0e0;
    padding: 34px 40px 36px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.pslide-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8b0000;
    margin-bottom: 6px;
}

.pslide h3 {
    font-size: 28px;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 0 0 16px;
}

.pslide-lead {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #444;
    margin: 0 0 16px;
}

/* software slide: media + points split */
.pslide-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: center;
    /* fill the card below the header and center content in that section */
    flex: 1 1 auto;
    align-content: center;
}

.pslide-media img {
    width: 100%;
    border: 1px solid #e0e0e0;
    background: #f4f4f4;
    display: block;
}

.pslide-media .pslide-lead {
    margin: 10px 0 0;
}

.pslide-points {
    display: grid;
    grid-auto-rows: 1fr;
}

.ppoint {
    display: flex;
    gap: 22px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #ececec;
}

.ppoint:first-child {
    border-top: 0;
    padding-top: 0;
}

.ppoint-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8b0000;
    color: #fff;
    border-radius: 3px;
    font-size: 17px;
}

.ppoint h4 {
    font-size: 1.2rem;
    color: #1a1a1a;
    margin: 0 0 3px;
}

.ppoint p {
    font-size: 1.1rem;
    line-height: 1.55;
    color: #444;
    margin: 0;
}

/* hardware slide: 2x2 device grid */
.pslide-devices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 18px 28px;
    flex: 1 1 auto;
}

.pdevice {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
    border-top: 1px solid #ececec;
    padding-top: 16px;
    height: 100%;
}

/* vertical divider centered in the column gap */
.pdevice:nth-child(even) {
    border-left: 1px solid #ececec;
    padding-left: 14px;
    margin-left: -14px;
}

.pdevice-img {
    flex: 0 0 auto;
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pdevice-img img {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
    display: block;
}

.pdevice h4 {
    font-size: 1.2rem;
    color: #1a1a1a;
    margin: 0 0 10px;
}

.pdevice p {
    font-size: 1.1rem;
    line-height: 1.55;
    color: #444;
    margin: 0;
}

/* arrows */
.pcar-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    color: #1a1a1a;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.pcar-btn:hover {
    background: #8b0000;
    border-color: #8b0000;
    color: #fff;
}

.pcar-btn:focus-visible {
    outline: 2px solid #8b0000;
    outline-offset: 2px;
}

.pcar-prev { left: 10px; }
.pcar-next { right: 10px; }

@media (max-width: 900px) {
    .pcar-slidewrap { flex: 0 0 86%; }
    .pslide { padding: 20px 20px 22px; }
    .pslide-split { grid-template-columns: 1fr; gap: 16px; }
    .pslide-devices { grid-template-columns: 1fr; gap: 12px; }
    .pdevice:nth-child(even) { border-left: 0; padding-left: 0; margin-left: 0; }
    /* smaller images on mobile to keep the card short */
    .pdevice { padding-top: 12px; gap: 10px; }
    .pdevice-img { height: 90px; }
    .pdevice-img img { max-height: 90px; }
}

/* very wide screens: no carousel, just the two cards side by side */
@media (min-width: 1720px) {
    .pcar { width: min(100vw - 48px, 2100px); }
    .pcar-btn { display: none; }
    .pcar-loop {
        display: grid;
        grid-template-columns: 1fr 1fr;
        transform: none !important;
        transition: none !important;
    }
    .pcar-slidewrap:first-child,
    .pcar-slidewrap:last-child { display: none; }
}

/* deployment options: numbered rows (matches the partner deck) */
.dep-rows {
    max-width: 860px;
    margin: 24px auto 0;
    text-align: left;
}

.dep-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 20px 0;
    border-top: 1px solid #e0e0e0;
}

.dep-row:first-child {
    border-top: 0;
}

.dep-num {
    flex: 0 0 auto;
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 30px;
    font-weight: 700;
    color: #8b0000;
    line-height: 1.1;
    min-width: 56px;
}

.dep-row h3 {
    font-size: 1.35rem;
    color: #1a1a1a;
    margin: 0 0 6px;
}

.dep-row p {
    font-size: 1.1rem;
    line-height: 1.55;
    color: #444;
    margin: 0;
}

/* hosting tiles on the platform page: larger supporting text */
.platform-page .stake-item h4 {
    font-size: 1.25rem;
}

.platform-page .stake-item p {
    font-size: 1.1rem;
    line-height: 1.55;
}

/* small caption under the software slide image */
.pslide-caption {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #666;
    margin: 10px 0 0;
}

/* bullets left, map right on wide screens; below 1281px the image stacks above (DOM order) */
@media (min-width: 1281px) {
    .pslide-media { order: 2; }
    .pslide-points { order: 1; }
}

/* stack the split earlier than the other mobile rules */
@media (max-width: 1280px) {
    .pslide-split { grid-template-columns: 1fr; gap: 20px; }
}

/* align the right-column narrative with the headline (below the eyebrow), not the eyebrow itself */
.platform-page .challenge-right {
    padding-top: 44px;
}

/* left-align section eyebrows on the platform page bands, matching What's Included */
.platform-page .use-case-approach .section-eyebrow {
    display: block;
    text-align: left;
}

/* match the wider container so band eyebrows align vertically */
.platform-page .hero-1 .container {
    max-width: 1200px !important;
    padding-left: 0;
    padding-right: 0;
}

/* uniform eyebrow-to-title spacing: the What's Included band sets the standard */
.platform-page .use-case-approach .section-title {
    margin-top: 30px;
    margin-bottom: 30px;
}

/* ---------- Platform overview diagram ---------- */
.platform-diagram-section .container {
    max-width: 1200px;
    padding-left: 0;
    padding-right: 0;
}
.platform-diagram-section .section-eyebrow {
    display: block;
    text-align: left;
}
.platform-diagram-section .section-title {
    margin-top: 30px;
    margin-bottom: 30px;
}
.platform-diagram {
    margin: 34px auto 0;
    max-width: 1150px;
}
.platform-diagram img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* taller hero image band on platform and market pages */
.industry-page .use-case-hero-image {
    height: 460px;
}
.platform-page .use-case-hero-image {
    height: 580px;
}
@media (max-width: 768px) {
    .platform-page .use-case-hero-image,
    .industry-page .use-case-hero-image {
        height: 320px;
    }
}

/* platform blurb chips: 2x2 so the fourth chip does not orphan */
@media (min-width: 769px) {
    .platform-page .use-case-challenge .stakes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Platform overview diagram (CSS rendition) ---------- */
.pdiag {
    --pd-red: #c8102e;
    --pd-ink: #1a1a1a;
    --pd-muted: #555;
    --pd-border: #e0e0e0;
    --pd-surface: #fafafa;
    margin: 30px auto 0;
    max-width: 1560px;
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: 12px;
    overflow: hidden;
    text-align: left;
}
.pdiag-tagline {
    text-align: center;
    padding: 30px 20px 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--pd-red);
}
.pdiag-tagline span { color: var(--pd-ink); padding: 0 10px; font-weight: 400; }

.pdiag-sources {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
    padding: 28px 34px 0;
}
.pdiag-src { text-align: center; position: relative; padding-bottom: 22px; }
.pdiag-tile {
    border: 1px solid var(--pd-border);
    border-radius: 10px;
    background: var(--pd-surface);
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pdiag-tile i { font-size: 34px; color: var(--pd-ink); }
.pdiag-src h3 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 10px 0 0;
    line-height: 1.25;
    color: var(--pd-ink);
}
.pdiag-src::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2px;
    height: 22px;
    background: var(--pd-red);
    transform: translateX(-50%);
}

.pdiag-bus { margin: 0 34px; position: relative; height: 46px; }
.pdiag-bus .pdiag-rail { position: absolute; top: 0; left: calc((100% - 98px) / 16 - 1px); right: calc((100% - 98px) / 16 - 1px); height: 2px; background: var(--pd-red); }
.pdiag-bus .pdiag-drop { position: absolute; top: 0; left: 50%; width: 2px; height: 36px; background: var(--pd-red); transform: translateX(-1px); }
.pdiag-bus .pdiag-tip {
    position: absolute; top: 36px; left: 50%; transform: translateX(-8px);
    border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid var(--pd-red);
}

.pdiag-core-row {
    display: grid;
    grid-template-columns: 200px 1fr 260px;
    gap: 26px;
    align-items: center;
    padding: 0 34px;
}
.pdiag-side { justify-self: center; }
@media (min-width: 1200px) {
    .pdiag-side { align-self: center; min-height: 220px; }
}
.pdiag-side h4 {
    font-size: 0.98rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    margin: 0 0 16px; color: var(--pd-ink);
}
.pdiag-side h4 i { margin-right: 6px; }
.pdiag-side ul { list-style: none; margin: 0; padding: 0 0 0 14px; }
.pdiag-side ul li { padding: 3px 0; color: var(--pd-muted); font-size: 0.92rem; display: flex; align-items: flex-start; gap: 8px; }
.pdiag-side ul li i { color: var(--pd-red); width: 22px; text-align: center; flex: 0 0 22px; margin-top: 3px; }
.pdiag-side-note { margin: 8px 0 0 14px; font-size: 0.8rem; font-style: italic; color: #8a8a8a; }
.pdiag-core {
    border: 2px solid var(--pd-ink);
    border-radius: 14px;
    padding: 22px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.10);
    background: #fff;
}
.pdiag-core img { height: 54px; width: auto; }
.pdiag-core-divider { width: 2px; height: 58px; background: var(--pd-red); }
.pdiag-core-txt h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.03em; margin: 0; color: var(--pd-ink); }
.pdiag-core-txt p { font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; color: var(--pd-red); margin: 4px 0 0; }

.pdiag-fan { margin: 0 34px; position: relative; height: 46px; }
.pdiag-fan .pdiag-drop { position: absolute; top: 0; left: 50%; width: 2px; height: 22px; background: var(--pd-red); transform: translateX(-50%); }
.pdiag-fan-rail { position: absolute; top: 22px; left: calc((100% - 70px) / 12 - 1px); right: calc((100% - 70px) / 12 - 1px); height: 2px; background: var(--pd-red); }
.pdiag-tine { position: absolute; top: 22px; width: 2px; height: 16px; background: var(--pd-red); transform: translateX(-1px); }
.pdiag-fan-tip {
    position: absolute; top: 38px; transform: translateX(-6px);
    border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--pd-red);
}
.pdiag-fan-center-tip { display: none; }

.pdiag-caps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    padding: 4px 34px 34px;
}
.pdiag-cap {
    border: 1px solid var(--pd-border);
    border-radius: 10px;
    background: var(--pd-surface);
    padding: 18px 14px;
    text-align: center;
}
.pdiag-cap i { font-size: 26px; color: var(--pd-red); }
.pdiag-cap h3 {
    font-size: 0.82rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
    margin: 12px 0 8px; line-height: 1.3; color: var(--pd-ink);
}
.pdiag-cap p { font-size: 0.82rem; color: var(--pd-muted); line-height: 1.45; margin: 0; }

.pdiag-band { background: #000; color: #fff; display: grid; grid-template-columns: repeat(4, 1fr); }
.pdiag-cell { padding: 22px 24px; display: flex; gap: 15px; align-items: flex-start; }
.pdiag-cell + .pdiag-cell { border-left: 1px solid #333; }
.pdiag-cell i { font-size: 26px; color: #ffd700; margin-top: 3px; }
.pdiag-cell h3 { font-size: 0.88rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; margin: 0; color: #fff; }
.pdiag-cell p { font-size: 0.82rem; color: #cfcfcf; margin: 6px 0 0; line-height: 1.4; }

/* responsive: below 1200px the connector geometry no longer lines up, so hide the lines and stack */
@media (max-width: 1199px) {
    .pdiag-sources { grid-template-columns: repeat(3, 1fr); padding: 24px 22px 0; }
    .pdiag-src { padding-bottom: 0; }
    .pdiag-src::after { display: none; }
    /* keep a single center arrow into the card, and one out of it */
    .pdiag-bus, .pdiag-fan { height: 44px; margin-top: 10px; }
    .pdiag-bus .pdiag-rail, .pdiag-fan-rail, .pdiag-tine, .pdiag-fan .pdiag-fan-tip { display: none; }
    .pdiag-fan-center-tip { display: block; position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
        border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 10px solid var(--pd-red); }
    .pdiag-fan .pdiag-drop { height: 30px; }
    .pdiag-core-row { grid-template-columns: 1fr 1fr; gap: 18px 64px; padding: 0 22px; }
    .pdiag-core { order: 1; grid-column: 1 / -1; }
    .pdiag-hosts { order: 2; justify-self: center; }
    .pdiag-integ { order: 3; justify-self: center; }
    .pdiag-caps { grid-template-columns: repeat(3, 1fr); padding: 0 22px 26px; }
    .pdiag-band { grid-template-columns: repeat(2, 1fr); }
    .pdiag-cell + .pdiag-cell { border-left: none; }
    .pdiag-cell:nth-child(even) { border-left: 1px solid #333; }
    .pdiag-cell:nth-child(n+3) { border-top: 1px solid #333; }
}
@media (max-width: 640px) {
    .pdiag-sources { grid-template-columns: repeat(2, 1fr); }
    .pdiag-core { flex-direction: column; gap: 12px; padding: 20px; }
    .pdiag-core-divider { width: 58px; height: 2px; }
    .pdiag-core-txt { text-align: center; }
    .pdiag-hosts { justify-self: center; }
    .pdiag-integ { justify-self: center; }
    .pdiag-caps { grid-template-columns: 1fr; }
    .pdiag-band { grid-template-columns: 1fr; }
    .pdiag-cell:nth-child(even) { border-left: none; }
    .pdiag-cell + .pdiag-cell { border-top: 1px solid #333; }
}

/* ---------- monitor illustration inside the platform card ---------- */
.pdiag-core { flex-wrap: wrap; }
.pdiag-screen { display: flex; flex-direction: column; align-items: center; margin-left: 10px; }
.pdiag-screen-frame {
    background: #10151b;
    border-radius: 8px;
    padding: 7px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.pdiag-screen-ui {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 5px;
    width: 264px;
    height: 132px;
    background: #10151b;
    overflow: hidden;
    border-radius: 3px;
}
.pdiag-map { width: 100%; height: 100%; border-radius: 3px; display: block; }
.pdiag-dash { display: grid; grid-template-rows: 1fr 1fr 1.2fr; gap: 5px; min-height: 0; }
.pdiag-dash-card { background: #232e3a; border-radius: 4px; padding: 5px 6px; display: flex; align-items: center; min-height: 0; overflow: hidden; }
.pdiag-bars { display: flex; align-items: flex-end; gap: 4px; width: 100%; height: 100%; }
.pdiag-bars i { flex: 1; background: #c8102e; border-radius: 1px 1px 0 0; }
.pdiag-bars i:nth-child(2), .pdiag-bars i:nth-child(4) { background: #ffd700; }
.pdiag-spark { width: 100%; height: 100%; }
.pdiag-alerts { flex-direction: column; justify-content: space-evenly; align-items: stretch; gap: 4px; }
.pdiag-alerts span { display: flex; align-items: center; gap: 5px; }
.pdiag-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px; }
.pdiag-alerts em { display: block; height: 5px; background: #3b4a5a; border-radius: 3px; }
.pdiag-screen-neck { width: 26px; height: 12px; background: #10151b; }
.pdiag-screen-base { width: 84px; height: 7px; background: #10151b; border-radius: 3px; }
.pdiag-ping { animation: pdiag-ping 2.2s ease-out infinite; transform-origin: 128px 52px; }
@keyframes pdiag-ping {
    0% { transform: scale(0.55); opacity: 0.9; }
    70% { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .pdiag-ping { animation: none; opacity: 0.5; }
}
@media (max-width: 640px) {
    .pdiag-screen { margin-left: 0; }
}

.pdiag .nowrap { white-space: nowrap; }