/* =====================================================
   ARGUS SENTINEL — TECHNOLOGY PAGE
   Navbar, footer, .container and shared tokens come from
   general.css. Only technology-page rules live here.
   ===================================================== */

/* The shared palette lives in general.css under .pim-page.
   This page declares no tokens of its own. */
.btn {
    min-height: 46px;
    padding: 11px 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px solid transparent;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(7, 21, 37, 0.14);
}
.btn-dark {
    color: var(--text2);
    /* same gradient as .btn-primary (Explore a platform) on the home page */
    background: linear-gradient(135deg, #12BFEA, #1097b9);
    box-shadow: 0 12px 35px rgba(85, 233, 255, 0.18);
}
.btn-outline {
    color: var(--text);
    border-color: #193956;
    background: transparent;
}
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
@media (max-width: 1050px) {
    .sub-hero-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 520px) {
    .sub-hero {
        padding-top: 45px;
    }
    .sub-hero h1 {
        font-size: 42px;
    }
    .sub-hero .actions {
        flex-direction: column;
        align-items: flex-start;
    }
    .sub-hero .actions .btn {
        width: fit-content;
    }
}
.technology-hero {
    background: radial-gradient( circle at 15% 25%, rgba(22, 139, 255, 0.05), transparent 30% ), #ffffff;
}
.detection-map {
    display: grid;
    grid-template-columns: 1fr 1.25fr 1.05fr;
    align-items: center;
    overflow: hidden;
    color: #ffffff;
    background: linear-gradient( rgba(255, 255, 255, 0.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px ), radial-gradient( circle at 70% 30%, #0d385e, #06182b 67% );
    background-size: 30px 30px, 30px 30px, auto;
}
.raw-events,.model-layers {
    display: flex;
    flex-direction: column;
}
.raw-events > small,.model-layers > small {
    color: #90a4b7;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 800;
}
.raw-events > span,.model-layers > span {
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid #244a67;
    color: #aebdca;
    background: linear-gradient( 145deg, #0c2944, #091d31 );
}
.raw-events > span::after {
    content: "";
    width: 25px;
    position: absolute;
    top: 50%;
    right: -27px;
    border-top: 2px dotted var(--green);
}
.raw-events > span i {
    color: #bcd0df;
    font-size: 15px;
    font-style: normal;
}
.raw-events > span b {
    color: #ffffff;
    font-weight: 600;
}
.model-layers > span {
    display: block;
    padding-left: 14px;
}
.model-layers > span::before {
    content: "";
    width: 23px;
    position: absolute;
    top: 50%;
    left: -25px;
    border-top: 2px dotted var(--cyan);
}
.model-layers > span::after {
    content: "";
    width: 11px;
    height: 11px;
    position: absolute;
    top: 50%;
    right: -7px;
    border: 2px solid #2f9fff;
    border-radius: 50%;
    background: #0b2944;
    box-shadow: 0 0 12px #168bff;
    transform: translateY(-50%);
}
.model-layers b {
    display: block;
    color: #ffffff;
}
.decision-ring {
    display: grid;
    place-items: center;
}
.decision-ring > div {
    padding: 15px;
    position: relative;
    display: grid;
    place-content: center;
    border-radius: 50%;
    text-align: center;
    background: conic-gradient( var(--green) 0deg 85deg, var(--cyan) 85deg 165deg, #ffb31a 165deg 245deg, var(--red) 245deg 360deg );
    box-shadow: 0 0 0 11px rgba(35, 201, 128, 0.06), 0 0 0 20px rgba(22, 139, 255, 0.04);
}
.decision-ring > div::after {
    content: "";
    position: absolute;
    inset: 15px;
    border-radius: 50%;
    background: #071a2e;
}
.decision-ring b,.decision-ring span,.decision-ring i {
    position: relative;
    z-index: 1;
    display: block;
}
    .decision-ring b {
        color: #74d9f2;
        font-family: "Manrope", sans-serif;
    }
.decision-ring span {
    color: #a8b7c5;
}
.decision-ring i {
    color: #d8e4ec;
    font-size: 20px;
    font-style: normal;
}
.tech-stack {
    background: #ffffff;
}
.tech-stack h2,.technology-pipeline h2,.evidence-section h2 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    letter-spacing: -0.04em;
}
.stack-flow {
    display: grid;
    align-items: center;
}
.stack-flow > article {
    min-width: 0;
    position: relative;
    border: 1px solid var(--border);
}
.stack-flow > article > span {
    display: inline-grid;
    place-items: center;
    border: 2px solid var(--blue);
    color: var(--blue);
    background: #f5faff;
    font-weight: 800;
}
.stack-flow > article:nth-of-type(2) > span {
    color: #13b9c2;
    border-color: #13b9c2;
    background: #f2ffff;
}
.stack-flow > article:nth-of-type(4) > span {
    color: var(--green);
    border-color: var(--green);
    background: #f4fdf9;
}
.stack-flow h3 {
    font-family: "Manrope", sans-serif;
}
.stack-flow p {
    margin: 0;
    color: var(--muted);
}
.stack-flow article > i {
    position: absolute;
    color: #254e6c;
    font-size: 35px;
    font-style: normal;
}
.stack-flow > b {
    color: var(--blue);
    text-align: center;
}
.defensible {
    text-align: center;
}
.defensible i {
    margin: 0 auto 9px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 24px;
    font-style: normal;
}
.defensible strong {
    font-family: "Manrope", sans-serif;
}
.stack-feedback {
    /* the loop should rise into the middle of the first and last cards, not
       into their outer edges — measured against the 9-column track */
    margin: 0 23.8% 0 8.9%;
    border-right: 2px dotted #63baff;
    border-bottom: 2px dotted #63baff;
    border-left: 2px dotted #63baff;
    border-radius: 0 0 10px 10px;
    color: var(--blue);
    text-align: center;
    font-weight: 700;
}
.feature-engineering {
    overflow: hidden;
}
.engineering-grid {
    display: grid;
    grid-template-columns: 0.65fr 1.6fr;
    align-items: center;
    gap: 50px;
}
.engineering-grid h2 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    letter-spacing: -0.04em;
}
.engineering-flow > small {
    display: block;
    color: var(--cyan);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-weight: 800;
}
.raw-row,.process-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.raw-row span {
    flex: 1;
    min-width: 0;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px solid #155075;
    color: #c2d0da;
    text-align: center;
    background: linear-gradient(145deg, #0c2944, #081f35);
    font-size: 18px;
}
.raw-row b {
    display: block;
    color: #dfe8ee;
}
.process-row span {
    flex: 1;
    min-width: 0;
    display: grid;
    place-items: center;
    align-content: center;
    border: 1px solid #155075;
    color: var(--cyan);
    text-align: center;
    background: linear-gradient(145deg, #0c2944, #081f35);
    font-size: 18px;
}
.process-row b,.process-row i {
    display: block;
}
.process-row b {
    color: #e0e9ef;
}
.process-row i {
    color: #8ea3b4;
    font-style: normal;
}
.process-row > strong {
    color: var(--cyan);
}
.process-row em {
    color: var(--cyan);
    text-align: center;
    font-size: 27px;
    font-style: normal;
}
.process-row em b {
    display: block;
    color: var(--cyan);
    text-transform: uppercase;
    line-height: 1.35;
}
.technology-pipeline {
    background: #ffffff;
}
.signal-pipeline {
    position: relative;
    display: grid;
    align-items: center;
}
.signal-pipeline::before {
    content: "";
    position: absolute;
    right: 6%;
    left: 6%;
    border-top: 3px dotted #55b8ff;
}
.signal-pipeline article {
    position: relative;
    z-index: 1;
    text-align: center;
}
.signal-pipeline article > span {
    margin: auto;
    display: grid;
    place-items: center;
    border: 5px solid rgba(22, 139, 255, 0.11);
    border-radius: 50%;
    color: #ffffff;
    font-weight: 800;
}
.signal-pipeline article:nth-of-type(2) > span {
    border-color: rgba(19, 185, 194, 0.12);
    background: #13b9c2;
}
.signal-pipeline article:nth-of-type(3) > span {
    border-color: rgba(35, 201, 128, 0.12);
    background: var(--green);
}
.signal-pipeline article:nth-of-type(4) > span {
    border-color: rgba(255, 179, 26, 0.12);
    background: #ffb31a;
}
.signal-pipeline article:nth-of-type(5) > span {
    border-color: rgba(240, 67, 63, 0.12);
    background: #f0433f;
}
.signal-pipeline article > i {
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 23px;
    font-style: normal;
}
.signal-pipeline h3 {
    margin: 0 0 5px;
    font-family: "Manrope", sans-serif;
}
.signal-pipeline p {
    margin: auto;
    color: var(--muted);
}
.endpoint-phone {
    position: relative;
    color: var(--green);
    text-align: center;
}
.endpoint-phone small {
    display: block;
    color: var(--muted);
}
.final-shield {
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 25px;
    font-weight: 800;
}
/* the strip hugs its tokens and sits centred rather than filling the row */
.evidence-tokens {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fbfcfd;
}
.evidence-tokens b {
    margin-right: 5px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
.evidence-tokens span {
    white-space: nowrap;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: #657688;
    background: #ffffff;
}
.evidence-section {
    background: #f6f8fa;
    border-top: 1px solid #edf1f3;
}
.evidence-map {
    display: grid;
}
.evidence-map > div {
    color: #ffffff;
    border-right: 1px solid #153650;
}
.evidence-map > div:first-child {
    border-radius: 12px 0 0 12px;
}
.evidence-map > div:last-child {
    border-right: 0;
    border-radius: 0 12px 12px 0;
}
.evidence-map > div > small {
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-weight: 800;
}
.semi-risk {
    margin: 27px auto 0;
    display: grid;
    place-content: center;
    border: 16px solid var(--red);
    border-bottom-color: transparent;
    border-radius: 50%;
    text-align: center;
    transform: rotate(0deg);
}
.semi-risk b,.semi-risk span,.semi-risk i {
    display: block;
}
.semi-risk b {
    color: #74d9f2;
    font-family: "Manrope", sans-serif;
}
.semi-risk span {
    margin: 5px 0;
}
.semi-risk i {
    color: #cad7e0;
    font-size: 20px;
    font-style: normal;
}
.evidence-sources article,.decision-output article {
    display: flex;
    border: 1px solid #1d415c;
    background: #0b2339;
}
.evidence-sources article > span {
    color: #dce8ef;
    font-size: 20px;
}
.evidence-sources b,.evidence-sources p,.decision-output b,.decision-output span {
    display: block;
}
.evidence-sources p,.decision-output span {
    margin: 2px 0 0;
    color: #98aabb;
}
.evidence-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.evidence-list span {
    border: 1px solid #1f4764;
    color: #afbfcc;
    background: #0b2339;
}
.evidence-list span:nth-child(1)::first-letter,.evidence-list span:nth-child(3)::first-letter,.evidence-list span:nth-child(4)::first-letter {
    color: var(--red);
}
.evidence-list span:nth-child(2)::first-letter,.evidence-list span:nth-child(5)::first-letter {
    color: #ffb31a;
}
.evidence-list span:nth-child(6)::first-letter {
    color: var(--green);
}
.decision-output {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.decision-output article:first-of-type b {
    color: var(--red);
}
.safeguards {
    background: #ffffff;
}
.safeguard-grid {
    display: grid;
}
.safeguard-grid h2 {
    margin: 0;
    font-family: "Manrope", sans-serif;
    letter-spacing: -0.035em;
}
.safeguard-grid article {
    padding-left: 28px;
    border-left: 1px solid var(--border);
}
.safeguard-grid h3 {
    margin-top: 0;
    font-family: "Manrope", sans-serif;
}
.safeguard-grid p {
    color: var(--muted);
}
.safeguard-grid article > span {
    margin-top: -1px;
    display: block;
    border: 1px solid #b9dcfc;
    color: #3978ad;
    text-align: center;
}
.cloud-orbit {
    margin: 14px auto 0;
    display: grid;
    place-items: center;
    border: 1px dotted var(--blue);
    border-radius: 50%;
    color: var(--green);
    background: #f7fcff;
    font-size: 31px;
}
.response-path {
    border: 1px solid var(--border);
    border-radius: 6px;
    color: #496078;
    text-align: center;
    background: #fafcfd;
}
@media (max-width: 1050px) {
    .technology-hero .sub-hero-grid {
        grid-template-columns: 1fr;
    }
    .detection-map {
        margin-top: 25px;
    }
    .engineering-grid {
        grid-template-columns: 1fr;
    }
    .engineering-grid > div:first-child {
        max-width: 700px;
    }
    .signal-pipeline {
        grid-template-columns: repeat(5, 1fr);
    }
    .endpoint-phone,.final-shield {
        display: none;
    }
    .evidence-map {
        grid-template-columns: repeat(2, 1fr);
    }
    .evidence-map > div:first-child,.evidence-map > div:last-child {
        border-radius: 0;
    }
    .safeguard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 780px) {
    .detection-map {
        grid-template-columns: repeat(2, 1fr);
    }
    .decision-ring {
        grid-column: 1 / -1;
    }
    .engineering-flow {
        padding-bottom: 10px;
        overflow-x: auto;
    }
    .raw-row,.process-row {
        min-width: 760px;
    }
    .signal-pipeline {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
    .signal-pipeline::before {
        display: none;
    }
    .evidence-tokens {
        overflow-x: auto;
    }
    .evidence-tokens span {
        flex: 0 0 auto;
    }
    .evidence-map {
        grid-template-columns: 1fr;
    }
    .evidence-map > div {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid #153650;
    }
    .risk-output {
        min-height: 290px !important;
    }
    .safeguard-grid {
        grid-template-columns: 1fr;
    }
    .safeguard-grid article {
        padding: 22px 0 0;
        border-top: 1px solid var(--border);
        border-left: 0;
    }
    .safeguard-grid p {
        min-height: auto;
    }
}
@media (max-width: 520px) {
    .detection-map {
        padding: 25px 18px;
        grid-template-columns: 1fr;
    }
    .raw-events > span::after,.model-layers > span::before,.model-layers > span::after {
        display: none;
    }
    .decision-ring {
        grid-column: auto;
    }
    .decision-ring > div {
        width: 170px;
        height: 170px;
    }
    .tech-stack h2,.technology-pipeline h2,.evidence-section h2 {
        font-size: 34px;
    }
    .stack-flow {
        grid-template-columns: 1fr;
    }
    .stack-flow > article {
        height: 205px;
    }
    .stack-flow > b {
        transform: rotate(90deg);
    }
    .stack-flow > b:nth-of-type(3) {
        display: block;
    }
    .stack-feedback {
        display: none;
    }
    .engineering-grid h2 {
        font-size: 35px;
    }
    .signal-pipeline {
        grid-template-columns: 1fr;
    }
    .signal-pipeline article {
        padding: 5px 0;
    }
    .signal-pipeline article > i {
        margin: 12px auto;
    }
    .signal-pipeline p {
        max-width: 220px;
    }
    .evidence-map > div {
        padding: 20px;
    }
    .semi-risk {
        width: 165px;
        height: 165px;
    }
    .safeguard-grid h2 {
        font-size: 29px;
    }
}
.sub-hero {
    background: #fff;
}
.sub-hero h1 {
    max-width: 660px;
    font-size: clamp(48px,5vw,68px);
    line-height: 1.02;
    letter-spacing: -.045em;
}
.trust-strip,.stack-flow > article,.evidence-map > div {
    border-radius: 8px;
}
.stack-flow p,.safeguard-grid p {
    font-size: 12px;
    line-height: 1.6;
}
.trust-strip small,.signal-pipeline p,.evidence-sources p,.decision-output span {
    font-size: 10px;
    line-height: 1.5;
}
.evidence-list span,.evidence-tokens > * {
    font-size: 10px;
}
.detection-map,.feature-engineering {
    background-color: #071a2e;
}
.sub-hero,.tech-stack,.technology-pipeline,.evidence-section,.safeguards {
    background: #f7f8f4;
    border-color: rgba(23, 35, 111, .08);
}
.sub-hero {
    padding-top: 92px;
    padding-bottom: 78px;
}
.section-pad,.safeguards {
    padding-top: 105px;
    padding-bottom: 105px;
}
.sub-hero h1,.tech-stack h2,.technology-pipeline h2,.evidence-section h2,.engineering-grid h2,.safeguard-grid h2 {
    color: #17236f;
    letter-spacing: -.035em;
}
.hero-lead,.engineering-grid > div:first-child > p:last-child {
    color: #667085;
    font-size: 16px;
    line-height: 1.75;
}
.detection-map {
    border: 1px solid rgba(23, 35, 111, .12);
    background-color: #111b5c;
}
.trust-strip,.evidence-tokens {
    border-color: #828793;
    border-radius: 14px;
    background: rgba(255, 255, 255, .76);
    box-shadow: none;
}
.stack-flow > article {
    border-color: #828793;
    background: rgba(255, 255, 255, .72);
}
.stack-flow h3 {
    color: #17236f;
}
.stack-flow p,.safeguard-grid p,.signal-pipeline p {
    color: #667085;
    font-size: 13px;
    line-height: 1.65;
}
.feature-engineering {
    padding: 1px 0;
    color: #fff;
    background: #f7f8f4;
}
.engineering-grid {
    margin-top: 88px;
    margin-bottom: 88px;
    padding: 64px 72px;
    border-radius: 30px;
    background: linear-gradient(125deg, #202b80, #17236f 72%);
    box-shadow: 0 28px 70px rgba(23, 35, 111, .18);
}
.feature-engineering h2 {
    color: #fff;
}
.engineering-grid > div:first-child > p:last-child {
    color: rgba(255,255,255,.78);
}
.feature-engineering {
    min-height: 0;
}
/* the panel sizes to its content instead of a fixed 560px */
.engineering-grid {
    min-height: 0;
}
.signal-pipeline::before {
    border-color: #10a7c4;
}
.signal-pipeline article > span {
    border-color: #e4f7fa;
    background: #10a7c4;
}
.signal-pipeline article > i {
    border-color: #828793;
    color: #17236f;
    background: #f7f8f4;
    box-shadow: none;
}
.evidence-map {
    overflow: hidden;
    border: 1px solid rgba(23,35,111,.15);
}
.evidence-map > div {
    background-color: #111b5c;
}
@media (max-width: 1100px) {
    .engineering-grid {
        padding: 52px;
    }
}
@media (max-width: 780px) {
    .sub-hero {
        padding-top: 58px;
    }
    .section-pad,.safeguards {
        padding-top: 74px;
        padding-bottom: 74px;
    }
    .engineering-grid {
        margin-top: 54px;
        margin-bottom: 54px;
        padding: 38px 28px;
        border-radius: 22px;
    }
}
.technology-hero {
    padding: 3rem 0 5rem;
}
.technology-hero .sub-hero-grid {
    grid-template-columns: minmax(390px,.78fr) minmax(680px,1.22fr);
    gap: 64px;
    align-items: center;
}
.technology-hero .hero-lead {
    max-width: 590px;
    font-size: 18px;
    line-height: 1.75;
}
.detection-map {
    min-height: 520px;
    padding: 38px 30px;
    gap: 22px;
    border-radius: 28px;
    box-shadow: 0 26px 70px rgba(6,24,43,.2);
}
.raw-events,.model-layers {
    gap: 12px;
}
.raw-events > small,.model-layers > small {
    margin-bottom: 7px;
    font-size: 10px;
    line-height: 1.4;
}
.raw-events > span,.model-layers > span {
    min-height: 64px;
    padding: 13px 14px;
    gap: 12px;
    border-radius: 10px;
    font-size: 10.5px;
    line-height: 1.45;
}
.raw-events > span i {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
}
.raw-events > span i img {
    width: 38px;
    height: 38px;
}
.raw-events > span b {
    font-size: 11.5px;
}
.model-layers > span {
    padding: 13px 14px 13px 18px;
    font-size: 10.5px;
}
.model-layers b {
    margin-bottom: 3px;
    font-size: 12px;
}
.decision-ring > div {
    width: 200px;
    height: 200px;
}
.decision-ring b {
    font-size: 16px;
}
.decision-ring span {
    margin: 7px 0;
    font-size: 11px;
    line-height: 1.45;
}
.decision-ring i img {
    width: 46px;
    height: 46px;
    margin: 0 auto;
}
/* four cards across, each one a centred column: icon, bold label, then the
   supporting line underneath */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border);
}
.trust-strip article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    text-align: center;
}
.trust-strip article + article {
    border-left: 1px solid var(--border);
}
.trust-strip b,
.trust-strip small {
    display: block;
}
.tech-strip {
    margin-top: 44px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 38px rgba(19,35,76,.08);
}
.tech-strip article {
    min-height: 128px;
    padding: 25px 26px;
    gap: 17px;
    align-items: center;
}
.tech-strip .strip-icon {
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
}
.tech-strip b {
    font-size: 15px;
    line-height: 1.35;
}
.tech-strip small {
    margin-top: 5px;
    /* same muted tone as the lead paragraph in the header above */
    color: #5e7084;
    font-size: 11.5px;
    line-height: 1.55;
}
.tech-stack,.technology-pipeline,.evidence-section {
    padding: 100px 0;
}
.tech-stack h2,.technology-pipeline h2,.evidence-section h2 {
    font-size: clamp(38px,4vw,52px);
    line-height: 1.08;
}
.stack-flow {
    margin-top: 42px;
    grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr 30px 118px;
    gap: 11px;
}
.stack-flow > article {
    height: 274px;
    padding: 24px;
    border-radius: 18px;
    box-shadow: 0 14px 36px rgba(19,35,76,.08);
}
.stack-flow > article > span {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    font-size: 15px;
}
.stack-flow h3 {
    margin: 20px 0 9px;
    font-size: 16px;
    line-height: 1.3;
}
.stack-flow p {
    font-size: 12.5px;
    line-height: 1.65;
}
.stack-flow article > i {
    right: 20px;
    bottom: 19px;
}
.stack-flow article > i img {
    width: 52px;
    height: 52px;
}
.stack-flow > b {
    font-size: 24px;
}
.defensible i {
    width: 64px;
    height: 64px;
    background: transparent;
    box-shadow: none;
}
.defensible i img {
    width: 64px;
    height: 64px;
}
.defensible strong {
    font-size: 12px;
    line-height: 1.4;
}
.stack-feedback {
    height: 42px;
    padding-top: 21px;
    font-size: 10px;
}
.feature-engineering {
    padding: 1px 0;
    color: #fff;
    background: #f7f8f4;
}
.feature-engineering .engineering-grid {
    margin: 92px auto;
    padding: 66px;
    /* minmax(360px,…) + minmax(700px,…) + gap + padding came to 1254px, wider
       than the 1180px container, so the right-hand cards spilled out of the
       panel and were clipped by .feature-engineering's overflow: hidden */
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: 62px;
    border-radius: 30px;
    background: radial-gradient(circle at 85% 35%,rgba(22,139,255,.2),transparent 38%),linear-gradient(110deg,#06182b,#082d4d);
    box-shadow: 0 28px 70px rgba(6,24,43,.2);
}
.engineering-grid h2 {
    font-size: clamp(38px,4vw,52px);
    line-height: 1.08;
}
.engineering-grid > div:first-child > p:last-child {
    max-width: 470px;
    font-size: 16px;
    line-height: 1.75;
}
.engineering-flow > small {
    margin: 12px;
    font-size: 10px;
}
.raw-row,.process-row {
    gap: 12px;
}
.raw-row span {
    min-height: 124px;
    padding: 14px 10px;
    gap: 10px;
    border-radius: 12px;
}
.raw-row span img {
    width: 46px;
    height: 46px;
}
.raw-row b {
    font-size: 10.5px;
    line-height: 1.4;
}
.process-row span {
    min-height: 138px;
    padding: 13px 9px;
    gap: 7px;
    border-radius: 12px;
}
.process-row span img {
    width: 44px;
    height: 44px;
}
.process-row b {
    font-size: 10.5px;
    line-height: 1.35;
}
.process-row i {
    font-size: 9.5px;
    line-height: 1.45;
}
.process-row > strong {
    font-size: 22px;
}
.process-row em {
    width: 104px;
    flex: 0 0 104px;
}
.process-row em img {
    width: 54px;
    height: 54px;
    margin: 0 auto 7px;
}
.process-row em b {
    font-size: 9px;
}
.signal-pipeline {
    margin-top: 50px;
    grid-template-columns: 92px repeat(5,1fr) 92px;
}
.signal-pipeline::before {
    top: 99px;
}
.signal-pipeline article > span {
    width: 38px;
    height: 38px;
    font-size: 10px;
}
.signal-pipeline article > i {
    width: 76px;
    height: 76px;
    margin: 18px auto;
    padding: 8px;
}
.signal-pipeline article > i img {
    width: 58px;
    height: 58px;
}
.signal-pipeline h3 {
    margin-bottom: 7px;
    font-size: 15px;
}
.signal-pipeline p {
    max-width: 160px;
    font-size: 11.5px;
    line-height: 1.55;
}
.endpoint-phone {
    font-size: 0;
}
.endpoint-phone img {
    width: 68px;
    height: 68px;
    margin: 0 auto 7px;
}
.endpoint-phone small {
    font-size: 11px;
}
.final-shield {
    width: 82px;
    height: 82px;
    background: transparent;
}
.final-shield img {
    width: 82px;
    height: 82px;
}
.evidence-tokens {
    margin-top: 44px;
    padding: 16px;
    flex-wrap: wrap;
    gap: 10px;
    border-radius: 12px;
}
.evidence-tokens b {
    font-size: 10px;
}
.evidence-tokens span {
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
}
.evidence-tokens span img {
    width: 24px;
    height: 24px;
}
.evidence-map {
    margin-top: 38px;
    padding: 18px;
    grid-template-columns: .95fr 1.15fr 1fr 1fr;
    gap: 14px;
    border-radius: 28px;
    background: #071a2e;
    box-shadow: 0 26px 70px rgba(6,24,43,.18);
}
.evidence-map > div {
    min-height: 390px;
    padding: 24px;
    border: 1px solid #1d415c;
    border-radius: 16px !important;
    background: linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),#0a2035;
    background-size: 26px 26px;
}
.evidence-map > div > small {
    font-size: 10px;
}
.semi-risk {
    width: 190px;
    height: 190px;
    margin-top: 34px;
}
.semi-risk b {
    font-size: 20px;
}
.semi-risk span {
    font-size: 10.5px;
    line-height: 1.45;
}
.semi-risk i img {
    width: 46px;
    height: 46px;
    margin: 0 auto;
}
.evidence-sources article,.decision-output article {
    margin: 13px 0;
    padding: 14px;
    gap: 12px;
    border-radius: 10px;
}

/* the evidence cards carry a title only, so the row sits centred */
.evidence-sources article {
    align-items: center;
    justify-content: center;
    text-align: center;
}
.evidence-sources article > span {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
}
.evidence-sources article > span img {
    width: 44px;
    height: 44px;
}
.evidence-sources b,.decision-output b {
    font-size: 12px;
}
.evidence-sources p,.decision-output span {
    font-size: 10.5px;
    line-height: 1.5;
}
.evidence-list {
    gap: 11px;
}
.evidence-list span {
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 11px;
}
.decision-output article {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 11px;
    align-items: center;
}
.decision-output article img {
    width: 44px;
    height: 44px;
    grid-row: 1/3;
}
.safeguards {
    padding: 100px 0;
}
.safeguard-grid {
    grid-template-columns: 1.08fr repeat(3,1fr);
    gap: 22px;
    align-items: stretch;
}
.safeguard-grid h2 {
    font-size: clamp(34px,3vw,44px);
    line-height: 1.1;
}
.safeguard-grid article {
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(19,35,76,.07);
}
.safeguard-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
}
.safeguard-grid h3 {
    font-size: 16px;
    line-height: 1.35;
}
.safeguard-grid p {
    min-height: 84px;
    font-size: 12.5px;
    line-height: 1.65;
}
.safeguard-grid article > span {
    padding: 8px;
    font-size: 10px;
}
.cloud-orbit {
    width: 118px;
    height: 118px;
}
.cloud-orbit img {
    width: 64px;
    height: 64px;
}
.response-path {
    margin-top: 24px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
}
.response-path img {
    width: 48px;
    height: 48px;
}
@media (max-width: 1200px) {
    .technology-hero .sub-hero-grid,.feature-engineering .engineering-grid {
        grid-template-columns: 1fr;
    }
    .technology-hero .sub-hero-grid {
        gap: 54px;
    }
    .stack-flow {
        grid-template-columns: 1fr 30px 1fr;
    }
    .stack-flow > article:nth-of-type(3),.stack-flow > article:nth-of-type(4) {
        margin-top: 12px;
    }
    /* Two rows of "card → arrow → card". The arrow to drop is the one that
       falls on the row break (2nd) and the one before the full-width
       "defensible" block (4th) — hiding the 3rd instead pushed the last card
       into the 30px arrow column and left a stray arrow in a card slot. */
    .stack-flow > b:nth-of-type(2),.stack-flow > b:nth-of-type(4) {
        display: none;
    }
    .stack-flow .defensible {
        grid-column: 1/-1;
        margin-top: 22px;
    }
    .feature-engineering .engineering-grid {
        margin: 76px auto;
        padding: 54px;
    }
    .signal-pipeline {
        grid-template-columns: repeat(5,1fr);
        gap: 14px;
    }
    .endpoint-phone,.final-shield {
        display: none;
    }
    .evidence-map {
        grid-template-columns: repeat(2,1fr);
    }
    .safeguard-grid {
        grid-template-columns: repeat(2,1fr);
    }
}
@media (max-width: 820px) {
    .technology-hero,.tech-stack,.technology-pipeline,.evidence-section,.safeguards {
        padding: 1rem 0;
    }
    .detection-map {
        grid-template-columns: repeat(2,1fr);
    }
    .decision-ring {
        grid-column: 1/-1;
    }
    .tech-strip {
        grid-template-columns: 1fr 1fr;
    }
    .tech-strip article:nth-child(3) {
        border-left: 0;
    }
    .feature-engineering .engineering-grid {
        padding: 36px;
    }
    .raw-row,.process-row {
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
    .process-row > strong {
        display: none;
    }
    .process-row em {
        width: auto;
    }
    .signal-pipeline {
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }
    .signal-pipeline::before {
        display: none;
    }
    .evidence-map,.safeguard-grid {
        grid-template-columns: 1fr;
    }
    .evidence-map > div {
        min-height: auto;
    }
}
@media (max-width: 560px) {
    .technology-hero .sub-hero-grid {
        grid-template-columns: minmax(0,1fr);
    }
    .detection-map,.tech-strip,.stack-flow,.raw-row,.process-row,.signal-pipeline {
        grid-template-columns: 1fr;
    }
    .decision-ring {
        grid-column: auto;
    }
    .tech-strip article + article {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
    .stack-flow > b {
        display: block !important;
        transform: rotate(90deg);
    }
    .feature-engineering .engineering-grid {
        margin: 60px auto;
        padding: 26px;
    }
    .evidence-map {
        padding: 12px;
    }
}

/* headings directly under an eyebrow get the same gap as the home page */
.eyebrow + h1,
.eyebrow + h2,
.eyebrow + h3 {
    margin-top: 1rem;
}

/* Explainability — secondary heading colour */
.evidence-section .evidence-sources article b,
.evidence-section .decision-output article:nth-of-type(2) b,
.evidence-section .decision-output article:nth-of-type(3) b {
    color: #74d9f2;
}

/* =====================================================
   EVIDENCE TOKEN MARQUEE
===================================================== */

.evidence-tokens.evidence-marquee {
    width: min(100%, 1040px);
    margin: 44px auto 0;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    overflow: hidden;
    border: 1px solid #828793;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.9);
}

.evidence-marquee .evidence-marquee__label {
    margin: 0;
    padding: 18px 18px 18px 0;
    color: #17236f;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    border-right: 1px solid #d7e1e7;
}

.evidence-marquee__viewport {
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient( to right, transparent, #000 7%, #000 93%, transparent );
    mask-image: linear-gradient( to right, transparent, #000 7%, #000 93%, transparent );
}

.evidence-marquee__track {
    display: flex;
    width: max-content;
    animation: evidence-token-scroll 24s linear infinite;
    will-change: transform;
}

.evidence-marquee__group {
    display: flex;
    flex-shrink: 0;
    gap: 14px;
    padding: 18px 14px 18px 0;
}

/* ใช้ selector ยาวเพื่อทับ CSS เดิม */
.evidence-marquee .evidence-marquee__item {
    width: 132px;
    min-height: 112px;
    padding: 14px 12px;
    flex: 0 0 132px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #cbd9df;
    border-radius: 12px;
    background: #ffffff;
    color: #17236f;
    text-align: center;
    white-space: normal;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

    .evidence-marquee .evidence-marquee__item:hover {
        transform: translateY(-3px);
        border-color: #10a7c4;
        box-shadow: 0 10px 24px rgba(23, 35, 111, 0.1);
    }

    .evidence-marquee .evidence-marquee__item img {
        display: block;
        width: 48px;
        height: 48px;
        object-fit: contain;
    }

    .evidence-marquee .evidence-marquee__item strong {
        color: #17236f;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.3;
        white-space: nowrap;
    }

/* หยุดเลื่อนเมื่อวางเมาส์ */
.evidence-marquee:hover .evidence-marquee__track {
    animation-play-state: paused;
}

@keyframes evidence-token-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Tablet and Mobile */
@media (max-width: 760px) {
    .evidence-tokens.evidence-marquee {
        grid-template-columns: 1fr;
        gap: 14px;
        /* the group carries the bottom padding now, see below */
        padding: 16px 16px 0;
    }

    .evidence-marquee__group {
        padding: 8px 14px 16px 0;
    }

    .evidence-marquee .evidence-marquee__label {
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid #d7e1e7;
    }

    .evidence-marquee .evidence-marquee__item {
        width: 118px;
        min-height: 104px;
        flex-basis: 118px;
    }

        .evidence-marquee .evidence-marquee__item img {
            width: 43px;
            height: 43px;
        }
}

@media (prefers-reduced-motion: reduce) {
    .evidence-marquee__track {
        animation: none;
    }

    .evidence-marquee__viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
}
/* =====================================================
   TECHNOLOGY PAGE — PROFESSIONAL HOVER INTERACTIONS
===================================================== */

.tech-strip article,
.stack-flow > article,
.raw-row span,
.process-row span,
.evidence-sources article,
.evidence-list span,
.decision-output article,
.safeguard-grid article,
.response-path,
.model-layers > span,
.raw-events > span {
    position: relative;
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1), border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}


    .tech-strip article:hover,
    .stack-flow > article:hover,
    .raw-row span:hover,
    .process-row span:hover,
    .evidence-sources article:hover,
    .evidence-list span:hover,
    .decision-output article:hover,
    .safeguard-grid article:hover {
        z-index: 3;
    }


    .tech-strip article:hover,
    .stack-flow > article:hover,
    .safeguard-grid article:hover,
    .response-path:hover {
        transform: translateY(-7px);
        border-color: #74d9f2;
        background-color: #ffffff;
        box-shadow: 0 18px 36px rgba(23, 35, 111, 0.12), 0 4px 12px rgba(16, 167, 196, 0.08);
    }


    .raw-row span:hover,
    .process-row span:hover,
    .evidence-sources article:hover,
    .evidence-list span:hover,
    .decision-output article:hover,
    .model-layers > span:hover,
    .raw-events > span:hover {
        transform: translateY(-6px);
        border-color: #74d9f2;
        background-color: #102f49;
        box-shadow: 0 18px 34px rgba(3, 17, 31, 0.28), 0 0 0 1px rgba(116, 217, 242, 0.12);
    }


    .tech-strip .strip-icon,
    .stack-flow article img,
    .raw-row img,
    .process-row img,
    .evidence-sources article img,
    .decision-output article img,
    .safeguard-icon {
        transition: transform 220ms cubic-bezier(.2, .8, .2, 1), filter 220ms ease;
    }

    .tech-strip article:hover .strip-icon,
    .stack-flow article:hover img,
    .raw-row span:hover img,
    .process-row span:hover img,
    .evidence-sources article:hover img,
    .decision-output article:hover img,
    .safeguard-grid article:hover .safeguard-icon {
        transform: translateY(-3px) scale(1.07);
        filter: drop-shadow(0 7px 10px rgba(16, 167, 196, 0.18));
    }


.signal-pipeline article > i {
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1), border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.signal-pipeline article:hover > i {
    transform: translateY(-8px) scale(1.06);
    border-color: #74d9f2;
    background-color: #ffffff;
    box-shadow: 0 16px 28px rgba(23, 35, 111, 0.14);
}

.signal-pipeline article h3 {
    transition: color 180ms ease;
}

.signal-pipeline article:hover h3 {
    color: #10a7c4;
}


.decision-ring > div,
.semi-risk {
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1), box-shadow 240ms ease;
}

    .decision-ring:hover > div,
    .semi-risk:hover {
        transform: translateY(-5px) scale(1.035);
        box-shadow: 0 20px 36px rgba(3, 17, 31, 0.24), 0 0 0 10px rgba(116, 217, 242, 0.06);
    }


.pim-page .btn {
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

    .pim-page .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 24px rgba(23, 35, 111, 0.16);
    }


@media (hover: none) {
    .tech-strip article:hover,
    .stack-flow > article:hover,
    .raw-row span:hover,
    .process-row span:hover,
    .evidence-sources article:hover,
    .evidence-list span:hover,
    .decision-output article:hover,
    .safeguard-grid article:hover,
    .response-path:hover,
    .model-layers > span:hover,
    .raw-events > span:hover,
    .signal-pipeline article:hover > i,
    .decision-ring:hover > div,
    .semi-risk:hover,
    .pim-page .btn:hover {
        transform: none;
    }
}


@media (prefers-reduced-motion: reduce) {
    .pim-page *,
    .pim-page *::before,
    .pim-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =====================================================
   DETECTION MAP — GROUPED SIGNAL CONNECTION
===================================================== */


.raw-events > span::after {
    display: none;
}


.model-layers > span::before {
    display: none;
}


.raw-events {
    position: relative;
}


@media (min-width: 821px) {
    .detection-map {
        column-gap: 42px;
    }

    .raw-events::after {
        content: "→";
        position: absolute;
        z-index: 5;
        top: 50%;
        right: -38px;
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        color: #74d9f2;
        border: 1px solid rgba(116, 217, 242, 0.5);
        border-radius: 50%;
        background: #0a2035;
        box-shadow: 0 0 18px rgba(116, 217, 242, 0.2);
        font-size: 21px;
        line-height: 1;
        transform: translateY(-50%);
    }
}

/*===================HEADER GAP=====================*/
/* One consistent distance between the sticky header and the first line of the
   page, matching Home. Appended last so it settles the several earlier rules
   that were each setting this differently. */
.technology-hero {
    padding-top: 39px;
}

@media (max-width: 820px) {
    .technology-hero {
        padding-top: 26px;
    }
}

@media (max-width: 620px) {
    /* .container picks up margin-top: 1rem here, which covers most of the gap */
    .technology-hero {
        padding-top: 4px;
    }
}

/*===================FEEDBACK LOOP ALIGNMENT=====================*/
/* Once the stack folds to two rows the loop has nothing to reach on the right,
   so it centres under the full-width "Defensible decision" block instead. */
@media (max-width: 1200px) {
    .stack-feedback {
        margin: 0 23.8%;
    }
}

@media (max-width: 560px) {
    .stack-feedback {
        margin: 0 18%;
    }
}

/*===================TECHNOLOGY STACK — VERTICAL LAYOUT=====================*/
/* Wide: the original left-to-right row with the feedback loop running
   underneath it (untouched).

   Narrow: one vertical column, in stack order — Android & Kotlin → TensorFlow
   models → Google Cloud → Secure services → Defensible decision — with the
   feedback loop turned on its side in a column of its own on the left. The
   loop's label sits left of the dotted line; the line's top stub meets Android
   & Kotlin and its bottom stub meets Secure services, so it brackets the four
   stack layers and leaves the decision outside, exactly as it does on wide. */

.stack-feedback {
    grid-column: 1 / -1;
    margin-top: -11px;          /* cancels the grid row gap it now inherits */
}

@media (max-width: 1200px) {
    .stack-flow {
        /* one number drives both the card height and where the loop's stubs
           land, so they cannot drift apart */
        --stack-card-h: 172px;
        --stack-gap: 20px;
        grid-template-columns: minmax(104px, 0.3fr) minmax(0, 1fr);
        gap: 0 var(--stack-gap);
    }

    /* the flow itself is a single column on the right, one item per row */
    .stack-flow > article,
    .stack-flow > b,
    .stack-flow .defensible {
        grid-column: 2;
    }

    .stack-flow > article:nth-of-type(n) {
        height: var(--stack-card-h);
        margin-top: 0;
    }

    /* every arrow shows now, pointing down the column */
    .stack-flow > b:nth-of-type(n) {
        display: block;
        padding: 7px 0;
        transform: rotate(90deg);
    }

    .stack-flow .defensible {
        margin-top: 10px;
    }

    /* rows 1 to 7 span Android & Kotlin down to Secure services */
    .stack-feedback {
        position: relative;
        grid-column: 1;
        grid-row: 1 / 8;
        /* .stack-flow sets align-items: center, which would shrink this to its
           text height and take the loop's span with it */
        align-self: stretch;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: auto;
        margin: 0;
        padding: 0 26px 0 0;
        border: 0;
        text-align: right;
        line-height: 1.5;
    }

    /* the loop drawn to the right of its label, stubs reaching across the
       column gap to touch the two cards */
    .stack-feedback::before {
        content: "";
        position: absolute;
        top: calc(var(--stack-card-h) / 2);
        bottom: calc(var(--stack-card-h) / 2);
        right: calc(-1 * var(--stack-gap));
        width: 34px;
        border: 2px dotted #63baff;
        border-right: 0;
        border-radius: 10px 0 0 10px;
    }
}

/* Below 520px the loop is hidden (it has no room), so the column it lived in
   goes with it and the cards take the full width. */
@media (max-width: 520px) {
    .stack-flow {
        grid-template-columns: minmax(0, 1fr);
    }

    /* an earlier rule hides it at this width; this block sets display above, so
       it has to be restated here or the loop reappears on top of the cards */
    .stack-feedback {
        display: none;
    }

    .stack-flow > article,
    .stack-flow > b,
    .stack-flow .defensible {
        grid-column: 1;
    }

    /* the card icon is pinned to the right edge, so the text stops short of it */
    .stack-flow > article h3,
    .stack-flow > article p {
        padding-right: 84px;
    }

    /* that extra inset costs the copy a line, so the card is given the room
       rather than letting the text run over its own border */
    .stack-flow {
        --stack-card-h: 196px;
    }
}


/* ===== Public-facing technology page: proprietary implementation details removed ===== */
.technology-public .section-intro{max-width:780px;margin:18px 0 44px;color:#667085;font-size:16px;line-height:1.75}
.public-tech-visual{min-height:500px;padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:center;border-radius:28px;background:linear-gradient(135deg,#111b5c,#17236f 65%,#0f6078);box-shadow:0 26px 70px rgba(6,24,43,.2)}
.public-tech-visual .tech-core{grid-column:1/-1;padding:30px;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(255,255,255,.07);color:#fff}
.public-tech-visual .tech-core img{width:54px;height:54px;margin-bottom:12px}.public-tech-visual .tech-core strong{font-family:"Manrope",sans-serif;font-size:22px}.public-tech-visual .tech-core small{margin-top:6px;color:rgba(255,255,255,.7);letter-spacing:.08em;text-transform:uppercase}
.public-tech-visual article{padding:22px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(255,255,255,.06);color:#fff}.public-tech-visual article:last-child{grid-column:1/-1}.public-tech-visual article img{width:38px;height:38px;margin-bottom:12px}.public-tech-visual article b,.public-tech-visual article span{display:block}.public-tech-visual article b{margin-bottom:7px;font-family:"Manrope",sans-serif}.public-tech-visual article span{color:rgba(255,255,255,.72);font-size:12px;line-height:1.6}
.public-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.public-card-grid.three{grid-template-columns:repeat(3,1fr)}.public-card-grid article{position:relative;padding:30px 26px;border:1px solid #828793;border-radius:14px;background:rgba(255,255,255,.72)}.public-card-grid article>span{display:block;margin-bottom:20px;color:#10a7c4;font-weight:800}.public-card-grid article img{width:44px;height:44px;margin-bottom:18px}.public-card-grid h3{margin:0 0 10px;color:#17236f;font-family:"Manrope",sans-serif}.public-card-grid p{margin:0;color:#667085;font-size:13px;line-height:1.7}
.public-intelligence{padding:1px 0;background:#f7f8f4}.intelligence-panel{margin:88px auto;padding:64px 72px;display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;border-radius:30px;color:#fff;background:linear-gradient(125deg,#202b80,#17236f 72%);box-shadow:0 28px 70px rgba(23,35,111,.18)}.intelligence-panel h2{margin:8px 0 18px;color:#fff;font-family:"Manrope",sans-serif;font-size:42px;line-height:1.12}.intelligence-panel p{color:rgba(255,255,255,.78);line-height:1.75}.intelligence-concepts{display:grid;grid-template-columns:1fr 1fr;gap:14px}.intelligence-concepts article{padding:22px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.06)}.intelligence-concepts b,.intelligence-concepts span{display:block}.intelligence-concepts b{margin-bottom:7px}.intelligence-concepts span{color:rgba(255,255,255,.7);font-size:12px;line-height:1.6}
.explain-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.explain-grid h2{margin:8px 0 18px;color:#17236f;font-family:"Manrope",sans-serif;font-size:46px;line-height:1.1}.explain-grid>div:first-child p{color:#667085;line-height:1.75}.explain-demo{padding:34px;border-radius:22px;background:#111b5c;color:#fff}.explain-demo>small{display:block;margin-bottom:18px;color:#74d9f2;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.risk-summary,.reason-row{padding:20px;display:flex;gap:16px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.05)}.risk-summary{align-items:center;margin-bottom:12px}.risk-summary img{width:46px;height:46px}.risk-summary b,.risk-summary span,.reason-row strong,.reason-row span{display:block}.risk-summary span,.reason-row span{color:rgba(255,255,255,.7);font-size:12px;line-height:1.55}.reason-row{margin-top:12px;flex-direction:column;gap:5px}
.public-privacy{background:#f7f8f4}.public-resilience{padding-top:105px;padding-bottom:105px}
@media(max-width:1050px){.public-tech-visual{min-height:0}.public-card-grid{grid-template-columns:1fr 1fr}.public-card-grid.three{grid-template-columns:1fr}.intelligence-panel,.explain-grid{grid-template-columns:1fr}.intelligence-panel{padding:52px}.explain-grid{gap:35px}}
@media(max-width:620px){.public-tech-visual,.public-card-grid,.intelligence-concepts{grid-template-columns:1fr}.public-tech-visual article:last-child,.public-tech-visual .tech-core{grid-column:auto}.public-tech-visual{padding:22px}.public-card-grid{grid-template-columns:1fr}.intelligence-panel{margin:54px auto;padding:36px 26px}.intelligence-panel h2,.explain-grid h2{font-size:34px}.explain-demo{padding:22px}}


/* ===== Public technology visual sizing guard ===== */
.public-tech-visual img,
.public-card-grid img,
.explain-demo img,
.public-resilience img {
    max-width: none;
    object-fit: contain;
}
.public-tech-visual .tech-core img { width: 54px !important; height: 54px !important; }
.public-tech-visual article img { width: 38px !important; height: 38px !important; }
.public-card-grid article img { width: 44px !important; height: 44px !important; }
.explain-demo .risk-summary img { width: 46px !important; height: 46px !important; flex: 0 0 46px; }
.public-resilience .safeguard-icon { width: 46px !important; height: 46px !important; }

@media (max-width: 1050px) {
    .public-card-grid article img { width: 40px !important; height: 40px !important; }
}
@media (max-width: 620px) {
    .public-tech-visual .tech-core img { width: 48px !important; height: 48px !important; }
    .public-tech-visual article img,
    .public-card-grid article img,
    .public-resilience .safeguard-icon { width: 38px !important; height: 38px !important; }
}


/* =====================================================
   PUBLIC TECH VISUAL — vertical stack, row cards
   Cards stack in one column, each laid out as an icon
   beside its text, on the detection-map panel surface.
   ===================================================== */

.public-tech-visual {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 26px;
    border: 1px solid rgba(116, 217, 242, 0.12);
    /* same grid-over-radial surface as .detection-map */
    background: linear-gradient( rgba(255, 255, 255, 0.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px ), radial-gradient( circle at 70% 30%, #0d385e, #06182b 67% );
    background-size: 30px 30px, 30px 30px, auto;
    box-shadow: 0 26px 70px rgba(6, 24, 43, 0.28);
}

    .public-tech-visual .tech-core {
        grid-column: auto;
        padding: 26px 24px;
        border: 1px solid #244a67;
        border-radius: 16px;
        background: linear-gradient( 145deg, #0c2944, #091d31 );
    }

        .public-tech-visual .tech-core small {
            color: #90a4b7;
        }

    /* ---- Row card: icon left, text block right ---- */
    .public-tech-visual article {
        grid-column: auto;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 20px;
        border: 1px solid #244a67;
        border-radius: 14px;
        background: linear-gradient( 145deg, #0c2944, #091d31 );
        transition: transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 200ms ease, background-color 200ms ease, box-shadow 340ms ease;
    }

        .public-tech-visual article img {
            flex: 0 0 46px;
            width: 46px !important;
            height: 46px !important;
            margin: 0;
        }

        .public-tech-visual article > div {
            min-width: 0;
        }

        .public-tech-visual article b {
            margin-bottom: 4px;
            font-size: 16px;
        }

        .public-tech-visual article span {
            color: #aebdca;
            font-size: 12px;
        }

        /* border highlight + bouncy lift on hover */
        .public-tech-visual article:hover {
            transform: translateY(-6px);
            border-color: #74d9f2;
            background-color: #102f49;
            box-shadow: 0 18px 34px rgba(3, 17, 31, 0.28), 0 0 0 1px rgba(116, 217, 242, 0.12);
        }

@media (hover: none) {
    .public-tech-visual article:hover {
        transform: none;
    }
}

@media (max-width: 620px) {
    .public-tech-visual {
        padding: 18px;
    }

    .public-tech-visual article {
        padding: 14px 16px;
        gap: 13px;
    }
}


/* =====================================================
   PRINCIPLE CARD COVERS
   Each card in the #principles grid sits behind a numbered
   cover until it is clicked; js/principle-cards.js adds
   .is-revealed, which fades the cover out for good.
   ===================================================== */

#principles .public-card-grid article {
    overflow: hidden;
}

#principles .public-card-grid .card-cover {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: inherit;
    overflow: hidden;
    background: linear-gradient( 145deg, #202b80, #17236f 62%, #0f6078 );
    cursor: pointer;
    transition: opacity 420ms ease, transform 420ms ease, box-shadow 220ms ease;
}

    /* faint grid wash so the cover reads as part of the dark surfaces above */
    #principles .public-card-grid .card-cover::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: linear-gradient( rgba(255, 255, 255, 0.05) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px );
        background-size: 26px 26px, 26px 26px;
        pointer-events: none;
    }

    #principles .public-card-grid .card-cover-number {
        position: relative;
        color: #74d9f2;
        font-family: "Manrope", sans-serif;
        font-size: 46px;
        font-weight: 800;
        letter-spacing: 0.02em;
        line-height: 1;
    }

    /* shine sweep on hover, same treatment as the .btn-explore button */
    #principles .public-card-grid .card-cover::after {
        content: "";
        position: absolute;
        top: -25%;
        bottom: -25%;
        left: -55%;
        width: 34%;
        transform: skewX(-20deg);
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.34), transparent );
        pointer-events: none;
        transition: left 620ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    #principles .public-card-grid .card-cover:hover {
        box-shadow: inset 0 0 0 1px rgba(116, 217, 242, 0.45);
    }

        #principles .public-card-grid .card-cover:hover::after {
            left: 125%;
        }

    #principles .public-card-grid .card-cover:focus-visible {
        outline: 3px solid rgba(16, 167, 196, 0.45);
        outline-offset: -5px;
    }

/* ---- revealed ---- */
#principles .public-card-grid article.is-revealed .card-cover {
    opacity: 0;
    transform: scale(1.03);
    pointer-events: none;
}


/* ---------- Design principles: centred section header ---------- */

#principles .eyebrow,
#principles h2,
#principles .section-intro {
    text-align: center;
}

    /* .eyebrow is an inline span, so width:fit-content and auto margins
       only take effect once it is a block */
    #principles .eyebrow {
        display: block;
        margin-inline: auto;
    }

    #principles .section-intro {
        margin-inline: auto;
    }


/* ---------- Design principles: centred card contents ---------- */

#principles .public-card-grid article {
    text-align: center;
}

    /* the inline sizing guard makes these display:block, so they need
       auto side margins to sit in the middle */
    #principles .public-card-grid article img {
        margin-inline: auto;
    }


/* ---------- Design principles: scroll-linked covers on phones ---------- */

/* js/principle-cards.js drives .card-cover opacity from the scroll position,
   so the fade has to follow the finger rather than run on a transition */
#principles .public-card-grid .card-cover.is-scroll-linked {
    transition: none;
}


/* ---------- Adaptive intelligence / Explainability: eyebrow spacing ---------- */

/* .eyebrow carries margin-bottom: 2rem, but these two are inline spans, so
   the margin was being dropped and the heading sat right under the rule */
#intelligence .eyebrow,
#explainability .eyebrow {
    display: block;
}


/* =====================================================
   ADAPTIVE INTELLIGENCE — concept marquee
   The four concepts sit under the section copy and drift
   right to left. js/concept-marquee.js marks whichever
   card is crossing the focus point, which lifts it and
   floats its description in a bubble above (beside, on
   phones). Modelled on the platform page signal marquee.
   ===================================================== */

.intelligence-panel {
    /* minmax(0,…) or the track's max-content width blows the column open */
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

    .intelligence-panel > div:first-child {
        max-width: 760px;
    }

.concept-marquee {
    position: relative;
    min-width: 0;
    margin-top: 40px;
    /* headroom for the bubble, which sits outside the clipped viewport */
    padding-top: 96px;
}

.concept-marquee__viewport {
    position: relative;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 6%, #000 94%, transparent 100% );
    mask-image: linear-gradient( 90deg, transparent 0, #000 6%, #000 94%, transparent 100% );
}

.concept-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: concept-marquee-scroll 36s linear infinite;
}

.concept-marquee:hover .concept-marquee__track,
.concept-marquee:focus-within .concept-marquee__track {
    animation-play-state: paused;
}

/* js/concept-marquee.js sets .is-interactive and drives the offset itself,
   which is what lets the strip be dragged either way. Without the script the
   CSS animation above still runs. */
.concept-marquee.is-interactive .concept-marquee__track {
    animation: none;
}

.concept-marquee.is-interactive .concept-marquee__viewport {
    cursor: grab;
    /* let a vertical swipe scroll the page, and a sideways one take the strip */
    touch-action: pan-y;
}

.concept-marquee.is-interactive.is-dragging .concept-marquee__viewport {
    cursor: grabbing;
}

    /* a drag must not start a text or image selection */
    .concept-marquee.is-interactive .concept-marquee__item {
        user-select: none;
        -webkit-user-select: none;
    }

    .concept-marquee.is-interactive .concept-marquee__icon img {
        pointer-events: none;
    }

.concept-marquee:focus-visible {
    outline: 3px solid rgba(116, 217, 242, 0.45);
    outline-offset: 6px;
    border-radius: 18px;
}

/* three identical groups, so one group's worth of travel loops seamlessly.
   Three rather than two: with only four cards a single group is narrower
   than the panel, and two would run out of content mid-scroll. */
@keyframes concept-marquee-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-33.3333%);
    }
}

.concept-marquee__group {
    display: flex;
    flex-shrink: 0;
    align-items: stretch;
    gap: 16px;
    /* room for the lift, so a raised card is never clipped */
    padding: 18px 16px 18px 0;
}

.concept-marquee__item {
    position: relative;
    display: flex;
    flex: 0 0 182px;
    min-height: 136px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 14px;
    border: 1px solid rgba(16, 167, 196, 0.20);
    border-radius: 16px;
    background: rgba(249, 253, 254, 0.96);
    text-align: center;
    transition: transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 240ms ease, box-shadow 340ms ease;
}

    /* no tile of its own: each icon svg already draws its own rounded panel,
       and the two together read as a double border */
    .concept-marquee__icon {
        display: grid;
        width: 52px;
        height: 52px;
        place-items: center;
    }

        .concept-marquee__icon img {
            display: block;
            width: 48px !important;
            height: 48px !important;
            object-fit: contain;
        }

    .concept-marquee__item strong {
        display: block;
        color: #17236f;
        font-size: 14px;
        font-weight: 750;
        line-height: 1.3;
    }

    /* kept for screen readers and as the bubble's source text */
    .concept-marquee__detail {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* ---- the card crossing the focus point ---- */
    .concept-marquee__item.is-centre {
        transform: translateY(-14px);
        border-color: rgba(16, 167, 196, 0.55);
        box-shadow: 0 20px 34px rgba(6, 18, 40, 0.28), 0 0 0 4px rgba(116, 217, 242, 0.14);
    }

/* ---- bubble ---- */
.concept-marquee__bubble {
    position: absolute;
    top: 8px;
    left: 0;
    z-index: 3;
    width: 236px;
    margin: 0;
    padding: 13px 15px;
    border-radius: 13px;
    background: #ffffff;
    color: #42526b;
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
    box-shadow: 0 18px 34px rgba(6, 18, 40, 0.30);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease, transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateY(8px);
}

    /* arrow, pointed at the card by --arrow-x */
    .concept-marquee__bubble::after {
        content: "";
        position: absolute;
        top: 100%;
        left: var(--arrow-x, 50%);
        margin-left: -8px;
        border: 8px solid transparent;
        border-top-color: #ffffff;
    }

.concept-marquee.is-active .concept-marquee__bubble {
    opacity: 1;
    transform: translateY(0);
}

/* ---- phones: the strip runs top to bottom, centred, bubble above ---- */
@media (max-width: 620px) {
    .concept-marquee {
        padding-top: 18px;
    }

    .concept-marquee__viewport {
        height: 320px;
        /* fade the ends vertically now that the travel is vertical */
        -webkit-mask-image: linear-gradient( 180deg, transparent 0, #000 12%, #000 88%, transparent 100% );
        mask-image: linear-gradient( 180deg, transparent 0, #000 12%, #000 88%, transparent 100% );
    }

    /* the swipe that drags the strip is vertical now, so it is ours to take;
       the page still scrolls from anywhere outside the strip */
    .concept-marquee.is-interactive .concept-marquee__viewport {
        touch-action: pan-x;
    }

    .concept-marquee__track {
        flex-direction: column;
        width: auto;
        height: max-content;
    }

    .concept-marquee__group {
        flex-direction: column;
        /* centre the column of cards in the panel */
        align-items: center;
        gap: 14px;
        padding: 0 0 14px;
    }

    .concept-marquee__item {
        /* fixed height: it is the main axis now, and the loop measures it */
        flex: 0 0 auto;
        width: 150px;
        height: 116px;
        min-height: 0;
        padding: 12px 10px;
    }

        .concept-marquee__icon {
            width: 42px;
            height: 42px;
        }

            .concept-marquee__icon img {
                width: 42px !important;
                height: 42px !important;
            }

        .concept-marquee__item strong {
            font-size: 12px;
        }

    /* the bubble pops above the card it belongs to, floating over whatever
       card sits behind it; the script sets its top from the card */
    .concept-marquee__bubble {
        width: 210px;
        padding: 10px 12px;
        font-size: 11px;
        line-height: 1.5;
    }

    /* the strip travels vertically, so lifting the card along it would read
       as a jump; it swells in place instead */
    .concept-marquee__item.is-centre {
        transform: scale(1.06);
    }
}

/* ---- reduced motion: no drift, swipe through instead ---- */
@media (prefers-reduced-motion: reduce) {
    /* with the script running there is no drift to suppress and the strip is
       already draggable, so only the scriptless fallback needs reshaping */
    .concept-marquee:not(.is-interactive) .concept-marquee__viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .concept-marquee:not(.is-interactive) .concept-marquee__track {
        animation: none !important;
    }

    .concept-marquee:not(.is-interactive) .concept-marquee__group[aria-hidden="true"] {
        display: none;
    }

    .concept-marquee:not(.is-interactive) .concept-marquee__bubble {
        display: none;
    }
}


/* =====================================================
   EXPLAINABILITY — linked decision panels
   Three panels read left to right, joined by arrows drawn
   in the grid gaps, with the last one accented: the step
   the reader is meant to act on.
   ===================================================== */

.explain-grid.explain-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: start;
}

.explain-track {
    /* holds the gap the kicker above the track used to provide */
    margin: 50px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* wide enough for the arrows, which sit in the gaps */
    gap: 44px;
    list-style: none;
}

    .explain-track li {
        position: relative;
        padding: 26px 24px;
        border: 1px solid rgba(23, 35, 111, 0.14);
        border-radius: 16px;
        background: #ffffff;
        transition: transform 340ms cubic-bezier(0.34, 1.56, 0.64, 1), border-color 240ms ease, box-shadow 340ms ease;
    }

        /* the step to act on */
        .explain-track li:last-child {
            border-width: 2px;
            border-color: #10a7c4;
        }

        /* the arrow into the next panel */
        .explain-track li:not(:last-child)::after {
            content: "→";
            position: absolute;
            top: 50%;
            right: -32px;
            width: 20px;
            margin-top: -13px;
            color: #10a7c4;
            font-size: 20px;
            line-height: 1;
            text-align: center;
        }

        .explain-track li:hover {
            transform: translateY(-8px);
            border-color: rgba(16, 167, 196, 0.55);
            box-shadow: 0 20px 36px rgba(23, 35, 111, 0.12), 0 4px 10px rgba(23, 35, 111, 0.06);
        }

            .explain-track li:last-child:hover {
                border-color: #10a7c4;
            }

    .explain-track b {
        display: block;
        margin-bottom: 10px;
        color: #17236f;
        font-family: "Manrope", sans-serif;
        font-size: 19px;
        line-height: 1.3;
    }

    /* matches the section intro above it */
    .explain-track p {
        margin: 0;
        color: #667085;
        font-size: 15px;
        line-height: 1.75;
    }

/* ---- narrow: the panels stack, arrows turn to point down ---- */
@media (max-width: 860px) {
    .explain-track {
        grid-template-columns: minmax(0, 1fr);
        gap: 42px;
    }

        .explain-track li:not(:last-child)::after {
            top: auto;
            right: auto;
            bottom: -34px;
            left: 50%;
            margin: 0 0 0 -10px;
            transform: rotate(90deg);
        }
}

@media (hover: none) {
    .explain-track li:hover {
        transform: none;
    }
}


/* ---------- Privacy by design / Resilience: match the explainability header ---------- */

/* both eyebrows are inline spans, so .eyebrow's margin-bottom was being
   dropped; as blocks they sit 32px above the heading like #explainability */
#privacy .eyebrow,
#safeguards .eyebrow {
    display: block;
}

/* same margins as .explain-grid h2 */
#privacy h2 {
    margin: 8px 0 18px;
}


/* =====================================================
   PRIVACY BY DESIGN — dark band
   One dark block breaks up the run of pale card grids
   through this stretch of the page. No icons: two of the
   three were the same glyph, which read as a mistake.
   ===================================================== */

.privacy-band {
    margin-top: 12px;
    padding: 42px 44px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
    border-radius: 22px;
    background: linear-gradient( 125deg, #202b80, #17236f 72% );
    box-shadow: 0 26px 70px rgba(23, 35, 111, 0.18);
}

    .privacy-band article {
        padding-left: 18px;
        border-left: 2px solid #10a7c4;
    }

    .privacy-band h3 {
        margin: 0 0 10px;
        color: #ffffff;
        font-family: "Manrope", sans-serif;
        font-size: 17px;
        line-height: 1.3;
    }

    .privacy-band p {
        margin: 0;
        color: rgba(255, 255, 255, 0.76);
        font-size: 14px;
        line-height: 1.7;
    }

@media (max-width: 860px) {
    .privacy-band {
        padding: 30px 26px;
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
    }
}


/* =====================================================
   RESILIENCE — heading over the cards
   The heading had a narrow column of its own and broke
   across four lines; full width lets it set on one or two
   and gives the three cards equal room.
   ===================================================== */

.safeguard-grid.safeguard-stack {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.safeguard-stack__head {
    max-width: 760px;
    margin-bottom: 38px;
}

.safeguard-stack__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

/* tags read as a line of labels, not a stack of buttons */
/* the tags now sit under the card header as pills, not as a footer rule */
.safeguard-stack__cards article {
    text-align: center;
}

    .safeguard-stack__cards .safeguard-icon {
        margin-inline: auto;
    }

    /* the 84px floor existed to line up the old bottom-pinned tag rows;
       with the tags moved up it is just empty space at the card foot */
    .safeguard-stack__cards p {
        min-height: 0;
    }

.safeguard-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    /* the h3 above carries no bottom margin, so the pills sat flush on it */
    margin: 14px 0 16px;
}

    .safeguard-grid .safeguard-tags span {
        display: inline-block;
        margin: 0;
        padding: 5px 13px;
        border: 1px solid rgba(16, 167, 196, 0.28);
        border-radius: 999px;
        background: #effafd;
        color: #0f8fa8;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.4;
        text-align: center;
    }

@media (max-width: 860px) {
    .safeguard-stack__cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .safeguard-stack__head {
        margin-bottom: 28px;
    }
}

/* Refined Technology icons: consistent inset glyphs on one rounded tile. */
main.technology-public img[src*="assets/solutions-refined/"],
main.technology-public img[src*="assets/technology-refined/"] {
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    padding: 6px;
    border: 1px solid #A9DFE8;
    border-radius: 22%;
    background: #F3FBFC;
    flex-shrink: 0;
}