/*
 * LearnHub design tokens - warm education palette.
 * Platform chrome: deep teal sidebar on a warm off-white canvas, teal accent, amber highlights.
 * Institute pages override --lh-primary* with the institute brand colour (contrast-checked); see BrandPalette.
 * Light theme only for M01; a dark theme is part of the accessibility pass (M06).
 */
:root {
    --lh-bg: #FAF7F2;
    --lh-surface: #FFFFFF;
    --lh-surface-alt: #F5F0E8;
    --lh-border: #ECE5DA;
    --lh-text: #1C1917;
    --lh-text-strong: #292524;
    --lh-muted: #78716C;

    --lh-primary: #0F766E;
    --lh-primary-rgb: 15, 118, 110;
    --lh-primary-hover: #0D645E;
    --lh-primary-soft: #E7F1F0;

    --lh-highlight: #D97706;
    --lh-highlight-soft: #FEF3C7;

    --lh-sidebar: #134E4A;
    --lh-sidebar-text: #CDE5E1;
    --lh-sidebar-muted: #8DB8B1;
    --lh-sidebar-hover: rgba(255, 255, 255, .06);

    --lh-radius: 14px;
    --lh-shadow: 0 1px 2px rgba(28, 25, 23, .04), 0 4px 16px rgba(28, 25, 23, .05);
    --lh-focus: 0 0 0 .2rem rgba(var(--lh-primary-rgb), .25);

    --bs-primary: var(--lh-primary);
    --bs-primary-rgb: var(--lh-primary-rgb);
    --bs-link-color: var(--lh-primary);
    --bs-link-color-rgb: var(--lh-primary-rgb);
    --bs-link-hover-color: var(--lh-primary-hover);
    --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--lh-text);
    --bs-body-bg: var(--lh-bg);
    --bs-border-color: var(--lh-border);
    --bs-secondary-color: var(--lh-muted);
}

body { background: var(--lh-bg); font-size: .925rem; color: var(--lh-text); }
h1, h2, h3, h4, h5, h6 { color: var(--lh-text-strong); }
a { color: var(--lh-primary); }
a:hover { color: var(--lh-primary-hover); }
.text-muted { color: var(--lh-muted) !important; }
.small-muted { font-size: .8rem; color: var(--lh-muted); }

/* Bootstrap compiles its own blue into many components; re-point them at the accent so institute theming flows through. */
.btn { border-radius: 9px; font-weight: 500; }
.btn-primary {
    --bs-btn-bg: var(--lh-primary); --bs-btn-border-color: var(--lh-primary);
    --bs-btn-hover-bg: var(--lh-primary-hover); --bs-btn-hover-border-color: var(--lh-primary-hover);
    --bs-btn-active-bg: var(--lh-primary-hover); --bs-btn-active-border-color: var(--lh-primary-hover);
    --bs-btn-disabled-bg: var(--lh-primary); --bs-btn-disabled-border-color: var(--lh-primary);
    --bs-btn-focus-shadow-rgb: var(--lh-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--lh-primary); --bs-btn-border-color: var(--lh-primary);
    --bs-btn-hover-bg: var(--lh-primary); --bs-btn-hover-border-color: var(--lh-primary);
    --bs-btn-active-bg: var(--lh-primary-hover); --bs-btn-active-border-color: var(--lh-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--lh-primary-rgb);
}
.btn-light { --bs-btn-bg: var(--lh-surface-alt); --bs-btn-border-color: var(--lh-surface-alt); --bs-btn-hover-bg: #EDE6DA; --bs-btn-hover-border-color: #EDE6DA; }
.btn-highlight { background: var(--lh-highlight); border-color: var(--lh-highlight); color: #fff; }
.btn-highlight:hover { background: #B45309; border-color: #B45309; color: #fff; }
.text-primary { color: var(--lh-primary) !important; }
.bg-primary { background-color: var(--lh-primary) !important; }
.border-primary { border-color: var(--lh-primary) !important; }
.form-label { font-weight: 500; font-size: .85rem; color: #44403C; }
.form-control, .form-select { border-radius: 9px; border-color: var(--lh-border); }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--lh-primary); box-shadow: var(--lh-focus); }
.form-check-input:checked { background-color: var(--lh-primary); border-color: var(--lh-primary); }
.input-group-text { background: var(--lh-surface-alt); border-color: var(--lh-border); }
.pagination { --bs-pagination-color: var(--lh-primary); --bs-pagination-hover-color: var(--lh-primary-hover); --bs-pagination-active-bg: var(--lh-primary); --bs-pagination-active-border-color: var(--lh-primary); --bs-pagination-focus-box-shadow: var(--lh-focus); }
.list-group { --bs-list-group-active-bg: var(--lh-primary); --bs-list-group-active-border-color: var(--lh-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--lh-primary); border-color: var(--lh-border); }
.alert-info { --bs-alert-bg: var(--lh-primary-soft); --bs-alert-border-color: #CFE3E0; --bs-alert-color: var(--lh-primary-hover); }
.table-light { --bs-table-bg: var(--lh-surface-alt); }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: #FCFAF6; }

/* ---------- App shell ---------- */
.app-shell { min-height: 100vh; }
.sidebar {
    background: var(--lh-sidebar); color: var(--lh-sidebar-text); width: 248px;
    --bs-offcanvas-width: 248px; --bs-offcanvas-bg: var(--lh-sidebar);
    /* The menu still scrolls (wheel, touch, keyboard focus); only the scrollbar is hidden. */
    scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
@media (min-width: 992px) {
    /* Bootstrap's .offcanvas-lg sets background-color: transparent !important at this width; keep the sidebar colour. */
    .sidebar.offcanvas-lg { position: fixed; inset: 0 auto 0 0; background-color: var(--lh-sidebar) !important; overflow-y: auto; }
    .app-main { margin-left: 248px; }
}
.sidebar .brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 700; font-size: 1.2rem; padding: 1.4rem 1.4rem 1.6rem; text-decoration: none; }
.sidebar .brand i { color: #FBBF24; font-size: 1.6rem; }
.sidebar .nav-section { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--lh-sidebar-muted); padding: 1rem 1.4rem .4rem; }
.sidebar .nav-link { color: var(--lh-sidebar-text); display: flex; align-items: center; gap: .8rem; padding: .7rem 1.4rem; font-weight: 500; border-left: 3px solid transparent; }
.sidebar .nav-link i { font-size: 1.1rem; width: 1.2rem; }
.sidebar .nav-link:hover { color: #fff; background: var(--lh-sidebar-hover); }
.sidebar .nav-link.active { color: #fff; background: linear-gradient(90deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03)); border-left-color: var(--lh-highlight); }
.sidebar .tenant-chip { margin: 0 1rem 1rem; padding: .75rem; border-radius: 12px; background: rgba(255, 255, 255, .06); display: flex; gap: .6rem; align-items: center; color: #fff; font-size: .85rem; }

.topbar { background: var(--lh-surface); border-bottom: 1px solid var(--lh-border); padding: .75rem 1.5rem; display: flex; align-items: center; gap: 1rem; position: sticky; top: 0; z-index: 10; }
.topbar .page-heading h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.topbar .page-heading p { margin: 0; color: var(--lh-muted); font-size: .85rem; }
/* Header "Go Back" action: a compact teal pill beside the profile menu; icon only on small screens. */
.btn-back {
    display: inline-flex; align-items: center; gap: .45rem; flex: none;
    padding: .45rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
    color: var(--lh-primary); background: var(--lh-primary-soft); border: 1px solid #CFE3E0;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-back i { font-size: 1rem; transition: transform .15s ease; }
.btn-back:hover, .btn-back:focus-visible { color: #fff; background: var(--lh-primary); border-color: var(--lh-primary); }
.btn-back:hover i { transform: translateX(-2px); }
@media (max-width: 575.98px) { .btn-back { padding: .45rem .7rem; } .btn-back span { display: none; } }
.content { padding: 1.5rem; }
@media (max-width: 575.98px) { .content { padding: 1rem; } .topbar { padding: .75rem 1rem; } }

/* ---------- Cards & tables ---------- */
.card { border: 1px solid var(--lh-border); border-radius: var(--lh-radius); box-shadow: var(--lh-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--lh-border); padding: 1rem 1.25rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.card-body { padding: 1.25rem; }
.table { --bs-table-bg: transparent; margin: 0; }
.table > :not(caption) > * > * { padding: .8rem 1rem; border-color: var(--lh-border); vertical-align: middle; }
.table thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--lh-muted); font-weight: 600; background: var(--lh-surface-alt); }

.stat-card { display: flex; gap: 1rem; align-items: center; }
.stat-icon { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.4rem; flex: none; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-label { color: var(--lh-muted); font-size: .8rem; }
.trend-up { color: #16a34a; font-size: .8rem; font-weight: 600; }
.trend-down { color: #dc2626; font-size: .8rem; font-weight: 600; }

.tone-blue { background: var(--lh-primary-soft); color: var(--lh-primary); }
.tone-purple { background: #EDE9FE; color: #6D28D9; }
.tone-green { background: #dcfce7; color: #15803d; }
.tone-orange { background: var(--lh-highlight-soft); color: #B45309; }
.tone-red { background: #fee2e2; color: #b91c1c; }

.badge-soft { display: inline-block; padding: .3em .7em; border-radius: 6px; font-size: .75rem; font-weight: 600; white-space: nowrap; }
.badge-soft.success { background: #dcfce7; color: #15803d; }
.badge-soft.warning { background: #fef3c7; color: #b45309; }
.badge-soft.danger { background: #fee2e2; color: #b91c1c; }
.badge-soft.info { background: var(--lh-primary-soft); color: var(--lh-primary-hover); }
.badge-soft.purple { background: #f3e8ff; color: #7e22ce; }
.badge-soft.teal { background: #ccfbf1; color: #0f766e; }
.badge-soft.neutral { background: var(--lh-surface-alt); color: #57534E; }

.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 600; font-size: .8rem; flex: none; background: var(--lh-highlight-soft); color: #92400E; }
.avatar.lg { width: 56px; height: 56px; font-size: 1.1rem; }
.logo-tile { width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center; color: #fff; font-weight: 700; flex: none; overflow: hidden; }
.logo-tile img { width: 100%; height: 100%; object-fit: cover; }
.logo-tile.lg { width: 72px; height: 72px; font-size: 1.5rem; border-radius: 14px; }

/* ---------- Tabs ---------- */
.nav-underline .nav-link { color: var(--lh-muted); font-weight: 500; }
.nav-underline .nav-link.active { color: var(--lh-primary); border-bottom-color: var(--lh-primary); }
.nav-pills-soft .nav-link { color: var(--lh-muted); border-radius: 8px; font-weight: 500; padding: .45rem .9rem; }
.nav-pills-soft .nav-link.active { background: var(--lh-primary-soft); color: var(--lh-primary); }
.side-tabs .nav-link { color: #44403C; display: flex; gap: .6rem; align-items: center; border-radius: 10px; padding: .65rem .9rem; }
.side-tabs .nav-link.active { background: var(--lh-primary-soft); color: var(--lh-primary); font-weight: 600; }

.scroll-x { overflow-x: auto; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--lh-muted); }
.empty-state i { font-size: 2rem; display: block; margin-bottom: .5rem; }

/* ---------- Wizard ---------- */
.wizard-steps { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.wizard-steps .step { display: flex; align-items: center; gap: .5rem; color: var(--lh-muted); font-size: .85rem; font-weight: 500; padding-right: .75rem; }
.wizard-steps .step .num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--lh-surface-alt); font-size: .8rem; }
.wizard-steps .step.active { color: var(--lh-primary); }
.wizard-steps .step.active .num, .wizard-steps .step.done .num { background: var(--lh-primary); color: #fff; }
.wizard-panel[hidden] { display: none; }
.plan-option { border: 1.5px solid var(--lh-border); border-radius: 12px; padding: 1rem; cursor: pointer; height: 100%; display: block; }
.plan-option:has(input:checked) { border-color: var(--lh-primary); background: var(--lh-primary-soft); }
.promo-panel { background: linear-gradient(160deg, var(--lh-primary-soft), #FFFBF3); border-radius: var(--lh-radius); padding: 1.5rem; height: 100%; }
.promo-panel li { list-style: none; display: flex; gap: .5rem; margin-bottom: .55rem; font-size: .875rem; }
.promo-panel li i { color: var(--lh-highlight); }

/* ---------- Usage meters & permissions ---------- */
.meter { height: 8px; border-radius: 999px; background: var(--lh-surface-alt); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--lh-primary); border-radius: 999px; }
.perm-group { border: 1px solid var(--lh-border); border-radius: 12px; padding: .9rem 1rem; height: 100%; }
.perm-group h6 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--lh-muted); }
.matrix th, .matrix td { text-align: center; white-space: nowrap; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix .bi-check-circle-fill { color: var(--lh-primary); }
.matrix .bi-dash { color: #D6D3D1; }
.code-box { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; background: var(--lh-surface-alt); border-radius: 8px; padding: .5rem .75rem; word-break: break-all; }

/* ---------- Auth & public pages ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.auth-card { width: 100%; max-width: 440px; }
.public-nav { background: var(--lh-surface); border-bottom: 1px solid var(--lh-border); }
.hero { padding: 4.5rem 0; }
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.02em; }
.feature-card i { font-size: 1.6rem; color: var(--lh-primary); }

.portal-hero { color: #fff; padding: 5rem 0; background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary)); }
.portal-hero h1 { font-weight: 800; font-size: clamp(2rem, 4vw, 3rem); }
/* The global heading colour (h1–h6 above) would beat the white inherited from the hero; headings here follow the hero. */
.portal-hero :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
.btn-brand { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.btn-brand:hover { filter: brightness(.92); color: #fff; }
.text-brand { color: var(--brand-primary); }
.preview-frame { border: 1px solid var(--lh-border); border-radius: 12px; overflow: hidden; }
.preview-frame .bar { background: var(--lh-surface-alt); padding: .4rem .75rem; font-size: .75rem; color: var(--lh-muted); display: flex; gap: .4rem; align-items: center; }
.preview-frame .bar .dot { width: 8px; height: 8px; border-radius: 50%; background: #D6D3D1; }
.preview-frame .hero-mini { padding: 1.5rem; color: #fff; background: linear-gradient(135deg, var(--brand-secondary), var(--brand-primary)); }

/* ---------- Warm accents ---------- */
.hero { background: radial-gradient(1200px 400px at 85% -10%, var(--lh-highlight-soft), transparent 60%), radial-gradient(900px 400px at 0% 0%, var(--lh-primary-soft), transparent 55%); }
.badge-highlight { background: var(--lh-highlight-soft); color: #92400E; }

/* ---------- M02: website content and catalogue ---------- */
.prose { line-height: 1.7; overflow-wrap: anywhere; }
.prose h1, .prose h2, .prose h3, .prose h4 { margin-top: 1.6rem; margin-bottom: .6rem; font-weight: 700; }
.prose > :first-child { margin-top: 0; }
.prose img { max-width: 100%; height: auto; border-radius: .5rem; }
.prose table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.prose th, .prose td { border: 1px solid var(--bs-border-color); padding: .4rem .6rem; }
.prose blockquote { border-left: 4px solid var(--brand-primary, var(--lh-primary)); padding-left: 1rem; color: var(--bs-secondary-color); }
.prose pre { background: #F6F3EE; padding: .75rem 1rem; border-radius: .5rem; }
.md-source { min-height: 18rem; font-size: .9rem; }
.md-preview { max-height: 32rem; overflow: auto; }
.md-insert img { width: 56px; height: 56px; object-fit: cover; border-radius: .35rem; display: block; }
.media-tile { display: block; color: inherit; text-decoration: none; }
.media-tile:hover .media-thumb { outline: 2px solid var(--lh-primary); }
.media-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: #F6F3EE; border-radius: .6rem; overflow: hidden; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-thumb i { font-size: 2.5rem; color: var(--bs-secondary-color); }
.media-preview img { max-width: 100%; max-height: 28rem; }
.thumb-preview { max-height: 8rem; border-radius: .5rem; }
.course-card { overflow: hidden; }
.course-thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--brand-primary, var(--lh-primary)) 12%, white); }
.course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.course-thumb i { font-size: 2.5rem; color: var(--brand-primary, var(--lh-primary)); }
.catalogue-search { min-width: min(100%, 22rem); }
.preview-banner { background: #FEF3C7; color: #78350F; padding: .6rem 0; border-bottom: 1px solid #FCD34D; }
.footer-text { white-space: pre-line; }

/* ---------- M03: forms, components, templates, modules ---------- */
.component-chip { display: inline-block; background: #EEF2FF; color: #3730A3; border: 1px dashed #A5B4FC; border-radius: .5rem; padding: .35rem .75rem; font-size: .875rem; }
.content-component { margin: 1.5rem 0; }
.content-component .public-form h2 { margin-top: 0; }
.public-form { max-width: 44rem; }
.submission-values dd { white-space: pre-wrap; overflow-wrap: anywhere; }
.module-soon { opacity: .75; border-style: dashed; }
.template-card .media-thumb { aspect-ratio: 16 / 9; border-radius: 0; }


/* ---------- Platform landing page (platform host only; institute portals keep .portal-hero) ---------- */
.landing-hero { position: relative; overflow: hidden; overflow-x: clip; padding: 3.5rem 0 6rem; background: linear-gradient(180deg, #F3FAF8 0%, var(--lh-bg) 100%); }
.landing-glow { position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(40rem 22rem at 85% 20%, rgba(20, 184, 166, .14), transparent 70%),
                radial-gradient(28rem 18rem at 8% 85%, rgba(245, 158, 11, .10), transparent 70%); }
.landing-eyebrow { display: inline-block; padding: .35rem .8rem; border-radius: 999px; background: var(--lh-primary-soft); color: var(--lh-primary-hover); font-size: .78rem; font-weight: 600; }
.landing-title { margin-top: 1rem; font-size: clamp(2.1rem, 4.4vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.landing-accent { color: var(--lh-primary); position: relative; }
@media (min-width: 576px) { .landing-accent { white-space: nowrap; } }   /* keep "in minutes." together where it fits */
.landing-accent::after { content: ""; position: absolute; left: 2%; right: 4%; bottom: -.12em; height: .16em; border-radius: 999px;
    background: linear-gradient(90deg, var(--lh-primary), #F59E0B); opacity: .85; }
.landing-lead { margin-top: 1.25rem; font-size: 1.1rem; color: #57534E; max-width: 34rem; }
.landing-cta { box-shadow: 0 8px 20px rgba(var(--lh-primary-rgb), .25); }
.landing-trust li { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--lh-text-strong); }
.landing-trust i { color: var(--lh-primary); font-size: 1.05rem; }
.landing-art { width: 100%; height: auto; max-width: 620px; display: block; margin-inline: auto; filter: drop-shadow(0 18px 30px rgba(19, 78, 74, .12)); }

.landing-strip-wrap { position: relative; margin-top: -3.25rem; z-index: 2; }
.landing-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; padding: 1.5rem; background: var(--lh-surface);
    border: 1px solid var(--lh-border); border-radius: 18px; box-shadow: 0 12px 32px rgba(28, 25, 23, .08); }
.landing-strip-item { display: flex; gap: .85rem; align-items: flex-start; }
.landing-strip-item + .landing-strip-item { border-left: 1px solid var(--lh-border); padding-left: 1.25rem; }

.landing-section { padding-top: 4.5rem; }
.landing-h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; }
.landing-feature { height: 100%; padding: 1.5rem; background: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: 16px; transition: transform .15s ease, box-shadow .15s ease; }
.landing-feature:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(28, 25, 23, .08); }
.landing-feature h3, .landing-step h3 { font-size: 1.05rem; font-weight: 700; margin: 1rem 0 .4rem; }
.landing-feature p, .landing-step p { margin: 0; color: var(--lh-muted); }

.landing-band { margin-top: 4.5rem; padding: 4rem 0; background: linear-gradient(180deg, #EEF7F5, #F7FBFA); border-block: 1px solid #DCEFEB; }
.landing-step { position: relative; height: 100%; padding: 1.5rem; background: var(--lh-surface); border-radius: 16px; box-shadow: var(--lh-shadow); }
.landing-step-no { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lh-primary); color: #fff; font-weight: 800; }

.landing-plan { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.5rem; background: var(--lh-surface); border: 1px solid var(--lh-border);
    border-radius: 16px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.landing-plan:hover { transform: translateY(-3px); border-color: rgba(var(--lh-primary-rgb), .45); box-shadow: 0 14px 30px rgba(var(--lh-primary-rgb), .12); }
.landing-price { font-size: 1.35rem; font-weight: 800; color: var(--lh-text-strong); letter-spacing: -.01em; }
.landing-checks li { display: flex; gap: .45rem; margin-bottom: .45rem; }
.landing-checks i { color: #16A34A; font-weight: 700; }
.landing-plan .btn { margin-top: auto; }

.landing-final { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; padding: 2.25rem 2.5rem; border-radius: 20px; color: #E6F4F1;
    background: radial-gradient(30rem 14rem at 90% 0%, rgba(245, 158, 11, .25), transparent 70%), linear-gradient(135deg, #134E4A, #0F766E); }
.landing-final h2 { color: #fff; }

.landing-footer { padding: 3rem 0 1.5rem; background: #0F3B38; color: #A7C9C3; font-size: .9rem; }
.landing-footer a { color: #CDE5E1; text-decoration: none; }
.landing-footer a:hover { color: #fff; text-decoration: underline; }
.landing-footer li { margin-bottom: .4rem; }
.landing-footer-head { color: #fff; font-weight: 700; margin-bottom: .6rem; }
.landing-footer-bottom { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .8rem; }

@media (max-width: 991.98px) {
    .landing-hero { padding-bottom: 5rem; }
    .landing-strip { grid-template-columns: repeat(2, 1fr); }
    .landing-strip-item + .landing-strip-item { border-left: 0; padding-left: 0; }
}
@media (max-width: 575.98px) {
    .landing-strip { grid-template-columns: 1fr; }
    .landing-final { padding: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .landing-feature, .landing-plan { transition: none; }
    .landing-feature:hover, .landing-plan:hover { transform: none; }
}