/*
 * Molgenium corporate theme, shared by every public, account and product page.
 * Matches the home page: white pages, one strong violet, deep-violet bands and footer,
 * confident Inter headings, square-cornered buttons and subtle card shadows.
 *
 * Pages are built with the Tailwind CDN, which injects its CSS at runtime after this file.
 * Overrides are therefore prefixed with `html` (one extra element of specificity) so they win
 * without !important; !important is used only where Tailwind's own class would otherwise tie.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
    --white: #ffffff;
    --ink: #16122b;
    --ink-2: #4a4660;
    --ink-3: #6e6a82;
    --line: #e5e2ec;
    --tint: #f6f3fd;
    --brand: #7a00e6;
    --brand-hover: #6200b8;
    --brand-soft: #d9c6ff;
    --deep: #1d0d45;
    --deep-2: #2a1260;
    --validated: #0f7a6b;
    --alert: #b0123f;

    --font: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
    --radius: 4px;
    --radius-card: 6px;
    --shadow-card: 0 1px 2px rgba(22, 18, 43, .06), 0 8px 24px rgba(22, 18, 43, .06);
    --shadow-lift: 0 2px 4px rgba(22, 18, 43, .06), 0 18px 40px rgba(22, 18, 43, .12);

    /* Variables the existing pages already use, remapped */
    --primary-color: #7a00e6;
    --primary-color-dark: #6200b8;
    --primary-color-light: #f6f3fd;
    --bg-color: #ffffff;
    --bg-secondary-color: #f6f3fd;
    --text-color: #16122b;
    --text-secondary-color: #4a4660;
    --border-color: #e5e2ec;
    --success-color: #0f7a6b;
    --error-color: #b0123f;
}

/* ---------- Base ---------- */
html body {
    background-color: var(--white);
    color: var(--ink);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
}
html :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Headings: confident semibold sans, tight tracking */
html :is(h1, h2) { font-weight: 600 !important; letter-spacing: -0.02em; }
html :is(h3, h4, h5) { font-weight: 600 !important; letter-spacing: -0.01em; }
html :is(.text-4xl, .text-5xl, .text-6xl, .text-7xl) { letter-spacing: -0.025em; line-height: 1.1; }
html :is(.font-extrabold, .font-black) { font-weight: 700; }

/* Small uppercase labels become the brand eyebrow */
html .uppercase:is(.tracking-wide, .tracking-wider, .tracking-widest),
html .eyebrow { font-family: var(--font); font-weight: 600; letter-spacing: .12em; }

/* ---------- Colour remap ---------- */
html :is(.bg-slate-50, .bg-gray-50, .bg-body) { background-color: var(--tint); }
html :is(.bg-white, .bg-secondary) { background-color: var(--white); }
html :is(.bg-gray-100, .bg-slate-100, .bg-purple-50, .bg-purple-100, .bg-indigo-50, .bg-indigo-100, .bg-primary-light, .bg-violet-100) { background-color: var(--tint); }
html :is(.bg-gray-200, .bg-slate-200) { background-color: var(--line); }
html :is(.bg-gray-800, .bg-gray-900, .bg-slate-800, .bg-slate-900) { background-color: var(--deep); }

html :is(.text-gray-900, .text-gray-800, .text-slate-900, .text-slate-800, .text-main) { color: var(--ink); }
html :is(.text-gray-700, .text-gray-600, .text-gray-500, .text-slate-700, .text-slate-600, .text-slate-500, .text-secondary) { color: var(--ink-2); }
html :is(.text-gray-400, .text-slate-400) { color: var(--ink-3); }
html :is(.text-primary, .primary-color, .text-purple-600, .text-purple-700, .text-indigo-600, .text-indigo-700, .text-violet-600) { color: var(--brand); }
html .text-red-500 { color: var(--alert); }
html .text-green-500, html .text-green-600 { color: var(--validated); }

html :is(.border-gray-100, .border-gray-200, .border-gray-300, .border-slate-100, .border-slate-200, .border-slate-300, .border-main) { border-color: var(--line); }
html :is(.border-primary, .border-indigo-500, .border-purple-500) { border-color: var(--brand); }
html :is(.ring-primary, .ring-indigo-500, .focus\:ring-primary:focus, .focus\:ring-indigo-500:focus) { --tw-ring-color: rgba(122, 0, 230, .25); }

/* Gradient text reads as solid ink */
html :is(.gradient-text, .animated-gradient-text) { animation: none; background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }

/* ---------- Surfaces: crisp cards with subtle shadows ---------- */
html :is(.shadow-sm, .shadow, .shadow-md) { box-shadow: var(--shadow-card); }
html :is(.shadow-lg, .shadow-xl, .shadow-2xl) { box-shadow: var(--shadow-lift); }
html :is(.hover\:shadow-lg, .hover\:shadow-xl, .hover\:shadow-2xl):hover { box-shadow: var(--shadow-lift); }
html :is(.rounded-xl, .rounded-2xl, .rounded-3xl) { border-radius: var(--radius-card); }

/* ---------- Buttons: solid violet, square corners, plain sans labels ---------- */
html :is(a, button, input[type="submit"]):is(.bg-primary, .bg-purple-600, .bg-indigo-600, .bg-violet-600, .submit-button, .btn-primary) {
    background: var(--brand);
    color: var(--white);
    border-radius: var(--radius);
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    transform: none;
}
html :is(a, button, input[type="submit"]):is(.bg-primary, .bg-purple-600, .bg-indigo-600, .bg-violet-600, .submit-button, .btn-primary):hover:not(:disabled) {
    background: var(--brand-hover);
    transform: none;
    box-shadow: none;
}
html :is(.bg-primary-color-dark, .hover\:bg-primary-dark:hover, .hover\:bg-primary-color-dark:hover) { background-color: var(--brand-hover); }
/* Small dots and badges keep the brand violet; large decorative blocks use the deep violet */
html div.bg-primary, html span.bg-primary { background-color: var(--brand); }
html div.bg-primary:is(.p-8, .p-10, .p-12, .h-64, .h-72, .h-80) { background-color: var(--deep-2); }

/* ---------- Forms ---------- */
html :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
    border-color: #cfcbd9;
    border-radius: var(--radius);
    background-color: var(--white);
    color: var(--ink);
}
html :is(input, select, textarea):focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(122, 0, 230, .15);
    outline: none;
}
html :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--brand); }

/* ---------- Header: white bar, hairline, brand-violet hover ---------- */
html body > header,
html #main-header,
html #header {
    background-color: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 2px 12px rgba(22, 18, 43, .04);
}
html #main-header::before { display: none; }
html .header-scrolled { box-shadow: 0 4px 18px rgba(22, 18, 43, .08); }

/* Logo: the trimmed mark (logo-mark.png) shown whole at a fixed height */
html :is(header, #mobile-menu, #mobileMenu, .mobile-menu) a:has(> img[src*="logo-mark"]) {
    height: auto !important;
    width: auto !important;
    overflow: visible;
    display: flex;
    align-items: center;
    padding: 12px 0;
}
html header a > img[src*="logo-mark"] {
    height: 64px !important;
    width: auto !important;
    max-width: none;
    margin: 0;
    object-fit: contain;
}
html :is(#mobile-menu, #mobileMenu, .mobile-menu) img[src*="logo-mark"] { height: 52px !important; width: auto !important; }
html footer img[src*="logo-mark"] { height: 72px !important; width: auto !important; }

html header nav > a,
html header nav > div > button,
html header nav > div > a:first-child {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}
html header nav > a:hover,
html header nav > div > button:hover,
html header nav > div > a:first-child:hover { color: var(--brand); }

/* Dropdown panels: violet top rule, like the home page */
html header nav :is(.dropdown-menu, [class*="group-hover:visible"], [class*="group-hover:block"]) {
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: var(--shadow-lift);
}
html header nav :is(.dropdown-menu, [class*="group-hover:visible"], [class*="group-hover:block"]) a {
    font-size: 15px;
    color: var(--ink);
    border-radius: var(--radius);
}
html header nav :is(.dropdown-menu, [class*="group-hover:visible"], [class*="group-hover:block"]) a:hover {
    background: var(--tint);
    color: var(--brand);
}

html :is(#mobile-menu, #mobileMenu, .mobile-menu) { background-color: var(--white); }

/* ---------- Footer: deep violet with white headings ---------- */
html body footer:not(#_) {
    background-color: var(--deep);
    color: rgba(255, 255, 255, .75);
    border-top: 0;
}
html body footer :is(.text-gray-800, .text-gray-900, .text-slate-800, .text-slate-900, .text-gray-700, .text-gray-600, .text-slate-600, .text-gray-500, .text-slate-500) { color: rgba(255, 255, 255, .75); }
html body footer :is(h3, h4, h5) {
    font-size: 13px;
    font-weight: 600 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--white);
}
html body footer a:hover { color: var(--white); }
html body footer :is(.border-gray-700, .border-gray-600, .border-slate-700, .border-gray-200, .border-slate-200) { border-color: rgba(255, 255, 255, .14); }

/* ---------- Tooltips ---------- */
html .tippy-box[data-theme~='molgenium'] { background-color: var(--deep); color: var(--white); border-radius: var(--radius); }
html .tippy-box[data-theme~='molgenium'][data-placement^='top'] > .tippy-arrow::before { border-top-color: var(--deep); }
html .tippy-box[data-theme~='molgenium'][data-placement^='bottom'] > .tippy-arrow::before { border-bottom-color: var(--deep); }
html .dictionary-term { border-bottom: 1px dotted currentColor; font-weight: inherit; }

/* ---------- Motion ---------- */
/* Scroll-reveal sections start hidden; show them at once for people who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html :is(.fade-in-section, .animate-on-scroll, .reveal) { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Photo header banners on public subpages (section.mg-hero carries its photo inline) ---------- */
html .mg-hero {
    position: relative;
    isolation: isolate;
    background-color: var(--deep) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    color: var(--white);
}
html .mg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(20, 8, 50, .92) 0%, rgba(20, 8, 50, .78) 45%, rgba(20, 8, 50, .45) 100%);
    pointer-events: none;
}
/* Text sitting directly on the photo turns white; cards inside the banner keep their own colours */
html .mg-hero :is(h1, h2, h3, p, li, span, a:not([class*="bg-"])):not(.mg-hero .bg-white *, .mg-hero .bg-white) { color: var(--white); }
html .mg-hero :is(h1, h2, h3, p, li, span, a:not([class*="bg-"])):not(.mg-hero .bg-white *, .mg-hero .bg-white).dictionary-term { border-bottom-color: currentColor; }
html .mg-hero :is(.text-primary, .primary-color, [class*="text-purple"], [class*="text-indigo"], [class*="text-violet"]):not(.mg-hero .bg-white *, .mg-hero .bg-white) { color: var(--brand-soft); }

/* Banners share one rhythm: same padding, heading scale and room for the breadcrumb */
html .mg-hero { padding-top: 120px !important; padding-bottom: 104px !important; min-height: 0 !important; height: auto !important; }
html .mg-hero h1 { font-size: clamp(34px, 4.2vw, 54px) !important; line-height: 1.1 !important; letter-spacing: -0.025em; }
html .mg-hero h1 + p, html .mg-hero h1 ~ p { font-size: 18px; line-height: 1.6; }
/* Brand blocks sitting on a banner photo become frosted glass rather than solid colour */
html .mg-hero div.bg-primary { background-color: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: none; }

/* Standards and regulators shown as text chips (no logo artwork) */
html .std-chip { display: inline-block; padding: 12px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font: 600 15px/1 var(--font); color: var(--deep-2); }

/* ---------- Legal pages (privacy policy, terms of service) ---------- */
html .legal-wrap { max-width: 1240px; margin: 0 auto; padding: 72px 32px 112px; display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; }
html .legal-toc { position: sticky; top: 120px; font-size: 14.5px; }
html .legal-toc p { font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
html .legal-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
html .legal-toc a { display: block; padding: 6px 0 6px 16px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.4; }
html .legal-toc a:hover { color: var(--brand); border-left-color: var(--brand); }
html .legal { max-width: 760px; color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
html .legal h2 { font-size: 26px; line-height: 1.25; color: var(--ink); margin: 56px 0 14px; scroll-margin-top: 120px; }
html .legal h2:first-of-type { margin-top: 0; }
html .legal h3 { font-size: 18px; color: var(--ink); margin: 28px 0 8px; }
html .legal p, html .legal ul, html .legal table { margin: 0 0 16px; }
html .legal ul { padding-left: 22px; list-style: disc; }
html .legal li { margin-bottom: 6px; }
html .legal a { color: var(--brand); text-decoration: underline; }
html .legal strong { color: var(--ink); }
html .legal table { width: 100%; border-collapse: collapse; font-size: 15px; }
html .legal th, html .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
html .legal th { background: var(--tint); color: var(--ink); font-weight: 600; }
html .legal .meta { font-size: 14px; color: var(--ink-3); margin-bottom: 32px; }
html .legal .callout { border-left: 3px solid var(--brand); background: var(--tint); padding: 18px 22px; border-radius: 0 var(--radius-card) var(--radius-card) 0; margin: 0 0 24px; }
html .legal-hero-sub { max-width: 640px; margin-top: 14px; }
@media (max-width: 900px) {
    html .legal-wrap { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
    html .legal-toc { position: static; }
}
@media print { html .legal-toc, #ms-header, .ms-utility, #ms-footer { display: none !important; } html .legal-wrap { display: block; padding: 0; } }