/* VC4 blue version: the Cloud hero, set up like the Technical hero. The hero picture is gone; the calm background
   (.b-calm in blue/blue.css) and the reference site's 3D scene (blue/hero-cloud.js) take its place. The scene box and
   its labels use .b-scene from blue/blue.css; the rules below are the reference cloud.html's own additions (the label
   that hangs below its point, the "Secure link" pill), with its colour tokens written out. Everything is scoped to
   this hero. */

/* ---------- Copy: on the left, dark text on the light hero ---------- */
html[data-blue] .b-cloud-hero .b-scene-copy { max-width: 560px; position: relative; z-index: 2; }
html[data-blue] .b-cloud-hero .oversize-label { color: #138E96 !important; }
html[data-blue] .b-cloud-hero .section-sub { color: rgba(2, 38, 63, .8) !important; }
html[data-blue] .b-cloud-hero .section-sub strong { color: #02263F; }

/* ---------- Scene box: on the right, beside the copy ---------- */
.b-cloud-scene { top: 24px; }
@media (min-width: 901px) and (max-width: 1100px) { .b-cloud-scene { right: -4%; } }

/* ---------- Labels (reference cloud.html) ---------- */
/* the network label hangs below its point */
.b-cloud-scene .tag.below .in { bottom: auto; top: 0; flex-direction: column-reverse; transform: translateX(-28%); }
.b-cloud-scene .tag.below .pin::after { margin: -4px 0 0 -3.75px; }
.b-cloud-scene .tag.warn.below .pin { background: linear-gradient(rgba(235, 85, 44, .2), #EB552C); }
.b-cloud-scene .tag.below:not(.on) .card { transform: translateY(-10px) scale(.9); }
/* the "Secure link" pill on the middle lock ring */
.b-cloud-scene .lock { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.b-cloud-scene.ready .lock { opacity: 1; }
.b-cloud-scene .lock span { position: absolute; left: 12px; top: -13px; display: flex; align-items: center; gap: 7px; white-space: nowrap;
    font: 900 10.5px/1 'Lato', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #02263F;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(19, 142, 150, .3);
    border-radius: 999px; padding: 6px 10px 6px 7px; box-shadow: 0 12px 28px -14px rgba(2, 38, 63, .4); }
.b-cloud-scene .lock svg { color: #138E96; }
.b-cloud-scene.no3d .lock { display: none; }

/* ---------- Tablet and phone: the scene under the copy ---------- */
@media (max-width: 900px) {
    .b-cloud-scene { top: auto; margin-top: 16px; }
    .b-cloud-scene .tag.below .in { transform: translateX(-28%) scale(.78); transform-origin: 28% 0; }
}
@media (max-width: 560px) {
    .b-cloud-scene { margin-top: -10px; }
    .b-cloud-scene .lock span { font-size: 9.5px; }
}

/* ---------- The rest of the page ---------- */
/* hero "View packages" in the headings' closing-phrase gradient (teal into navy); Book a demo stays orange */
html[data-blue] .b-cloud-hero .hero-cta-primary { background: linear-gradient(100deg, #138E96 10%, #02263F 95%) !important; background-size: 140% 100% !important;
    background-position: 0 50% !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 12px 28px -12px rgba(2, 38, 63, .45) !important;
    transition: background-position .5s ease, transform .3s ease !important; }
html[data-blue] .b-cloud-hero .hero-cta-primary:hover { background-position: 100% 50% !important; }
html[data-blue] .b-cloud-hero .hero-cta-primary .ti { color: #fff !important; }
/* "The platform": the network mesh (Blue2) under a navy wash in place of the purple gradient */
html[data-blue] #what-is-cloud { background: linear-gradient(100deg, rgba(2, 38, 63, .94) 0%, rgba(2, 38, 63, .82) 48%, rgba(4, 49, 79, .6) 100%),
    url('images/Blue2.jpeg') center / cover no-repeat, #02263F !important; }
html[data-blue] #what-is-cloud::before, html[data-blue] #what-is-cloud::after { background: none !important; }
/* the benefit pillar titles in Lato, the closing word in the light heading gradient */
html[data-blue] body:has(.b-cloud-hero) .pillar-title em { font-family: inherit !important; font-style: normal !important; font-weight: inherit !important; font-size: inherit !important;
    background: linear-gradient(100deg, #3FC1C9 10%, #ADDDF6 95%); -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
/* Info sheets: a landscape tile, the copy and the brochure on the left, the form on the right */
html[data-blue] .infosheet-strip.b-info-land { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 48px 56px !important; }
html[data-blue] .b-info-land .b-info-copy { position: relative; z-index: 1; }
html[data-blue] .b-info-land h2.b-h2 { margin: 14px 0 16px !important; }
html[data-blue] .b-info-land .newsletter-sub { max-width: 460px; }
html[data-blue] .b-info-land .infosheet-art { position: static !important; display: block; width: 100%; max-width: 360px; height: auto; margin: 22px 0 0 !important; transform: none !important;
    filter: hue-rotate(-38deg) saturate(.9) drop-shadow(0 18px 30px rgba(2, 20, 40, .45)); }
html[data-blue] .b-info-land .b-info-form { position: relative; z-index: 1; }
html[data-blue] .b-info-land .hs-form-slot { max-width: none !important; margin: 0 !important; }
@media (max-width: 900px) { html[data-blue] .infosheet-strip.b-info-land { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px !important; } }
/* customer quotes in plain Lato, as on Home, not the italic serif */
html[data-blue] body:has(.b-cloud-hero) .q-text { font-family: 'Lato', sans-serif !important; font-style: normal !important; font-weight: 300 !important; }
html[data-blue] body:has(.b-cloud-hero) .q-mark { font-family: 'Lato', sans-serif !important; font-style: normal !important; font-weight: 900 !important; }
/* ---------- Spacing and buttons as on Home ---------- */
/* hero: the copy starts 56px below the top, as the Home hero's does (48px on laptops, where the hero is drawn at 85%) */
html[data-blue] .b-cloud-hero { padding-top: 56px !important; padding-bottom: 64px !important; }
html[data-blue] .b-cloud-hero :is(.hero-cta-primary, .hero-cta-ghost) { font-size: .95rem !important; padding: 14px 30px !important; }
/* sections: 56px top and bottom, 48px on laptops, 40px on phones */
html[data-blue] body:has(.b-cloud-hero) main > section:not(.b-cloud-hero) { padding-top: 56px !important; padding-bottom: 56px !important; }
@media (min-width: 901px) and (max-width: 1600px), (min-width: 901px) and (max-height: 860px) {
    html[data-blue] body:has(.b-cloud-hero) main > section:not(.b-cloud-hero) { padding-top: 48px !important; padding-bottom: 48px !important; }
    html[data-blue] body:has(.b-cloud-hero) main :is(.package-cta, .pillar-cta) { font-size: 12.9px !important; padding: 11.9px 27.2px !important; }
}
@media (max-width: 900px) { html[data-blue] body:has(.b-cloud-hero) main > section:not(.b-cloud-hero) { padding-top: 40px !important; padding-bottom: 40px !important; } }
html[data-blue] body:has(.b-cloud-hero) main h2.b-h2 { margin-bottom: 22px !important; }
/* the purple cloud picture (Why cloud, the Professional package) gives way to the network mesh under a navy wash */
html[data-blue] #benefits { background: linear-gradient(120deg, rgba(2, 38, 63, .94) 0%, rgba(2, 38, 63, .8) 50%, rgba(4, 49, 79, .62) 100%),
    url('images/Blue2.jpeg') center / cover no-repeat, #02263F !important; }
html[data-blue] .package-card.pro { background: linear-gradient(150deg, rgba(2, 38, 63, .96) 0%, rgba(2, 38, 63, .86) 55%, rgba(4, 49, 79, .72) 100%),
    url('images/Blue2.jpeg') center / cover no-repeat, #02263F !important; }
/* customer quotes as on Home: a white section, navy heading, white cards with a hairline border */
html[data-blue] #testimonials { background: #fff !important; }
html[data-blue] #testimonials .quotes-bg { display: none !important; }
html[data-blue] #testimonials .q-card { background: #fff !important; border: 1px solid #E3E7EE !important; box-shadow: 0 18px 40px -28px rgba(2, 38, 63, .35) !important; }
html[data-blue] #testimonials .q-text { color: #02263F !important; }
html[data-blue] #testimonials::before, html[data-blue] #testimonials::after { display: none !important; }
/* benefit pillar titles white, as the Home section headings on navy; the closing word keeps the light gradient */
html[data-blue] body:has(.b-cloud-hero) .pillar-title { color: #fff !important; font-family: 'Lato', sans-serif !important; font-weight: 800 !important; letter-spacing: -.035em; }