/* Liquid Glass across the whole site (Max, 2026-10-02): the material the
   Mac apps use — translucent surfaces with a light edge, capsule buttons
   with a sheen — on the shared elements every page carries and on the
   Triada page's own buttons, form and guarantee. Loaded by layout.html
   after the theme; each rule is written with "html body" in front so it
   wins over the pages' own inline styles without !important. The Tempo
   and Sunclax pages carry the full glass layer in their own stylesheets. */
:root {
    --glass: rgba(255, 255, 255, .62);
    --glass-edge: rgba(255, 255, 255, .8);
    --glass-line: rgba(20, 16, 12, .07);
    --glass-blur: blur(24px) saturate(180%);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px var(--glass-line), 0 14px 40px rgba(20, 16, 12, .12);
    --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%);
}
@media (prefers-color-scheme: dark) {
    :root {
        --glass: rgba(40, 36, 32, .6);
        --glass-line: rgba(255, 255, 255, .09);
        --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px var(--glass-line), 0 14px 40px rgba(0, 0, 0, .45);
    }
}

/* ---- shared on every page ------------------------------------------- */
/* the language pill on the left rail */
html body .lang-sw__trigger {
    background: var(--glass); border-color: transparent;
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}
html body .lang-sw__trigger:hover { background: rgba(255, 255, 255, .8); }
/* the round "Get in Touch" button in the header */
html body #site-header .module-button .btn-icon {
    background-image: var(--glass-sheen);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 22px rgba(0, 0, 0, .18);
}
/* the contact form's send button (the modal and the Get in Touch page) */
html body .lqd-contact-form input[type="submit"].lqd-cf-form-control {
    background-image: var(--glass-sheen);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 10px 26px rgba(0, 0, 0, .18);
}
/* the cookie card */
html body .mc-aff-consent {
    background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow); border-radius: 20px;
}
html body .mc-aff-consent .mc-aff-consent__yes { background-image: var(--glass-sheen); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
/* the affiliates card wherever it shows */
html body .site-aff-card {
    background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow); border-radius: 22px;
}

/* ---- the Triada page ------------------------------------------------- */
html body .tr-cta-primary {
    border-radius: 999px; background-image: var(--glass-sheen);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 10px 28px rgba(0, 0, 0, .2);
}
html body .tr-cta-ghost {
    border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
html body .tr-cta-ghost:hover { background: #fff; }
html body .tr-sub-form input[type="email"],
html body .tr-sub-form input[type="text"] {
    border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 4px 14px rgba(0, 0, 0, .10);
}
html body .tr-sub-form button {
    border-radius: 999px; background-image: var(--glass-sheen);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 20px rgba(0, 0, 0, .16);
}
html body .tr-guarantee {
    border-radius: 20px; background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 30px rgba(0, 0, 0, .12);
}