/* Cybex Retail AI — product-facing visual system
   Keeps The Cybex Quarterly editorial styling intact while aligning the
   platform and solution pages with the enterprise solution overview deck. */

body.platform-page {
    --cx-teal: #008c95;
    --cx-teal-dark: #006a73;
    --cx-navy: #0b2239;
    --cx-navy-2: #143650;
    --cx-coral: #f37d68;
    --cx-sky: #e9f5f7;
    --cx-mint: #e7f6f2;
    --cx-line: #d7e3e7;
    --cx-copy: #4f6475;
    --brand: var(--cx-teal);
    --brand-ink: var(--cx-teal-dark);
    --signature: var(--cx-teal);
    --signature-2: var(--cx-teal-dark);
    background: #fff;
}

body.platform-page::before {
    background-image:
        radial-gradient(circle at 88% 4%, rgba(0, 140, 149, 0.055), transparent 34%),
        radial-gradient(circle at 8% 82%, rgba(20, 54, 80, 0.035), transparent 32%);
}

body.platform-page h1,
body.platform-page h2,
body.platform-page h3,
body.platform-page h4,
body.platform-page h5,
body.platform-page h6 {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--cx-navy);
    letter-spacing: -0.025em;
}

body.platform-page .masthead {
    border-bottom-color: rgba(11, 34, 57, 0.12);
    background: rgba(255, 255, 255, 0.94);
}

body.platform-page .masthead-brand {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-weight: 700;
    color: var(--cx-navy);
    align-items: center;
}

body.platform-page .masthead-brand .mark {
    background: var(--cx-teal);
    border-radius: 0;
    padding: 7px 12px;
}

body.platform-page .masthead-nav a.current,
body.platform-page .masthead-nav a:hover {
    border-bottom-color: var(--cx-teal);
}

body.platform-page .masthead-nav .nav-cta {
    color: #fff;
    background: var(--cx-navy);
    border: 1px solid var(--cx-navy);
    padding: 9px 14px;
    margin: 0;
}

body.platform-page .masthead-nav .nav-cta:hover {
    color: #fff;
    background: var(--cx-teal-dark);
    border-color: var(--cx-teal-dark);
}

.platform-shell {
    width: min(1480px, calc(100% - 72px));
    margin: 0 auto;
}

.platform-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    font-family: 'IBM Plex Mono', monospace;
    /* Matches the 0.9rem card-label norm so the section kicker is never
       smaller than the .module-no / .step-no labels it introduces. Keeps its
       wider 0.12em tracking — that is what reads as a kicker rather than a
       card label at the same size. */
    font-size: 0.9rem;
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cx-teal);
}

.platform-eyebrow::before {
    content: '';
    width: 62px;
    height: 4px;
    background: var(--cx-teal);
}

.platform-hero {
    overflow: hidden;
    border-bottom: 1px solid var(--cx-line);
    background:
        linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.98) 43%, rgba(255,255,255,0.72) 62%, rgba(255,255,255,0) 78%),
        linear-gradient(180deg, #fff, #f8fbfc);
}

.platform-hero-grid {
    min-height: 650px;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(560px, 1.08fr);
    align-items: stretch;
}

.platform-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 76px 42px 72px 0;
}

.platform-hero h1 {
    max-width: 720px;
    margin: 0 0 24px;
    font-size: clamp(3.2rem, 5vw, 5.8rem);
    line-height: 0.98;
    font-weight: 700;
}

.platform-hero .hero-copy {
    max-width: 720px;
    margin: 0;
    font-size: clamp(1.05rem, 1.45vw, 1.28rem);
    line-height: 1.6;
    color: var(--cx-copy);
}

.platform-hero-media {
    position: relative;
    min-height: 650px;
    margin-right: calc((100vw - min(1480px, calc(100vw - 72px))) / -2);
}

.platform-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% center;
}

.platform-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Tightened from transparent 42% (2026-08-14): the wide fade left a broad
       white wash between the copy column and the photo at large viewports,
       which read as broken alignment. 28% lets the image carry further left
       while still keeping the text edge clean. */
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.66) 10%, transparent 28%);
    pointer-events: none;
}

/* ============================================================================
   Secondary-page hero (Insights / Platform / Consulting).
   Mirrors the home page's overlapping treatment — copy on a white field, photo
   bleeding to the right viewport edge behind a left-to-right fade — but keeps
   each page's own type scale rather than the home page's larger display sizes.
   These sit inside .shell (1600px, 36px padding) rather than .platform-shell
   (1480px, no padding), so the bleed maths differs from .platform-hero-media.
   ============================================================================ */
.page-hero {
    overflow: hidden;
    border-bottom: 1px solid var(--cx-line);
    background:
        linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.98) 43%, rgba(255,255,255,0.72) 62%, rgba(255,255,255,0) 78%),
        linear-gradient(180deg, #fff, #f8fbfc);
}

.page-hero-grid {
    min-height: 470px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(500px, 1.05fr);
    align-items: stretch;
}

.page-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 42px 52px 0;
}
.page-hero-copy > :last-child { margin-bottom: 0; }

/* These heroes previously carried .index-hero / .article-hero, which supplied
   the copy treatment. Renaming the section to .page-hero drops those, so the
   pieces that were doing real work are restated here — most importantly the
   dek, which otherwise falls back to the base serif italic. */
.page-hero h1 {
    max-width: 20ch;
}

.page-hero .dek {
    font-family: 'IBM Plex Sans', sans-serif;
    font-style: normal;
    font-weight: 300;
    color: var(--ink-2);
    max-width: 54ch;
    margin-top: var(--s-5);
    line-height: 1.55;
}

.page-hero .byline {
    margin-top: var(--s-6);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule-soft);
    display: flex;
    align-items: baseline;
    gap: var(--s-5);
    flex-wrap: wrap;
}

.page-hero-media {
    position: relative;
    min-height: 470px;
    /* Pull the photo from the shell's content edge out to the viewport edge. */
    margin-right: calc((100vw - min(calc(var(--shell) - 2 * var(--s-7)), calc(100vw - 2 * var(--s-7)))) / -2);
}

.page-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Right-anchored, unlike the home hero's 58%: these three images carry
       their subject in the right ~60% with a built-in white fade on the left,
       so centring the crop lands on the blank half. */
    object-position: 88% center;
}

.page-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Shorter than the home hero's fade — the artwork already fades itself, so
       a long overlay washes out the subject as well as the margin. */
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0.55) 6%, transparent 20%);
    pointer-events: none;
}

/* The strip runs out to the media's left edge rather than the home hero's 8%
   inset, so it reads as a band across the photo instead of a floating tag. */
.page-hero-media .hero-ribbon { left: 0; }

@media (max-width: 1120px) {
    /* Stack: the copy needs the full measure, so the photo becomes a band and
       the fade flips from left-edge to top-edge. */
    .page-hero-grid { grid-template-columns: 1fr; min-height: 0; }
    .page-hero-copy { padding: 48px 0 26px; }
    .page-hero-media { min-height: 320px; margin-right: 0; }
    .page-hero-media::after { background: linear-gradient(180deg, #fff 0%, transparent 24%); }
}

@media (max-width: 760px) {
    .page-hero-media { min-height: 230px; }
    .page-hero-media img { object-position: 62% center; }
    .page-hero-media .hero-ribbon { left: 0; bottom: 0; font-size: 0.76rem; padding: 10px 14px; }
}

.hero-ribbon {
    position: absolute;
    z-index: 2;
    left: 8%;
    bottom: 42px;
    padding: 15px 24px;
    color: #fff;
    background: var(--cx-navy);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.platform-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.platform-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 20px;
    border: 1px solid var(--cx-navy);
    border-radius: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.platform-btn.primary { background: var(--cx-navy); color: #fff; }
.platform-btn.primary:hover { background: var(--cx-teal-dark); border-color: var(--cx-teal-dark); color: #fff; }
.platform-btn.secondary { background: #fff; color: var(--cx-navy); }
.platform-btn.secondary:hover { background: var(--cx-sky); color: var(--cx-navy); }

.hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 28px;
    color: var(--cx-copy);
    font-size: 0.88rem;
}

.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof span::before { content: ''; width: 7px; height: 7px; background: var(--cx-teal); }

.platform-section { padding: 84px 0; }
.platform-section.tinted { background: #f5f9fa; border-block: 1px solid var(--cx-line); }
.platform-section.dark { background: var(--cx-navy); color: #dce8ee; }
.platform-section.dark h2,
.platform-section.dark h3,
.platform-section.dark h4 { color: #fff; }

.platform-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.65fr);
    gap: 56px;
    align-items: end;
    margin-bottom: 40px;
}

.platform-section-heading h2 {
    margin: 0;
    font-size: clamp(2.2rem, 3.8vw, 4.1rem);
    line-height: 1.04;
    font-weight: 700;
}

.platform-section-heading p {
    margin: 0;
    color: var(--cx-copy);
    font-size: 1.04rem;
    line-height: 1.65;
}

.platform-section.dark .platform-section-heading p { color: #b8cbd5; }

.decision-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid var(--cx-line);
    background: #fff;
}

.decision-step {
    min-height: 190px;
    padding: 24px;
    border-right: 1px solid var(--cx-line);
    border-top: 5px solid var(--step-color, var(--cx-teal));
}
.decision-step:last-child { border-right: 0; }
.decision-step .step-no {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    color: var(--step-color, var(--cx-teal));
    letter-spacing: 0.06em;
}
.decision-step h3 { margin: 30px 0 10px; font-size: 1.18rem; font-weight: 700; }
.decision-step p { margin: 0; font-size: 0.89rem; line-height: 1.5; color: var(--cx-copy); }

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--cx-line);
    border-left: 1px solid var(--cx-line);
}

.module-card {
    min-height: 244px;
    padding: 28px;
    color: inherit;
    background: #fff;
    border-right: 1px solid var(--cx-line);
    border-bottom: 1px solid var(--cx-line);
    border-top: 4px solid var(--module-color, var(--cx-teal));
}
.module-card:hover { color: inherit; background: #f7fbfb; }
.module-card .module-no {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    /* Tracking trimmed from 0.11em to keep the longest label ("08 · RETAIL BI
       & DATA WAREHOUSE") on one line now that the type is larger. */
    letter-spacing: 0.06em;
    color: var(--module-color, var(--cx-teal));
}
.module-card h3 { margin: 22px 0 12px; font-size: 1.35rem; line-height: 1.15; font-weight: 700; }
.module-card p { margin: 0; color: var(--cx-copy); font-size: 0.92rem; line-height: 1.55; }
.module-card .module-link { display: block; margin-top: 20px; color: var(--cx-teal-dark); font-weight: 600; font-size: 0.82rem; }

.data-hub-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(560px, 1.22fr);
    gap: 56px;
    align-items: center;
}
.data-hub-grid h2 { margin: 0 0 22px; font-size: clamp(2.3rem, 3.8vw, 4rem); line-height: 1.04; font-weight: 700; }
.data-hub-grid p { color: var(--cx-copy); }
.data-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--cx-line);
    background: #fff;
}
.data-flow-item { position: relative; min-height: 210px; padding: 24px 20px; border-right: 1px solid var(--cx-line); }
.data-flow-item:last-child { border-right: 0; }
.data-flow-item:not(:last-child)::after {
    content: '→';
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -15px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--cx-teal);
    font-weight: 700;
}
/* Sized below the 0.9rem card-label norm on purpose: these sit in the narrow
   right-hand column of .data-hub-grid, where 0.9rem wraps "Retail data
   platform" onto a second line even at 1920. 0.82rem with tighter tracking is
   the largest that still matches the original single-line behaviour. */
.data-flow-item .flow-label { font-family: 'IBM Plex Mono', monospace; color: var(--cx-teal); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.data-flow-item h3 { margin: 28px 0 12px; font-size: 1.05rem; font-weight: 700; }
.data-flow-item p { margin: 0; font-size: 0.83rem; line-height: 1.55; }

.ai-loop {
    display: grid;
    grid-template-columns: repeat(5, 1fr) 1.15fr;
    border: 1px solid rgba(255,255,255,0.18);
}
.ai-stage { min-height: 170px; padding: 24px 20px; border-right: 1px solid rgba(255,255,255,0.16); }
.ai-stage:last-child { border-right: 0; background: rgba(0,140,149,0.2); }
.ai-stage .stage-label { color: #6fe0dc; font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; letter-spacing: 0.06em; }
.ai-stage h3 { margin: 32px 0 8px; font-size: 1.05rem; }
.ai-stage p { margin: 0; color: #b8cbd5; font-size: 0.84rem; line-height: 1.5; }

.proof-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: start;
}
.proof-grid h2 { margin: 0 0 20px; font-size: clamp(2.3rem, 3.8vw, 4rem); line-height: 1.04; font-weight: 700; }
.proof-grid p { color: var(--cx-copy); }
.experience-list { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--cx-line); border-left: 1px solid var(--cx-line); }
.experience-list div { padding: 22px; border-right: 1px solid var(--cx-line); border-bottom: 1px solid var(--cx-line); }
.experience-list strong { display: block; color: var(--cx-navy); }
.experience-list span { color: var(--cx-copy); font-size: 0.84rem; }
.proof-stats { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--cx-line); }
.proof-stat { padding: 28px; border-right: 1px solid var(--cx-line); border-bottom: 1px solid var(--cx-line); }
.proof-stat:nth-child(2n) { border-right: 0; }
.proof-stat:nth-last-child(-n+2) { border-bottom: 0; }
.proof-stat strong { display: block; font-size: 2rem; color: var(--cx-teal-dark); }
.proof-stat span { display: block; margin-top: 6px; color: var(--cx-copy); font-size: 0.86rem; }

.deploy-options { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--cx-line); border-left: 1px solid var(--cx-line); }
.deploy-option { min-height: 190px; padding: 26px; background: #fff; border-right: 1px solid var(--cx-line); border-bottom: 1px solid var(--cx-line); }
.deploy-option h3 { margin: 0 0 12px; font-size: 1.18rem; font-weight: 700; }
.deploy-option p { margin: 0; color: var(--cx-copy); font-size: 0.9rem; }

.quarterly-feature {
    display: grid;
    grid-template-columns: 1fr 0.55fr;
    border: 1px solid var(--cx-line);
    background: #fff;
}
.quarterly-copy { padding: 42px; }
.quarterly-copy h2 { margin: 0 0 18px; font-family: 'IBM Plex Serif', Georgia, serif !important; font-size: clamp(2rem, 3vw, 3.2rem); font-weight: 500; }
.quarterly-copy p { color: var(--cx-copy); }
.quarterly-mark { display: grid; place-items: center; min-height: 330px; color: #fff; background: linear-gradient(145deg, var(--cx-teal), var(--cx-navy)); text-align: center; }
.quarterly-mark strong { display: block; font-family: 'IBM Plex Serif', Georgia, serif; font-size: 6rem; font-weight: 400; line-height: 1; }
.quarterly-mark span { display: block; margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; }

.assessment-section { background: var(--cx-navy); color: #fff; padding: 80px 0; }
.assessment-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.assessment-section h2 { margin: 0 0 18px; color: #fff !important; font-size: clamp(2.3rem, 3.7vw, 3.8rem); line-height: 1.05; font-weight: 700; }
.assessment-section p { color: #b8cbd5; }
.assessment-section .contact-form {
    padding: 30px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 0;
    background: rgba(255,255,255,0.045);
}
.assessment-section .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.assessment-section input,
.assessment-section textarea {
    display: block;
    width: 100%;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,0.24);
    border-radius: 0;
    color: var(--cx-navy);
    background: #fff;
}
.assessment-section textarea { min-height: 118px; resize: vertical; }
.assessment-section input:focus,
.assessment-section textarea:focus {
    outline: 3px solid rgba(111,224,220,0.28);
    border-color: #6fe0dc;
}
.assessment-section .contact-form button {
    margin-top: 14px;
    padding: 13px 20px;
    border: 0;
    border-radius: 0;
    background: var(--cx-coral);
    color: var(--cx-navy);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.assessment-section .contact-form button:hover { background: #ff9a86; }
.assessment-section .contact-form button:disabled { opacity: 0.6; cursor: not-allowed; }
.assessment-section .form-status { min-height: 1.35em; margin-top: 12px; font-size: 0.88rem; }
.assessment-section .form-status.success { color: #6ee7b7; }
.assessment-section .form-status.error { color: #fca5a5; }
.assessment-section .form-fine-print { margin: 10px 0 0; color: #8ea6b4; font-size: 0.76rem; }

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

.platform-fineprint { margin-top: 18px; color: var(--cx-copy); font-size: 0.8rem; }

body.platform-page .pillar-card,
body.platform-page .featured,
body.platform-page .featured-visual,
body.platform-page .article-card,
body.platform-page .cta-banner,
body.platform-page .contact-form {
    border-radius: 0;
}

/* The generic heading colour above outranks .cta-banner h2, which would
   paint the CTA title navy-on-navy. Take the paper heading back.
   (Banner width is handled by .cta-banner / .cta-narrow in the base sheet.) */
body.platform-page .cta-banner h2 {
    color: var(--paper);
}

@media (max-width: 1120px) {
    .platform-hero-grid { grid-template-columns: 1fr; }
    .platform-hero-copy { padding: 64px 0 38px; }
    .platform-hero-media { min-height: 470px; margin-right: 0; }
    .platform-hero-media::after { background: linear-gradient(180deg, #fff 0%, transparent 22%); }
    .decision-strip { grid-template-columns: repeat(2, 1fr); }
    .decision-step { border-bottom: 1px solid var(--cx-line); }
    .module-grid { grid-template-columns: repeat(2, 1fr); }
    .data-hub-grid { grid-template-columns: 1fr; }
    .ai-loop { grid-template-columns: repeat(3, 1fr); }
    .ai-stage { border-bottom: 1px solid rgba(255,255,255,0.16); }
}

@media (max-width: 760px) {
    .platform-shell { width: min(100% - 36px, 1480px); }
    body.platform-page .masthead-inner { padding-inline: 18px; }
    body.platform-page .masthead-brand > span:last-child { display: none; }
    body.platform-page .masthead-nav .nav-cta { display: none; }
    .platform-hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
    .platform-hero-media { min-height: 360px; }
    .platform-section { padding: 64px 0; }
    .platform-section-heading,
    .proof-grid,
    .assessment-grid,
    .quarterly-feature { grid-template-columns: 1fr; gap: 30px; }
    .decision-strip,
    .module-grid,
    .data-flow,
    .ai-loop,
    .deploy-options { grid-template-columns: 1fr; }
    .decision-step,
    .data-flow-item,
    .ai-stage { border-right: 0; }
    .data-flow-item:not(:last-child)::after { content: '↓'; top: auto; bottom: -15px; right: 50%; transform: translateX(50%); }
    .quarterly-copy { padding: 28px; }
    .quarterly-mark { min-height: 250px; }
    .experience-list { grid-template-columns: 1fr; }
    .assessment-section .form-row { grid-template-columns: 1fr; }
}

/* Product-page heading scale */
body.platform-page h1 {
    font-size: 48px !important;
    font-weight: 400 !important;
}

body.platform-page h2 {
    font-size: 48px !important;
    font-weight: 400 !important;
}

body.platform-page.home-page .platform-hero h1 {
    font-size: 60px !important;
}

body.platform-page h3,
body.platform-page h4,
body.platform-page h5,
body.platform-page h6 {
    font-weight: 400 !important;
}

/* ============================================================================
   Compact mobile masthead (2026-08-14)
   Previously at <=720px the blog stylesheet stacked .masthead-inner into a
   column (184px tall, sticky) and at <=760px this file hid the nav CTA and the
   brand wordmark - the page's primary conversion action did not exist on
   phones. The rules below keep a single-row bar with the CTA always visible
   and move the links behind a hamburger.

   Everything is gated on :has(.masthead-toggle) so pages whose masthead has not
   yet received the toggle button keep the old stacked behaviour instead of
   losing their navigation. To adopt on another page, paste the button markup
   from index.html after .masthead-brand.
   ============================================================================ */

.masthead-toggle { display: none; }

/* 820px, not 760px: the seven-item nav needs 597px plus the brand, so between
   761px and ~795px it outran the bar and pushed the page into a horizontal
   scroll. The hamburger now takes over before that band. 820 rather than 800
   for clearance — at 801px the full nav cleared by only 3px. */
@media (max-width: 820px) {
    body.platform-page .masthead:has(.masthead-toggle) .masthead-inner {
        flex-direction: row;            /* undo the <=720px column stack */
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        padding-block: 10px;
    }

    body.platform-page .masthead:has(.masthead-toggle) .masthead-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 40px;
        height: 36px;
        padding: 8px 9px;
        margin-left: auto;
        background: transparent;
        border: 1px solid rgba(11, 34, 57, 0.25);
        border-radius: 4px;
        cursor: pointer;
    }
    body.platform-page .masthead:has(.masthead-toggle) .masthead-toggle span {
        display: block;
        height: 2px;
        background: var(--cx-navy);
        border-radius: 1px;
    }

    /* The nav itself stays rendered (the CTA lives inside it and must remain
       on the bar); only the plain LINKS hide until the burger opens them.
       Hiding the whole nav would take the CTA down with it - display:none on a
       parent cannot be overridden from a child. */
    body.platform-page .masthead:has(.masthead-toggle) .masthead-nav {
        display: contents;               /* children participate in the bar row */
    }
    body.platform-page .masthead:has(.masthead-toggle) .masthead-nav a:not(.nav-cta) {
        display: none;
        flex-basis: 100%;
        padding: 10px 0;
        border-bottom: 1px solid rgba(11, 34, 57, 0.08);
    }
    body.platform-page .masthead:has(.masthead-toggle).nav-open .masthead-nav a:not(.nav-cta) {
        display: block;
    }

    /* CTA stays on the compact bar, between the brand and the burger. */
    body.platform-page .masthead:has(.masthead-toggle) .masthead-nav .nav-cta {
        display: inline-block;
        margin-left: auto;
        order: 5;
        padding: 8px 12px;
        font-size: 0.72rem;
        white-space: nowrap;
    }
    body.platform-page .masthead:has(.masthead-toggle) .masthead-toggle { order: 6; margin-left: 0; }
    /* Open links render below the bar, in DOM order after the toggle. */
    body.platform-page .masthead:has(.masthead-toggle).nav-open .masthead-nav a:not(.nav-cta) { order: 10; }
}