/* =========================================================
   Interestut v0.9
   Design preview — Home iteration 01
   Structural responsive correction + visual refinement
   ========================================================= */


/* ---------- global guard ---------- */

:root {
    --shell: 1360px;
}

/* =========================================================
   CONTACTS — approved clean V2 composition
   Scoped away from accepted home, utilities, products,
   requests and OpenAI News pages.
   ========================================================= */

body:has(.page-hero--contacts) {
    --contacts-canvas: calc(100% - 40px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body:has(.page-hero--contacts) > main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

body:has(.page-hero--contacts) .shell {
    width: var(--contacts-canvas);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

body:has(.page-hero--contacts) .page-hero--contacts {
    min-height: 264px;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(214, 228, 241, .88);
    background-image:
        linear-gradient(90deg,
            rgba(250,253,255,1) 0%,
            rgba(248,252,255,.99) 33%,
            rgba(244,250,255,.91) 49%,
            rgba(240,248,255,.55) 66%,
            rgba(239,248,255,.14) 84%,
            rgba(239,248,255,0) 100%),
        url("/assets/images/hero/contacts-hero-clean-v2.webp") !important;
    background-position: center, 59% 50% !important;
    background-size: 100% 100%, cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-attachment: scroll, scroll !important;
}

body:has(.page-hero--contacts) .page-hero--contacts::before,
body:has(.page-hero--contacts) .page-hero--contacts::after {
    content: none !important;
    display: none !important;
}

body:has(.page-hero--contacts) .page-hero--contacts .page-hero-inner {
    min-height: 264px;
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    z-index: 2;
}

body:has(.page-hero--contacts) .page-hero-inner > div:first-child {
    width: 100%;
    max-width: 620px;
}

body:has(.page-hero--contacts) .page-hero h1 {
    max-width: 620px;
    margin: 0 0 12px;
    font-size: 48px;
    line-height: 1.04;
    letter-spacing: -.035em;
}

body:has(.page-hero--contacts) .page-hero-inner p {
    max-width: 590px;
    margin: 0;
    font-size: 17px;
    line-height: 1.48;
}

body:has(.page-hero--contacts) .page-hero--contacts .page-motto--contacts {
    display: block !important;
    top: 28px !important;
    right: auto !important;
    left: calc(50% - 24px) !important;
    width: 270px;
    max-width: 270px !important;
    margin: 0;
    font-size: 23px;
    line-height: 1.3;
    text-align: center;
    transform: rotate(-4deg);
    z-index: 4;
}

body:has(.page-hero--contacts) .page-main {
    flex: 1 0 auto;
    padding-top: 30px;
    padding-bottom: 34px;
}

body:has(.page-hero--contacts) .contacts-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(350px, .82fr);
    gap: 18px;
    align-items: stretch;
}

body:has(.page-hero--contacts) .contacts-primary {
    min-width: 0;
    display: grid;
    gap: 18px;
}

body:has(.page-hero--contacts) .contacts-email-card,
body:has(.page-hero--contacts) .contacts-form-note,
body:has(.page-hero--contacts) .contacts-requests-cta {
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(205,221,237,.94);
    border-radius: 17px;
    box-shadow: 0 10px 28px rgba(29,72,116,.055);
}

body:has(.page-hero--contacts) .contacts-email-card {
    min-height: 156px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    align-items: center;
}

body:has(.page-hero--contacts) .contacts-card-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    color: var(--blue);
    background: linear-gradient(180deg, rgba(237,247,255,.98), rgba(226,241,255,.98));
    border-radius: 16px;
}

body:has(.page-hero--contacts) .contacts-card-icon .svg-icon {
    width: 27px;
    height: 27px;
}

body:has(.page-hero--contacts) .contacts-card-copy {
    min-width: 0;
}

body:has(.page-hero--contacts) .contacts-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #70829a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body:has(.page-hero--contacts) .contacts-email-card h2,
body:has(.page-hero--contacts) .contacts-form-note h2,
body:has(.page-hero--contacts) .contacts-requests-cta h2 {
    margin: 0;
    color: var(--navy);
    letter-spacing: -.025em;
}

body:has(.page-hero--contacts) .contacts-email-card h2 {
    font-size: 24px;
    line-height: 1.15;
}

body:has(.page-hero--contacts) .contacts-email-card p,
body:has(.page-hero--contacts) .contacts-form-note p,
body:has(.page-hero--contacts) .contacts-requests-cta p {
    color: var(--text-soft);
}

body:has(.page-hero--contacts) .contacts-email-card p {
    margin: 5px 0 14px;
    font-size: 14px;
    line-height: 1.45;
}

body:has(.page-hero--contacts) .contacts-email-action,
body:has(.page-hero--contacts) .contacts-requests-action {
    min-height: 42px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(180deg, #1586ff 0%, #0877ee 100%);
    box-shadow: 0 8px 18px rgba(6,119,238,.16);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

body:has(.page-hero--contacts) .contacts-form-note {
    min-height: 102px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(105deg, rgba(249,252,255,.98), rgba(240,248,255,.96));
}

body:has(.page-hero--contacts) .contacts-form-note h2 {
    margin-bottom: 7px;
    font-size: 20px;
    line-height: 1.2;
}

body:has(.page-hero--contacts) .contacts-form-note p {
    margin: 0;
    font-size: 14px;
    line-height: 1.48;
}

body:has(.page-hero--contacts) .contacts-form-note a {
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
}

body:has(.page-hero--contacts) .contacts-requests-cta {
    min-height: 276px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(248,252,255,.99), rgba(232,244,255,.97));
}

body:has(.page-hero--contacts) .contacts-requests-cta h2 {
    margin-top: 18px;
    font-size: 24px;
    line-height: 1.16;
}

body:has(.page-hero--contacts) .contacts-requests-cta p {
    max-width: 350px;
    margin: 8px 0 22px;
    font-size: 14px;
    line-height: 1.48;
}

body:has(.page-hero--contacts) .contacts-requests-action {
    margin-top: auto;
}

body:has(.page-hero--contacts) .footer {
    flex: none;
    margin-top: 0;
}

@media (min-width: 1360px) {
    body:has(.page-hero--contacts) {
        --contacts-canvas: 1280px;
    }
}

@media (min-width: 1200px) and (max-width: 1359px) {
    body:has(.page-hero--contacts) {
        --contacts-canvas: 1180px;
    }

    body:has(.page-hero--contacts) .page-hero h1 {
        font-size: 46px;
    }

    body:has(.page-hero--contacts) .page-hero--contacts .page-motto--contacts {
        left: calc(50% - 12px) !important;
    }
}

@media (min-width: 700px) and (max-width: 1199px) {
    body:has(.page-hero--contacts) {
        --contacts-canvas: calc(100% - 40px);
    }

    body:has(.page-hero--contacts) .page-hero--contacts {
        min-height: 260px;
        background-image:
            linear-gradient(90deg,
                rgba(250,253,255,1) 0%,
                rgba(248,252,255,.99) 37%,
                rgba(244,250,255,.88) 53%,
                rgba(240,248,255,.40) 72%,
                rgba(239,248,255,0) 100%),
            url("/assets/images/hero/contacts-hero-clean-v2.webp") !important;
        background-position: center, 64% 50% !important;
    }

    body:has(.page-hero--contacts) .page-hero--contacts .page-hero-inner {
        min-height: 260px;
    }

    body:has(.page-hero--contacts) .page-hero-inner > div:first-child,
    body:has(.page-hero--contacts) .page-hero h1 {
        max-width: 500px;
    }

    body:has(.page-hero--contacts) .page-hero h1 {
        font-size: 42px;
    }

    body:has(.page-hero--contacts) .page-hero-inner p {
        max-width: 470px;
        font-size: 16px;
    }

    body:has(.page-hero--contacts) .page-hero--contacts .page-motto--contacts {
        top: 23px !important;
        left: 51% !important;
        width: 250px;
        max-width: 250px !important;
        font-size: 21px;
    }

    body:has(.page-hero--contacts) .contacts-layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(310px, .92fr);
    }

    body:has(.page-hero--contacts) .contacts-email-card {
        padding: 20px;
        gap: 0;
    }

    body:has(.page-hero--contacts) .contacts-form-note,
    body:has(.page-hero--contacts) .contacts-requests-cta {
        padding: 20px;
    }
}

@media (max-width: 699px) {
    body:has(.page-hero--contacts) {
        --contacts-canvas: calc(100% - 28px);
    }

    body:has(.page-hero--contacts) .topbar-inner {
        min-height: auto;
        display: grid;
        grid-template-columns: minmax(150px, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 6px 12px;
        padding: 9px 0 7px;
    }

    body:has(.page-hero--contacts) .brand {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        max-width: none;
        overflow: visible;
    }

    body:has(.page-hero--contacts) .brand strong {
        display: block;
        width: auto;
        font-size: 20px;
        line-height: 1;
        white-space: nowrap;
        overflow: visible;
    }

    body:has(.page-hero--contacts) .brand span {
        display: none;
    }

    body:has(.page-hero--contacts) .top-actions {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        gap: 6px;
        justify-content: flex-end;
    }

    body:has(.page-hero--contacts) .search-icon {
        width: 38px;
        height: 38px;
    }

    body:has(.page-hero--contacts) .topbar .contact-button {
        min-width: 0;
        min-height: 38px;
        padding: 0 12px;
        border-radius: 11px;
        font-size: 13px;
    }

    body:has(.page-hero--contacts) .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 1px 2px;
    }

    body:has(.page-hero--contacts) .main-nav a {
        min-width: 0;
        width: auto;
        padding: 4px 1px;
        font-size: 11.5px;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    body:has(.page-hero--contacts) .page-hero--contacts {
        min-height: 0;
        padding: 0 0 14px !important;
        background-image: linear-gradient(180deg, #f8fbff 0%, #edf6ff 100%) !important;
        background-position: center !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
    }

    body:has(.page-hero--contacts) .page-hero--contacts::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 14px;
        height: 158px;
        border-radius: 15px;
        background-image:
            linear-gradient(90deg,
                rgba(247,252,255,.30) 0%,
                rgba(242,249,255,.07) 50%,
                rgba(242,249,255,0) 76%),
            url("/assets/images/hero/contacts-hero-clean-v2.webp") !important;
        background-position: center, 72% 50% !important;
        background-size: 100% 100%, cover !important;
        background-repeat: no-repeat, no-repeat !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.36), 0 10px 25px rgba(31,78,126,.08);
        z-index: 1;
        pointer-events: none;
    }

    body:has(.page-hero--contacts) .page-hero--contacts .page-hero-inner {
        min-height: 0;
        display: block;
        padding: 20px 0 190px;
        position: relative;
        z-index: 2;
    }

    body:has(.page-hero--contacts) .page-hero-inner > div:first-child {
        max-width: 100%;
    }

    body:has(.page-hero--contacts) .page-hero h1 {
        max-width: 100%;
        margin: 0 0 10px;
        font-size: 40px;
        line-height: 1.05;
        white-space: normal;
    }

    body:has(.page-hero--contacts) .page-hero-inner p {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.45;
    }

    body:has(.page-hero--contacts) .page-hero--contacts .page-motto--contacts {
        display: block !important;
        position: absolute !important;
        top: 190px !important;
        right: auto !important;
        left: 30px !important;
        width: 235px;
        max-width: 235px !important;
        margin: 0;
        font-size: 18px;
        line-height: 1.28;
        text-align: left;
        transform: rotate(-4deg);
        z-index: 4;
    }

    body:has(.page-hero--contacts) .page-main {
        padding-top: 24px;
        padding-bottom: 34px;
    }

    body:has(.page-hero--contacts) .contacts-layout,
    body:has(.page-hero--contacts) .contacts-primary {
        display: block;
    }

    body:has(.page-hero--contacts) .contacts-email-card {
        min-height: 0;
        padding: 18px;
        display: block;
        border-radius: 15px;
    }

    body:has(.page-hero--contacts) .contacts-card-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 13px;
        border-radius: 14px;
    }

    body:has(.page-hero--contacts) .contacts-email-card h2,
    body:has(.page-hero--contacts) .contacts-requests-cta h2 {
        font-size: 23px;
    }

    body:has(.page-hero--contacts) .contacts-email-action,
    body:has(.page-hero--contacts) .contacts-requests-action {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 0 12px;
        font-size: 13.5px;
        white-space: nowrap;
    }

    body:has(.page-hero--contacts) .contacts-form-note {
        min-height: 0;
        margin-top: 18px;
        padding: 18px;
        border-radius: 15px;
    }

    body:has(.page-hero--contacts) .contacts-form-note h2 {
        font-size: 20px;
    }

    body:has(.page-hero--contacts) .contacts-requests-cta {
        min-height: 0;
        margin-top: 18px;
        padding: 18px;
        display: block;
        border-radius: 15px;
    }

    body:has(.page-hero--contacts) .contacts-requests-cta h2 {
        margin-top: 0;
    }

    body:has(.page-hero--contacts) .contacts-requests-cta p {
        max-width: 100%;
        margin-bottom: 17px;
    }
}

/* =========================================================
   PRODUCTS — approved clean V2 composition
   Scoped away from the accepted home and utilities pages.
   ========================================================= */

body:has(.page-hero--products) {
    --products-canvas: calc(100% - 40px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body:has(.page-hero--products) > main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

body:has(.page-hero--products) .shell {
    width: var(--products-canvas);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

body:has(.page-hero--products) .page-hero--products {
    min-height: 264px;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(214, 228, 241, .88);
    background-image:
        linear-gradient(90deg,
            rgba(250,253,255,1) 0%,
            rgba(247,251,255,.99) 31%,
            rgba(241,248,255,.88) 48%,
            rgba(238,247,255,.46) 64%,
            rgba(238,247,255,.10) 82%,
            rgba(238,247,255,0) 100%),
        url("/assets/images/hero/products-hero-clean-v2.webp") !important;
    background-position: center, 54% 50% !important;
    background-size: 100% 100%, cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-attachment: scroll, scroll !important;
}

body:has(.page-hero--products) .page-hero--products::before,
body:has(.page-hero--products) .page-hero--products::after {
    content: none !important;
    display: none !important;
}

body:has(.page-hero--products) .page-hero--products .page-hero-inner {
    min-height: 264px;
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    z-index: 2;
}

body:has(.page-hero--products) .page-hero-inner > div:first-child {
    width: 100%;
    max-width: 600px;
}

body:has(.page-hero--products) .page-hero h1 {
    max-width: 600px;
    margin: 0 0 12px;
    font-size: 48px;
    line-height: 1.04;
    letter-spacing: -.035em;
}

body:has(.page-hero--products) .page-hero-inner p {
    max-width: 560px;
    margin: 0;
    font-size: 17px;
    line-height: 1.48;
}

body:has(.page-hero--products) .page-hero--products .hero-art {
    display: none !important;
}

body:has(.page-hero--products) .page-hero--products .page-motto--products {
    display: block !important;
    top: 30px !important;
    right: auto !important;
    left: calc(50% - 20px) !important;
    width: 250px;
    max-width: 250px !important;
    margin: 0;
    font-size: 23px;
    line-height: 1.3;
    text-align: center;
    transform: rotate(-4deg);
    z-index: 4;
}

body:has(.page-hero--products) .page-main {
    padding-top: 32px;
    padding-bottom: 44px;
}

body:has(.page-hero--products) .product-list {
    display: grid;
    gap: 0;
}

body:has(.page-hero--products) .product-row {
    min-height: 116px;
    padding: 20px 22px;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 17px;
    align-items: center;
    background: linear-gradient(105deg, rgba(255,255,255,.98), rgba(247,251,255,.94));
    border-color: rgba(207,220,233,.92);
}

body:has(.page-hero--products) .product-row .icon-box {
    width: 56px;
    height: 56px;
    margin: 0;
}

body:has(.page-hero--products) .product-row h3 {
    margin: 0 0 6px;
    font-size: 21px;
}

body:has(.page-hero--products) .product-row p {
    max-width: 820px;
    margin: 0;
    font-size: 15px;
    line-height: 1.48;
}

body:has(.page-hero--products) .product-preview {
    display: none !important;
}

body:has(.page-hero--products) .bottom-cta {
    min-height: 110px;
    margin-top: 24px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    background: linear-gradient(105deg, rgba(245,250,255,.98), rgba(235,246,255,.96));
    border-color: rgba(197,219,241,.92);
}

body:has(.page-hero--products) .bottom-cta h3 {
    margin: 0 0 5px;
}

body:has(.page-hero--products) .bottom-cta p {
    max-width: 800px;
    margin: 0;
}

body:has(.page-hero--products) .bottom-cta .contact-button {
    min-width: 220px;
    justify-content: center;
    white-space: nowrap;
}

body:has(.page-hero--products) .footer {
    flex: none;
    margin-top: 0;
}

@media (min-width: 1360px) {
    body:has(.page-hero--products) {
        --products-canvas: 1280px;
    }
}

@media (min-width: 1200px) and (max-width: 1359px) {
    body:has(.page-hero--products) {
        --products-canvas: 1180px;
    }

    body:has(.page-hero--products) .page-hero h1 {
        font-size: 46px;
    }

    body:has(.page-hero--products) .page-hero--products .page-motto--products {
        left: calc(50% - 10px) !important;
    }
}

@media (min-width: 700px) and (max-width: 1199px) {
    body:has(.page-hero--products) {
        --products-canvas: calc(100% - 40px);
    }

    body:has(.page-hero--products) .page-hero--products {
        min-height: 260px;
        background-image:
            linear-gradient(90deg,
                rgba(250,253,255,1) 0%,
                rgba(247,251,255,.99) 35%,
                rgba(241,248,255,.84) 51%,
                rgba(238,247,255,.36) 69%,
                rgba(238,247,255,0) 100%),
            url("/assets/images/hero/products-hero-clean-v2.webp") !important;
        background-position: center, 60% 50% !important;
    }

    body:has(.page-hero--products) .page-hero--products .page-hero-inner {
        min-height: 260px;
    }

    body:has(.page-hero--products) .page-hero-inner > div:first-child,
    body:has(.page-hero--products) .page-hero h1 {
        max-width: 480px;
    }

    body:has(.page-hero--products) .page-hero h1 {
        font-size: 42px;
    }

    body:has(.page-hero--products) .page-hero-inner p {
        max-width: 470px;
        font-size: 16px;
    }

    body:has(.page-hero--products) .page-hero--products .page-motto--products {
        top: 25px !important;
        left: 52% !important;
        width: 225px;
        max-width: 225px !important;
        font-size: 21px;
    }
}

@media (max-width: 699px) {
    body:has(.page-hero--products) {
        --products-canvas: calc(100% - 28px);
    }

    body:has(.page-hero--products) .topbar-inner {
        min-height: auto;
        display: grid;
        grid-template-columns: minmax(150px, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 6px 12px;
        padding: 9px 0 7px;
    }

    body:has(.page-hero--products) .brand {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        max-width: none;
        overflow: visible;
    }

    body:has(.page-hero--products) .brand strong {
        display: block;
        width: auto;
        font-size: 20px;
        line-height: 1;
        white-space: nowrap;
        overflow: visible;
    }

    body:has(.page-hero--products) .brand span {
        display: none;
    }

    body:has(.page-hero--products) .top-actions {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        gap: 6px;
        justify-content: flex-end;
    }

    body:has(.page-hero--products) .search-icon {
        width: 38px;
        height: 38px;
    }

    body:has(.page-hero--products) .topbar .contact-button {
        min-width: 0;
        min-height: 38px;
        padding: 0 12px;
        border-radius: 11px;
        font-size: 13px;
    }

    body:has(.page-hero--products) .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 1px 2px;
    }

    body:has(.page-hero--products) .main-nav a {
        min-width: 0;
        width: auto;
        padding: 4px 1px;
        font-size: 11.5px;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    body:has(.page-hero--products) .page-hero--products {
        min-height: 0;
        padding: 0 0 14px !important;
        background-image: linear-gradient(180deg, #f8fbff 0%, #edf6ff 100%) !important;
        background-position: center !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
    }

    body:has(.page-hero--products) .page-hero--products::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 14px;
        height: 158px;
        border-radius: 15px;
        background-image:
            linear-gradient(90deg,
                rgba(246,251,255,.42) 0%,
                rgba(241,248,255,.10) 52%,
                rgba(241,248,255,0) 76%),
            url("/assets/images/hero/products-hero-clean-v2.webp") !important;
        background-position: center, 72% 50% !important;
        background-size: 100% 100%, cover !important;
        background-repeat: no-repeat, no-repeat !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), 0 10px 25px rgba(31,78,126,.08);
        z-index: 1;
        pointer-events: none;
    }

    body:has(.page-hero--products) .page-hero--products .page-hero-inner {
        min-height: 0;
        display: block;
        padding: 20px 0 190px;
        position: relative;
        z-index: 2;
    }

    body:has(.page-hero--products) .page-hero-inner > div:first-child {
        max-width: 100%;
    }

    body:has(.page-hero--products) .page-hero h1 {
        max-width: 100%;
        margin: 0 0 10px;
        font-size: 40px;
        line-height: 1.05;
        white-space: normal;
    }

    body:has(.page-hero--products) .page-hero-inner p {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.45;
    }

    body:has(.page-hero--products) .page-hero--products .page-motto--products {
        display: block !important;
        position: absolute !important;
        top: 184px !important;
        right: auto !important;
        left: 30px !important;
        width: 220px;
        max-width: 220px !important;
        margin: 0;
        font-size: 18px;
        line-height: 1.28;
        text-align: left;
        transform: rotate(-4deg);
        z-index: 4;
    }

    body:has(.page-hero--products) .page-main {
        padding-top: 24px;
        padding-bottom: 34px;
    }

    body:has(.page-hero--products) .product-row {
        min-height: 0;
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    body:has(.page-hero--products) .product-row .icon-box {
        width: 48px;
        height: 48px;
    }

    body:has(.page-hero--products) .product-row h3 {
        margin: 0 0 6px;
        font-size: 20px;
        line-height: 1.18;
    }

    body:has(.page-hero--products) .product-row p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.46;
    }

    body:has(.page-hero--products) .bottom-cta {
        min-height: 0;
        margin-top: 22px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    body:has(.page-hero--products) .bottom-cta h3 {
        margin-bottom: 6px;
        font-size: 22px;
        line-height: 1.18;
    }

    body:has(.page-hero--products) .bottom-cta p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.46;
    }

    body:has(.page-hero--products) .bottom-cta .contact-button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
        white-space: nowrap;
    }
}

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.shell {
    width: min(var(--shell), calc(100% - 48px));
}


/* =========================================================
   HEADER
   ========================================================= */

.topbar-inner {
    gap: 24px;
}


/* =========================================================
   HOME HERO — DESKTOP
   ========================================================= */

.hero--home {
    background-position:
        left top,
        right center !important;

    background-size:
        100% 100%,
        auto 112% !important;

    background-repeat:
        no-repeat,
        no-repeat !important;
}

.hero--home .hero-inner {
    min-height: 326px;

    grid-template-columns:
        minmax(0, 660px)
        minmax(0, 1fr) !important;

    gap: 24px;
}

.hero--home .hero-copy {
    max-width: 650px !important;
}

.hero--home .hero-copy h1 {
    max-width: 650px;

    font-size: clamp(46px, 4vw, 58px) !important;
    line-height: 1 !important;
    letter-spacing: -0.048em;
}

.hero--home .hero-copy > p {
    max-width: 640px;
}

.hero--home .page-motto--home {
    display: block !important;

    top: 24px !important;
    right: 30% !important;

    max-width: 240px !important;
}


/* =========================================================
   HOME CONTENT
   ========================================================= */

.home-layout {
    grid-template-columns:
        minmax(0, 1fr)
        320px !important;

    gap: 32px;
}

.home-main {
    gap: 32px;
}

.home-sidebar {
    grid-template-columns: 1fr !important;
    gap: 18px;
}

.home-main .utility-grid:has(> .utility-card:only-child) {
    grid-template-columns:
        minmax(0, 520px) !important;
}

.home-main .product-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;
}

.idea-title h3,
.why-box h3 {
    font-size: 24px;
}


/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

    :root {
        --shell: 984px;
    }

    .shell {
        width: min(var(--shell), calc(100% - 40px));
    }


    /* header: clean two-row composition */

    .topbar-inner {
        min-height: auto;

        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        grid-template-rows:
            auto
            auto;

        gap: 8px 18px;

        padding: 10px 0 8px;
    }

    .brand {
        grid-column: 1;
        grid-row: 1;

        min-width: 0;
    }

    .top-actions {
        grid-column: 2;
        grid-row: 1;

        width: auto;
        justify-content: flex-end;
    }

    .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;

        justify-content: center;
    }


    /* hero: remove the min-width overflow from v0.8.1 */

    .hero--home .hero-inner {
        grid-template-columns: 1fr !important;

        min-height: 320px;
    }

    .hero--home .hero-copy {
        max-width: 610px !important;
    }

    .hero--home .hero-copy h1 {
        max-width: 610px;

        font-size: clamp(44px, 5.2vw, 54px) !important;
    }

    .hero--home {
        background-size:
            100% 100%,
            auto 108% !important;
    }

    .hero--home .page-motto--home {
        display: block !important;

        top: 20px !important;
        right: 70px !important;

        max-width: 220px !important;
    }


    /* keep a useful right column instead of two tiny cards */

    .home-layout {
        grid-template-columns:
            minmax(0, 1fr)
            292px !important;

        gap: 24px;
    }

    .home-sidebar {
        grid-template-columns: 1fr !important;
    }

    .home-main .product-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   NARROW TABLET
   ========================================================= */

@media (max-width: 900px) {

    .home-layout {
        grid-template-columns: 1fr !important;
    }

    .home-sidebar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .hero--home .page-motto--home {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        left: auto !important;

        width: max-content;
        max-width: 220px !important;

        margin:
            10px
            28px
            0
            auto;

        font-size: 19px;
        text-align: center;

        transform: rotate(-3deg);
    }

    .hero--home .hero-inner {
        min-height: 0;
        padding: 6px 0 24px;
    }

    .hero--home .hero-copy {
        max-width: 570px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

    :root {
        --shell: 100%;
    }

    .shell {
        width: calc(100% - 28px);
    }


    /* compact header */

    .topbar-inner {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            auto;

        gap: 10px 10px;

        padding: 11px 0 9px;
    }

    .brand {
        min-width: 0;
    }

    .brand span {
        display: none;
    }

    .top-actions {
        gap: 8px;
    }

    .search-icon {
        width: 38px;
        height: 38px;
    }

    .contact-button {
        min-height: 40px;

        padding: 0 14px;

        border-radius: 12px;

        font-size: 14px;
    }

    .main-nav {
        display: grid;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 2px;
    }

    .main-nav a {
        min-width: 0;

        padding: 8px 4px;

        font-size: 12px;
        line-height: 1.2;

        text-align: center;
    }


    /* mobile hero:
       keep it clean until a dedicated mobile image crop is approved */

    .hero--home {
        padding: 14px 0 20px !important;

        background-image:
            linear-gradient(
                180deg,
                #f8fbff 0%,
                #eef6ff 100%
            ) !important;

        background-repeat:
            no-repeat !important;
    }

    .hero--home .page-motto--home {
        display: block !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        left: auto !important;

        width: auto;
        max-width: 220px !important;

        margin:
            0
            14px
            12px;

        font-size: 16px;
        line-height: 1.3;

        text-align: left;

        transform: rotate(-2deg);
    }

    .hero--home .hero-inner {
        display: block;

        min-height: 0;

        padding: 0;
    }

    .hero--home .hero-copy {
        width: 100%;
        max-width: 100% !important;
    }

    .hero--home .hero-copy h1 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 14px;

        font-size: 34px !important;
        line-height: 1.03 !important;
        letter-spacing: -0.045em;
    }

    .hero--home .hero-copy > p {
        width: 100%;
        max-width: 100%;

        font-size: 15px;
        line-height: 1.52;
    }

    .hero-features {
        margin-top: 20px;

        gap: 12px;
    }

    .feature {
        min-width: 0;
        width: 100%;
    }

    .feature-icon {
        flex-basis: 38px;

        width: 38px;
        height: 38px;
    }


    /* content */

    .home-sidebar {
        grid-template-columns: 1fr !important;
    }

    .home-main .utility-grid:has(> .utility-card:only-child),
    .home-main .product-grid {
        grid-template-columns: 1fr !important;
    }

    .section-head {
        gap: 10px;
    }

    .utility-card,
    .product-card,
    .idea-box,
    .why-box {
        border-radius: 16px;
    }
}


/* =========================================================
   HOME ITERATION 02
   Desktop hero composition refinement
   ========================================================= */

@media (min-width: 1101px) {

    .hero--home {
        background-position:
            left top,
            right center !important;

        background-size:
            100% 100%,
            auto 106% !important;
    }

    .hero--home .hero-inner {
        min-height: 326px;

        grid-template-columns:
            minmax(0, 760px)
            minmax(0, 1fr) !important;

        gap: 18px;
    }

    .hero--home .hero-copy {
        width: 100%;
        max-width: 760px !important;
    }

    .hero--home .hero-copy h1 {
        width: 100%;
        max-width: 760px;

        font-size: clamp(
            48px,
            3.6vw,
            60px
        ) !important;

        line-height: .99 !important;
        letter-spacing: -.047em;
    }

    .hero--home .hero-copy > p {
        max-width: 690px;
    }

    .hero--home .page-motto--home {
        top: 26px !important;
        right: 30% !important;

        max-width: 240px !important;
    }

}


/* =========================================================
   Interestut v0.9 — Home fixed-adaptive baseline
   Drafted after visual checks at 1920, 1440, 1024 and 390 px.
   Scope: home page only.
   ========================================================= */

/* Compact desktop: fixed 1180 px canvas. */
@media (min-width: 1200px) and (max-width: 1359px) {
    body:has(.hero--home) .topbar-inner,
    body:has(.hero--home) .page-main,
    body:has(.hero--home) .footer-inner {
        width: 1180px;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .hero--home {
        display: grid;
        grid-template-columns: 1180px;
        justify-content: center;
        min-height: 330px;
        background-image:
            linear-gradient(90deg, #f7fbff 0%, #eef7ff 100%) !important;
        background-repeat: no-repeat !important;
        overflow: hidden;
    }

    .hero--home .hero-inner {
        grid-column: 1;
        grid-row: 1;
        width: 1180px;
        min-height: 330px;
        display: grid;
        grid-template-columns: 590px 36px 554px !important;
        gap: 0;
        position: relative;
        z-index: 1;
    }

    .hero--home .hero-inner::after {
        content: "";
        grid-column: 3;
        grid-row: 1;
        align-self: stretch;
        width: 554px;
        background-image: url("/assets/images/hero/home-hero.webp");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .hero--home .hero-copy {
        grid-column: 1;
        grid-row: 1;
        width: 590px;
        max-width: 590px !important;
        position: relative;
        z-index: 1;
    }

    .hero--home .hero-copy h1 {
        width: 590px;
        max-width: 590px !important;
        font-size: 50px !important;
        line-height: .99 !important;
    }

    .hero--home .hero-copy > p {
        width: 570px;
        max-width: 570px;
    }

    .hero--home .hero-features {
        width: 554px;
        grid-template-columns: 220px 254px;
        column-gap: 30px;
        row-gap: 12px;
    }

    .hero--home .page-motto--home {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        justify-self: start;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 225px;
        max-width: 225px !important;
        margin: 24px 0 0 650px;
        z-index: 2;
    }

    body:has(.hero--home) .home-layout {
        width: 1180px;
        grid-template-columns: 872px 280px !important;
        gap: 28px;
    }

    body:has(.hero--home) .home-main {
        width: 872px;
        gap: 32px;
    }

    body:has(.hero--home) .home-sidebar {
        width: 280px;
        grid-template-columns: 280px !important;
    }

    body:has(.hero--home) .home-main .utility-grid:has(> .utility-card:only-child) {
        width: 872px;
        grid-template-columns: 872px !important;
    }

    body:has(.hero--home) .home-main .utility-card:only-child {
        display: grid;
        grid-template-columns: 52px 636px 112px;
        grid-template-rows: auto auto;
        column-gap: 18px;
        row-gap: 6px;
        align-items: start;
        padding: 22px 18px;
    }

    body:has(.hero--home) .home-main .utility-card:only-child .icon-box {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
    }

    body:has(.hero--home) .home-main .utility-card:only-child h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    body:has(.hero--home) .home-main .utility-card:only-child > p {
        grid-column: 2;
        grid-row: 2;
    }

    body:has(.hero--home) .home-main .utility-card:only-child .utility-bottom {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        justify-self: end;
        margin: 0;
    }

    body:has(.hero--home) .home-main .product-grid {
        width: 872px;
        grid-template-columns: 428px 428px !important;
        gap: 16px;
    }
}

/* Desktop reference: fixed 1280 px canvas; only outer fields may change. */
@media (min-width: 1360px) {
    body:has(.hero--home) {
        min-width: 1280px;
    }

    body:has(.hero--home) .topbar-inner,
    body:has(.hero--home) .page-main,
    body:has(.hero--home) .footer-inner {
        width: 1280px;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .hero--home {
        display: grid;
        grid-template-columns: 1280px;
        justify-content: center;
        min-height: 340px;
        background-image:
            linear-gradient(90deg, #f7fbff 0%, #eef7ff 100%) !important;
        background-repeat: no-repeat !important;
        overflow: hidden;
    }

    .hero--home .hero-inner {
        grid-column: 1;
        grid-row: 1;
        width: 1280px;
        min-height: 340px;
        display: grid;
        grid-template-columns: 640px 40px 600px !important;
        gap: 0;
        position: relative;
        z-index: 1;
    }

    .hero--home .hero-inner::after {
        content: "";
        grid-column: 3;
        grid-row: 1;
        align-self: stretch;
        width: 600px;
        background-image: url("/assets/images/hero/home-hero.webp");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    .hero--home .hero-copy {
        grid-column: 1;
        grid-row: 1;
        width: 640px;
        max-width: 640px !important;
        position: relative;
        z-index: 1;
    }

    .hero--home .hero-copy h1 {
        width: 640px;
        max-width: 640px !important;
        font-size: 54px !important;
        line-height: .99 !important;
    }

    .hero--home .hero-copy > p {
        width: 620px;
        max-width: 620px;
    }

    .hero--home .hero-features {
        width: 600px;
        grid-template-columns: 240px 240px;
        column-gap: 40px;
        row-gap: 14px;
    }

    .hero--home .page-motto--home {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        justify-self: start;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: 240px;
        max-width: 240px !important;
        margin: 26px 0 0 708px;
        z-index: 2;
    }

    body:has(.hero--home) .home-layout {
        width: 1280px;
        grid-template-columns: 948px 300px !important;
        gap: 32px;
    }

    body:has(.hero--home) .home-main {
        width: 948px;
        gap: 32px;
    }

    body:has(.hero--home) .home-sidebar {
        width: 300px;
        grid-template-columns: 300px !important;
    }

    body:has(.hero--home) .home-main .utility-grid:has(> .utility-card:only-child) {
        width: 948px;
        grid-template-columns: 948px !important;
    }

    body:has(.hero--home) .home-main .utility-card:only-child {
        display: grid;
        grid-template-columns: 52px 696px 128px;
        grid-template-rows: auto auto;
        column-gap: 18px;
        row-gap: 6px;
        align-items: start;
        padding: 22px 18px;
    }

    body:has(.hero--home) .home-main .utility-card:only-child .icon-box {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
    }

    body:has(.hero--home) .home-main .utility-card:only-child h3 {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }

    body:has(.hero--home) .home-main .utility-card:only-child > p {
        grid-column: 2;
        grid-row: 2;
    }

    body:has(.hero--home) .home-main .utility-card:only-child .utility-bottom {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        justify-self: end;
        margin: 0;
    }

    body:has(.hero--home) .home-main .product-grid {
        width: 948px;
        grid-template-columns: 466px 466px !important;
        gap: 16px;
    }
}

/* Tablet: preserve the image while keeping it out of the copy zone. */
@media (min-width: 900px) and (max-width: 1199px) {
    :root {
        --shell: 1080px;
    }

    .shell {
        width: min(var(--shell), calc(100% - 40px));
    }

    .hero--home {
        background-position:
            left top,
            calc(50% + 340px) top !important;

        background-size:
            100% 100%,
            744px auto !important;
    }

    .hero--home .hero-inner {
        min-height: 350px;

        grid-template-columns:
            minmax(0, 500px)
            minmax(280px, 1fr) !important;

        gap: 24px;
    }

    .hero--home .hero-copy,
    .hero--home .hero-copy h1 {
        width: 100%;
        max-width: 500px !important;
    }

    .hero--home .hero-copy h1 {
        font-size: clamp(38px, 4.15vw, 46px) !important;
        line-height: 1 !important;
        letter-spacing: -0.045em;
    }

    .hero--home .hero-copy > p {
        max-width: 500px;
        font-size: 16px;
    }

    .hero--home .page-motto--home {
        top: 24px !important;
        right: clamp(60px, 8vw, 96px) !important;
        left: auto !important;
        max-width: 220px !important;
    }

    .home-layout {
        grid-template-columns:
            minmax(0, 1fr)
            292px !important;

        gap: 24px;
    }
}

/* Narrow tablet: an intentional single-column composition. */
@media (min-width: 700px) and (max-width: 899px) {
    :root {
        --shell: 820px;
    }

    .shell {
        width: min(var(--shell), calc(100% - 36px));
    }

    .hero--home {
        padding: 22px 0 28px !important;

        background-image:
            linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%) !important;
    }

    .hero--home .hero-inner {
        display: block;
        min-height: 0;
        padding: 0;
    }

    .hero--home .hero-copy {
        max-width: 680px !important;
    }

    .hero--home .hero-copy h1 {
        max-width: 620px !important;
        font-size: 44px !important;
        line-height: 1 !important;
    }

    .hero--home .page-motto--home {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: max-content;
        max-width: 230px !important;
        margin: 0 24px 14px auto;
        font-size: 19px;
    }

    .home-layout {
        grid-template-columns: 1fr !important;
    }

    .home-sidebar {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile: keep all content, navigation and motto; remove raster conflicts. */
@media (max-width: 699px) {
    :root {
        --shell: 100%;
    }

    .shell {
        width: calc(100% - 28px);
    }

    .topbar-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 10px;
        padding: 11px 0 9px;
    }

    .brand {
        min-width: 0;
    }

    .brand span {
        display: none;
    }

    .top-actions {
        width: auto;
        justify-content: flex-end;
        gap: 8px;
    }

    .main-nav {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 2px;
    }

    .main-nav a {
        min-width: 0;
        padding: 8px 4px;
        font-size: 12px;
        line-height: 1.2;
        text-align: center;
    }

    .hero--home {
        padding: 14px 0 22px !important;
        background-image:
            linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%) !important;
    }

    .hero--home .hero-inner {
        display: block;
        min-height: 0;
        padding: 0;
    }

    .hero--home .hero-copy,
    .hero--home .hero-copy h1,
    .hero--home .hero-copy > p {
        width: 100%;
        max-width: 100% !important;
    }

    .hero--home .hero-copy h1 {
        margin-bottom: 14px;
        font-size: clamp(31px, 8.7vw, 34px) !important;
        line-height: 1.03 !important;
    }

    .hero--home .page-motto--home {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: auto;
        max-width: 220px !important;
        margin: 0 14px 12px;
        font-size: 16px;
        line-height: 1.3;
        text-align: left;
    }

    .home-layout,
    .home-sidebar,
    .home-main .utility-grid:has(> .utility-card:only-child),
    .home-main .product-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   HOME DESKTOP — approved-reference visual pass
   CSS-only; fixed-adaptive canvas remains 1180 / 1280 px.
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1359px) {
    body:has(.hero--home) {
        --home-canvas: 1180px;
        --home-main-width: 872px;
        --home-sidebar-width: 280px;
        --home-column-gap: 28px;
        --home-hero-image-width: 720px;
        --home-hero-copy-width: 680px;
        --home-hero-title-width: 570px;
        --home-hero-title-size: 44px;
        --home-hero-text-width: 565px;
        --home-feature-columns: 188px 198px 220px;
        --home-feature-gap: 14px;
        --home-motto-left: 628px;
        --home-motto-width: 210px;
        --home-check-width: 276px;
        --home-check-right: 14px;
    }
}

@media (min-width: 1360px) {
    body:has(.hero--home) {
        --home-canvas: 1280px;
        --home-main-width: 948px;
        --home-sidebar-width: 300px;
        --home-column-gap: 32px;
        --home-hero-image-width: 780px;
        --home-hero-copy-width: 740px;
        --home-hero-title-width: 610px;
        --home-hero-title-size: 46px;
        --home-hero-text-width: 610px;
        --home-feature-columns: 198px 214px 242px;
        --home-feature-gap: 16px;
        --home-motto-left: 700px;
        --home-motto-width: 220px;
        --home-check-width: 300px;
        --home-check-right: 18px;
    }
}

@media (min-width: 1200px) {
    body:has(.hero--home) .topbar-inner,
    body:has(.hero--home) .page-main,
    body:has(.hero--home) .footer-inner {
        width: var(--home-canvas);
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    body:has(.hero--home) .topbar-inner {
        min-height: 72px;
        gap: 20px;
    }

    body:has(.hero--home) .brand {
        min-width: 250px;
    }

    body:has(.hero--home) .brand strong {
        font-size: 25px;
    }

    body:has(.hero--home) .main-nav {
        gap: 2px;
    }

    body:has(.hero--home) .main-nav a {
        padding: 10px 10px;
    }

    body:has(.hero--home) .search-icon {
        width: 40px;
        height: 40px;
    }

    body:has(.hero--home) .contact-button {
        min-height: 42px;
        padding: 0 20px;
        border-radius: 12px;
    }

    .hero--home {
        display: grid;
        grid-template-columns: var(--home-canvas);
        justify-content: center;
        min-height: 300px;
        padding: 0 !important;
        background-image:
            linear-gradient(
                90deg,
                rgba(249, 252, 255, .99) 0%,
                rgba(247, 251, 255, .96) 24%,
                rgba(244, 250, 255, .86) 35%,
                rgba(241, 248, 255, .58) 45%,
                rgba(237, 246, 255, .25) 55%,
                rgba(237, 246, 255, .06) 66%,
                rgba(237, 246, 255, 0) 76%
            ),
            url("/assets/images/hero/home-hero-clean-v3.webp") !important;
        background-position: center, center 58% !important;
        background-size: 100% 100%, cover !important;
        background-repeat: no-repeat, no-repeat !important;
        border-bottom-color: rgba(210, 225, 238, .88);
        overflow: hidden;
    }

    .hero--home .hero-inner {
        grid-column: 1;
        grid-row: 1;
        display: block;
        width: var(--home-canvas);
        min-height: 300px;
        padding: 0;
        position: relative;
        isolation: isolate;
        z-index: 1;
    }

    .hero--home .hero-inner::after {
        display: none;
    }

    .hero--home .hero-copy {
        width: var(--home-hero-copy-width);
        max-width: var(--home-hero-copy-width) !important;
        min-height: 300px;
        padding: 25px 0 18px;
        position: relative;
        z-index: 2;
    }

    .hero--home .hero-copy h1 {
        width: var(--home-hero-title-width);
        max-width: var(--home-hero-title-width) !important;
        margin: 0 0 11px;
        font-size: var(--home-hero-title-size) !important;
        line-height: .99 !important;
        letter-spacing: -.043em;
    }

    .hero--home .hero-copy > p {
        width: var(--home-hero-text-width);
        max-width: var(--home-hero-text-width);
        font-size: 16px;
        line-height: 1.43;
    }

    .hero--home .hero-features {
        width: max-content;
        margin-top: 20px;
        display: grid;
        grid-template-columns: var(--home-feature-columns);
        column-gap: var(--home-feature-gap);
        row-gap: 0;
    }

    .hero--home .feature {
        min-width: 0;
        gap: 10px;
        align-items: center;
    }

    .hero--home .feature-icon {
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        color: #1476eb;
        background: rgba(31, 122, 240, .12);
        box-shadow: inset 0 0 0 1px rgba(31, 122, 240, .05);
    }

    .hero--home .feature:nth-child(2) .feature-icon {
        color: #5358dc;
        background: rgba(83, 88, 220, .11);
    }

    .hero--home .feature:nth-child(3) .feature-icon {
        color: #159866;
        background: rgba(21, 152, 102, .11);
    }

    .hero--home .feature-icon .svg-icon {
        width: 25px;
        height: 25px;
    }

    .hero--home .feature strong {
        margin-bottom: 2px;
        font-size: 14px;
        line-height: 1.2;
    }

    .hero--home .feature small {
        font-size: 12px;
        line-height: 1.32;
    }

    .hero--home .page-motto--home {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
        justify-self: start;
        display: block !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        width: var(--home-motto-width);
        max-width: var(--home-motto-width) !important;
        margin: 27px 0 0 var(--home-motto-left);
        color: #123f78;
        font-size: 22px;
        line-height: 1.28;
        transform: rotate(-4deg);
        z-index: 4;
    }

    .hero--home .page-motto--home::after {
        width: 68%;
        margin-top: 3px;
    }

    body:has(.hero--home) .hero--home .hero-inner .hero-side {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute;
        top: 82px;
        right: var(--home-check-right);
        width: var(--home-check-width);
        z-index: 3;
    }

    .hero--home .hero-checks {
        width: 100%;
        padding: 12px 14px;
        background: rgba(255, 255, 255, .90);
        border: 1px solid rgba(255, 255, 255, .80);
        border-radius: 17px;
        box-shadow: 0 16px 34px rgba(28, 64, 105, .14);
        backdrop-filter: blur(8px);
    }

    .hero--home .hero-check {
        gap: 10px;
        padding: 7px 1px;
        font-size: 14px;
        line-height: 1.28;
        font-weight: 650;
    }

    .hero--home .checkmark {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        font-size: 13px;
    }

    body:has(.hero--home) .page-main {
        padding-top: 24px;
        padding-bottom: 46px;
    }

    body:has(.hero--home) .home-layout {
        width: var(--home-canvas);
        grid-template-columns:
            var(--home-main-width)
            var(--home-sidebar-width) !important;
        gap: var(--home-column-gap);
    }

    body:has(.hero--home) .home-main {
        width: var(--home-main-width);
        gap: 25px;
    }

    body:has(.hero--home) .home-sidebar {
        width: var(--home-sidebar-width);
        grid-template-columns: var(--home-sidebar-width) !important;
        gap: 16px;
    }

    body:has(.hero--home) .section {
        gap: 12px;
    }

    body:has(.hero--home) .section-head h2 {
        margin-bottom: 3px;
        font-size: 22px;
    }

    body:has(.hero--home) .section-head p,
    body:has(.hero--home) .section-link {
        font-size: 14px;
    }

    body:has(.hero--home) .card {
        border-radius: 17px;
        box-shadow: 0 9px 24px rgba(18, 54, 99, .055);
    }

    body:has(.hero--home) .home-main .utility-grid:has(> .utility-card:only-child) {
        width: var(--home-main-width);
        grid-template-columns: var(--home-main-width) !important;
    }

    body:has(.hero--home) .home-main .utility-card:only-child {
        min-height: 112px;
        padding: 18px 20px;
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 16px;
        row-gap: 4px;
        align-items: center;
        background:
            linear-gradient(100deg, rgba(241, 251, 246, .96), #ffffff 42%);
        border-color: #dceee5;
    }

    body:has(.hero--home) .home-main .utility-card:only-child .icon-box {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 58px;
        height: 58px;
        align-self: center;
        border-radius: 16px;
    }

    body:has(.hero--home) .home-main .utility-card:only-child h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin: 0;
        font-size: 20px;
    }

    body:has(.hero--home) .home-main .utility-card:only-child > p {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        font-size: 14px;
        line-height: 1.46;
    }

    body:has(.hero--home) .home-main .utility-card:only-child .utility-bottom {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        justify-self: end;
        margin: 0;
    }

    body:has(.hero--home) .home-main .product-grid {
        width: var(--home-main-width);
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px;
    }

    body:has(.hero--home) .home-main > .section:nth-child(2) .product-card {
        min-height: 164px;
        padding: 17px;
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        background:
            linear-gradient(145deg, #ffffff 0%, #f5f9ff 100%);
        border-color: #dce7f4;
    }

    body:has(.hero--home) .home-main > .section:nth-child(2) .product-card:nth-child(2) {
        background:
            linear-gradient(145deg, #ffffff 0%, #f8f6ff 100%);
        border-color: #e5e0f4;
    }

    body:has(.hero--home) .home-main > .section:nth-child(2) .icon-box {
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }

    body:has(.hero--home) .home-main > .section:nth-child(2) .product-card:nth-child(2) .icon-box {
        color: #7255d9;
        background: #f0ebff;
    }

    body:has(.hero--home) .home-main > .section:nth-child(2) .product-card h3 {
        margin: 1px 0 7px;
        font-size: 18px;
        line-height: 1.2;
    }

    body:has(.hero--home) .home-main > .section:nth-child(2) .product-card p {
        font-size: 13px;
        line-height: 1.46;
    }

    body:has(.hero--home) .home-main > .section:nth-child(2) .product-card .badge {
        margin-top: 11px;
    }

    body:has(.hero--home) .home-main > .section:nth-child(3) > .product-card {
        min-height: 108px;
        padding: 17px 20px;
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 16px;
        align-items: center;
        background:
            linear-gradient(105deg, rgba(248, 250, 253, .98), #ffffff 66%);
        border-style: dashed;
    }

    body:has(.hero--home) .home-main > .section:nth-child(3) > .product-card h3 {
        margin: 0 0 5px;
        font-size: 19px;
    }

    body:has(.hero--home) .home-main > .section:nth-child(3) > .product-card p {
        font-size: 14px;
        line-height: 1.45;
    }

    body:has(.hero--home) .home-main > .section:nth-child(4) {
        padding: 17px 20px;
        background:
            linear-gradient(105deg, rgba(239, 246, 255, .88), rgba(255, 255, 255, .94));
        border: 1px solid #dfe9f5;
        border-radius: 17px;
    }

    body:has(.hero--home) .idea-box,
    body:has(.hero--home) .why-box {
        padding: 18px;
        border-radius: 18px;
        box-shadow: 0 9px 24px rgba(18, 54, 99, .05);
    }

    body:has(.hero--home) .idea-box {
        background:
            radial-gradient(circle at 92% 8%, rgba(72, 151, 255, .16), transparent 34%),
            linear-gradient(155deg, #f7fbff 0%, #edf5ff 100%);
    }

    body:has(.hero--home) .idea-title {
        gap: 12px;
        margin-bottom: 15px;
    }

    body:has(.hero--home) .idea-title .icon-box {
        flex: 0 0 50px;
        width: 50px;
        height: 50px;
        color: #1679ef;
        background: rgba(255, 255, 255, .72);
        box-shadow: inset 0 0 0 1px rgba(31, 122, 240, .08);
    }

    body:has(.hero--home) .idea-title h3,
    body:has(.hero--home) .why-box h3 {
        margin-bottom: 7px;
        font-size: 21px;
        line-height: 1.12;
    }

    body:has(.hero--home) .idea-box p,
    body:has(.hero--home) .why-line {
        font-size: 14px;
        line-height: 1.48;
    }

    body:has(.hero--home) .idea-main-button {
        width: 100%;
        min-height: 43px;
        border-radius: 12px;
        font-size: 14px;
    }

    body:has(.hero--home) .why-box {
        background:
            radial-gradient(circle at 94% 8%, rgba(33, 179, 106, .13), transparent 35%),
            linear-gradient(155deg, #f7fcf9 0%, #eef9f3 100%);
    }

    body:has(.hero--home) .why-line + .why-line {
        margin-top: 8px;
    }
}


/* =========================================================
   HOME TABLET 1024 — iteration 01
   Independent 900–1199 px composition; accepted desktop
   rules at 1200 px and above remain untouched.
   ========================================================= */

@media (min-width: 900px) and (max-width: 1199px) {
    body:has(.hero--home) {
        --home-tablet-canvas: 984px;
    }

    body:has(.hero--home) .shell,
    body:has(.hero--home) .topbar-inner,
    body:has(.hero--home) .page-main,
    body:has(.hero--home) .footer-inner {
        width: min(var(--home-tablet-canvas), calc(100% - 40px));
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    body:has(.hero--home) .topbar-inner {
        min-height: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 8px 18px;
        padding: 10px 0 8px;
    }

    body:has(.hero--home) .brand {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }

    body:has(.hero--home) .top-actions {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        justify-content: flex-end;
    }

    body:has(.hero--home) .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        justify-content: center;
    }

    .hero--home {
        display: block;
        min-height: 380px;
        padding: 0 !important;
        background-image:
            linear-gradient(
                90deg,
                rgba(249, 252, 255, .99) 0%,
                rgba(247, 251, 255, .96) 24%,
                rgba(244, 250, 255, .86) 35%,
                rgba(241, 248, 255, .58) 45%,
                rgba(237, 246, 255, .25) 55%,
                rgba(237, 246, 255, .06) 66%,
                rgba(237, 246, 255, 0) 76%
            ),
            url("/assets/images/hero/home-hero-clean-v3.webp") !important;
        background-position: center, center 58% !important;
        background-size: 100% 100%, cover !important;
        background-repeat: no-repeat, no-repeat !important;
        overflow: hidden;
    }

    .hero--home .hero-inner {
        width: min(var(--home-tablet-canvas), calc(100% - 40px));
        min-height: 380px;
        display: block;
        padding: 0;
        position: relative;
        isolation: isolate;
    }

    .hero--home .hero-inner::after {
        display: none;
    }

    .hero--home .hero-copy {
        width: 560px;
        max-width: 560px !important;
        min-height: 380px;
        padding: 25px 0 18px;
        position: relative;
        z-index: 2;
    }

    .hero--home .hero-copy h1 {
        width: 560px;
        max-width: 560px !important;
        margin: 0 0 11px;
        font-size: 44px !important;
        line-height: .99 !important;
        letter-spacing: -.043em;
    }

    .hero--home .hero-copy > p {
        width: 520px;
        max-width: 520px;
        font-size: 16px;
        line-height: 1.43;
    }

    .hero--home .hero-features {
        width: 560px;
        margin-top: 18px;
        display: grid;
        grid-template-columns: 220px 260px;
        column-gap: 20px;
        row-gap: 12px;
    }

    .hero--home .feature {
        min-width: 0;
        gap: 10px;
        align-items: center;
    }

    .hero--home .feature:nth-child(3) {
        grid-column: 1 / -1;
        width: 300px;
    }

    .hero--home .feature-icon {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
    }

    .hero--home .feature strong {
        margin-bottom: 2px;
        font-size: 14px;
        line-height: 1.2;
    }

    .hero--home .feature small {
        font-size: 12px;
        line-height: 1.32;
    }

    .hero--home .page-motto--home {
        display: block !important;
        position: absolute !important;
        top: 24px !important;
        right: 60px !important;
        left: auto !important;
        width: 230px;
        max-width: 230px !important;
        margin: 0;
        color: #123f78;
        font-size: 22px;
        line-height: 1.28;
        transform: rotate(-4deg);
        z-index: 4;
    }

    body:has(.hero--home) .hero--home .hero-inner .hero-side {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute;
        top: 122px;
        right: 0;
        width: 320px;
        z-index: 3;
    }

    .hero--home .hero-checks {
        width: 100%;
        padding: 12px 14px;
        background: rgba(255, 255, 255, .91);
        border: 1px solid rgba(255, 255, 255, .82);
        border-radius: 17px;
        box-shadow: 0 16px 34px rgba(28, 64, 105, .14);
        backdrop-filter: blur(8px);
    }

    .hero--home .hero-check {
        gap: 10px;
        padding: 7px 1px;
        font-size: 14px;
        line-height: 1.28;
        font-weight: 650;
    }

    .hero--home .checkmark {
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        font-size: 13px;
    }

    body:has(.hero--home) .page-main {
        padding-top: 34px;
        padding-bottom: 46px;
    }

    body:has(.hero--home) .home-layout {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 28px;
    }

    body:has(.hero--home) .home-main {
        width: 100%;
        gap: 26px;
    }

    body:has(.hero--home) .home-sidebar {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px;
    }

    body:has(.hero--home) .home-main .utility-grid:has(> .utility-card:only-child) {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(.hero--home) .home-main .utility-card:only-child {
        min-height: 116px;
        padding: 18px 20px;
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 18px;
        row-gap: 4px;
        align-items: start;
    }

    body:has(.hero--home) .home-main .utility-card:only-child .icon-box {
        grid-column: 1;
        grid-row: 1 / 3;
        align-self: center;
    }

    body:has(.hero--home) .home-main .utility-card:only-child h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        margin: 0;
    }

    body:has(.hero--home) .home-main .utility-card:only-child > p {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    body:has(.hero--home) .home-main .utility-card:only-child .utility-bottom {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        justify-self: end;
        margin: 0;
    }

    body:has(.hero--home) .home-main > .section:nth-child(2) .product-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px;
    }

    body:has(.hero--home) .home-main > .section:nth-child(2) .product-card {
        min-height: 190px;
    }
}


/* =========================================================
   HOME MOBILE 390 — iteration 01
   Independent composition below 700 px. Accepted tablet and
   desktop rules at 700 px and above remain untouched.
   ========================================================= */

@media (max-width: 699px) {
    body:has(.hero--home) {
        --home-mobile-gutter: 14px;
    }

    body:has(.hero--home) .shell,
    body:has(.hero--home) .topbar-inner,
    body:has(.hero--home) .page-main,
    body:has(.hero--home) .footer-inner {
        width: calc(100% - (var(--home-mobile-gutter) * 2));
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    body:has(.hero--home) .topbar-inner {
        min-height: auto;
        display: grid;
        grid-template-columns: minmax(150px, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 6px 12px;
        padding: 9px 0 7px;
    }

    body:has(.hero--home) .brand {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        max-width: none;
        overflow: visible;
    }

    body:has(.hero--home) .brand strong {
        display: block;
        width: auto;
        font-size: 20px;
        line-height: 1;
        white-space: nowrap;
        overflow: visible;
    }

    body:has(.hero--home) .brand span {
        display: none;
    }

    body:has(.hero--home) .top-actions {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        gap: 6px;
        justify-content: flex-end;
    }

    body:has(.hero--home) .search-icon {
        width: 38px;
        height: 38px;
    }

    body:has(.hero--home) .contact-button {
        min-height: 38px;
        padding: 0 12px;
        border-radius: 11px;
        font-size: 13px;
    }

    body:has(.hero--home) .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 1px 2px;
    }

    body:has(.hero--home) .main-nav a {
        min-width: 0;
        width: auto;
        padding: 4px 1px;
        font-size: 11.5px;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    .hero--home {
        min-height: 0;
        padding: 0 0 18px !important;
        position: relative;
        background-image:
            linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%) !important;
        background-position: center !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        overflow: hidden;
    }

    .hero--home .hero-inner {
        width: calc(100% - (var(--home-mobile-gutter) * 2));
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 0;
        position: relative;
    }

    .hero--home .hero-copy {
        order: 1;
        width: 100%;
        max-width: 100% !important;
        min-height: 352px;
        padding: 18px 0 6px;
        position: relative;
        z-index: 2;
    }

    .hero--home .hero-copy h1 {
        width: 100%;
        max-width: 100% !important;
        margin: 0 0 10px;
        font-size: 32px !important;
        line-height: 1.03 !important;
        letter-spacing: -.035em;
        white-space: normal !important;
    }

    .hero--home .hero-copy > p {
        width: 100%;
        max-width: 100% !important;
        font-size: 15px;
        line-height: 1.48;
    }

    .hero--home .hero-features {
        width: 100%;
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .hero--home .feature {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        gap: 10px;
        align-items: center;
    }

    .hero--home .feature-icon {
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
    }

    .hero--home .feature strong {
        margin-bottom: 2px;
        font-size: 14px;
        line-height: 1.2;
    }

    .hero--home .feature small {
        font-size: 12px;
        line-height: 1.32;
    }

    .hero--home .hero-inner::after {
        content: "";
        order: 2;
        display: block;
        flex: 0 0 168px;
        width: 100%;
        height: 168px;
        border-radius: 16px;
        background-image:
            linear-gradient(
                90deg,
                rgba(246, 251, 255, .28) 0%,
                rgba(241, 248, 255, .10) 48%,
                rgba(241, 248, 255, 0) 72%
            ),
            url("/assets/images/hero/home-hero-clean-v3.webp");
        background-position: center, 62% 58%;
        background-size: 100% 100%, cover;
        background-repeat: no-repeat, no-repeat;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34);
        z-index: 1;
        pointer-events: none;
    }

    .hero--home .page-motto--home {
        display: block !important;
        position: absolute !important;
        top: 382px !important;
        right: auto !important;
        left: 30px !important;
        width: 205px;
        max-width: 205px !important;
        margin: 0;
        color: #123f78;
        font-size: 18px;
        line-height: 1.28;
        transform: rotate(-4deg);
        z-index: 4;
    }

    body:has(.hero--home) .hero--home .hero-inner .hero-side {
        order: 3;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static;
        width: 100%;
        margin-top: 12px;
        z-index: 3;
    }

    .hero--home .hero-checks {
        width: 100%;
        padding: 9px 12px;
        background: rgba(255, 255, 255, .94);
        border: 1px solid rgba(213, 226, 239, .88);
        border-radius: 15px;
        box-shadow: 0 10px 24px rgba(28, 64, 105, .10);
        backdrop-filter: blur(8px);
    }

    .hero--home .hero-check {
        gap: 9px;
        padding: 5px 0;
        font-size: 13px;
        line-height: 1.28;
        font-weight: 650;
    }

    .hero--home .checkmark {
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    body:has(.hero--home) .page-main {
        padding-top: 24px;
        padding-bottom: 36px;
    }

    body:has(.hero--home) .home-layout,
    body:has(.hero--home) .home-main,
    body:has(.hero--home) .home-sidebar,
    body:has(.hero--home) .home-main .utility-grid:has(> .utility-card:only-child),
    body:has(.hero--home) .home-main .product-grid {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(.hero--home) .home-layout {
        gap: 22px;
    }

    body:has(.hero--home) .home-main {
        gap: 24px;
    }

    body:has(.hero--home) .home-sidebar {
        gap: 14px;
    }

    body:has(.hero--home) .home-main .utility-card:only-child {
        min-height: 0;
        padding: 16px;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 12px;
        row-gap: 10px;
        align-items: center;
    }

    body:has(.hero--home) .home-main .utility-card:only-child .icon-box {
        grid-column: 1;
        grid-row: 1;
        width: 48px;
        height: 48px;
        align-self: center;
    }

    body:has(.hero--home) .home-main .utility-card:only-child h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        margin: 0;
        font-size: 19px;
    }

    body:has(.hero--home) .home-main .utility-card:only-child > p {
        grid-column: 1 / -1;
        grid-row: 2;
        font-size: 14px;
        line-height: 1.46;
    }

    body:has(.hero--home) .home-main .utility-card:only-child .utility-bottom {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: start;
        margin: 0;
    }

    body:has(.hero--home) .home-main > .section:nth-child(2) .product-card,
    body:has(.hero--home) .home-main > .section:nth-child(3) > .product-card {
        min-height: 0;
        padding: 16px;
    }
}

/* =========================================================
   UTILITIES — approved clean V1 composition
   Scoped away from the accepted home page.
   ========================================================= */

body:has(.page-hero--utilities) {
    --utilities-canvas: calc(100% - 40px);
}

body:has(.page-hero--utilities) .shell {
    width: var(--utilities-canvas);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

body:has(.page-hero--utilities) .page-hero--utilities {
    min-height: 264px;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(214, 228, 241, .88);
    background-image:
        linear-gradient(90deg,
            rgba(249,252,255,1) 0%,
            rgba(245,250,255,.98) 30%,
            rgba(239,247,255,.86) 47%,
            rgba(238,247,255,.38) 65%,
            rgba(238,247,255,.06) 82%,
            rgba(238,247,255,0) 100%),
        url("/assets/images/hero/utilities-hero-clean-v1.webp") !important;
    background-position: center, 50% 52% !important;
    background-size: 100% 100%, cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-attachment: scroll, scroll !important;
}

body:has(.page-hero--utilities) .page-hero--utilities .page-hero-inner {
    min-height: 264px;
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    z-index: 2;
}

body:has(.page-hero--utilities) .page-hero-inner > div:first-child {
    width: 100%;
    max-width: 600px;
}

body:has(.page-hero--utilities) .page-hero h1 {
    max-width: 600px;
    margin: 0 0 12px;
    font-size: 48px;
    line-height: 1.04;
    letter-spacing: -.035em;
}

body:has(.page-hero--utilities) .page-hero-inner p {
    max-width: 560px;
    margin: 0;
    font-size: 17px;
    line-height: 1.48;
}

body:has(.page-hero--utilities) .page-hero--utilities .hero-art {
    display: none !important;
}

body:has(.page-hero--utilities) .page-hero--utilities .page-motto--utilities {
    display: block !important;
    top: 32px !important;
    right: auto !important;
    left: calc(50% - 20px) !important;
    width: 245px;
    max-width: 245px !important;
    margin: 0;
    font-size: 23px;
    line-height: 1.3;
    text-align: center;
    transform: rotate(-4deg);
    z-index: 4;
}

body:has(.page-hero--utilities) .page-main {
    padding-top: 32px;
    padding-bottom: 54px;
}

body:has(.page-hero--utilities) .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

body:has(.page-hero--utilities) .chips .chip,
body:has(.page-hero--utilities) .chips .chip.active {
    padding: 9px 14px;
    color: #315273;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(207,220,233,.92);
    box-shadow: none;
    cursor: default;
}

body:has(.page-hero--utilities) .utility-catalog {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0;
}

body:has(.page-hero--utilities) .utility-catalog .utility-card:only-child {
    min-height: 126px;
    padding: 20px;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: 17px;
    row-gap: 5px;
    align-items: center;
    background: linear-gradient(105deg, rgba(255,255,255,.98), rgba(247,253,250,.92));
    border-color: rgba(206,224,216,.92);
}

body:has(.page-hero--utilities) .utility-catalog .utility-card:only-child .icon-box {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 58px;
    height: 58px;
    margin: 0;
}

body:has(.page-hero--utilities) .utility-catalog .utility-card:only-child h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    margin: 0;
    font-size: 21px;
}

body:has(.page-hero--utilities) .utility-catalog .utility-card:only-child > p {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    max-width: 780px;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

body:has(.page-hero--utilities) .utility-catalog .utility-card:only-child .utility-bottom {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: end;
    margin: 0;
}

body:has(.page-hero--utilities) .bottom-cta {
    min-height: 110px;
    margin-top: 24px;
    padding: 22px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
}

body:has(.page-hero--utilities) .bottom-cta h3 {
    margin: 0 0 5px;
}

body:has(.page-hero--utilities) .bottom-cta p {
    max-width: 760px;
    margin: 0;
}

body:has(.page-hero--utilities) .bottom-cta .contact-button {
    min-width: 215px;
    white-space: nowrap;
}

@media (min-width: 1360px) {
    body:has(.page-hero--utilities) {
        --utilities-canvas: 1280px;
    }
}

@media (min-width: 1200px) and (max-width: 1359px) {
    body:has(.page-hero--utilities) {
        --utilities-canvas: 1180px;
    }

    body:has(.page-hero--utilities) .page-hero h1 {
        font-size: 46px;
    }

    body:has(.page-hero--utilities) .page-hero--utilities .page-motto--utilities {
        left: calc(50% - 10px) !important;
    }
}

@media (min-width: 700px) and (max-width: 1199px) {
    body:has(.page-hero--utilities) {
        --utilities-canvas: calc(100% - 40px);
    }

    body:has(.page-hero--utilities) .page-hero--utilities {
        min-height: 260px;
        background-position: center, 58% 52% !important;
        background-image:
            linear-gradient(90deg,
                rgba(249,252,255,1) 0%,
                rgba(245,250,255,.98) 34%,
                rgba(239,247,255,.82) 50%,
                rgba(238,247,255,.32) 69%,
                rgba(238,247,255,0) 100%),
            url("/assets/images/hero/utilities-hero-clean-v1.webp") !important;
    }

    body:has(.page-hero--utilities) .page-hero--utilities .page-hero-inner {
        min-height: 260px;
    }

    body:has(.page-hero--utilities) .page-hero-inner > div:first-child,
    body:has(.page-hero--utilities) .page-hero h1 {
        max-width: 480px;
    }

    body:has(.page-hero--utilities) .page-hero h1 {
        font-size: 42px;
    }

    body:has(.page-hero--utilities) .page-hero-inner p {
        max-width: 470px;
        font-size: 16px;
    }

    body:has(.page-hero--utilities) .page-hero--utilities .page-motto--utilities {
        top: 25px !important;
        left: 52% !important;
        width: 220px;
        max-width: 220px !important;
        font-size: 21px;
    }

    body:has(.page-hero--utilities) .utility-catalog .utility-card:only-child > p {
        max-width: 620px;
    }
}

@media (max-width: 699px) {
    body:has(.page-hero--utilities) {
        --utilities-canvas: calc(100% - 28px);
    }

    body:has(.page-hero--utilities) .topbar-inner {
        min-height: auto;
        display: grid;
        grid-template-columns: minmax(150px, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 6px 12px;
        padding: 9px 0 7px;
    }

    body:has(.page-hero--utilities) .brand {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        max-width: none;
        overflow: visible;
    }

    body:has(.page-hero--utilities) .brand strong {
        display: block;
        width: auto;
        font-size: 20px;
        line-height: 1;
        white-space: nowrap;
        overflow: visible;
    }

    body:has(.page-hero--utilities) .brand span {
        display: none;
    }

    body:has(.page-hero--utilities) .top-actions {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        gap: 6px;
        justify-content: flex-end;
    }

    body:has(.page-hero--utilities) .search-icon {
        width: 38px;
        height: 38px;
    }

    body:has(.page-hero--utilities) .topbar .contact-button {
        min-width: 0;
        min-height: 38px;
        padding: 0 12px;
        border-radius: 11px;
        font-size: 13px;
    }

    body:has(.page-hero--utilities) .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 1px 2px;
    }

    body:has(.page-hero--utilities) .main-nav a {
        min-width: 0;
        width: auto;
        padding: 4px 1px;
        font-size: 11.5px;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    body:has(.page-hero--utilities) .page-hero--utilities {
        min-height: 0;
        padding: 0 0 14px !important;
        background-image: linear-gradient(180deg, #f8fbff 0%, #edf6ff 100%) !important;
        background-position: center !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
    }

    body:has(.page-hero--utilities) .page-hero--utilities::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 14px;
        height: 158px;
        border-radius: 15px;
        background-image:
            linear-gradient(90deg,
                rgba(246,251,255,.42) 0%,
                rgba(241,248,255,.10) 52%,
                rgba(241,248,255,0) 76%),
            url("/assets/images/hero/utilities-hero-clean-v1.webp") !important;
        background-position: center, 68% 52% !important;
        background-size: 100% 100%, cover !important;
        background-repeat: no-repeat, no-repeat !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), 0 10px 25px rgba(31,78,126,.08);
        z-index: 1;
        pointer-events: none;
    }

    body:has(.page-hero--utilities) .page-hero--utilities .page-hero-inner {
        min-height: 0;
        display: block;
        padding: 22px 0 184px;
        position: relative;
        z-index: 2;
    }

    body:has(.page-hero--utilities) .page-hero-inner > div:first-child {
        max-width: 100%;
    }

    body:has(.page-hero--utilities) .page-hero h1 {
        max-width: 100%;
        margin: 0 0 10px;
        font-size: 40px;
        line-height: 1.05;
        white-space: normal;
    }

    body:has(.page-hero--utilities) .page-hero-inner p {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.45;
    }

    body:has(.page-hero--utilities) .page-hero--utilities .page-motto--utilities {
        display: block !important;
        position: absolute !important;
        top: 196px !important;
        right: auto !important;
        left: 30px !important;
        width: 205px;
        max-width: 205px !important;
        margin: 0;
        font-size: 18px;
        line-height: 1.28;
        text-align: left;
        transform: rotate(-4deg);
        z-index: 4;
    }

    body:has(.page-hero--utilities) .page-main {
        padding-top: 24px;
        padding-bottom: 36px;
    }

    body:has(.page-hero--utilities) .chips {
        gap: 8px;
        margin-bottom: 20px;
    }

    body:has(.page-hero--utilities) .chips .chip,
    body:has(.page-hero--utilities) .chips .chip.active {
        padding: 8px 11px;
        font-size: 13px;
    }

    body:has(.page-hero--utilities) .utility-catalog .utility-card:only-child {
        min-height: 0;
        padding: 16px;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 12px;
        row-gap: 10px;
    }

    body:has(.page-hero--utilities) .utility-catalog .utility-card:only-child .icon-box {
        grid-column: 1;
        grid-row: 1;
        width: 48px;
        height: 48px;
    }

    body:has(.page-hero--utilities) .utility-catalog .utility-card:only-child h3 {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        font-size: 19px;
    }

    body:has(.page-hero--utilities) .utility-catalog .utility-card:only-child > p {
        grid-column: 1 / -1;
        grid-row: 2;
        max-width: 100%;
        font-size: 14px;
        line-height: 1.46;
    }

    body:has(.page-hero--utilities) .utility-catalog .utility-card:only-child .utility-bottom {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: start;
    }

    body:has(.page-hero--utilities) .bottom-cta {
        min-height: 0;
        margin-top: 22px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    body:has(.page-hero--utilities) .bottom-cta h3 {
        margin-bottom: 6px;
        font-size: 22px;
        line-height: 1.18;
    }

    body:has(.page-hero--utilities) .bottom-cta p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.46;
    }

    body:has(.page-hero--utilities) .bottom-cta .contact-button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
        white-space: nowrap;
    }
}

/* =========================================================
   REQUESTS — approved clean V2 composition
   Scoped away from accepted home, utilities and products.
   ========================================================= */

body:has(.page-hero--requests) {
    --requests-canvas: calc(100% - 40px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body:has(.page-hero--requests) > main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

body:has(.page-hero--requests) .shell {
    width: var(--requests-canvas);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

body:has(.page-hero--requests) .page-hero--requests {
    min-height: 264px;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(214, 228, 241, .88);
    background-image:
        linear-gradient(90deg,
            rgba(250,253,255,1) 0%,
            rgba(247,251,255,.99) 32%,
            rgba(241,248,255,.88) 49%,
            rgba(238,247,255,.44) 66%,
            rgba(238,247,255,.08) 83%,
            rgba(238,247,255,0) 100%),
        url("/assets/images/hero/requests-hero-clean-v2.webp") !important;
    background-position: center, 55% 50% !important;
    background-size: 100% 100%, cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-attachment: scroll, scroll !important;
}

body:has(.page-hero--requests) .page-hero--requests::before,
body:has(.page-hero--requests) .page-hero--requests::after {
    content: none !important;
    display: none !important;
}

body:has(.page-hero--requests) .page-hero--requests .page-hero-inner {
    min-height: 264px;
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    z-index: 2;
}

body:has(.page-hero--requests) .page-hero-inner > div:first-child {
    width: 100%;
    max-width: 640px;
}

body:has(.page-hero--requests) .page-hero-inner > div:last-child {
    display: none;
}

body:has(.page-hero--requests) .page-hero h1 {
    max-width: 640px;
    margin: 0 0 12px;
    font-size: 48px;
    line-height: 1.04;
    letter-spacing: -.035em;
}

body:has(.page-hero--requests) .page-hero-inner p {
    max-width: 570px;
    margin: 0;
    font-size: 17px;
    line-height: 1.48;
}

body:has(.page-hero--requests) .page-hero--requests .page-motto--requests {
    display: block !important;
    top: 30px !important;
    right: auto !important;
    left: calc(50% - 12px) !important;
    width: 280px;
    max-width: 280px !important;
    margin: 0;
    font-size: 23px;
    line-height: 1.3;
    text-align: center;
    transform: rotate(-4deg);
    z-index: 4;
}

body:has(.page-hero--requests) .page-main {
    padding-top: 28px;
    padding-bottom: 32px;
}

body:has(.page-hero--requests) .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

body:has(.page-hero--requests) .chips .chip,
body:has(.page-hero--requests) .chips .chip.active {
    min-height: 34px;
    padding: 0 13px;
    color: #315273;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(207,220,233,.92);
    box-shadow: none;
    cursor: default;
}

body:has(.page-hero--requests) .request-list {
    display: grid;
    gap: 12px;
}

body:has(.page-hero--requests) .request-row {
    min-height: 120px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    background: linear-gradient(105deg, rgba(255,255,255,.98), rgba(247,251,255,.94));
    border-color: rgba(207,220,233,.92);
}

body:has(.page-hero--requests) .request-marker {
    width: 52px;
    height: 52px;
    margin: 0;
    color: var(--blue);
    background: linear-gradient(180deg, rgba(239,247,255,.98), rgba(232,243,255,.98));
}

body:has(.page-hero--requests) .request-row h3 {
    margin: 0 0 6px;
    font-size: 20px;
}

body:has(.page-hero--requests) .request-row p {
    max-width: 850px;
    margin: 0;
    font-size: 14px;
    line-height: 1.48;
}

body:has(.page-hero--requests) .request-row .badge {
    margin-top: 9px;
}

body:has(.page-hero--requests) .request-signal-state {
    min-height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(211,224,237,.96);
    border-radius: 13px;
    background: rgba(246,249,252,.94);
    color: #6b7e98;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

body:has(.page-hero--requests) .bottom-cta {
    min-height: 100px;
    margin-top: 22px;
    padding: 20px 22px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    background: linear-gradient(105deg, rgba(245,250,255,.98), rgba(235,246,255,.96));
    border-color: rgba(197,219,241,.92);
}

body:has(.page-hero--requests) .bottom-cta h3 {
    margin: 0 0 5px;
}

body:has(.page-hero--requests) .bottom-cta p {
    max-width: 760px;
    margin: 0;
}

body:has(.page-hero--requests) .bottom-cta .contact-button {
    min-width: 190px;
    justify-content: center;
    white-space: nowrap;
}

body:has(.page-hero--requests) .footer {
    flex: none;
    margin-top: 0;
}

@media (min-width: 1360px) {
    body:has(.page-hero--requests) {
        --requests-canvas: 1280px;
    }
}

@media (min-width: 1200px) and (max-width: 1359px) {
    body:has(.page-hero--requests) {
        --requests-canvas: 1180px;
    }

    body:has(.page-hero--requests) .page-hero h1 {
        font-size: 46px;
    }

    body:has(.page-hero--requests) .page-hero--requests .page-motto--requests {
        left: calc(50% - 2px) !important;
    }
}

@media (min-width: 700px) and (max-width: 1199px) {
    body:has(.page-hero--requests) {
        --requests-canvas: calc(100% - 40px);
    }

    body:has(.page-hero--requests) .page-hero--requests {
        min-height: 260px;
        background-image:
            linear-gradient(90deg,
                rgba(250,253,255,1) 0%,
                rgba(247,251,255,.99) 36%,
                rgba(241,248,255,.84) 52%,
                rgba(238,247,255,.34) 70%,
                rgba(238,247,255,0) 100%),
            url("/assets/images/hero/requests-hero-clean-v2.webp") !important;
        background-position: center, 61% 50% !important;
    }

    body:has(.page-hero--requests) .page-hero--requests .page-hero-inner {
        min-height: 260px;
    }

    body:has(.page-hero--requests) .page-hero-inner > div:first-child,
    body:has(.page-hero--requests) .page-hero h1 {
        max-width: 500px;
    }

    body:has(.page-hero--requests) .page-hero h1 {
        font-size: 42px;
    }

    body:has(.page-hero--requests) .page-hero-inner p {
        max-width: 470px;
        font-size: 16px;
    }

    body:has(.page-hero--requests) .page-hero--requests .page-motto--requests {
        top: 24px !important;
        left: 51% !important;
        width: 250px;
        max-width: 250px !important;
        font-size: 21px;
    }

    body:has(.page-hero--requests) .request-row {
        grid-template-columns: 52px minmax(0, 1fr) 205px;
    }

    body:has(.page-hero--requests) .request-signal-state {
        white-space: normal;
    }
}

@media (max-width: 699px) {
    body:has(.page-hero--requests) {
        --requests-canvas: calc(100% - 28px);
    }

    body:has(.page-hero--requests) .topbar-inner {
        min-height: auto;
        display: grid;
        grid-template-columns: minmax(150px, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 6px 12px;
        padding: 9px 0 7px;
    }

    body:has(.page-hero--requests) .brand {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        max-width: none;
        overflow: visible;
    }

    body:has(.page-hero--requests) .brand strong {
        display: block;
        width: auto;
        font-size: 20px;
        line-height: 1;
        white-space: nowrap;
        overflow: visible;
    }

    body:has(.page-hero--requests) .brand span {
        display: none;
    }

    body:has(.page-hero--requests) .top-actions {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        gap: 6px;
        justify-content: flex-end;
    }

    body:has(.page-hero--requests) .search-icon {
        width: 38px;
        height: 38px;
    }

    body:has(.page-hero--requests) .topbar .contact-button {
        min-width: 0;
        min-height: 38px;
        padding: 0 12px;
        border-radius: 11px;
        font-size: 13px;
    }

    body:has(.page-hero--requests) .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 1px 2px;
    }

    body:has(.page-hero--requests) .main-nav a {
        min-width: 0;
        width: auto;
        padding: 4px 1px;
        font-size: 11.5px;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    body:has(.page-hero--requests) .page-hero--requests {
        min-height: 0;
        padding: 0 0 14px !important;
        background-image: linear-gradient(180deg, #f8fbff 0%, #edf6ff 100%) !important;
        background-position: center !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
    }

    body:has(.page-hero--requests) .page-hero--requests::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 14px;
        height: 158px;
        border-radius: 15px;
        background-image:
            linear-gradient(90deg,
                rgba(246,251,255,.42) 0%,
                rgba(241,248,255,.10) 52%,
                rgba(241,248,255,0) 76%),
            url("/assets/images/hero/requests-hero-clean-v2.webp") !important;
        background-position: center, 74% 50% !important;
        background-size: 100% 100%, cover !important;
        background-repeat: no-repeat, no-repeat !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), 0 10px 25px rgba(31,78,126,.08);
        z-index: 1;
        pointer-events: none;
    }

    body:has(.page-hero--requests) .page-hero--requests .page-hero-inner {
        min-height: 0;
        display: block;
        padding: 20px 0 190px;
        position: relative;
        z-index: 2;
    }

    body:has(.page-hero--requests) .page-hero-inner > div:first-child {
        max-width: 100%;
    }

    body:has(.page-hero--requests) .page-hero h1 {
        max-width: 100%;
        margin: 0 0 10px;
        font-size: 40px;
        line-height: 1.05;
        white-space: normal;
    }

    body:has(.page-hero--requests) .page-hero-inner p {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.45;
    }

    body:has(.page-hero--requests) .page-hero--requests .page-motto--requests {
        display: block !important;
        position: absolute !important;
        top: 190px !important;
        right: auto !important;
        left: 30px !important;
        width: 245px;
        max-width: 245px !important;
        margin: 0;
        font-size: 18px;
        line-height: 1.28;
        text-align: left;
        transform: rotate(-4deg);
        z-index: 4;
    }

    body:has(.page-hero--requests) .page-main {
        padding-top: 24px;
        padding-bottom: 34px;
    }

    body:has(.page-hero--requests) .chips {
        gap: 8px;
        margin-bottom: 20px;
    }

    body:has(.page-hero--requests) .chips .chip,
    body:has(.page-hero--requests) .chips .chip.active {
        min-height: 34px;
        padding: 0 11px;
        font-size: 13px;
    }

    body:has(.page-hero--requests) .request-row {
        min-height: 0;
        padding: 16px;
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 12px;
        row-gap: 14px;
        align-items: start;
    }

    body:has(.page-hero--requests) .request-marker {
        grid-column: 1;
        grid-row: 1;
        width: 48px;
        height: 48px;
    }

    body:has(.page-hero--requests) .request-row > div:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    body:has(.page-hero--requests) .request-row h3 {
        margin: 0 0 7px;
        font-size: 19px;
        line-height: 1.2;
    }

    body:has(.page-hero--requests) .request-row p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.46;
    }

    body:has(.page-hero--requests) .request-row .badge {
        margin-top: 9px;
    }

    body:has(.page-hero--requests) .request-signal-state {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-height: 40px;
        white-space: normal;
    }

    body:has(.page-hero--requests) .bottom-cta {
        min-height: 0;
        margin-top: 22px;
        padding: 18px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    body:has(.page-hero--requests) .bottom-cta h3 {
        margin-bottom: 6px;
        font-size: 22px;
        line-height: 1.18;
    }

    body:has(.page-hero--requests) .bottom-cta p {
        max-width: 100%;
        font-size: 14px;
        line-height: 1.46;
    }

    body:has(.page-hero--requests) .bottom-cta .contact-button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        justify-content: center;
        white-space: nowrap;
    }
}

/* =========================================================
   OPENAI NEWS — approved clean V2 composition
   Scoped away from accepted home, utilities, products and requests.
   ========================================================= */

body:has(.page-hero--openai-news) {
    --openai-news-canvas: calc(100% - 40px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body:has(.page-hero--openai-news) > main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

body:has(.page-hero--openai-news) .shell {
    width: var(--openai-news-canvas);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

body:has(.page-hero--openai-news) .page-hero--openai-news {
    min-height: 264px;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(214, 228, 241, .88);
    background-image:
        linear-gradient(90deg,
            rgba(250,253,255,1) 0%,
            rgba(248,252,255,.99) 32%,
            rgba(243,249,255,.89) 49%,
            rgba(239,247,255,.52) 66%,
            rgba(238,247,255,.12) 84%,
            rgba(238,247,255,0) 100%),
        url("/assets/images/hero/openai-news-hero-clean-v2.webp") !important;
    background-position: center, 58% 50% !important;
    background-size: 100% 100%, cover !important;
    background-repeat: no-repeat, no-repeat !important;
    background-attachment: scroll, scroll !important;
}

body:has(.page-hero--openai-news) .page-hero--openai-news::before,
body:has(.page-hero--openai-news) .page-hero--openai-news::after {
    content: none !important;
    display: none !important;
}

body:has(.page-hero--openai-news) .page-hero--openai-news .page-hero-inner {
    min-height: 264px;
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    z-index: 2;
}

body:has(.page-hero--openai-news) .page-hero-inner > div:first-child {
    width: 100%;
    max-width: 640px;
}

body:has(.page-hero--openai-news) .page-hero h1 {
    max-width: 640px;
    margin: 0 0 12px;
    font-size: 48px;
    line-height: 1.04;
    letter-spacing: -.035em;
}

body:has(.page-hero--openai-news) .page-hero-inner p {
    max-width: 590px;
    margin: 0;
    font-size: 17px;
    line-height: 1.48;
}

body:has(.page-hero--openai-news) .page-hero--openai-news .page-motto--openai-news {
    display: block !important;
    top: 28px !important;
    right: auto !important;
    left: calc(50% - 4px) !important;
    width: 300px;
    max-width: 300px !important;
    margin: 0;
    font-size: 23px;
    line-height: 1.3;
    text-align: center;
    transform: rotate(-4deg);
    z-index: 4;
}

body:has(.page-hero--openai-news) .page-main {
    padding-top: 28px;
    padding-bottom: 32px;
}

body:has(.page-hero--openai-news) .openai-news-topics {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 18px;
}

body:has(.page-hero--openai-news) .openai-news-topics__label {
    color: #70829a;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body:has(.page-hero--openai-news) .openai-news-topics .chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

body:has(.page-hero--openai-news) .openai-news-topics .chip,
body:has(.page-hero--openai-news) .openai-news-topics .chip.active {
    min-height: 32px;
    padding: 0 12px;
    color: #395777;
    background: rgba(255,255,255,.8);
    border: 1px solid rgba(207,220,233,.92);
    box-shadow: none;
    cursor: default;
    pointer-events: none;
}

body:has(.page-hero--openai-news) .openai-news-status {
    padding: 22px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr);
    gap: 26px;
    align-items: stretch;
    background: linear-gradient(110deg, rgba(255,255,255,.98), rgba(244,250,255,.95));
    border: 1px solid rgba(205,221,237,.94);
    border-radius: 17px;
    box-shadow: 0 10px 28px rgba(29,72,116,.055);
}

body:has(.page-hero--openai-news) .openai-news-status__main {
    min-width: 0;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 17px;
    align-items: start;
}

body:has(.page-hero--openai-news) .openai-news-status__icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: var(--blue);
    background: linear-gradient(180deg, rgba(237,247,255,.98), rgba(226,241,255,.98));
}

body:has(.page-hero--openai-news) .openai-news-status__gate {
    min-height: 25px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    color: #16865b;
    background: rgba(222,247,237,.94);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em;
}

body:has(.page-hero--openai-news) .openai-news-status h2 {
    margin: 10px 0 7px;
    color: var(--navy);
    font-size: 25px;
    line-height: 1.12;
    letter-spacing: -.025em;
}

body:has(.page-hero--openai-news) .openai-news-status p {
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.52;
}

body:has(.page-hero--openai-news) .openai-news-format {
    min-width: 0;
    padding-left: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid rgba(205,221,237,.94);
}

body:has(.page-hero--openai-news) .openai-news-format > span {
    margin-bottom: 7px;
    color: #70829a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

body:has(.page-hero--openai-news) .openai-news-format h3 {
    margin: 0 0 7px;
    color: var(--navy);
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -.018em;
}

body:has(.page-hero--openai-news) .openai-news-independence {
    min-height: 88px;
    margin-top: 18px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    background: linear-gradient(105deg, rgba(246,251,255,.98), rgba(236,247,255,.96));
    border: 1px solid rgba(198,220,241,.94);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(29,72,116,.045);
}

body:has(.page-hero--openai-news) .openai-news-independence h3 {
    margin: 0 0 5px;
    color: var(--navy);
    font-size: 21px;
    line-height: 1.18;
    letter-spacing: -.025em;
}

body:has(.page-hero--openai-news) .openai-news-independence p {
    margin: 0;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.48;
}

body:has(.page-hero--openai-news) .footer {
    flex: none;
    margin-top: 0;
}

@media (min-width: 1360px) {
    body:has(.page-hero--openai-news) {
        --openai-news-canvas: 1280px;
    }
}

@media (min-width: 1200px) and (max-width: 1359px) {
    body:has(.page-hero--openai-news) {
        --openai-news-canvas: 1180px;
    }

    body:has(.page-hero--openai-news) .page-hero h1 {
        font-size: 46px;
    }

    body:has(.page-hero--openai-news) .page-hero--openai-news .page-motto--openai-news {
        left: calc(50% + 4px) !important;
    }
}

@media (min-width: 700px) and (max-width: 1199px) {
    body:has(.page-hero--openai-news) {
        --openai-news-canvas: calc(100% - 40px);
    }

    body:has(.page-hero--openai-news) .page-hero--openai-news {
        min-height: 260px;
        background-image:
            linear-gradient(90deg,
                rgba(250,253,255,1) 0%,
                rgba(248,252,255,.99) 36%,
                rgba(243,249,255,.86) 52%,
                rgba(239,247,255,.38) 71%,
                rgba(238,247,255,0) 100%),
            url("/assets/images/hero/openai-news-hero-clean-v2.webp") !important;
        background-position: center, 63% 50% !important;
    }

    body:has(.page-hero--openai-news) .page-hero--openai-news .page-hero-inner {
        min-height: 260px;
    }

    body:has(.page-hero--openai-news) .page-hero-inner > div:first-child,
    body:has(.page-hero--openai-news) .page-hero h1 {
        max-width: 500px;
    }

    body:has(.page-hero--openai-news) .page-hero h1 {
        font-size: 42px;
    }

    body:has(.page-hero--openai-news) .page-hero-inner p {
        max-width: 470px;
        font-size: 16px;
    }

    body:has(.page-hero--openai-news) .page-hero--openai-news .page-motto--openai-news {
        top: 23px !important;
        left: 51% !important;
        width: 270px;
        max-width: 270px !important;
        font-size: 21px;
    }

    body:has(.page-hero--openai-news) .openai-news-status {
        grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
        gap: 22px;
    }
}

@media (max-width: 699px) {
    body:has(.page-hero--openai-news) {
        --openai-news-canvas: calc(100% - 28px);
    }

    body:has(.page-hero--openai-news) .topbar-inner {
        min-height: auto;
        display: grid;
        grid-template-columns: minmax(150px, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 6px 12px;
        padding: 9px 0 7px;
    }

    body:has(.page-hero--openai-news) .brand {
        grid-column: 1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        max-width: none;
        overflow: visible;
    }

    body:has(.page-hero--openai-news) .brand strong {
        display: block;
        width: auto;
        font-size: 20px;
        line-height: 1;
        white-space: nowrap;
        overflow: visible;
    }

    body:has(.page-hero--openai-news) .brand span {
        display: none;
    }

    body:has(.page-hero--openai-news) .top-actions {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        gap: 6px;
        justify-content: flex-end;
    }

    body:has(.page-hero--openai-news) .search-icon {
        width: 38px;
        height: 38px;
    }

    body:has(.page-hero--openai-news) .topbar .contact-button {
        min-width: 0;
        min-height: 38px;
        padding: 0 12px;
        border-radius: 11px;
        font-size: 13px;
    }

    body:has(.page-hero--openai-news) .main-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 1px 2px;
    }

    body:has(.page-hero--openai-news) .main-nav a {
        min-width: 0;
        width: auto;
        padding: 4px 1px;
        font-size: 11.5px;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;
    }

    body:has(.page-hero--openai-news) .page-hero--openai-news {
        min-height: 0;
        padding: 0 0 14px !important;
        background-image: linear-gradient(180deg, #f8fbff 0%, #edf6ff 100%) !important;
        background-position: center !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
    }

    body:has(.page-hero--openai-news) .page-hero--openai-news::after {
        content: "" !important;
        display: block !important;
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 14px;
        height: 158px;
        border-radius: 15px;
        background-image:
            linear-gradient(90deg,
                rgba(247,252,255,.34) 0%,
                rgba(242,249,255,.08) 52%,
                rgba(242,249,255,0) 78%),
            url("/assets/images/hero/openai-news-hero-clean-v2.webp") !important;
        background-position: center, 73% 50% !important;
        background-size: 100% 100%, cover !important;
        background-repeat: no-repeat, no-repeat !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.36), 0 10px 25px rgba(31,78,126,.08);
        z-index: 1;
        pointer-events: none;
    }

    body:has(.page-hero--openai-news) .page-hero--openai-news .page-hero-inner {
        min-height: 0;
        display: block;
        padding: 20px 0 190px;
        position: relative;
        z-index: 2;
    }

    body:has(.page-hero--openai-news) .page-hero-inner > div:first-child {
        max-width: 100%;
    }

    body:has(.page-hero--openai-news) .page-hero h1 {
        max-width: 100%;
        margin: 0 0 10px;
        font-size: 40px;
        line-height: 1.05;
        white-space: normal;
    }

    body:has(.page-hero--openai-news) .page-hero-inner p {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.45;
    }

    body:has(.page-hero--openai-news) .page-hero--openai-news .page-motto--openai-news {
        display: block !important;
        position: absolute !important;
        top: 188px !important;
        right: auto !important;
        left: 30px !important;
        width: 270px;
        max-width: 270px !important;
        margin: 0;
        font-size: 18px;
        line-height: 1.28;
        text-align: left;
        transform: rotate(-4deg);
        z-index: 4;
    }

    body:has(.page-hero--openai-news) .page-main {
        padding-top: 24px;
        padding-bottom: 34px;
    }

    body:has(.page-hero--openai-news) .openai-news-topics {
        display: block;
        margin-bottom: 20px;
    }

    body:has(.page-hero--openai-news) .openai-news-topics__label {
        display: block;
        margin-bottom: 9px;
    }

    body:has(.page-hero--openai-news) .openai-news-topics .chips {
        gap: 8px;
    }

    body:has(.page-hero--openai-news) .openai-news-topics .chip,
    body:has(.page-hero--openai-news) .openai-news-topics .chip.active {
        min-height: 34px;
        padding: 0 11px;
        font-size: 13px;
    }

    body:has(.page-hero--openai-news) .openai-news-status {
        padding: 18px;
        display: block;
        border-radius: 15px;
    }

    body:has(.page-hero--openai-news) .openai-news-status__main {
        display: block;
    }

    body:has(.page-hero--openai-news) .openai-news-status__icon {
        width: 50px;
        height: 50px;
        margin-bottom: 13px;
        border-radius: 14px;
    }

    body:has(.page-hero--openai-news) .openai-news-status h2 {
        margin-top: 10px;
        font-size: 24px;
    }

    body:has(.page-hero--openai-news) .openai-news-format {
        margin-top: 18px;
        padding: 18px 0 0;
        border-left: 0;
        border-top: 1px solid rgba(205,221,237,.94);
    }

    body:has(.page-hero--openai-news) .openai-news-format h3 {
        font-size: 19px;
    }

    body:has(.page-hero--openai-news) .openai-news-independence {
        min-height: 0;
        margin-top: 18px;
        padding: 18px;
        align-items: flex-start;
    }

    body:has(.page-hero--openai-news) .openai-news-independence h3 {
        font-size: 21px;
    }
}

/* =========================================================
   FINAL PRE-PRODUCTION MICRO-FIX
   Search is unavailable; desktop home header follows the
   accepted inner-page geometry. No tablet/mobile overrides.
   ========================================================= */

.search-icon {
    display: none !important;
}

@media (min-width: 1200px) {
    body:has(.hero--home) .topbar-inner {
        gap: 24px;
    }

    body:has(.hero--home) .brand {
        min-width: 230px;
    }

    body:has(.hero--home) .brand strong {
        font-size: 20px;
    }

    body:has(.hero--home) .main-nav {
        gap: 6px;
    }

    body:has(.hero--home) .main-nav a {
        padding: 12px;
    }

    body:has(.hero--home) .contact-button {
        min-height: 46px;
        padding: 0 22px;
        border-radius: 14px;
    }
}