@charset "UTF-8";
        /* ══════════════════════════════════════════════════════════
           RESOURCE DOWNLOAD PAGE
        ══════════════════════════════════════════════════════════ */
        .res-cover-img {
            width: 100%; max-width: 540px; height: auto;
            filter: drop-shadow(0 26px 52px rgba(0,0,0,0.55)) drop-shadow(0 8px 16px rgba(0,0,0,0.38));
            transform: translateY(-8px);
        }
        .res-rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
        .res-rel-card {
            display: flex; flex-direction: column; gap: 12px;
            padding: 30px 28px; border-radius: 18px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(95,153,187,0.16);
            transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
        }
        .res-rel-card:hover { transform: translateY(-4px); border-color: rgba(230,83,43,0.4); background: rgba(255,255,255,0.07); }
        .res-rel-type { font-family: 'Lato', sans-serif; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); }
        .res-rel-title { font-family: 'Lato', sans-serif; font-size: 1.12rem; font-weight: 900; color: #fff; line-height: 1.3; letter-spacing: -0.01em; }
        .res-rel-desc { font-size: 0.86rem; font-weight: 300; line-height: 1.6; color: rgba(173,221,246,0.7); }
        .res-rel-cta { margin-top: auto; font-family: 'Lato', sans-serif; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sky); display: flex; align-items: center; gap: 7px; }
        .res-lib-link {
            display: inline-flex; align-items: center; gap: 9px; margin-top: 46px;
            font-family: 'Lato', sans-serif; font-size: 0.76rem; font-weight: 900;
            letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange);
            transition: color 0.2s ease;
        }
        .res-lib-link:hover { color: #fff; }
        /* "Also available in" — links the translation cluster together */
        .res-lang-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; font-family: 'Lato', sans-serif; font-size: 0.8rem; font-weight: 700; color: rgba(173,221,246,0.75); }
        .res-lang-note .ti { font-size: 0.95rem; color: var(--airforce); }
        .res-lang-note a { color: #fff; text-decoration: underline; text-decoration-color: rgba(230,83,43,0.75); text-underline-offset: 3px; }
        .res-lang-note a:hover { color: var(--orange); }
        .res-lang-note .sep { color: rgba(173,221,246,0.35); }
        /* Dark theme: the light zone flips to #05233a, so the HubSpot placeholder
           note and the pull quote need their own colours. Both base rules are
           tuned for a light background. */
        :root[data-theme="dark"] .zone-light .hs-form-note { border-color: rgba(95,153,187,0.4); }
        :root[data-theme="dark"] .zone-light .hs-form-note-title { color: #e9f3fb; }
        :root[data-theme="dark"] .zone-light .hs-form-note-body { color: #bcd6ea; }
        :root[data-theme="dark"] .zone-light .hs-form-note code { background: rgba(95,153,187,0.16); color: #e9f3fb; }
        :root[data-theme="dark"] .zone-light .testimonial-card { background: rgba(95,153,187,0.08); border-color: rgba(95,153,187,0.22); }
        :root[data-theme="dark"] .zone-light .quote-text { color: #e9f3fb; }
        :root[data-theme="dark"] .zone-light .quote-author { border-top-color: rgba(95,153,187,0.18); }
        :root[data-theme="dark"] .zone-light .author-name { color: rgba(173,221,246,0.7); }

        @media (max-width: 980px) { .res-rel-grid { grid-template-columns: 1fr; } }
        @media (max-width: 820px) {
            /* keep the cover visible on small screens, above the copy */
            .hero-right { display: flex; order: -1; margin-bottom: 12px; }
            .res-cover-img { max-width: 340px; transform: none; }
        }