:root {
    --product-surface: #f4f8f9;
    --product-soft-teal: #e9f5f4;
    --product-orange: #d89436;
    --product-display-size: clamp(38px, 3.45vw, 52px);
    --product-heading-size: clamp(28px, 2.55vw, 38px);
    --product-copy-size: 16px;
    --product-small-size: 14px;
    --product-caption-size: 12px;
}

html { scroll-padding-top: 105px; }

.product-hero,
.product-flow,
.product-evidence,
.product-differentiators,
.product-integration,
.product-portal-proof,
.product-roles,
.product-final-cta {
    font-kerning: normal;
}
.product-hero h1,
.product-section-head h2,
.product-evidence-heading h2,
.product-differentiator-card h3,
.product-workflow-proof h3,
.product-portal-proof-copy h2,
.product-role-card h3,
.product-final-cta h2 {
    letter-spacing: normal;
    text-wrap: balance;
}
.product-hero p,
.product-flow p,
.product-evidence p,
.product-differentiators p,
.product-integration b,
.product-portal-proof p,
.product-portal-proof li,
.product-roles p,
.product-final-cta p,
.product-hero figcaption,
.product-evidence figcaption,
.product-differentiators figcaption,
.product-portal-proof figcaption {
    text-wrap: pretty;
}

.product-hero {
    position: relative;
    padding: 138px 0 76px;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 18%, rgba(18, 214, 210, .13), transparent 28%),
        linear-gradient(180deg, #f8fbfc 0%, #edf5f6 100%);
}
.product-hero:after {
    content: "";
    position: absolute;
    inset: auto -12% -280px auto;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(47, 145, 150, .13);
    border-radius: 50%;
    box-shadow: 0 0 0 80px rgba(47, 145, 150, .025), 0 0 0 160px rgba(47, 145, 150, .018);
    pointer-events: none;
}
.product-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(540px, 1.04fr);
    align-items: center;
    gap: 48px;
}
.product-hero-copy { max-width: 580px; }
.product-kicker,
.product-section-head > span,
.product-evidence-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal-dark);
    font-size: 13px;
    font-weight: 700;
}
.product-kicker:before,
.product-section-head > span:before,
.product-evidence-eyebrow:before {
    content: "";
    width: 25px;
    height: 2px;
    background: var(--teal);
    border-radius: 2px;
}
.product-hero h1 {
    max-width: 580px;
    margin: 15px 0 20px;
    color: var(--navy-900);
    font-size: var(--product-display-size);
    line-height: 1.5;
    font-weight: 900;
}
.product-hero h1 span { display: block; color: var(--teal); }
.product-hero-copy > p {
    max-width: 570px;
    margin: 0;
    color: #536c80;
    font-size: var(--product-copy-size);
    line-height: 2;
}
.product-hero-actions { display: flex; gap: 12px; margin-top: 30px; }
.product-proof-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    color: #597082;
    font-size: 13px;
}
.product-proof-note > span {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    color: #fff;
    background: var(--teal);
    border-radius: 9px;
    font-weight: 900;
}
.product-proof-note p { margin: 0; }
.product-proof-note strong { color: var(--navy); }
.product-hero-shot {
    position: relative;
    margin: 0;
    padding: 11px;
    background: #fff;
    border: 1px solid rgba(15, 48, 91, .11);
    border-radius: 25px;
    box-shadow: 0 28px 70px rgba(15, 48, 91, .2);
    transform: perspective(1200px) rotateY(2.5deg);
}
.product-hero-shot:before {
    content: "";
    position: absolute;
    inset: -16px 34px auto;
    z-index: -1;
    height: 38px;
    background: rgba(47, 145, 150, .2);
    border-radius: 50%;
    filter: blur(22px);
}
.product-hero-shot figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 9px 2px;
    color: #607587;
    font-size: var(--product-caption-size);
}
.product-hero-shot figcaption span { color: var(--teal-dark); font-weight: 700; }
.product-screenshot-button {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    background: #eaf1f3;
    border: 0;
    border-radius: 17px;
    cursor: zoom-in;
}
.product-screenshot-button img { display: block; width: 100%; height: auto; }
.product-screenshot-button:focus-visible { outline: 3px solid rgba(18, 214, 210, .58); outline-offset: 3px; }
.product-screenshot-zoom {
    position: absolute;
    left: 13px;
    bottom: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 11px;
    color: #fff;
    background: rgba(9, 35, 63, .86);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(5px);
    transition: .22s ease;
}
.product-screenshot-zoom svg { width: 15px; height: 15px; }
.product-screenshot-button:hover .product-screenshot-zoom,
.product-screenshot-button:focus-visible .product-screenshot-zoom { opacity: 1; transform: none; }

.product-flow { padding: 90px 0 70px; background: #fff; }
.product-section-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.product-section-head > span { justify-content: center; }
.product-section-head h2 {
    margin: 12px 0 12px;
    color: var(--navy-900);
    font-size: var(--product-heading-size);
    line-height: 1.58;
}
.product-section-head p { margin: 0; color: var(--muted); font-size: var(--product-copy-size); line-height: 2; }
.product-flow-context { max-width: 880px; margin: -18px auto 34px; color: #617588; text-align: center; font-size: var(--product-small-size); line-height: 2; }
.product-flow-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}
.product-flow-steps:before {
    content: "";
    position: absolute;
    top: 33px;
    right: 7%;
    left: 7%;
    height: 1px;
    background: linear-gradient(90deg, var(--teal), rgba(47, 145, 150, .22), var(--teal));
}
.product-flow-steps a {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 135px;
    padding: 0 10px 16px;
    flex-direction: column;
    align-items: center;
    color: var(--navy);
    text-align: center;
}
.product-flow-steps a > span {
    display: grid;
    width: 66px;
    height: 66px;
    margin-bottom: 12px;
    place-items: center;
    color: #fff;
    background: linear-gradient(145deg, var(--navy), #1d5773);
    border: 7px solid #fff;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(15, 48, 91, .16);
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    transition: .22s ease;
}
.product-flow-steps a:hover > span,
.product-flow-steps a:focus-visible > span { background: var(--teal); transform: translateY(-4px); }
.product-flow-steps a:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: 15px; }
.product-flow-steps b { font-size: 14px; font-weight: 700; }
.product-flow-steps small { margin-top: 4px; color: #728698; font-size: 12px; line-height: 1.8; }

.product-evidence { padding: 100px 0; background: var(--product-surface); scroll-margin-top: 90px; }
.product-evidence:nth-of-type(even) { background: #fff; }
.product-evidence-grid {
    display: grid;
    grid-template-columns: minmax(390px, .88fr) minmax(0, 1.12fr);
    grid-template-areas:
        "heading media"
        "details media"
        "link media";
    align-items: center;
    gap: 18px 44px;
}
.product-evidence.is-reverse .product-evidence-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(390px, .88fr);
    grid-template-areas:
        "media heading"
        "media details"
        "media link";
}
.product-evidence-heading { grid-area: heading; align-self: end; }
.product-evidence-heading h2 {
    margin: 11px 0 11px;
    color: var(--navy-900);
    font-size: clamp(27px, 2.35vw, 36px);
    line-height: 1.58;
}
.product-evidence-heading p { margin: 0; color: #587083; font-size: var(--product-copy-size); line-height: 2; }
.product-evidence-media { grid-area: media; min-width: 0; }
.product-evidence-details { grid-area: details; display: grid; gap: 9px; }
.product-evidence-details article {
    position: relative;
    padding: 16px 51px 16px 16px;
    background: #fff;
    border: 1px solid #dce7e9;
    border-radius: 16px;
}
.product-evidence-details article:before {
    content: "";
    position: absolute;
    top: 17px;
    right: 18px;
    width: 21px;
    height: 21px;
    background: #dceff0;
    border: 6px solid #f1f8f8;
    border-radius: 50%;
}
.product-evidence-details article.is-outcome { background: #eaf6f2; border-color: #cce8dd; }
.product-evidence-details article.is-outcome:before { background: #25a678; border-color: #dff4eb; }
.product-evidence-details span { display: block; margin-bottom: 3px; color: var(--navy); font-size: 13px; font-weight: 700; }
.product-evidence-details p { margin: 0; color: #617588; font-size: var(--product-small-size); line-height: 1.95; }
.product-evidence-link { grid-area: link; align-self: start; }
.product-evidence-link a,
.product-workflow-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--teal-dark);
    font-size: 14px;
    font-weight: 700;
}
.product-evidence-link a:hover,
.product-evidence-link a:focus-visible,
.product-workflow-links a:hover,
.product-workflow-links a:focus-visible { color: var(--navy); }
.product-evidence-link svg { width: 17px; height: 17px; }
.product-evidence-gallery {
    padding: 10px;
    background: #fff;
    border: 1px solid rgba(15, 48, 91, .11);
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(15, 48, 91, .14);
}
.product-evidence-viewport {
    position: relative;
    aspect-ratio: 1.9 / 1;
    overflow: hidden;
    background: #e9f0f2;
    border-radius: 17px;
}
.product-evidence-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.012);
    transition: opacity .38s ease, visibility .38s ease, transform .55s ease;
}
.product-evidence-slide.is-active { z-index: 1; opacity: 1; visibility: visible; transform: none; }
.product-evidence-slide .product-screenshot-button { height: 100%; }
.product-evidence-slide img { width: 100%; height: 100%; object-fit: contain; }
.product-evidence-gallery-footer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    min-height: 70px;
    align-items: center;
    gap: 13px;
    padding: 8px 7px 0;
}
.product-evidence-gallery-footer p { margin: 0; color: #5d7283; font-size: var(--product-caption-size); line-height: 1.85; }
.product-real-badge {
    padding: 7px 9px;
    color: #167b79;
    background: #e8f5f3;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.product-gallery-controls { display: flex; align-items: center; gap: 6px; direction: ltr; }
.product-gallery-controls > button {
    display: grid;
    width: 32px;
    height: 32px;
    padding: 0;
    place-items: center;
    color: var(--navy);
    background: #fff;
    border: 1px solid #d5e1e4;
    border-radius: 9px;
    cursor: pointer;
}
.product-gallery-controls > button:hover,
.product-gallery-controls > button:focus-visible { color: #fff; background: var(--teal); border-color: var(--teal); outline: 0; }
.product-gallery-controls svg { width: 14px; height: 14px; }
.product-gallery-dots { display: flex; align-items: center; gap: 5px; }
.product-gallery-dots button {
    width: 7px;
    height: 7px;
    padding: 0;
    background: #b9c8cb;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: .2s ease;
}
.product-gallery-dots button.is-active { width: 18px; background: var(--teal); border-radius: 6px; }
.product-gallery-dots button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.product-screenshot-placeholder {
    display: flex;
    min-height: 435px;
    padding: 55px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: repeating-linear-gradient(135deg, #f7fafb, #f7fafb 12px, #f2f7f8 12px, #f2f7f8 24px);
    border: 2px dashed #b8cccf;
    border-radius: 24px;
}
.product-placeholder-icon { display: grid; width: 70px; height: 70px; place-items: center; color: var(--teal-dark); background: #e4f1f1; border-radius: 22px; }
.product-placeholder-icon svg { width: 33px; height: 33px; }
.product-screenshot-placeholder strong { margin-top: 18px; color: var(--navy); font-size: 17px; }
.product-screenshot-placeholder p { max-width: 590px; margin: 10px 0 16px; color: #617689; font-size: var(--product-small-size); line-height: 2; }
.product-screenshot-placeholder code { padding: 7px 10px; color: #355d69; background: #fff; border: 1px solid #d8e5e7; border-radius: 8px; font-size: 11px; }
.product-missing-evidence {
    margin-top: 12px;
    padding: 15px 17px;
    color: #5b7081;
    background: #fffaf2;
    border: 1px dashed #deb879;
    border-radius: 15px;
}
.product-missing-evidence > strong { display: block; margin-bottom: 8px; color: #8a5a19; font-size: 13px; }
.product-missing-evidence ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.product-missing-evidence li { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; font-size: 12px; line-height: 1.9; }
.product-missing-evidence code { flex: 0 0 auto; padding: 3px 6px; color: #6a4b22; background: #fff; border: 1px solid #edddc1; border-radius: 6px; font-size: 9px; }
.product-evidence.is-featured { color: #fff; background: linear-gradient(135deg, #09233f, #104766 58%, #277f85); }
.product-evidence.is-featured .product-evidence-heading h2 { color: #fff; }
.product-evidence.is-featured .product-evidence-heading p { color: rgba(255, 255, 255, .72); }
.product-evidence.is-featured .product-evidence-eyebrow { color: var(--cyan); }
.product-evidence.is-featured .product-evidence-details article { background: rgba(255, 255, 255, .075); border-color: rgba(255, 255, 255, .13); }
.product-evidence.is-featured .product-evidence-details article.is-outcome { background: rgba(18, 214, 210, .1); border-color: rgba(18, 214, 210, .23); }
.product-evidence.is-featured .product-evidence-details span { color: var(--cyan); }
.product-evidence.is-featured .product-evidence-details p { color: rgba(255, 255, 255, .7); }
.product-evidence.is-featured .product-evidence-link a { color: var(--cyan); }

.product-differentiators { padding: 100px 0; background: #fff; scroll-margin-top: 90px; }
.product-differentiator-evidence { max-width: 980px; margin: 0 auto 24px; padding: 9px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 18px 42px rgba(15, 48, 91, .1); }
.product-differentiator-evidence .product-screenshot-button { border-radius: 13px; }
.product-differentiator-evidence figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 7px 1px; color: #607587; font-size: var(--product-caption-size); }
.product-differentiator-evidence figcaption span { color: var(--teal-dark); font-weight: 700; }
.product-differentiator-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.product-differentiator-card {
    position: relative;
    min-height: 205px;
    padding: 25px;
    overflow: hidden;
    background: #f7fafb;
    border: 1px solid var(--line);
    border-radius: 19px;
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.product-differentiator-card:after {
    content: "";
    position: absolute;
    left: -26px;
    bottom: -35px;
    width: 90px;
    height: 90px;
    background: rgba(47, 145, 150, .08);
    border-radius: 50%;
}
.product-differentiator-card:hover,
.product-differentiator-card:focus-visible { transform: translateY(-5px); border-color: #9ccfd0; box-shadow: 0 16px 35px rgba(15, 48, 91, .11); outline: 0; }
.product-differentiator-card > span { color: var(--teal-dark); font-size: 12px; font-weight: 700; }
.product-differentiator-card h3 { margin: 10px 0 8px; color: var(--navy); font-size: 17px; line-height: 1.7; }
.product-differentiator-card p { margin: 0; color: var(--muted); font-size: var(--product-small-size); line-height: 1.95; }
.product-differentiator-card small { display: inline-flex; margin-top: 13px; color: var(--teal-dark); font-size: 12px; font-weight: 700; }
.product-workflow-proof {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 40px;
    margin-top: 20px;
    padding: 31px;
    color: #fff;
    background: linear-gradient(135deg, var(--navy-900), #174f6b 62%, #2f9196);
    border-radius: 24px;
    scroll-margin-top: 100px;
}
.product-workflow-proof > div > span { color: var(--cyan); font-size: 12px; font-weight: 700; }
.product-workflow-proof h3 { margin: 8px 0 9px; font-size: 24px; line-height: 1.6; }
.product-workflow-proof p { margin: 0; color: rgba(255, 255, 255, .75); font-size: 15px; line-height: 2; }
.product-workflow-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.product-workflow-links a { color: var(--cyan); }
.product-workflow-thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.product-workflow-thumbs button {
    padding: 5px;
    overflow: hidden;
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    cursor: zoom-in;
}
.product-workflow-thumbs button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.product-workflow-thumbs img { display: block; width: 100%; height: 160px; object-fit: cover; object-position: top; border-radius: 9px; }

.product-integration { padding: 100px 0; background: var(--product-surface); }
.product-integration-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 11px;
    max-width: 1050px;
    margin: 0 auto;
}
.product-integration-track div {
    position: relative;
    display: flex;
    min-height: 82px;
    padding: 14px;
    align-items: center;
    gap: 12px;
    color: #fff;
    background: var(--navy);
    border-radius: 17px;
}
.product-integration-track div:not(:last-child):after {
    content: "←";
    position: absolute;
    left: -17px;
    z-index: 2;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    color: var(--teal-dark);
    background: #fff;
    border: 1px solid #d8e6e8;
    border-radius: 50%;
    font-size: 11px;
}
.product-integration-track span { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; color: var(--navy); background: var(--cyan); border-radius: 10px; font: 800 10px Arial, sans-serif; }
.product-integration-track b { font-size: 14px; line-height: 1.75; }

.product-portal-proof { padding: 100px 0; background: #fff; }
.product-portal-proof-grid { display: grid; grid-template-columns: minmax(360px, .84fr) minmax(0, 1.16fr); align-items: center; gap: 48px; }
.product-portal-proof-copy h2 { margin: 11px 0 13px; color: var(--navy-900); font-size: clamp(27px, 2.35vw, 36px); line-height: 1.58; }
.product-portal-proof-copy > p { margin: 0; color: #587083; font-size: var(--product-copy-size); line-height: 2; }
.product-portal-proof-copy ul { display: grid; gap: 8px; margin: 22px 0; padding: 0; list-style: none; }
.product-portal-proof-copy li { padding: 12px 14px; color: #617588; background: var(--product-surface); border: 1px solid #dce7e9; border-radius: 13px; font-size: var(--product-small-size); line-height: 1.9; }
.product-portal-proof-copy li strong { color: var(--navy); }
.product-portal-proof-copy > a { display: inline-flex; align-items: center; gap: 8px; color: var(--teal-dark); font-size: 14px; font-weight: 700; }
.product-portal-proof-copy > a:hover,
.product-portal-proof-copy > a:focus-visible { color: var(--navy); }
.product-portal-proof-copy > a svg { width: 17px; height: 17px; }
.product-portal-proof-shot { margin: 0; padding: 10px; background: #fff; border: 1px solid rgba(15, 48, 91, .11); border-radius: 24px; box-shadow: 0 25px 60px rgba(15, 48, 91, .14); }
.product-portal-proof-shot figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 8px 2px; color: #607587; font-size: var(--product-caption-size); }
.product-portal-proof-shot figcaption span { color: var(--teal-dark); font-weight: 700; }

.product-roles { padding: 100px 0; background: #fff; }
.product-role-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.product-role-card { padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 19px; }
.product-role-card > span { display: grid; width: 37px; height: 37px; place-items: center; color: var(--teal-dark); background: var(--product-soft-teal); border-radius: 11px; font: 800 10px Arial, sans-serif; }
.product-role-card h3 { margin: 15px 0 7px; color: var(--navy); font-size: 17px; line-height: 1.7; }
.product-role-card p { margin: 0; color: var(--muted); font-size: var(--product-small-size); line-height: 1.95; }

.product-final-cta { padding-top: 10px; }
.product-final-cta .cta { grid-template-columns: 1.2fr .8fr; }
.product-final-cta .cta h2 { font-size: clamp(27px, 2.55vw, 36px); line-height: 1.58; }
.product-final-cta .cta p { font-size: 15px; line-height: 2; }
.product-cta-actions { position: relative; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; }
.product-final-cta .product-cta-secondary { color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .48); box-shadow: none; }
.product-final-cta .product-cta-secondary:hover { color: var(--navy); background: #fff; }

.product-lightbox {
    width: min(1450px, calc(100% - 38px));
    max-width: none;
    max-height: calc(100vh - 38px);
    padding: 0;
    overflow: hidden;
    color: #fff;
    background: #071c31;
    border: 1px solid rgba(255, 255, 255, .17);
    border-radius: 20px;
    box-shadow: 0 35px 100px rgba(0, 0, 0, .48);
}
.product-lightbox::backdrop { background: rgba(4, 17, 30, .82); backdrop-filter: blur(7px); }
.product-lightbox-toolbar { display: flex; min-height: 63px; padding: 10px 16px; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid rgba(255, 255, 255, .11); }
.product-lightbox-toolbar p { margin: 0; color: rgba(255, 255, 255, .78); font-size: 12px; line-height: 1.8; }
.product-lightbox-toolbar button { display: grid; width: 39px; height: 39px; flex: 0 0 auto; padding: 0; place-items: center; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .13); border-radius: 11px; cursor: pointer; font-size: 24px; }
.product-lightbox-toolbar button:hover,
.product-lightbox-toolbar button:focus-visible { background: var(--teal); outline: 0; }
.product-lightbox-body { max-height: calc(100vh - 105px); overflow: auto; }
.product-lightbox-body img { display: block; width: 100%; height: auto; background: #dce7e9; }

@media (max-width: 1180px) {
    .product-hero-grid { grid-template-columns: minmax(0, .95fr) minmax(500px, 1.05fr); gap: 34px; }
    .product-evidence-grid,
    .product-evidence.is-reverse .product-evidence-grid { gap: 16px 34px; }
    .product-differentiator-grid { grid-template-columns: repeat(3, 1fr); }
    .product-role-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 960px) {
    .product-hero { padding-top: 122px; }
    .product-hero-grid { grid-template-columns: 1fr; }
    .product-hero-copy { max-width: 760px; margin: 0 auto; text-align: center; }
    .product-hero h1 { margin-inline: auto; }
    .product-hero-copy > p { margin-inline: auto; }
    .product-hero-actions,
    .product-proof-note,
    .product-hero-copy .breadcrumb { justify-content: center; }
    .product-hero-shot { width: min(820px, 100%); margin: 0 auto; transform: none; }
    .product-evidence-grid,
    .product-evidence.is-reverse .product-evidence-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "heading"
            "media"
            "details"
            "link";
        gap: 22px;
    }
    .product-evidence-heading { max-width: 780px; }
    .product-evidence-gallery,
    .product-screenshot-placeholder { width: min(880px, 100%); margin-inline: auto; }
    .product-evidence-link { margin-top: -5px; }
    .product-workflow-proof { grid-template-columns: 1fr; }
    .product-integration-track { grid-template-columns: repeat(2, 1fr); }
    .product-portal-proof-grid { grid-template-columns: 1fr; }
    .product-portal-proof-copy { max-width: 780px; }
    .product-final-cta .cta { grid-template-columns: 1fr; }
    .product-cta-actions { justify-content: center; }
}

@media (max-width: 720px) {
    html { scroll-padding-top: 85px; }
    .product-hero { padding: 108px 0 58px; }
    .product-hero h1 { font-size: clamp(32px, 8.6vw, 42px); line-height: 1.52; }
    .product-hero-copy > p { font-size: 15px; }
    .product-hero-shot figcaption { align-items: flex-start; flex-direction: column; gap: 3px; }
    .product-flow { padding: 72px 0 55px; }
    .product-flow-steps { grid-template-columns: repeat(7, 135px); padding-bottom: 10px; }
    .product-evidence,
    .product-differentiators,
    .product-integration,
    .product-portal-proof,
    .product-roles { padding: 78px 0; }
    .product-evidence-heading h2 { font-size: 29px; }
    .product-evidence-viewport { aspect-ratio: 1.55 / 1; }
    .product-evidence-gallery-footer { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .product-screenshot-placeholder { min-height: 360px; padding: 34px 22px; }
    .product-missing-evidence li { align-items: stretch; flex-direction: column; gap: 4px; }
    .product-missing-evidence code { align-self: flex-start; }
    .product-differentiator-grid { grid-template-columns: repeat(2, 1fr); }
    .product-workflow-thumbs img { height: 130px; }
    .product-integration-track { grid-template-columns: 1fr; }
    .product-integration-track div:not(:last-child):after { top: auto; right: 50%; bottom: -18px; left: auto; content: "↓"; transform: translateX(50%); }
    .product-role-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .product-hero-actions { display: grid; }
    .product-hero-actions .btn { width: 100%; }
    .product-proof-note { align-items: flex-start; text-align: right; }
    .product-section-head { margin-bottom: 31px; }
    .product-section-head h2 { font-size: 28px; }
    .product-evidence-details article { padding: 16px 48px 16px 14px; }
    .product-evidence-viewport { aspect-ratio: 1.34 / 1; }
    .product-screenshot-zoom { display: none; }
    .product-differentiator-grid,
    .product-role-grid { grid-template-columns: 1fr; }
    .product-differentiator-card { min-height: 0; }
    .product-differentiator-evidence figcaption { align-items: flex-start; flex-direction: column; gap: 3px; }
    .product-workflow-proof { padding: 25px 19px; }
    .product-workflow-thumbs { grid-template-columns: 1fr; }
    .product-workflow-thumbs img { height: 170px; }
    .product-portal-proof-shot figcaption { align-items: flex-start; flex-direction: column; gap: 3px; }
    .product-cta-actions { display: grid; width: 100%; }
    .product-cta-actions .btn { width: 100%; }
    .product-lightbox { width: calc(100% - 18px); max-height: calc(100vh - 18px); border-radius: 14px; }
    .product-lightbox-toolbar { align-items: flex-start; }
    .product-lightbox-toolbar p { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .product-evidence-slide,
    .product-screenshot-zoom,
    .product-flow-steps a > span,
    .product-differentiator-card { transition: none; }
}