/* Skip-to-content link (AA keyboard accessibility) */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #1D4641;
    background: #D4E9CA;
    padding: 12px 24px;
    border-radius: 0 0 8px 0;
    text-decoration: none;
}
.skip-to-content:focus {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
    outline: 2px solid #1D4641;
    outline-offset: 2px;
}

/* Self-hosted brand fonts (previously Google Fonts). Serving these locally
   keeps rendering identical between production, CI, and sandboxed guardrail
   runs (whose browsers cannot reach external CDNs) and removes a third-party
   request from every page load. Files: assets/fonts/, via @fontsource. */
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("../fonts/poppins/poppins-latin-100-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("../fonts/poppins/poppins-latin-200-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/poppins/poppins-latin-300-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins/poppins-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/poppins/poppins-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/poppins/poppins-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/poppins/poppins-latin-700-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/poppins/poppins-latin-800-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/poppins/poppins-latin-900-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Poppins";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/poppins/poppins-latin-400-italic.woff2") format("woff2");
}
@font-face {
    font-family: "Taviraj";
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url("../fonts/taviraj/taviraj-latin-100-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Taviraj";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("../fonts/taviraj/taviraj-latin-200-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Taviraj";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../fonts/taviraj/taviraj-latin-300-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Taviraj";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/taviraj/taviraj-latin-400-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Taviraj";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/taviraj/taviraj-latin-500-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Taviraj";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/taviraj/taviraj-latin-600-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Taviraj";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/taviraj/taviraj-latin-700-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Taviraj";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/taviraj/taviraj-latin-800-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Taviraj";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../fonts/taviraj/taviraj-latin-900-normal.woff2") format("woff2");
}
@font-face {
    font-family: "Taviraj";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/taviraj/taviraj-latin-400-italic.woff2") format("woff2");
}

* {
    box-sizing: border-box;
}

html,
body,
header,
nav,
main,
footer {
    margin: 0;
    padding: 0;
}

body,
p {
    line-height: 1.6;
    background-color: #FFF;
    font-family: 'Poppins', sans-serif;
    line-height: 24px;
    letter-spacing: -0.324px;
    font-size: 18px;
    color: #463351;
}

p {
    background-color: transparent;
}

a {
    text-decoration: none;
}

a:focus, .btn:focus {
    outline: none;
    box-shadow: none;
}

.text-right {
    text-align: right;
}

.taviraj-thin {
    font-family: "Taviraj", serif;
    font-weight: 100;
    font-style: normal;
}

.taviraj-extralight {
    font-family: "Taviraj", serif;
    font-weight: 200;
    font-style: normal;
}

.taviraj-light {
    font-family: "Taviraj", serif;
    font-weight: 300;
    font-style: normal;
}

.taviraj-regular {
    font-family: "Taviraj", serif;
    font-weight: 400;
    font-style: normal;
}

.taviraj-medium {
    font-family: "Taviraj", serif;
    font-weight: 500;
    font-style: normal;
}

.taviraj-semibold {
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-style: normal;
}

.taviraj-bold {
    font-family: "Taviraj", serif;
    font-weight: 700;
    font-style: normal;
}

.taviraj-extrabold {
    font-family: "Taviraj", serif;
    font-weight: 800;
    font-style: normal;
}

.taviraj-black {
    font-family: "Taviraj", serif;
    font-weight: 900;
    font-style: normal;
}

.taviraj-thin-italic {
    font-family: "Taviraj", serif;
    font-weight: 100;
    font-style: italic;
}

.taviraj-extralight-italic {
    font-family: "Taviraj", serif;
    font-weight: 200;
    font-style: italic;
}

.taviraj-light-italic {
    font-family: "Taviraj", serif;
    font-weight: 300;
    font-style: italic;
}

.taviraj-regular-italic {
    font-family: "Taviraj", serif;
    font-weight: 400;
    font-style: italic;
}

.taviraj-medium-italic {
    font-family: "Taviraj", serif;
    font-weight: 500;
    font-style: italic;
}

.taviraj-semibold-italic {
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-style: italic;
}

.taviraj-bold-italic {
    font-family: "Taviraj", serif;
    font-weight: 700;
    font-style: italic;
}

.taviraj-extrabold-italic {
    font-family: "Taviraj", serif;
    font-weight: 800;
    font-style: italic;
}

.taviraj-black-italic {
    font-family: "Taviraj", serif;
    font-weight: 900;
    font-style: italic;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.roboto-medium {
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'InaiMathi';
    src: url('../fonts/InaiMathi.eot');
    src: url('../fonts/InaiMathi.eot?#iefix') format('embedded-opentype'),
        url('../fonts/InaiMathi.woff2') format('woff2'),
        url('../fonts/InaiMathi.woff') format('woff'),
        url('../fonts/InaiMathi.ttf') format('truetype'),
        url('../fonts/InaiMathi.svg#InaiMathi') format('svg');
}

header,
footer {
    color: #fff;
}

main {
    padding: 1rem;
}

.gap-40 {
    gap: 40px;
}

.p-80 {
    padding: 80px;
}

.mt-40 {
    margin-top: 40px;
}

.rounded-sm {
    border-radius: 0.5rem !important;
}

.link-green {
    color: #48705B;
}

.btn {
    padding: 9px 16px !important; /* bootstrap-override */
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.014px;
    color: #1D4641;
    cursor: pointer;
    border: 0;
    white-space: nowrap;
}

.btn-primary-yellow {
    background: #FF6;
    color: #805F01;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.252px;
}

.btn.status-text {
    padding: 3px 8px !important;
}

.btn-primary-dark {
    background: #1D4641;
    color: #D4E9CA !important;
}
.btn-primary-dark:focus-visible {
    outline: 2px solid #1D4641;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(29, 70, 65, 0.25);
}

.btn-primary-white {
    background: #fff;
    color: #1D4641;
    border: 1px solid #fff;
    transition: background-color 0.15s ease;
}

/* White buttons keep their colour on hover — just a flat 20% black
   overlay (#fff blended with 20% black), not a colour swap. */
.btn-primary-white:hover,
.btn-primary-white:focus-visible {
    background: #CCCCCC;
    color: #1D4641;
}

.btn-white {
    background: #FFF;
    transition: background-color 0.15s ease;
}

.btn-white:hover,
.btn-white:focus-visible {
    background: #CCCCCC;
}

.btn-secondary,
.btn-secondary:focus {
    background: #D4E9CA;
    color: #1D4641 !important;
    box-shadow: none;
    border-color: #1D4641 !important;
    transition: background-color 0.15s ease;
}

/* Design system Secondary hover/pressed: 15% black overlay over the
   filled background (Figma RSPc8inQZhjy552LyPsspx, node 9024-4679) */
.btn-secondary:hover,
.btn-secondary:focus-visible {
    background: #B4C6AC;
    color: #1D4641 !important;
    border-color: #1D4641 !important;
}

.btn-secondary-dark {
    border: 1px solid #1D4641;
    color: #1D4641;
    background-color: transparent;
    transition: background-color 0.15s ease;
}

.btn-secondary-dark:hover,
.btn-secondary-dark:focus-visible {
    background-color: rgba(29, 70, 65, 0.15);
    color: #1D4641;
}

.btn-secondary-dark2 {
    border: 1px solid #48705B;
    color: #48705B;
    background-color: transparent;
    transition: background-color 0.15s ease;
}

.btn-secondary-dark2:hover,
.btn-secondary-dark2:focus-visible {
    background-color: rgba(72, 112, 91, 0.15);
    color: #48705B;
}

.btn-secondary-white,
.btn-secondary-white:focus {
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    transition: background-color 0.15s ease;
}

.btn-secondary-white:hover,
.btn-secondary-white:focus-visible {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.btns-gap {
    gap: 1rem;
}

.btn-rounded-small {
    padding: 3px 8px;
}

.br-small {
    border-radius: 8px;
}

.br-medium {
    border-radius: 24px;
}

.br-5xl {
    border-radius: 56px;
}

.br-200 {
    border-radius: 200px;
}

/* Full-bleed callout cards — 24px radius on mobile only */
@media (max-width: 767px) {
    .br-5xl {
        border-radius: 24px;
    }
}

.fs-12 {
    font-size: 12px;
}

.fs-14 {
    font-size: 14px;
}

.fs-20 {
    font-size: 20px;
}

.fw-medium {
    font-weight: 500;
}

.lh-20 {
    line-height: 20px;
}

.text-center {
    text-align: center;
}

.small-text {
    font-size: 12px;
}

.text-inaimathi {
    font-family: 'InaiMathi', sans-serif;
}

.primary-dark-bg {
    background: #1D4641;
}

.neutral-highlight-bg {
    background: #F3F7FA;
}

.neutral-text-bg {
    background: #180026;
}

.secondary-bg {
    background: #D4E9CA;
}

.muted-green {
    background: #48705B;
}

.bg-gray {
    background-color: #F1F4F4;
}

.text-muted {
    color: #807388;
}

.text-white {
    color: #ffffff;
}

.text-primary-dark {
    color: #1D4641 !important;
}

.text-secodary {
    color: rgba(255, 255, 255, 0.7);
}

.text-brand-green {
    color: #D4E9CA;
}

.text-dark {
    color: #463351;
}

.text-neutral {
    color: #180026;
}

.child-div {
    width: 50%;
    padding: 0 1rem;
}

.w-320 {
    width: 320px;
}

.page-heading {
    margin: 40px 0;
    color: #1D4641;
    font-size: 65px;
    font-style: normal;
    font-weight: 600;
    line-height: 84px;
    letter-spacing: -0.052px;
}

.border-light {
    border-color: #C0BAC4 !important;
}

.border-dark {
    border-color: #48705B !important;
}

section {
    padding: 56px 0;
}

.section-heading {
    font-size: 55px;
    line-height: 64px;
    letter-spacing: -0.99px;
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 1.5rem;
}

.section-heading2 {
    color: #180026;
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -0.864px;
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-style: normal;
    margin-bottom: 24px;
}

.section-heading3 {
    font-size: 34px;
    line-height: 41px;
    letter-spacing: -0.612px;
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-style: normal;
}

.headline2 {
    color: #D4E9CA;
    font-size: 44px;
    font-style: normal;
    font-weight: 600;
    line-height: 58px;
    letter-spacing: -0.035px;
}

header .navbar-brand {
    padding: 0.5rem 0;
}

.white-bg-header header {
    background-color: #fff;
}

/* About page: header turns white after hero scrolls off (toggled by main.js) */
header.header-scrolled-white {
    background-color: #fff;
}

/* Error/404 page action buttons — stacked full-width edge-to-edge on mobile,
   inline auto-width side-by-side on tablet and up. */
.err-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 420px;
}
.err-actions .btn {
    width: 100%;
}
@media (min-width: 576px) {
    .err-actions {
        flex-direction: row;
        justify-content: center;
        width: auto;
        max-width: none;
    }
    .err-actions .btn {
        width: auto;
    }
}

.gray-bg-header header,
.gray-bg-header header .navbar {
    background-color: #F3F7FA !important;
}

.navbar .nav-link {
    color: #D4E9CA;
    font-family: Poppins;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.288px;
    position: relative;
}

.navbar .dropdown-menu {
    padding: 8px;
    border-radius: 16px;
}

.navbar .dropdown-menu li {
    margin-bottom: 4px;
}

.navbar .dropdown-menu li:last-child {
    margin-bottom: 0;
}

.navbar .dropdown-menu .dropdown-item {
    color: #1D4641;
    border-radius: 8px;
}

.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:active,
.navbar .dropdown-menu .dropdown-item.active {
    background-color: #E8EEF4;
    color: #1D4641;
}

/* Remove Bootstrap default arrow */
.custom-dropdown-toggle::after {
    display: none;
}

.dropdown-chevron {
    transition: transform 0.3s ease;
}

.navbar .dropdown-icon .bi {
    -webkit-text-stroke: 0.6px currentColor;
}

.dropdown-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

.icon-open,
.icon-close {
    width: 16px;
    height: 16px;
}

/* Show plus by default */
.icon-close {
    display: none;
}

/* When dropdown is open */
.dropdown-toggle.show .icon-open {
    display: none;
}

.dropdown-toggle.show .icon-close {
    display: inline-block;
}

.secondary-bg .navbar .nav-link {
    color: #1D4641;
}

/* main.js injects the header partial into these empty containers, which
   otherwise shrink-wrap to the header's own height. A sticky element can
   only stick within its containing block's box, so a same-height wrapper
   leaves it nowhere to go — display:contents removes the wrapper's own
   box so the header sticks relative to <body> (the full page) instead. */
#header,
#primaryDarkHeader {
    display: contents;
}

/* ===== Wise-style nav with hover mega-menus ===== */
header.static-header,
header.primary-dark-bg {
    position: sticky;
    top: 0;
    z-index: 1050;
    transition: background-color 0.2s ease, transform 0.3s ease;
}

/* Wise-style auto-hide: slides the header off-screen while scrolling down
   the page, and back in while scrolling up. Toggled by main.js. */
header.static-header.header-hidden,
header.primary-dark-bg.header-hidden {
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    header.static-header,
    header.primary-dark-bg {
        transition: background-color 0.2s ease;
    }
}

/* While a mega-menu is open, pin the header to the top of the viewport so
   it (and the panel + blurred scrim) stay on screen while the page scrolls
   behind — Wise pattern. main.js adds body.mega-open and a matching
   body padding-top to replace the header's flow space (no layout jump). */
body.mega-open header.static-header,
body.mega-open header.primary-dark-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* White header variant while a mega-menu is open (Wise pattern).
   Targets the header AND its navbar so page-specific tints
   (.gw-header, .gray-bg-header, secondary-bg, primary-dark-bg) all
   flatten to white and read as one surface with the panel.
   Open state is class-driven (.mega-panel.is-open, toggled by JS). */
header:has(.mega-panel.is-open),
header:has(.mega-panel.is-open) .navbar {
    background-color: #ffffff !important;
}

header.primary-dark-bg:has(.mega-panel.is-open) .navbar .nav-link:not(.btn) {
    color: #1D4641;
}

/* When any mega panel is open the header flips white, so the active
   trigger's pill uses the white-header Way Finding pill regardless of the
   page's base header theme (Figma 2542-22210). */
header:has(.mega-panel.is-open) .nav-mega.is-mega-open > .nav-link.gnav-link {
    background-color: rgba(212, 233, 202, 0.4);
    color: #1D4641;
}

/* Get started CTA keeps its 1px outline in all header states (Figma spec) */
.navbar .gnav .nav-link.btn-secondary {
    border: 1px solid #1D4641;
}

.gnav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.navbar .nav-link.gnav-link {
    padding: 12px 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Background-highlight pill on hover / while the mega-menu is open.
   Light-theme Way Finding pill state (Figma RSPc8inQZhjy552LyPsspx,
   node 9369-3290: Dark Theme=False, Type=Pill, State=True).
   .is-mega-open keeps the active trigger highlighted while the shared
   panel is open — even when the pointer is over the panel, not the trigger. */
.navbar .nav-mega.is-mega-open > .nav-link.gnav-link,
.navbar .nav-link.gnav-link:hover,
.navbar .nav-link.gnav-link:focus-visible {
    background-color: rgba(212, 233, 202, 0.4);
    color: #1D4641;
}

.primary-dark-bg .navbar .nav-mega.is-mega-open > .nav-link.gnav-link,
.primary-dark-bg .navbar .nav-link.gnav-link:hover,
.primary-dark-bg .navbar .nav-link.gnav-link:focus-visible {
    /* Dark-theme Way Finding pill state (Support/Forest) — solid, not
       translucent, for accessible contrast against the dark green header */
    background-color: #232E26;
    color: #D4E9CA;
}

/* Light-green header (#D4E9CA): a light-green pill would be invisible on
   the matching green background, so the design uses a translucent Forest
   overlay instead (Figma 2542-21974: Header on Gaia/Secondary). */
.secondary-bg .navbar .nav-mega.is-mega-open > .nav-link.gnav-link,
.secondary-bg .navbar .nav-link.gnav-link:hover,
.secondary-bg .navbar .nav-link.gnav-link:focus-visible {
    background-color: rgba(35, 46, 38, 0.15);
    color: #1D4641;
}

/* Pages that tint the same .secondary-bg header light-gray/white
   (.gray-bg-header #F3F7FA, .white-bg-header #FFFFFF) revert to the
   light-green Way Finding pill (Figma 2542-22166 / 2542-22210). */
.gray-bg-header .navbar .nav-mega.is-mega-open > .nav-link.gnav-link,
.gray-bg-header .navbar .nav-link.gnav-link:hover,
.gray-bg-header .navbar .nav-link.gnav-link:focus-visible,
.white-bg-header .navbar .nav-mega.is-mega-open > .nav-link.gnav-link,
.white-bg-header .navbar .nav-link.gnav-link:hover,
.white-bg-header .navbar .nav-link.gnav-link:focus-visible {
    background-color: rgba(212, 233, 202, 0.4);
    color: #1D4641;
}

.nav-mega {
    position: static;
    display: flex;
    align-items: center;
}

/* Chevron on the two mega triggers — masked so it inherits the
   nav-link colour on every theme; swaps down -> up when open */
.gnav-chevron {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../icons/ic_chevron_down.svg') no-repeat center / 16px 16px;
            mask: url('../icons/ic_chevron_down.svg') no-repeat center / 16px 16px;
    transition: transform 0.2s ease;
}

.nav-mega.is-mega-open > .gnav-link .gnav-chevron {
    -webkit-mask-image: url('../icons/ic_chevron_up.svg');
            mask-image: url('../icons/ic_chevron_up.svg');
}

/* ===== Mega-menu panel (Wise-style shared panel) =====
   A single persistent panel holds both menus' content. When you switch
   between the two triggers the panel STAYS open: the active content
   cross-fades (.mega-content opacity) and the panel height resizes
   smoothly (.mega-viewport height, animated by initMegaMenu in main.js
   to the measured height of the active content). No collapse-then-reopen. */
.mega-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #ffffff;
    box-shadow: 0 24px 24px -16px rgba(29, 70, 65, 0.16);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1050;
    transition: opacity 0.18s ease, visibility 0s linear 0.34s;
}

.mega-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1051;
    transition: opacity 0.18s ease, visibility 0s linear 0s;
}

/* Height-animating clip window — JS sets an explicit px height equal to
   the active content, and the transition tweens the resize. */
.mega-viewport {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Both menus' content are stacked (absolute) inside the viewport; only the
   active one is faded in. This is what produces the content cross-fade. */
.mega-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}

.mega-content.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.24s ease 0.06s, visibility 0s linear 0s;
}

/* Dim overlay (Wise pattern) — anchored to header bottom */
.mega-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1000;
}

.mega-panel.is-open ~ .mega-overlay {
    opacity: 1;
    visibility: visible;
}

/* Aligns the panel content to the same container as the header/logo. */
.mega-inner {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 64px;
}

/* Left product card. The whole .mega-content block crossfades (opacity via
   .is-active), so the card fades in with it — no separate opacity toggle. */
.mega-card {
    width: 400px;
    flex-shrink: 0;
    border: 0.5px solid #C0BAC4;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.mega-card:hover {
    border-color: #48705B;
    box-shadow: 0 8px 24px rgba(29, 70, 65, 0.16);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .mega-card {
        transition: none;
    }
}

.mega-card__img {
    height: 240px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mega-card__body {
    padding: 24px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mega-card__title {
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.504px;
    color: #2F2F2F;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mega-card__desc {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.288px;
    color: #807388;
    margin: 0;
}

/* Right-arrow icon (uploaded ic_arrow_forward.svg) — masked so it
   inherits the surrounding text colour via currentColor */
.icon-arrow-forward {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../icons/ic_arrow_forward.svg') no-repeat center / 20px 20px;
            mask: url('../icons/ic_arrow_forward.svg') no-repeat center / 20px 20px;
}

.mega-card__cta {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #48705B;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: gap 0.15s ease;
}

.mega-card__cta:hover {
    gap: 12px;
    color: #1D4641;
}

.mega-badge {
    background: #FFFF66;
    color: #805F01;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Right link area */
.mega-links {
    flex: 1 1 0;
    min-width: 0;
}

.mega-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.mega-section {
    flex: 1 1 0;
    min-width: 0;
}

.mega-subheader {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 3.84px;
    text-transform: uppercase;
    color: #807388;
    margin: 0 0 8px;
    padding-top: 16px;
}

/* Mobile offcanvas submenu: extra breathing room above each group label
   ("Funerals Live", "More for families", ...) — desktop mega-panel keeps
   its own 16px. */
@media (max-width: 991.98px) {
    .mnav-body .mega-subheader {
        padding-top: 32px;
    }
}

/* Package card (Essential/Professional/Organisation) — the whole card is
   the link, so the hover highlight covers title + description + price
   (Figma 2521-21708: Neutral/Highlight #F3F7FA, offset -8px, radius 8px) */
.mega-col {
    display: block;
    padding: 16px 8px;
    margin: 0 -8px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.mega-col:hover,
.mega-col:focus-visible {
    background-color: #F3F7FA;
}

.mega-col-title {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.324px;
    color: #48705B;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    transition: color 0.15s ease, gap 0.15s ease;
}

.mega-col:hover .mega-col-title,
.mega-col:focus-visible .mega-col-title {
    color: #1D4641;
    gap: 12px;
}

/* Standalone "Pricing" links (not inside a package card) keep their own
   self-contained pill hover */
.mega-pricing-link {
    display: inline-flex;
    margin: 0 -8px 8px;
    padding: 4px 8px;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, gap 0.15s ease;
}

.mega-pricing-link:hover,
.mega-pricing-link:focus-visible {
    background-color: #E8EEF4;
    color: #1D4641;
    gap: 12px;
}

.mega-col-desc {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.252px;
    color: #807388;
    margin: 0;
}

.mega-col-desc strong {
    font-weight: 600;
}

.mega-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
}

.mega-link {
    display: block;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.288px;
    color: #180026;
    padding: 8px 8px;
    margin: -4px -8px;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.mega-link:hover,
.mega-link:focus-visible {
    background: #E8EEF4;
    color: #1D4641;
}

.mega-sep {
    height: 0.5px;
    background: #C0BAC4;
    margin: 16px 0;
    border: 0;
}

/* ===== Mobile nav (Figma 2515:23559) =====
   Two-part design of the mobile offcanvas menu:
   1. Open/close animation — slides in from the right (Bootstrap's native
      .offcanvas-end transform), and starts BELOW the header rather than
      covering it. The panel is a DOM child of <header>, which owns a
      stacking context (z-index 1050), so a full-height panel paints over
      the header's own logo from the inside — that's what used to make the
      logo appear to shrink, since the panel carried a second, smaller copy
      of it. Offsetting by the measured header height keeps the real header
      — and one single logo element — visible and untouched the whole time.
   2. In-page navigation — tapping "For funeral providers" / "For families"
      pushes a full-screen submenu over the root list (Wise-style drill-in),
      with a back arrow returning to the root. The submenus reuse the exact
      same .mega-* markup as the desktop hover mega-menu (mega-card,
      mega-subheader, mega-col, mega-stack, mega-link…), just restacked into
      a single column for mobile instead of hidden/simplified. */
/* Shared by the Gaia and Funerals Live headers (both use #offcanvasNavbar). */
#offcanvasNavbar {
    width: 100%;
    max-width: 100%;
    border-left: 0;
    background: #fff;
    transition: transform 0.3s ease;
}
/* Header offset is Gaia-only: --gaia-header-h is published by initMobileNav,
   which no-ops on the Funerals Live header (it has no .mnav-panel drill-in),
   so that menu keeps its existing full-height behaviour. */
.mnav-offcanvas {
    top: var(--gaia-header-h, 80px);
    height: calc(100% - var(--gaia-header-h, 80px));
}
@media (prefers-reduced-motion: reduce) {
    #offcanvasNavbar { transition: none; }
}

.mnav-panels {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mnav-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    transform: translateX(100%);
    pointer-events: none;
    transition: transform 0.3s ease;
}
.mnav-panel[data-panel="root"] {
    position: relative;
    flex: 1 1 auto;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 1;
}
.mnav-panel.is-active {
    transform: translateX(0);
    pointer-events: auto;
    z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
    .mnav-panel { transition: none; }
}

.mnav-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 24px;
    flex: 0 0 auto;
}
/* Submenu panels only — the root panel has no topbar, because the real
   header (logo + close) stays visible above the panel. */
.mnav-back {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #1D4641;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.mnav-back:hover { background-color: #E8EEF4; }
.mnav-back::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
}
.mnav-back::before {
    -webkit-mask: url('../icons/ic_arrow_back.svg') no-repeat center / 24px 24px;
            mask: url('../icons/ic_arrow_back.svg') no-repeat center / 24px 24px;
}
.mnav-subtitle {
    flex: 1 1 auto;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #180026;
}

.mnav-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 24px;
}

.mnav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: none;
    border: 0;
    border-bottom: 1px solid #F1F4F4;
    padding: 20px 8px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #1D4641;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.mnav-row:last-child { border-bottom: 0; }
.mnav-row .mnav-chevron {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transform: rotate(-90deg);
    background-color: currentColor;
    -webkit-mask: url('../icons/ic_chevron_down.svg') no-repeat center / 24px 24px;
            mask: url('../icons/ic_chevron_down.svg') no-repeat center / 24px 24px;
}

.mnav-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px 24px;
    margin-top: auto;
}
.mnav-footer .btn {
    padding: 9px 16px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Tertiary / Log in — Figma 2938-105465 */
.mnav-footer .btn-secondary-dark {
    background: #FFFFFF;
    border: 1px solid #1D4641;
    color: #1D4641;
}
/* Primary / Get started — Figma 2938-105466 */
.mnav-footer .btn-primary-dark {
    background: #1D4641;
    color: #D4E9CA !important; /* bootstrap-override */
    border: none;
}

/* Reuse the desktop mega-menu content inside the mobile submenu panels,
   restacked into a single column. */
.mnav-body .mega-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 0 32px;
}
.mnav-body .mega-card { width: 100%; }
.mnav-body .mega-row { flex-direction: column; gap: 0; }
.mnav-body .mega-sep { margin: 8px 0; }

.navbar .nav-link.active:after {
    content: '';
    position: absolute;
    width: 12px;
    height: 2px;
    border-radius: 24px;
    background: #D4E9CA;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.navbar-light-bg .nav-link.active:after,
.secondary-bg .navbar .nav-link::after
header.static-header .navbar .nav-link::after {
    background: #1D4641;
}

.navbar .navbar-toggler {
    padding: 0;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.static-header {
    padding: 0.5rem 0;
}

header.static-header .navbar .navbar-brand {
    display: flex;
    align-items: center;
    width: 64px;
    height: 64px;
    padding: 0;
}

.offcanvas-title {
    display: flex;
    align-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
}

.offcanvas-title img {
    width: 100%;
}

.offcanvas-header .btn-close {
    box-shadow: none;
}

.offcanvas-body .dropdown-menu {
    border: 0;
    padding-left: 0;
}

/* ===== Podium-style mobile menu ===== */
@media (max-width: 991px) {
    /* Full-width panel */
    .offcanvas.offcanvas-end {
        width: 100% !important;
        border-left: none;
    }

    /* Header: logo left, X right, with bottom border */
    .offcanvas-header {
        padding: 16px 24px;
        border-bottom: 1px solid #E8EEF4;
    }

    /* Body: scroll when content overflows */
    .offcanvas-body {
        padding: 8px 0 0;
        display: flex;
        flex-direction: column;
    }

    /* Nav list: no gap, let items control their own spacing */
    .offcanvas-body .navbar-nav {
        gap: 0 !important;
        flex-grow: 1;
    }

    /* Each nav item */
    .offcanvas-body .navbar-nav > .nav-item {
        border-bottom: 1px solid #F1F4F4;
    }

    /* Top-level links: large touch target */
    .offcanvas-body .navbar-nav > .nav-item > .nav-link {
        padding: 18px 24px;
        font-family: "Poppins", sans-serif;
        font-size: 16px;
        font-weight: 500;
        color: #180026;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* Dropdown toggle chevron: rotate on open */
    .offcanvas-body .custom-dropdown-toggle .dropdown-icon {
        transition: transform 0.25s ease;
    }
    .offcanvas-body .custom-dropdown-toggle[aria-expanded="true"] .dropdown-icon {
        transform: rotate(180deg);
    }
    .offcanvas-body .dropdown-chevron {
        font-size: 14px;
        color: #807388;
    }

    /* Sub-menu: smooth expand with left accent border */
    .offcanvas-body .dropdown-menu {
        background: #FAFBFC;
        border-radius: 0;
        margin: 0;
        padding: 4px 0 12px;
        border-left: 3px solid #D4E9CA;
        margin-left: 24px;
        margin-right: 24px;
    }

    .offcanvas-body .dropdown-menu .dropdown-item {
        padding: 12px 20px;
        font-family: "Poppins", sans-serif;
        font-size: 15px;
        font-weight: 400;
        color: #463351;
        white-space: normal;
    }
    .offcanvas-body .dropdown-menu .dropdown-item:hover,
    .offcanvas-body .dropdown-menu .dropdown-item:focus-visible {
        background: #E8EEF4;
        color: #1D4641;
    }

    /* CTA buttons at bottom: full-width, stacked */
    .offcanvas-body .navbar-nav > .nav-item:has(> .btn) {
        border-bottom: none;
        padding: 0 24px;
    }
    .offcanvas-body .navbar-nav > .nav-item > .nav-link.btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        margin-top: 8px;
        padding: 14px 24px;
        font-size: 16px;
    }
}

header.static-header .navbar .nav-link {
    color: #1D4641;
}

header img {
    width: 64px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler img {
    width: 30px;
}

.primary-dark-bg .navbar-toggler img {
    filter: brightness(0) saturate(100%) invert(84%) sepia(25%) saturate(205%) hue-rotate(58deg) brightness(111%) contrast(83%);
}

/* Hamburger that morphs into a cross in place — same 30px box either way, so
   the icon never changes size or position when the menu opens. Bars are
   drawn in currentColor, which is why the dark header just overrides the
   colour instead of filtering an SVG. Only transform/opacity animate. */
.navbar-toggler .gaia-burger {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    color: #1D4641;
}

/* Geometry mirrors the ic_menu.svg these bars replaced, so the closed icon is
   unchanged: an 18x18 icon drawn at 30px (x1.667) — bars 22.5px wide, 2.5px
   thick, centred on y 7.5 / 15 / 22.5. */
.navbar-toggler .gaia-burger span {
    position: absolute;
    left: 3.75px;
    right: 3.75px;
    height: 2.5px;
    border-radius: 100px;
    background: currentColor;
    transition: transform 0.3s ease, opacity 0.2s ease;
}

.navbar-toggler .gaia-burger span:nth-child(1) { top: 6.25px; }
.navbar-toggler .gaia-burger span:nth-child(2) { top: 13.75px; }
.navbar-toggler .gaia-burger span:nth-child(3) { top: 21.25px; }

/* Outer bars slide to the middle (y 15) and cross; the middle bar fades. */
.navbar-toggler.is-open .gaia-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.navbar-toggler.is-open .gaia-burger span:nth-child(2) { opacity: 0; }
.navbar-toggler.is-open .gaia-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.primary-dark-bg .navbar-toggler .gaia-burger { color: #D4E9CA; }

/* Mobile menu open: the header bar (logo + close icon) always turns white
   behind the offcanvas panel, regardless of the page's header variant
   (primary-dark-bg, gray-bg-header, secondary-bg, ...). Desktop nav colours
   are untouched — scoped to the offcanvas breakpoint only. */
@media (max-width: 991.98px) {
    body.mnav-open header,
    body.mnav-open header .navbar {
        background-color: #fff !important; /* bootstrap-override */
    }
    body.mnav-open header .navbar-toggler .gaia-burger {
        color: #1D4641;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-toggler .gaia-burger span { transition: none; }
}

/* Close button — 40px circular target (Figma 2544-22504 R.Icon) */
header.wailist-header .close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #D4E9CA;
    transition: background 0.15s ease;
}

header.wailist-header .close-btn:hover {
    background: #C3DDB4;
}

header.wailist-header .close-btn img {
    width: 24px;
}

.banner-section {
    min-height: 550px;
}

/* Tighten the hero top on desktop (−80px): drop the 56px section padding and
   pull the content up the remaining 24px. Header/hero share the dark-green bg,
   so the small overlap is seamless. */
@media (min-width: 992px) {
    .banner-section {
        padding-top: 0;
        margin-top: -24px;
    }
}

.banner-section .headline2 {
    margin: 2rem 0;
}

.banner-flex {
    gap: 64px;
}

.title {
    color: #D4E9CA;
    margin: 0;
    font-size: 55px;
    font-style: normal;
    line-height: 64px;
    margin-bottom: 24px;
    letter-spacing: -0.99px;
}

.title-description {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.324px;
}

.app-icons {
    gap: 1rem;
}

header.static-header .navbar {
    padding: 1rem 0;
}

header.wailist-header .navbar {
    padding: 1rem 0;
}

/* Custom Accordion */
.accordion-button::after {
    background-image: url('../icons/ic_add.svg');
    transition: transform 0.2s;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('../icons/ic_minus.svg');
}

.faqs-accordion .accordion-button,
.faqs-accordion .accordion-item {
    background-color: transparent;
}

.faqs-accordion .accordion-item {
    border-color: #C0BAC4;
}

.accordion-flush .accordion-item:last-child {
    border-bottom: 1px solid #C0BAC4;
}

.faqs-accordion .accordion-button {
    padding: 24px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1D4641;
}

.faqs-accordion .accordion-button:focus {
    box-shadow: none;
}

.faqs-accordion .accordion-button:not(.collapsed) {
    color: #1D4641;
    box-shadow: none;
    padding-bottom: 0;
}

.faqs-accordion .accordion-body {
    padding: 1.5rem 0;
}

.faqs-accordion .accordion-body > *:last-child {
    margin-bottom: 0;
}

.faqs-accordion h2 {
    margin-bottom: 0 !important;
}

/* FAQ mobile padding — 16px on both sides across all pages
   (heading + accordion so "Still have questions?" aligns) */
@media (max-width: 767px) {
    .faqs-accordion,
    .pricing-faq-accordion {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* "Still have questions?" heading column — same inset as the accordion */
    .faqs-accordion-heading,
    .om-faq-heading {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Mobile content padding — 24px on each side across product pages.
   Applied at body level so every section's .container gets the indent. */
@media (max-width: 767px) {
    .mobile-pad-24 .container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* App */
.what-death-is-not img {
    max-width: 632px;
}

.what-death-is-not .d-flex {
    gap: 64px;
}

.what-death-is-not .headline1 {
    font-size: 4rem;
}

.what-death-is-not .child-div {
    padding: 0;
}

.what-death-is-not ul li:before {
    background-image: url('../icons/ic_clear_fill.svg') !important;
}

.what-we-do ul li,
ul.ic_checkmark li {
    list-style-type: none;
    position: relative;
    margin-bottom: 1rem;
}

.what-we-do ul li:before,
ul.ic_checkmark li:before {
    position: absolute;
    left: -35px;
    top: 2px;
    width: 20px;
    height: 20px;
    background-image: url('../icons/ic_checkmark.svg');
    background-size: 100%;
    display: inline-block;
    content: "";
}

.what-we-do img {
    width: 100%;
    max-width: 630px;
}

.our-mission .content-div {
    border-radius: 56px;
    background: #D4E9CA;
    max-width: 1720px;
    width: 100%;
    margin: auto;
    padding: 120px 180px;
}

.our-mission .content-div h1 {
    margin: 48px 0 24px;
}

.our-mission .content-div p {
    color: #1D4641;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    margin: 0;
}

.empowering-global-change .primary-dark-bg {
    padding: 80px;
}

.empowering-global-change .headline1 {
    color: #85F199;
    font-size: 65px;
    margin: 0 !important;
}

.about-us-gaia-noun .content-div {
    background: #180026;
    width: 100%;
    margin: auto;
    padding: 80px;
}

.about-us-gaia-noun .content-div p {
    font-size: 20px;
    line-height: 28px;
}

.about-us-gaia-noun h2.text-secodary,
.about-us-gaia-noun p.para1.text-secodary {
    color: #D4E9CA;
}

.about-us-gaia-noun p.text-secodary:not(.para1) {
    color: #FFFFFF;
}

/* Home Page */
/* .hero-section {
    background-image: url('../images/home/img_hero_devices.webp');
    background-repeat: no-repeat;
    background-position: right;
    min-height: 720px;
    background-size: contain;
    display: flex;
    align-items: center;
} */

.hero-section {
    position: relative;
    /* background-color: #1c4a44; */
    /* your banner color */
    overflow: hidden;
    min-height: 720px;
    display: flex;
    align-items: center;
}

.hero-image {
    position: absolute;
    right: -300px;
    /* slight overflow to reach extreme right */
    top: 50%;
    transform: translateY(-50%);
    width: 900px;
    /* adjust as per your image */
    height: 720px;
    /* adjust */
    /* adjust based on your design */
    background: url('../images/home/img_hero_devices_desktop.webp') no-repeat right center;
    background-size: contain;
    pointer-events: none;
}

.we-exist .header-sec {
    max-width: 832px;
    margin: auto;
    margin-bottom: 40px;
}

/* CVP section text — 24px left/right inset on mobile only */
@media (max-width: 767px) {
    .we-exist .header-sec p,
    .we-exist .col-md-4 p {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Content-block checklist text (green ic_checkmark / red what-death-is-not
   lists) plus any accompanying button — 24px left/right inset on mobile
   only. Scoped to the checklist's own text column so it never touches
   pricing cards or cross-sell callout tiles (those use different wrapper
   classes, e.g. .gv-pricing-card, .gw-storing-callout).
   .col-lg-6 sits in a Bootstrap row whose negative margin cancels the
   container's own padding, so its padding must equal the full 24px target.
   The other two wrappers aren't in a row — the container's 12px already
   shows through — so they only need 12px more to reach 24px total. */
@media (max-width: 767px) {
    .col-lg-6:has(> ul.ic_checkmark) {
        padding-left: 24px;
        padding-right: 24px;
    }
    .mx-auto.mx-900:has(> ul.ic_checkmark),
    .what-we-do .child-div:has(> ul) {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* Gaia CRM */
.gaia-organised-services .cus-card {
    border-radius: 48px;
    padding: 24px 32px;
    width: 408px;
}

.gaia-organised-services .cus-card p {
    color: #180026;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -0.576px;
}

.why-choose-us .cus-card p {
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    color: #463351;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.324px;
}

.why-choose-us img {
    width: 224px;
    margin: auto;
}

.gaia-organised-services .cus-card2 {
    padding: 40px 32px;
    border-radius: 48px;
    color: #180026;
    text-align: center;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px;
    letter-spacing: -0.648px;
}

.mx-480 {
    max-width: 480px;
}

.mx-680 {
    max-width: 680px;
}

.mx-600 {
    max-width: 600px;
}

.mx-1024 {
    max-width: 1024px;
}

.mx-900 {
    max-width: 900px;
}

/* Funerals Live */
.client-testimonals {
    padding: 80px 0;
}

.client-testimonals p.desc {
    color: #fff;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.504px;
    margin-bottom: 2rem;
}

.our-packages img {
    margin-bottom: 24px;
}

.our-packages h3 {
    font-size: 30px;
    font-style: normal;
    line-height: 38px;
    letter-spacing: -0.024px;
    margin-bottom: 8px;
}

.our-packages p {
    margin-bottom: 40px;
}

/* "Meaningful ways to remember them" / "We've partnered with" / "Our
   packages" tiles — mobile only: 24px edge padding for text+button
   (image included, since it shares the same box), 24px gap between the
   description and its button, 40px gap between tiles. The plain
   (card-less) tiles get the padding on their column directly; the
   funerals-live tiles are wrapped in a .cus-card with its own padding,
   so :not(:has(.cus-card)) keeps this rule from double-applying there. */
@media (max-width: 767px) {
    .our-packages .col-md-4:not(:has(.cus-card)) {
        padding-left: 24px;
        padding-right: 24px;
    }
    .our-packages .cus-card {
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 24px !important;
    }
    .our-packages .row:not(.gap-4) {
        --bs-gutter-y: 40px;
    }
    .our-packages .row.gap-4 {
        gap: 40px !important;
    }
    .our-packages p {
        margin-bottom: 24px;
    }
}

/* Privacy Policy */
.privacy-policy .title {
    margin-top: 88px;
}

.privacy-policy .heading {
    margin-top: 1rem;
    color: #48705B;
    font-size: 34px;
    font-style: normal;
    font-weight: 600;
    line-height: 41px;
    letter-spacing: -0.612px;
    font-family: "Taviraj", serif;
    margin-bottom: 1rem;
}

.privacy-policy ol ol {
    list-style-type: none;
    padding-left: 0;
}

.privacy-policy ol ol li,
.privacy-policy ol ul li,
.privacy-policy p {
    margin-bottom: 1.5rem;
}

.privacy-policy ol ul li {
    list-style-type: none !important;
    position: relative;
    padding-left: 10px;
}

.privacy-policy ol ul {
    padding-left: 18px;
}

.privacy-policy .sub-heading {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.018px;
}

.privacy-policy ul li::before {
    position: absolute;
    left: -22px;
    top: 4px;
    width: 18px;
    height: 18px;
    background-image: url('../icons/ic_oval.svg');
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
}

/* About us */
.about-us-banner {
    background-color: #D4E9CA;
    min-height: 75vh;
    padding-top: 0;
    /* background-color: #d2e3c8; */
    background-image: url("../images/about-us/img_about_pattern.webp");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.about-us-banner .aboutus-banner-illustration {
    position: absolute;
    width: 100%;
    bottom: 0;
}

.about-us-banner .child-div {
    max-width: 720px;
    margin: auto;
    text-align: center;
}

.about-us-banner h1 {
    color: #1D4641;
    padding-top: 100px;
}

.about-us-banner p {
    color: #180026;
}

.letter-from-founder .d-flex {
    gap: 128px;
}

.letter-from-founder .child-div {
    width: 60%;
}

.letter-from-founder .child-div img {
    margin-top: 24px;
    margin-bottom: 8px;
}

.letter-from-founder .image-section {
    max-width: 568px;
    text-align: right;
    width: 40%;
}

.letter-from-founder .image-section img {
    width: 100%;
}

.what-we-value .neutral-highlight-bg {
    padding: 80px 48px;
}

.what-we-value h3 {
    font-size: 20px;
    color: #180026;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.our-team h3 {
    font-size: 30px;
}

.our-team .team-child-div {
    width: 320px;
}

.our-team .image-details {
    gap: 1rem;
}

.our-team .image-details h2,
.our-team .image-details p {
    margin: 0;
}

.our-team .image-details p {
    font-size: 20px;
}

.our-team .image-details img {
    margin: auto;
}

/* Team card name -> role gap is 8px too tall on mobile: h3's own 8px
   Bootstrap margin-bottom stacks on top of the 16px flex gap above. */
@media (max-width: 767px) {
    .our-team .image-details h3 {
        margin-bottom: 0;
    }
}

.about-us-gaia-noun .content-div p.para1 {
    font-size: 24px;
}

/* Join Waitlist Page */
.join-waitlist-page .form-container {
    max-width: 480px;
    margin: 0 auto 22px auto;
    background: #fff;
    padding: 2rem 1.5rem;
    border-radius: 16px;
    border: 1px solid var(--Greyscale-100, #DFE1E7);
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.06);
}

.join-waitlist-page .form-header-section {
    text-align: center;
    margin-bottom: 40px;
}

.join-waitlist-page .form-header-section .form-title {
    color: #1D4641;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.504px;
    margin-bottom: 10px;
}

.join-waitlist-page .form-header-section .form-subtitle {
    color: #807388;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.288px;
}

.join-waitlist-page .form-group {
    position: relative;
    margin-bottom: 25px;
}

.join-waitlist-page .form-group input,
.join-waitlist-page .form-group textarea {
    width: 100%;
    padding: 14px 14px 14px 40px;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    border: 2px solid #3b2b4a;
    border-radius: 12px;
    outline: none;
    background: transparent;
}

.join-waitlist-page .form-text-area textarea {
    padding-left: 10px;
}

.join-waitlist-page .form-group textarea {
    resize: none;
    height: 100px;
}

.join-waitlist-page .form-group label {
    position: absolute;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    padding: 0 6px;
    transition: 0.2s ease all;
    pointer-events: none;
    color: var(--Neutral-Muted, #807388);
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.288px;
}

.join-waitlist-page .form-text-area label {
    left: 10px;
    top: 24px;
}

.join-waitlist-page .form-group input:focus+label,
.join-waitlist-page .form-group input:not(:placeholder-shown)+label,
.join-waitlist-page .form-group textarea:focus+label,
.join-waitlist-page .form-group textarea:not(:placeholder-shown)+label {
    top: 0px;
    left: 16px;
    font-size: 12px;
    color: #180026;
}

.join-waitlist-page .form-group .icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #999;
}

.join-waitlist-page small {
    color: red;
    display: none;
    font-size: 12px;
    margin-top: 5px;
    position: absolute;
    left: 5px;
    bottom: -20px;
    font-family: "Poppins", sans-serif;
}

.join-waitlist-page .asterick-sym {
    color: red;
}

.join-waitlist-page .btn-submit {
    background: #1D4641;
    border: none;
    padding: 12px 16px;
    width: 100%;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    color: #D4E9CA;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.324px;
    margin-top: 10px;
    margin-bottom: 16px;

}

.join-waitlist-page .btn-submit:disabled {
    background: #1D4641;
    opacity: 0.5;
    cursor: not-allowed;
}

.join-waitlist-page .form-footer {
    color: #180026;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.216px;
}

.join-waitlist-page .form-footer a {
    color: #48705B;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.216px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.join-waitlist-body {
    background-color: #D4E9CA;
}

/* ===== Auth pages (signup / login / reset password) ===== */
/* Password field: leave room for the show/hide toggle on the right */
.join-waitlist-page .form-group input[type="password"],
.book-demo-page .form-group input[type="password"] {
    padding-right: 52px;
}

.join-waitlist-page .password-toggle,
.book-demo-page .password-toggle {
    position: absolute;
    right: 16px;
    top: 24px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.join-waitlist-page .password-toggle img,
.book-demo-page .password-toggle img {
    width: 24px;
    height: 24px;
    display: block;
}

/* Right-aligned "Forgot password?" link under the password field */
.join-waitlist-page .forgot-link-row {
    display: flex;
    justify-content: flex-end;
    margin: -14px 0 20px;
}

.join-waitlist-page .forgot-link-row a,
.join-waitlist-page .form-alt a {
    color: #48705B;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.252px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.join-waitlist-page .forgot-link-row a:hover,
.join-waitlist-page .form-alt a:hover {
    color: #1D4641;
}

/* "Already have an account? Log in" style row */
.join-waitlist-page .form-alt {
    text-align: center;
    color: #180026;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.252px;
    margin-bottom: 16px;
}

/* ===== Split auth layout (book-a-demo / login / signup) — Figma 2547-24785 =====
   Full-height image on the left, form pane on the right (desktop);
   form-only on mobile. */
.auth-split {
    display: flex;
    min-height: 100vh;
    position: relative;
}

/* Top header band — logo/back on the left, close on the right, both
   vertically centred within an 80px-tall bar spanning the full width. */
.auth-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    z-index: 5;
    pointer-events: none;
}

.auth-header > * {
    pointer-events: auto;
}

.auth-visual {
    flex: 1 1 50%;
    min-width: 0;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-logo {
    display: inline-flex;
}

.auth-logo img {
    width: 64px;
    height: 64px;
    display: block;
}

.auth-pane {
    flex: 1 1 50%;
    min-width: 0;
    position: relative;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 80px;
}

/* Circular header buttons (close / back) — Figma 2547-31552 / 2547-31902 */
.auth-close,
.auth-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: #D4E9CA;
    transition: background 0.15s ease;
}

.auth-close:hover,
.auth-back:hover {
    background: #C3DEB4;
}

.auth-close img,
.auth-back img {
    width: 24px;
    height: 24px;
}

.auth-content {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.auth-pane .auth-help {
    position: absolute;
    bottom: 24px;
    right: 24px;
    align-items: center;
}

/* OR divider */
.auth-or {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
}

.auth-or::before,
.auth-or::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: #C0BAC4;
}

.auth-or span {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.216px;
    color: #C0BAC4;
}

/* Social login buttons */
.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #000;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.324px;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-bottom: 12px;
}

.btn-social:last-child {
    margin-bottom: 0;
}

.btn-social:hover {
    background: #F3F7FA;
}

.btn-social img {
    width: 24px;
    height: 24px;
}

/* Terms / remember-me checkbox rows */
.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 4px 0 20px;
}

.auth-check input[type="checkbox"] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #1D4641;
    cursor: pointer;
}

.auth-check label {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.252px;
    color: #180026;
    cursor: pointer;
}

.auth-check label a {
    color: #48705B;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Remember me + forgot password on one row */
.auth-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 20px;
}

.auth-remember-row .auth-check {
    margin: 0;
    align-items: center;
}

.auth-remember-row .forgot-link {
    color: #48705B;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.252px;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}

.auth-remember-row .forgot-link:hover {
    color: #1D4641;
}

/* Password strength requirements — shown while the password field is active */
.pw-requirements {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #C0BAC4;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(29, 70, 65, 0.12);
}

.join-waitlist-page .form-group:focus-within .pw-requirements,
.book-demo-page .form-group:focus-within .pw-requirements {
    display: block;
}

.pw-requirements .pw-req-title {
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    color: #180026;
    margin: 0 0 8px;
}

.pw-requirements ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pw-requirements li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.216px;
    color: #807388;
}

.pw-requirements li::before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='%23C0BAC4' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.pw-requirements li.met {
    color: #1D4641;
}

.pw-requirements li.met::before {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2300C48C'/%3E%3Cpath d='M4.5 8L7 10.5L11.5 5.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (max-width: 991px) {
    .auth-visual {
        display: none;
    }
    .auth-header {
        padding: 0 20px;
    }
    .auth-pane {
        padding: 96px 20px 80px;
        justify-content: flex-start;
    }
}

/* ===== Book a demo (dedicated layout) — Figma 2547-24785 =====
   In-flow header bar, rounded contained image, and a form pane — distinct
   from the overlay/full-bleed .auth-split pattern used by login/sign-up. */
.book-demo-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.book-demo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 80px;
    flex: 0 0 auto;
}

.book-demo-body {
    flex: 1 1 0%;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: 24px;
    padding: 0 24px 24px;
    overflow: hidden;
}

.book-demo-image {
    flex: 1 1 50%;
    min-width: 0;
    border-radius: 32px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.book-demo-pane {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    padding: 24px 80px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.book-demo-content {
    width: 100%;
    max-width: 440px;
    margin: auto;
}

/* Floats over the bottom-right of the image instead of reserving its own
   row, so the image can extend down to the fold with just 24px to spare. */
.book-demo-footer {
    position: absolute;
    right: 48px;
    bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 2;
}

.book-demo-footer > * {
    pointer-events: auto;
}

.book-demo-modal-title {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.book-demo-page .form-header-section {
    text-align: center;
    margin-bottom: 40px;
}

.book-demo-page .form-header-section .form-title {
    color: #180026;
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.504px;
    margin-bottom: 10px;
}

.book-demo-page .form-header-section .form-subtitle {
    color: #807388;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.288px;
}

.book-demo-page .form-group {
    position: relative;
    margin-bottom: 24px;
}

.book-demo-page .form-group input,
.book-demo-page .form-group textarea {
    width: 100%;
    padding: 14px 14px 14px 40px;
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    border: 1px solid #180026;
    border-radius: 12px;
    outline: none;
    background: transparent;
}

.book-demo-page .form-text-area textarea {
    padding-left: 10px;
}

.book-demo-page .form-group textarea {
    resize: none;
    height: 100px;
}

.book-demo-page .form-group label {
    position: absolute;
    left: 35px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    padding: 0 6px;
    transition: 0.2s ease all;
    pointer-events: none;
    color: #807388;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.288px;
}

.book-demo-page .form-text-area label {
    left: 10px;
    top: 24px;
}

.book-demo-page .form-group input:focus+label,
.book-demo-page .form-group input:not(:placeholder-shown)+label,
.book-demo-page .form-group textarea:focus+label,
.book-demo-page .form-group textarea:not(:placeholder-shown)+label {
    top: 0px;
    left: 16px;
    font-size: 12px;
    color: #180026;
}

.book-demo-page .form-group .icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #999;
}

.book-demo-page small {
    color: red;
    display: none;
    font-size: 12px;
    margin-top: 5px;
    position: absolute;
    left: 5px;
    bottom: -20px;
    font-family: "Poppins", sans-serif;
}

.book-demo-page .asterick-sym {
    color: red;
}

.book-demo-page .btn-submit {
    background: #1D4641;
    border: none;
    padding: 12px 16px;
    width: 100%;
    border-radius: 10px;
    color: #D4E9CA;
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.324px;
    margin-top: 10px;
    margin-bottom: 16px;
    cursor: pointer;
}

.book-demo-page .btn-submit:disabled {
    background: #1D4641;
    opacity: 0.5;
    cursor: not-allowed;
}

.book-demo-page .get-help-btn {
    border-radius: 8px;
    border: 1px solid #48705B;
    background: #FFF;
    padding: 4px 8px;
    color: #48705B;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.252px;
    transition: background-color 0.15s ease;
}

.book-demo-page .get-help-btn:hover,
.book-demo-page .get-help-btn:focus-visible {
    background: #CCCCCC;
    color: #48705B;
}

.book-demo-page .form-alt {
    text-align: center;
    color: #180026;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.252px;
    margin-bottom: 16px;
}

.book-demo-page .form-alt a {
    color: #48705B;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.252px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.book-demo-page .form-alt a:hover {
    color: #1D4641;
}

@media (max-width: 991px) {
    /* Split-image layout only makes sense with the image; on mobile it's
       hidden, so drop back to normal page scroll instead of the fixed-height
       + internal-scroll pane used on desktop. */
    .book-demo-shell {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
    .book-demo-body {
        overflow: visible;
    }
    .book-demo-image {
        display: none;
    }
    .book-demo-header {
        padding: 8px 24px;
    }
    .book-demo-body {
        padding: 0 24px 24px;
    }
    .book-demo-pane {
        padding: 24px 0;
        overflow-y: visible;
    }
    .book-demo-content {
        max-width: none;
        margin: 0;
    }
    .book-demo-footer {
        position: static;
        justify-content: space-between;
        padding: 16px 24px;
    }
    .book-demo-page .form-header-section .form-title {
        font-family: "Taviraj", serif;
        font-weight: 700;
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -0.36px;
    }
    .book-demo-page .btn-submit {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: -0.288px;
    }
}

.join-waitlist-page .get-help-btn {
    border-radius: 8px;
    border: 1px solid #48705B;
    background: #FFF;
    padding: 4px 8px;
    color: #48705B;
    font-size: 14px;
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: -0.252px;
    transition: background-color 0.15s ease;
}

.join-waitlist-page .get-help-btn:hover,
.join-waitlist-page .get-help-btn:focus-visible {
    background: #CCCCCC;
    color: #48705B;
}

.join-waitlist-page .join-waitlist-footer {
    background-color: transparent;
    color: #180026;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.011px;
    margin-top: 0;
    padding: 24px;
}

.about-us-footer {
    margin-top: 0;
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1060;
}

#successModal .modal-content {
    max-width: 344px;
    width: 100%;
}

.modal.custom-modal {
    padding-top: 0;
}

.custom-modal .modal-content {
    padding: 0;
}

.modal h3 {
    margin-top: 0;
    font-size: 20px;
    margin-bottom: 1rem;
    color: #180026;
    line-height: 28px;
    letter-spacing: -0.36px;
}

/* Modal Content */
.modal-content {
    background-color: #FFF;
    margin: auto;
    padding: 2rem;
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.20);
}

.modal-content p {
    font-size: 14px;
    color: #180026;
    line-height: 20px;
    letter-spacing: -0.252px;
}

.modal-footer {
    padding: 0;
    padding-top: 24px;
    border: 0;
}

.modal-footer a,
.modal-footer button {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.288px;
    margin: 0;
}

/* ===== Digital audit modal (consultancy.html) ===== */
.audit-modal-dialog {
    max-width: 840px;
}

.audit-modal-content {
    position: relative;
    padding: 24px 24px 16px;
    border-radius: 12px;
}

/* Field labels rest as grey placeholders and float up on focus/fill
   (Figma 2521-54290: resting label = Neutral/Muted #807388). Scoped to
   the audit modal so other m3 forms keep their own styling. */
.audit-form .m3-label {
    color: #807388;
}

.audit-form .m3-required {
    color: #FF4E68;
}

.audit-form .m3-textarea {
    min-height: 104px;
}

.audit-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.audit-modal-close:hover {
    opacity: 0.7;
}

.audit-modal-title {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.36px;
    color: #180026;
    margin-bottom: 32px;
}

.audit-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 0;
    margin-bottom: 24px;
}

.audit-form-row .m3-field {
    margin-bottom: 0;
}

.audit-form > .m3-field {
    margin-bottom: 0;
}

.audit-form-error {
    display: none;
    color: #B3261E;
    font-size: 13px;
    margin: 0 0 12px;
}

.audit-form-error.is-visible {
    display: block;
}

.audit-form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 32px;
}

.audit-submit-btn {
    background: #1D4641;
    color: #D4E9CA;
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.288px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.audit-submit-btn:hover {
    background: #163530;
}

.audit-submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.audit-modal-success {
    text-align: center;
    padding: 24px 0;
}

.audit-modal-success p {
    color: #463351;
    margin: 0;
}

@media (max-width: 575px) {
    .audit-form-row {
        grid-template-columns: 1fr;
        row-gap: 32px;
    }
    .audit-modal-content {
        padding: 16px;
    }
}

/* ===== Google-style (Material 3) floating-label text field =====
   Shared site-wide text field component. Markup pattern:
   <div class="m3-field">
       <input class="m3-input" placeholder=" ">
       <label class="m3-label">Label text</label>
   </div>
   The `placeholder=" "` (a single space) is required — it drives the
   `:placeholder-shown` selector used to detect the empty state. */
.m3-field {
    position: relative;
    margin-bottom: 24px;
}

.m3-input {
    width: 100%;
    /* 16px top + 24px line-box + 16px bottom = 56px total, so the typed
       value and the resting label sit visually centred (same rhythm as
       the Material 3 filled-text-field spec). Font-size 16px is paired
       with line-height 24px so the text box height matches the label.
       min-height keeps enhanced <select> triggers at 56px even before a
       value is chosen — their child .gselect-trigger-text has no text
       yet and would otherwise collapse the button to just its padding. */
    height: auto;
    min-height: 56px;
    padding: 16px;
    line-height: 24px;
    border: 1px solid #180026;
    border-radius: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    color: #180026;
    background: transparent;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    appearance: none;
}

.m3-input:focus {
    border-color: #1D4641;
    /* Draw the second pixel of the "focus ring" via an inset shadow so
       the box's physical dimensions never change — border-width: 2px was
       nudging every focused/filled field 1-2px taller than its resting
       neighbours (visible on the enhanced-select tiles). */
    box-shadow: inset 0 0 0 1px #1D4641;
}

.m3-input:focus ~ .m3-label,
input.m3-input:not(:placeholder-shown) ~ .m3-label,
textarea.m3-input:not(:placeholder-shown) ~ .m3-label,
.m3-input[type="date"] ~ .m3-label,
.m3-input--date:focus ~ .m3-label,
input.m3-input--date:not(:placeholder-shown) ~ .m3-label,
.gselect-filled .m3-label {
    top: -8px;
    font-size: 12px;
    line-height: 16px;
    color: #180026;
    padding: 0 6px;
}

.m3-input:focus ~ .m3-label {
    color: #1D4641;
}

.m3-label {
    position: absolute;
    left: 12px;
    /* 16px top + 24px line-box = vertically centred inside the 56px input,
       matching the padding on .m3-input above so resting-label and typed
       value sit on the exact same baseline. */
    top: 16px;
    color: #807388;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    line-height: 24px;
    transition: all 0.15s ease;
    pointer-events: none;
    background: #fff;
    padding: 0;
}

.m3-textarea {
    /* block, so the inline descender space below the textarea doesn't add ~6px
       inside .m3-field and push the next field to 30px instead of 24px */
    display: block;
    height: auto;
    /* 16px above + text + 64px below inside the container — the extra
       space below leaves visual room for a couple of lines of typing
       before the user has to drag-resize. */
    min-height: 140px;
    padding: 16px 16px 64px;
    resize: vertical;
    background-color: #fff;
}

select.m3-input {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23180026' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* Only floats for a raw, not-yet-enhanced <select> (a select always shows
   some value, unlike a text input) — once enhanceM3Selects() takes over,
   .gselect-filled governs the label so it centres when nothing's chosen. */
.m3-field:not(.gselect-enhanced) select.m3-input ~ .m3-label {
    top: -8px;
    font-size: 12px;
    line-height: 16px;
    color: #180026;
    padding: 0 6px;
}

/* Custom-styled select popup — native <select> option lists are rendered
   by the OS and can't be restyled, so m3 selects are progressively
   enhanced (see assets/js/main.js) into this listbox instead, matching
   the same dropdown pattern used site-wide
   (Figma SryxvxM6MwQ41yeVoH7xYz, node 2519-40378). */
.gselect-trigger {
    position: relative;
    text-align: left;
    cursor: pointer;
}
/* Element+class beats a page's own local .m3-input rule (same specificity,
   but pages that redefine .m3-input inline load after this stylesheet and
   would otherwise win the padding-right cascade regardless of this rule's
   position here). */
button.gselect-trigger {
    padding-right: 44px;
}
.gselect-trigger-text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gselect-trigger-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-color: #1D4641;
    -webkit-mask: url('../icons/ic_chevron_down.svg') no-repeat center / 16px 16px;
            mask: url('../icons/ic_chevron_down.svg') no-repeat center / 16px 16px;
    pointer-events: none;
}

.gselect-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 0.5px solid #C0BAC4;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 24px rgba(29, 70, 65, 0.16);
    z-index: 20;
    max-height: 260px;
    overflow-y: auto;
    display: none;
    margin: 0;
    list-style: none;
}

.gselect-menu.is-open {
    display: block;
}

.gselect-option {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.252px;
    color: #463351;
    border-radius: 12px;
    padding: 9px 12px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    outline: none;
}

.gselect-option:hover,
.gselect-option:focus-visible,
.gselect-option.is-active {
    background-color: #DBE7EF;
    color: #180026;
}

/* Single-select radio variant (Figma 3573-38393) — same listbox, options
   prefixed with a radio dot instead of relying on background highlight
   alone, for single-choice pickers like the will builder's gift recipient
   field. */
.gselect-menu.gselect-radio .gselect-option {
    position: relative;
    padding-left: 44px;
}
.gselect-menu.gselect-radio .gselect-option::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #C0BAC4;
    background: #fff;
    box-sizing: border-box;
}
.gselect-menu.gselect-radio .gselect-option.is-active::before {
    border-color: #1D4641;
}
.gselect-menu.gselect-radio .gselect-option.is-active::after {
    content: '';
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1D4641;
}

.m3-input::placeholder {
    color: transparent;
}

.m3-hint {
    font-size: 12px;
    color: #6B6B7B;
    margin-top: 4px;
    padding-left: 16px;
}

.m3-required {
    color: #B3261E;
}

.m3-input.error {
    border-color: #B3261E;
}

.m3-input.error ~ .m3-label {
    color: #B3261E;
}

/* ── Gaia date field (shared) ──────────────────────────────────────────
   Native <input type="date"> can't be restyled or repositioned by the
   browser, so every date field on the site is a masked DD/MM/YYYY text
   input plus this branded calendar dropdown. Driven by
   assets/js/gaia-datepicker.js — do not hand-roll another one. */
/* The masked date field starts empty: hide the DD/MM/YYYY placeholder so
   the label can sit at its resting position like any other m3-input.
   The placeholder appears once the user focuses the field, at which
   point the label floats up (see the :focus selector group above). */
.m3-input--date::placeholder {
    color: transparent;
}
.m3-input--date:focus::placeholder {
    color: #463351;
    opacity: 0.7;
}

/* Leave room for the calendar button so long dates never run under it. */
.m3-input--date {
    padding-right: 48px;
}

.wz-date-icon-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: #1D4641;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.wz-date-icon-btn:hover { background: #F3F7FA; }
.wz-date-icon-btn:focus-visible { outline: 2px solid #1D4641; outline-offset: 2px; }
.wz-date-icon-btn:active { background: #D4E9CA; }

.wz-datepicker {
    position: fixed;
    background: #fff;
    border: 0.5px solid #D4E9CA;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(29, 70, 65, 0.16);
    padding: 16px;
    width: 296px;
    z-index: 1060;
}

.wz-datepicker-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.wz-datepicker-select {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid #D4E9CA;
    border-radius: 8px;
    padding: 6px 28px 6px 12px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #180026;
    background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23180026' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.wz-datepicker-select:focus-visible { outline: 2px solid #1D4641; outline-offset: 1px; }

.wz-datepicker-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.wz-datepicker-dow-row span {
    text-align: center;
    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #463351;
}

.wz-datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.wz-datepicker-day {
    border: none;
    background: transparent;
    padding: 7px 0;
    border-radius: 8px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    color: #180026;
    cursor: pointer;
    transition: background-color 0.15s, opacity 0.15s;
}

.wz-datepicker-day:hover:not(:disabled) { background: #F3F7FA; }
.wz-datepicker-day:focus-visible { outline: 2px solid #1D4641; outline-offset: 1px; }
.wz-datepicker-day.is-muted { color: #463351; cursor: default; }
.wz-datepicker-day.is-disabled { color: #C0BAC4; cursor: not-allowed; }
.wz-datepicker-day.is-disabled:hover { background: transparent; }
.wz-datepicker-day.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1px #1D4641; }
.wz-datepicker-day.is-selected { background: #1D4641; color: #D4E9CA; font-weight: 600; }
.wz-datepicker-day.is-selected:hover { opacity: 0.92; }

.m3-error-msg {
    font-size: 12px;
    color: #B3261E;
    margin-top: 4px;
    padding-left: 16px;
    display: none;
}

.m3-field.has-error .m3-error-msg {
    display: block;
}

/* When the inline error message is visible, the field's border and label
   flip to error red too — so the failing field is obvious at a glance,
   not just by reading the message underneath. Covers both the wizard
   pattern (validator toggles .has-error on the .m3-field) and any
   ad-hoc .m3-input.error usage on standalone forms. */
.m3-field.has-error .m3-input,
.m3-field.has-error .m3-input:focus,
.m3-field.has-error .gselect-trigger {
    border-color: #B3261E;
}

.m3-field.has-error .m3-label {
    color: #B3261E;
}

.close {
    margin-left: 1rem;
}

/* The Close Button */
.close:hover,
.close:focus {
    text-decoration: none;
    cursor: pointer;
}

.btn-link {
    background: transparent;
    padding: 0;
    border: 0;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-style: normal;
    line-height: 26px;
    letter-spacing: -0.013px;
    text-decoration: none;
}

.demo-box {
    padding: 64px 80px;
    border-radius: 32px;
    border: 2px solid #1D4641;
    background: #FFF;
    margin-top: -45px;
}

.demo-box .btn {
    border: 1px solid #1D4641;
}

/* Eulogy Writer */
.eulogy-steps {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.eulogy-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.step-number {
    min-width: 55px;
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    color: #180026;
}

.step-content {
    flex: 1;
    position: relative;
}

.step-title {
    font-family: "Poppins", sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    color: #180026;
    margin-top: 0;
    margin-bottom: 14px;
}

.step-text {
    font-size: 17px;
    line-height: 1.5;
    max-width: 540px;
    margin: 0;
}

.eulogy-step.active .step-content::before,
.eulogy-step.active .step-content::after {
    display: none;
}

.honouring-life .child1 {
    max-width: 400px;
    width: 100%;
}

.honouring-life .child2 {
    max-width: 817px;
    width: 100%;
}

.testimonial-row {
    display: flex;
    gap: 24px;
    align-items: stretch;
}

.testimonial-card {
    background: #f3f3f3;
    border-radius: 28px;
    padding: 28px;
    color: #4d4560;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
}

@media (max-width: 991px) {
    .testimonial-row {
        gap: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        scroll-padding-right: 16px;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 16px 4px;
    }
    .testimonial-card {
        flex: 0 0 327px;
        width: 327px;
        scroll-snap-align: start;
    }
}

.testimonial-text {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.user { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; text-align: left; }

.user img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.user-name { font-weight: 600; margin: 0; }
.user-role { font-size: 14px; color: #7d6f8f; margin: 0; }

/* Write a eulogy for: bento tile row */
.eulogy-tile-row {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    margin: 0 -12px;
    padding-left: 16px;
    padding-right: 16px;
}

.eulogy-tile {
    position: relative;
    width: 315px;
    height: 392px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    scroll-snap-align: start;
}

.eulogy-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eulogy-tile-label {
    position: relative;
    margin: 0;
    padding: 24px;
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -0.432px;
    text-align: left;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

.eulogy-tile-label--dark { color: #000; }
.eulogy-tile-label--light { color: #fff; }

@media (min-width: 992px) {
    .eulogy-tile-row {
        overflow-x: visible;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        display: grid;
        grid-template-columns: repeat(3, 315px);
        justify-content: center;
        gap: 8px;
    }
    .eulogy-tile {
        width: auto;
    }
}

footer {
    padding: 80px 0;
    font-size: 12px;
    font-style: normal;
    line-height: 26px;
    letter-spacing: -0.013px;
    margin-top: 100px;
    color: #FFF;
}

footer .column-1 {
    max-width: 545px;
    width: 100%;
}

footer .column-2 {
    max-width: 65px;
    width: 100%;
    text-align: center;
}

footer .bottom-column-1 {
    max-width: 975px;
    width: 100%;
    line-height: 16px;
    letter-spacing: -.18%;
}

footer .sub-heading {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -1.8%;
}

footer .list-unstyled {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 0;
}

.footer-menu-list {
    min-width: 192px;
}

/* Footer link groups — 2-column grid on mobile (Figma 2515:24232) */
@media (max-width: 767px) {
    footer .list-unstyled {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 24px;
        row-gap: 24px;
    }
}

footer .list-unstyled a {
    padding: 0;
    color: #D4E9CA;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -1.8%;
}

footer a:hover, footer a:focus {
    color: rgba(212, 233, 202, 0.6) !important;
}

/* ===== Pricing Cards ===== */
.pricing-card {
    background: #FFFFFF;
    border: 1px solid #D4E9CA;
    border-radius: 48px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-card--setup {
    background: #D4E9CA;
    border-color: #D4E9CA;
}

.pricing-card--featured {
    background: #1D4641;
    border-color: #1D4641;
}

.pricing-card--featured p,
.pricing-card--featured .pricing-card__price,
.pricing-card--featured .pricing-card__name,
.pricing-card--featured .pricing-card__price-note {
    color: #D4E9CA !important;
}

.pricing-card--featured .product-checklist li {
    color: #D4E9CA;
}

.pricing-card--featured .product-checklist li::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23D4E9CA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.pricing-card--featured .pricing-card__divider {
    border-color: #48705B;
}

.pricing-card__name {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.36px;
    color: #1D4641;
    margin-bottom: 8px;
}

.pricing-card__price {
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: -0.864px;
    color: #1D4641;
    margin-bottom: 4px;
}

.pricing-card__price sup {
    font-size: 1.25rem;
    vertical-align: super;
}

.pricing-card__price-note {
    font-size: 14px;
    color: #463351;
    margin-bottom: 0;
    letter-spacing: -0.252px;
}

.pricing-card__divider {
    border: 0;
    border-top: 1px solid #D4E9CA;
    margin: 24px 0;
}

/* Product Cards (Eulogy Writer / Passing Moments) */
.br-4xl {
    border-radius: 48px;
}
@media (max-width: 767px) {
    .br-4xl {
        border-radius: 24px;
    }
}

.product-card {
    padding: 40px 32px;
    height: 100%;
    box-sizing: border-box;
}

.product-card .section-heading3 { margin-bottom: 0; }
.product-card .product-card-body { margin-top: 24px; margin-bottom: 0; }
.product-card .product-checklist { margin-top: 24px; }
.product-card-cta { padding-top: 40px; }

.eulogy-card {
    background: #d9efde;
}

.passing-card, .bg-off-white {
    background: #f7f6f3;
}

.product-label {
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: -0.36px;
    color: #1d4641;
}

.text-passing-moments {
    color: #8b104e !important;
}

.product-card-img {
    overflow: hidden;
    margin: 8px 0;
}

.product-card-img img {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.product-card-body {
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.36px;
    color: #180026;
}

.product-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #180026;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.324px;
}

.product-checklist li + li {
    margin-top: 16px;
}

.product-checklist li::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%231d4641' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

@media (min-width: 2000px) {
    .hero-image {
        right: -250px;
        width: 710px;
    }
}

@media (max-width: 1999px) {
    .hero-image {
        right: -160px;
    }
}

@media (max-width: 1600px) {
    .hero-image {
        right: -60px;
    }
}

@media (min-width: 1401px) {
    .consultancy-banner img {
        max-width: inherit !important;
    }
}

@media (max-width: 1199px) {
    /* .hero-section {
        max-height: 480px;
        min-height: auto;
    } */

    .hero-image {
        height: 520px;
    }

    .title {
        font-size: 38px;
        line-height: 41px;
    }
}

@media (min-width: 1025px) {
    .consultancy-banner {
        min-height: 672px;
    }

    .consultancy-banner img {
        max-width: 600px;
    }
}


@media (max-width: 1024px) {
    .headline1 {
        font-size: 3.063rem;
        line-height: 58px;
    }

    .how-to-invest {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .our-mission .content-div {
        padding: 60px 80px;
    }

    .what-we-do {
        padding: 60px 0;
    }

    .consultancy-banner {
        min-height: 530px;
    }

    .consultancy-banner img {
       max-width: 500px;
    }
}

@media (min-width: 992px) {
    .banner-section .content-section {
        width: 50%;
    }

    .navbar-expand-lg .navbar-toggler {
        display: none;
    }

    .navbar-expand-lg .navbar-nav:not(.gnav) {
        flex-direction: row;
        gap: 48px;
    }

    .navbar .dropdown-menu {
        width: max-content !important;
        min-width: auto;
    }

    .navbar .dropdown-menu a.dropdown-item {
        display: inline-block;
        width: 100%;
        padding: 8px 16px !important;
    }
}

@media (max-width: 991px) {

    .navbar .offcanvas-body .navbar-nav .nav-item {
        justify-content: center;
        text-align: left;
    }

    .navbar .nav-link.active:after {
        background: #1D4641;
    }

    .navbar .nav-link {
        color: #1D4641;
    }

    .headline1 {
        font-size: 2.875rem;
    }

    .section-heading {
        font-size: 34px;
        line-height: 41px;
    }

    .section-heading2 {
        font-size: 28px;
        line-height: 34px;
    }

    .hero-image {
        position: static;
        transform: scale(1.7);
        transform-origin: top center;
        margin: 2rem auto 0;
        width: 80%;
        background-size: contain;
    }

    .banner-section {
        padding-top: 60px;
    }

    .about-us-banner {
        padding: 0px;
        min-height: 75vh;
    }

    .about-us-banner h1 {
        padding-top: 0;
    }

    .child-div {
        width: 100%;
    }

    .banner-flex {
        flex-direction: column;
    }

    .how-to-invest .vectors {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .how-to-invest .vectors .vectors-child {
        width: 48%;
    }

    .banner-flex .image-section img {
        margin-top: 56px;
    }

    .what-we-do .d-flex {
        flex-direction: column;
        gap: 3rem;
    }

    .what-we-do .first-child {
        order: 2;
    }

    .what-we-do .second-child {
        order: 1;
    }

    .what-death-is-not .child-one {
        order: 2;
    }

    .letter-from-founder .d-flex {
        gap: 0;
        flex-direction: column;
    }

    .letter-from-founder .child-div {
        width: 100%;
        min-width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }

    .letter-from-founder .image-section {
        max-width: 100%;
        text-align: center;
        width: 100%;
    }

    .what-we-value,
    .leadership-team {
        padding: 64px 1rem;
    }

    .what-we-value .content-div .d-flex,
    .leadership-team .parent-flex {
        flex-direction: column;
    }

    .what-we-value .neutral-highlight-bg {
        width: calc(100% + 16px);
        margin-left: -8px;
        margin-right: -8px;
        padding: 56px 16px;
    }

    .what-we-value h3 {
        font-size: 22px;
    }

    .empowering-global-change .headline1 {
        line-height: 41px;
        font-size: 34px;
        letter-spacing: -0.612px;
    }

    .empowering-global-change img {
        width: 40px;
        margin: auto;
        margin-bottom: 40px;
    }

    .gaia-ai img {
        width: 120px;
    }

    .demo-box {
        padding: 32px 24px;
        text-align: center;
    }

    .demo-box .section-heading3 {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 24px;
    }

    .demo-box .btn {
        display: inline-block;
    }

    .hero-section {
        /* min-height: 1140px !important; */
        background-position: bottom right;
        background-size: contain;
        align-items: flex-start;
    }

    .home-page .secondary-bg {
        padding: 56px 24px;
    }    

    .consultancy-banner {
        min-height: 672px;
    }

    .consultancy-banner img {
       max-width: 500px;
    }
}

@media (min-width: 768px) {
    .w-md-auto {
        width: auto !important;
    }

    .navbar-expand-lg .navbar-collapse {
        flex-basis: auto;
    }

    .navbar-expand-lg .navbar-nav:not(.gnav) .nav-link {
        padding-left: 0;
        padding-right: 0;
    }

    .our-packages .btn {
        width: 135px;
    }

    .home-page .btn-find-out {
        width: fit-content;
    }
}

@media (max-width: 767px) {
    .title {
        font-size: 32px;
        line-height: 38px;
        letter-spacing: -0.026px;
    }

    /* "Find out more" (partner cards) and "About us" CTAs: edge-to-edge
       full-width buttons on mobile instead of a narrow auto-width pill */
    .our-packages .btn,
    .about-us-cta {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* "We're changing how we funeral" text + CTA — 24px edge inset */
    .about-us-copy {
        padding-left: 24px;
        padding-right: 24px;
    }

    .navbar .offcanvas {
        background-color: #fff;
    }

    header.static-header .navbar {
        padding: 1.5rem 0;
    }

    .page-heading {
        font-size: 45px;
        margin-top: 20px;
    }

    .headline1,
    .what-death-is-not .headline1 {
        font-size: 1.875rem;
        line-height: 38px;
    }

    .child-div {
        padding: 0;
    }

    .banner-section .content-section {
        min-width: 100%;
    }

    .hero-section {
        min-height: 70vh;
        height: auto;
        padding-bottom: 24px;
    }

    .hero-text,
    .hero-ctas {
        padding-left: 12px;
        padding-right: 12px;
    }

    .hero-image {
        background-image: url('../images/home/img_hero_devices_mobile.webp');
        /* The dedicated mobile image is already composed/cropped for this
           breakpoint — reset the 991px block's scale(1.7)/80%-width hack
           (built for the old desktop image) so it isn't over-zoomed. */
        transform: none;
        /* Bleed edge-to-edge (Figma 2515:23730 mobile): cancel the column's
           12px inset with a matching negative margin, and match the asset's
           own 750:824 aspect ratio so cover fills the box with no crop. */
        width: calc(100% + 24px);
        margin: 2rem -12px 0;
        height: auto;
        aspect-ratio: 750 / 824;
        background-size: cover;
        background-position: center;
    }

    .app-icons img {
        width: 135px;
    }

    .how-to-invest h2 {
        font-size: 30px;
    }

    .how-to-invest .vectors .vectors-child {
        width: 100%;
    }

    .our-mission .content-div,
    .about-us-gaia-noun .content-div {
        padding: 56px 24px;
        border-radius: 24px;
    }

    .empowering-global-change .content-div {
        flex-direction: column;
    }

    .empowering-global-change img {
        max-width: 40px;
        margin: auto;
    }

    .gaia-ai img {
        max-width: 120px;
        margin-right: auto;
    }

    .empowering-global-change .content-div .headline1 {
        order: 2;
    }

    .empowering-global-change .primary-dark-bg {
        padding: 56px 24px;
    }

    .empowering-global-change .d-flex {
        gap: 40px;
    }

    .home-page .secondary-bg img {
        margin: auto;
    }

    .about-us-banner {
        min-height: 598px;
    }

    .about-us-banner h1 {
        padding-top: 48px;
    }

    .about-us-banner .child-div {
        padding-left: 8px;
        padding-right: 8px;
    }

    .letter-from-founder {
        padding: 60px 0;
    }

    .btn-link {
        font-weight: 500;
    }

    .privacy-policy .heading {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -0.36px;
    }

    .consultancy-banner {
        min-height: 770px;
    }

    footer {
        font-weight: 400;
    }

    footer .copyright-flex {
        flex-direction: row;
        align-items: center;
    }

    .copyright-flex {
        width: 100%;
    }

    .join-waitlist-page footer .d-flex {
        flex-direction: row;
        gap: 8px !important;
    }
}

/* ===== Pricing v2 ===== */
.pricing-v2-section {
    padding: 80px 0;
}

.pricing-v2-bg-gray {
    background-color: #F1F4F4;
}

.pricing-v2-recommended-badge {
    background: #D4E9CA;
    color: #1D4641;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 20px;
    padding: 5px 14px;
    white-space: nowrap;
}

/* Inline + GST span inside .pricing-v2-price */
.pricing-v2-gst {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1D4641;
    margin-left: 6px;
}

.pricing-v2-card__billing {
    font-size: 14px;
    color: #6B6B7B;
    margin-top: 2px;
    margin-bottom: 16px;
}

.pricing-v2-bg-dark-purple {
    background-color: #160C2B;
}

.pricing-v2-hero-heading {
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-size: 56px;
    line-height: 1.1;
    letter-spacing: -1px;
    color: #1D4641;
    text-align: center;
    margin-bottom: 24px;
}

.pricing-v2-hero-body {
    font-size: 18px;
    line-height: 28px;
    color: #3B3B3B;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
}

.pricing-v2-section-heading {
    font-size: 40px;
}

.pricing-v2-section-subtext {
    color: #6B6B7B;
    font-size: 16px;
}

/* Segmented billing control (Canva-style) */
.billing-toggle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
}

.billing-segmented-control {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: #E8E0EE;
    border-radius: 100px;
    padding: 4px;
    gap: 2px;
}

/* Sliding "gel" thumb — overshoots slightly on both axes so it reads as
   a soft, elastic blob rather than a rigid instant swap */
.billing-seg-thumb {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: 0;
    background: #ffffff;
    border-radius: 100px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    pointer-events: none;
    transform-origin: center;
    transition:
        left 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.billing-seg-thumb.is-squishing {
    animation: billingThumbGel 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes billingThumbGel {
    0%   { transform: scaleX(1) scaleY(1); }
    35%  { transform: scaleX(1.14) scaleY(0.9); }
    65%  { transform: scaleX(0.94) scaleY(1.04); }
    100% { transform: scaleX(1) scaleY(1); }
}

.billing-seg-btn {
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
    border-radius: 100px;
    padding: 8px 20px;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #463351;
    cursor: pointer;
    transition: color 0.2s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.billing-seg-btn.is-active {
    color: #180026;
    font-weight: 600;
}

.billing-save-badge {
    font-size: 14px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 100px;
    background: #FFFF66;
    color: #805F01;
    white-space: nowrap;
}

.billing-save-badge.is-monthly {
    background: #D9D8DF;
    color: #180026;
}

/* Pricing tier cards */
.pricing-v2-card {
    background: #FFFFFF;
    border: 1.5px solid #C0BAC4;
    border-radius: 16px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-v2-card--featured {
    border-color: #3D6B55;
    border-width: 2px;
    box-shadow: 0 4px 24px rgba(61, 107, 85, 0.12);
}

.pricing-v2-card__title {
    font-size: 18px;
    font-weight: 700;
    color: #1D1033;
    margin-bottom: 4px;
    min-height: 26px;
}

/* The featured card's title row is taller (badge alongside the title),
   which otherwise pushes its price 9px lower than the other two cards.
   Add that same 9px here so all three price rows align. */
.pricing-v2-card:not(.pricing-v2-card--featured) .pricing-v2-card__title {
    margin-bottom: 13px;
}

.pricing-v2-card__subtitle {
    font-size: 14px;
    color: #6B6B7B;
    margin-bottom: 20px;
    line-height: 20px;
    min-height: 60px;
}

.pricing-v2-price {
    font-family: "Taviraj", serif;
    font-weight: 700;
    font-size: 52px;
    line-height: 1;
    color: #1D4641;
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: 4px;
}

.pricing-v2-price .cents {
    font-size: 24px;
    font-weight: 700;
}

.pricing-v2-price .currency {
    font-size: 18px;
    font-weight: 600;
    margin-left: 6px;
    color: #6B6B7B;
}

.pricing-v2-cta-primary {
    background-color: #1D4641;
    color: #D4E9CA;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    width: 100%;
    text-align: center;
    display: block;
    text-decoration: none;
    transition: background 0.2s;
}

.pricing-v2-cta-primary:hover {
    background-color: #163530;
    color: #D4E9CA;
}

.pricing-v2-cta-outline {
    background-color: transparent;
    color: #1D4641;
    border: 1.5px solid #1D4641;
    border-radius: 8px;
    padding: 11px 24px;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    text-align: center;
    display: block;
    text-decoration: none;
    transition: all 0.2s;
}

.pricing-v2-cta-outline:hover {
    background-color: #1D4641;
    color: #FFFFFF;
}

.pricing-v2-divider {
    border: 0;
    border-top: 1px solid #E8EEE9;
    margin: 16px 0 12px;
}

/* Green circle check list */
.pricing-green-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-green-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
    color: #3B3B3B;
    margin-bottom: 12px;
}

.pricing-green-check-list li::before {
    content: '';
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 0px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%234CAF72'/%3E%3Cpath d='M5.5 10L8.5 13L14.5 7' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* ===== Development package tiles (consultancy.html) =====
   Figma Gaia-Website-v2, node 2515-26839 (Pricing Tile). */
.pkg-tiles {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.pkg-tile {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #fff;
    border: 0.5px solid #C0BAC4;
    border-radius: 24px;
    padding: 24px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pkg-tile__label {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.324px;
    color: #180026;
    margin: 0;
}

.pkg-tile__desc {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.252px;
    color: #807388;
    margin: 0;
}

.pkg-tile__price {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    color: #1D4641;
}

.pkg-tile__from {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.216px;
    padding-bottom: 8px;
}

.pkg-tile__amount {
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 41px;
    letter-spacing: -0.612px;
}

.pkg-tile__cents {
    font-family: "Taviraj", serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.36px;
}

.pkg-tile__ctas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pkg-tile__ctas .btn {
    width: 100%;
}

.pkg-tile__list {
    list-style: none;
    padding: 4px 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pkg-tile__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 0;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.252px;
    color: #180026;
}

.pkg-tile__list li::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2300C48C'/%3E%3Cpath d='M4.5 8L7 10.5L11.5 5.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

@media (max-width: 767px) {
    .pkg-tiles {
        flex-direction: column;
    }
    .pkg-tile {
        width: 100%;
    }
}

/* AI Callout */
.pricing-callout-section {
    padding: 56px 0;
}

.pricing-callout-card {
    background-color: #48705B;
    border-radius: 56px;
    padding: 80px;
    display: flex;
    align-items: center;
    gap: 64px;
    margin: 0 auto;
}

.pricing-callout-card__img {
    width: 140px;
    height: 140px;
    border-radius: 20px;
    flex-shrink: 0;
    object-fit: cover;
}

.pricing-callout-card__heading {
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 1.15;
    color: #FFFFFF;
    margin-bottom: 24px;
}

.pricing-callout-card__body {
    font-size: 16px;
    line-height: 26px;
    color: rgba(255,255,255,0.85);
    margin: 0;
}

/* Module rows */
.pricing-module-row {
    background: #FFFFFF;
    border: 1.5px solid #C0BAC4;
    border-radius: 16px;
    padding: 32px 40px;
    display: grid;
    grid-template-columns: minmax(340px, 1.4fr) auto 1.6fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 16px;
    scroll-margin-top: 100px;
}

/* Grid items default to min-width:auto, so a child's intrinsic content
   (a long name, price, or checklist item) can silently override its
   track's width and throw the columns out of alignment. Prevent that. */
.pricing-module-row > * {
    min-width: 0;
}

.pricing-module-row__name {
    font-family: "Poppins", sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -0.576px;
    color: #180026;
    margin-bottom: 8px;
}

.pricing-module-row__desc {
    font-size: 14px;
    color: #6B6B7B;
    line-height: 20px;
    margin: 0;
}

.pricing-module-row__pricing {
    min-width: 200px;
    text-align: left;
}

.pricing-module-row__from {
    font-size: 13px;
    color: #1D4641;
    margin-bottom: 4px;
}

.pricing-module-price {
    font-family: "Taviraj", serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    color: #1D4641;
    display: flex;
    align-items: baseline;
    gap: 0;
    margin-bottom: 12px;
}

.pricing-module-price .cents {
    font-size: 18px;
    font-weight: 700;
}

.pricing-module-price .period {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #6B6B7B;
    margin-left: 2px;
}

/* Medium (mobile) / Large (desktop) button sizing, applied where a CTA
   needs to follow that split but shares the .btn base — whose padding
   is marked important to beat Bootstrap's .navbar-nav .nav-link, so
   this needs the same treatment to win. */
.btn-size-responsive {
    padding: 12px 24px !important; /* bootstrap-override */
}

@media (min-width: 992px) {
    .btn-size-responsive {
        padding: 14px 24px !important; /* bootstrap-override */
    }
}

/* "Give families a better first impression" CTA pair (pricing-for-families.html,
   pricing-for-funeral-providers.html) — edge-to-edge on mobile, same pattern
   used for other CTAs sitewide. */
@media (max-width: 767px) {
    .pricing-v2-cta-row .btn {
        width: 100%;
        text-align: center;
    }
}

/* Custom Plan */
.pricing-custom-section {
    padding: 80px 0;
    text-align: center;
}

.pricing-custom-section__heading {
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-size: 52px;
    color: #85F199;
    margin-bottom: 24px;
}

.pricing-custom-section__body {
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 40px;
    line-height: 28px;
}

.pricing-custom-section .btn-discovery {
    background: #FFFFFF;
    color: #1D4641;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s;
}

/* Pricing-table CTAs use the Large button size on desktop; Medium on mobile.
   pricing.html cards/modules, consultancy Development packages, eulogy plans. */
@media (min-width: 992px) {
    .pricing-v2-cta-primary,
    .pricing-v2-cta-outline {
        font-size: 18px;
        padding: 14px 24px;
    }
    .pricing-custom-section .btn-discovery {
        padding: 14px 32px;
    }
    .pkg-tile .btn,
    .honouring-life .child2 .btn {
        padding: 12px 16px !important;
    }
}

.pricing-custom-section .btn-discovery:hover {
    background: #CCCCCC;
    color: #1D4641;
}

/* Checkout button spinner */
.checkout-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
    animation: checkout-spin 0.6s linear infinite;
}
@keyframes checkout-spin {
    to { transform: rotate(360deg); }
}

/* All-Access for Families (Figma 4033:57686) */
.pricing-all-access-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.pricing-all-access-dollar {
    font-family: "Taviraj", serif;
    font-weight: 700;
    font-size: 36px;
    color: #1D4641;
    letter-spacing: -0.02em;
}
.pricing-all-access-cents {
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-size: 20px;
    color: #1D4641;
}
.pricing-all-access-period {
    font-family: "Taviraj", serif;
    font-weight: 600;
    font-size: 20px;
    color: #463351;
    margin-left: 2px;
}
.pricing-all-access-cta .btn {
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 500;
}

/* Connection / Trust */
.pricing-connection {
    display: flex;
    align-items: center;
    gap: 80px;
}

.pricing-connection__text {
    flex: 0 0 540px;
}

.pricing-connection__heading {
    font-family: "Taviraj", serif;
    font-weight: 700;
    font-size: 36px;
    line-height: 1.2;
    color: #1D1033;
    margin-bottom: 16px;
}

.pricing-connection__body {
    font-size: 16px;
    color: #6B6B7B;
    margin-bottom: 32px;
    line-height: 26px;
}

.pricing-connection__img-wrap {
    flex: 1;
    position: relative;
}

.pricing-connection__yellow-blob {
    position: absolute;
    top: 0;
    right: -20px;
    width: 85%;
    height: 90%;
    background-color: #D9F56A;
    border-radius: 24px;
    z-index: 0;
}

.pricing-connection__img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    border-radius: 20px;
    border: 3px solid #1D1033;
    object-fit: cover;
    display: block;
}

/* FAQ */
.pricing-faq-section {
    display: flex;
    align-items: flex-start;
    gap: 80px;
}

.pricing-faq-section__title {
    font-family: "Taviraj", serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.1;
    color: #1D1033;
    flex: 0 0 500px;
}

.pricing-faq-accordion {
    flex: 1;
}

.pricing-faq-accordion .accordion-item {
    border: 0;
    border-bottom: 1px solid #DCE9E2;
    border-radius: 0 !important;
    background: transparent;
}

.pricing-faq-accordion .accordion-button {
    background: transparent;
    font-size: 17px;
    font-weight: 600;
    color: #1D1033;
    padding: 24px 8px;
    box-shadow: none;
}

.pricing-faq-accordion .accordion-button:not(.collapsed) {
    color: #1D4641;
    background: transparent;
    box-shadow: none;
}

.pricing-faq-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 5V19M5 12H19' stroke='%231D4641' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px;
    width: 24px;
    height: 24px;
    transform: none;
}

.pricing-faq-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12H19' stroke='%231D4641' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    transform: none;
}

.pricing-faq-accordion .accordion-body {
    padding: 0 8px 20px;
    font-size: 15px;
    color: #6B6B7B;
    line-height: 24px;
}

/* Responsive — pricing v2 */
@media (max-width: 991px) {
    .pricing-callout-section {
        padding: 40px 0;
    }
    .pricing-callout-card {
        padding: 48px 40px;
        gap: 40px;
    }
    .pricing-module-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .pricing-connection {
        flex-direction: column;
        gap: 40px;
    }
    .pricing-connection__text {
        flex: none;
    }
    .pricing-faq-section {
        flex-direction: column;
        gap: 40px;
    }
    .pricing-faq-section__title {
        flex: none;
        font-size: 36px;
    }
}

@media (max-width: 767px) {
    .pricing-v2-hero-heading {
        font-size: 36px;
    }
    .pricing-v2-hero-body {
        font-size: 16px;
    }
    .pricing-callout-card {
        flex-direction: column;
        padding: 32px 24px;
        text-align: center;
        border-radius: 24px;
    }
    .pricing-callout-card__heading {
        font-size: 28px;
    }
    .pricing-custom-section__heading {
        font-size: 36px;
    }
    .pricing-v2-section {
        padding: 56px 0;
    }
    /* Module cards (Figma 2515-29510): tighter mobile padding so the
       "Add to cart" button reads edge-to-edge rather than deeply inset */
    .pricing-module-row {
        padding: 24px 16px;
    }
    /* Custom-plan CTA button: full-width/edge-to-edge on mobile instead
       of a narrow auto-width button floating in the middle */
    .pricing-custom-section .btn-discovery {
        display: block;
        width: 100%;
    }
    /* +8px padding on each side for custom-plan & connection sections (mobile) */
    .pricing-custom-section > .container,
    .pricing-connection-section > .container {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* All-Access for families: stack price + button on mobile */
    .pricing-all-access-cta {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .pricing-all-access-cta .btn {
        width: 100%;
    }
    .pricing-all-access-section > .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width:540px) {
    .p-80 {
        padding: 56px 24px;
    }

    .gaia-organised-services .cus-card {
        max-width: 408px;
        width: 100%;
    }

    .hero-section {
        min-height: 860px;
    }

    .banner-section .btn {
        width: 100%;
    }

    .modal-content {
        max-width: 280px;
        padding: 1.5rem;
    }

    .product-card-img img {
        width: 150px;
        height: 150px;
    }

    .product-card {
        padding: 24px;
    }

    .product-card-cta .btn {
        width: 100%;
    }
}

/* ===== Contact Page ===== */

.contact-hero-section {
    background-color: #F3F7FA;
}

.contact-hero-heading {
    font-size: 48px;
    line-height: 56px;
    letter-spacing: -1.5px;
    color: #1D4641;
    margin-bottom: 0;
}

.contact-type-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
}

.contact-type-bi-icon {
    font-size: 28px;
    color: #180026;
    flex-shrink: 0;
    margin-top: 2px;
}

.contact-type-divider {
    margin: 0;
    border-color: #C0BAC4;
    opacity: 0.3;
}

.contact-type-title {
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #180026;
    margin-bottom: 6px;
    letter-spacing: -0.3px;
}

.contact-type-desc {
    font-size: 14px;
    color: #463351;
    margin-bottom: 0;
    line-height: 20px;
}

.contact-form-card {
    background: #FFFFFF;
    border: 1px solid #C0BAC4;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.contact-form-heading {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #180026;
    letter-spacing: -0.4px;
    margin-bottom: 28px;
}

.contact-submit-btn {
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
}

.contact-privacy-note {
    font-size: 13px;
    color: #7A8F8A;
    margin-bottom: 0;
    text-align: center;
    line-height: 18px;
}

.contact-privacy-link {
    color: #1D4641;
    text-decoration: underline;
}

/* Subscribe section */

.contact-subscribe-section {
    background: #FFFFFF;
    padding-top: 0;
}

.contact-subscribe-card {
    background: #1D4641;
    border-radius: 24px;
    padding: 56px 64px;
}

.contact-subscribe-heading {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -1px;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.contact-subscribe-desc {
    font-size: 16px;
    color: #A8C4BA;
    margin-bottom: 0;
    line-height: 24px;
}

.contact-subscribe-input {
    border: 1px solid #3D6B5A;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 15px;
    color: #180026;
    background: #FFFFFF;
    min-width: 0;
}

.contact-subscribe-input:focus {
    border-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.20);
}

.contact-subscribe-btn {
    background: #FFFFFF;
    color: #1D4641;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 28px;
    white-space: nowrap;
    border: none;
}

.contact-subscribe-btn:hover {
    background: #EAF3EE;
    color: #1D4641;
}

/* Homepage newsletter subscribe box — widen the email field by 64px
   on desktop only (matches the flex-lg-row breakpoint this sits at) */
@media (min-width: 992px) {
    .newsletter-form .input-group {
        min-width: 418px;
    }
}

@media (max-width: 767px) {
    .contact-hero-heading {
        font-size: 36px;
        line-height: 44px;
    }

    /* Reduce gap between intro text and form card by 32px on mobile */
    .contact-hero-section .title-description {
        margin-bottom: 16px !important; /* bootstrap-override — overrides mb-5 (48px → 16px = −32px) */
    }

    /* Segment toggle stretches to match input width on mobile */
    .contact-form-card .billing-segmented-control {
        display: flex;
        width: 100%;
    }

    .contact-form-card .billing-seg-btn {
        flex: 1;
    }

    .contact-form-card {
        padding: 28px 20px;
    }

    .contact-subscribe-card {
        padding: 36px 24px;
    }

    .contact-subscribe-heading {
        font-size: 28px;
        line-height: 36px;
    }
}
/* ============================================================
   Funerals Live — green + purple blended sub-brand
   Scoped to .funerals-live-theme so it never affects other Gaia pages.
   Green (#1D4641 / #D4E9CA) stays primary; Gaia's purple tokens
   (#463351 muted, #180026 dark) enter as premium-tier + depth accents.
   ============================================================ */
.funerals-live-theme .cus-card {
    background: #FFFFFF;
    border: 1px solid #D4E9CA;
    border-top: 4px solid #1D4641;
    transition: transform 0.25s ease;
}
.funerals-live-theme .cus-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px -16px rgba(70, 51, 81, 0.28);
}
.funerals-live-theme .fl-premium {
    border-top-color: #463351;
}
.funerals-live-theme .fl-plan-desc {
    min-height: 4.5em;
}
.funerals-live-theme .fl-plan-price {
    color: #1D4641;
}
.funerals-live-theme .fl-premium .fl-plan-price {
    color: #463351;
}
.funerals-live-theme .fl-badge-premium {
    background: #463351;
    color: #FFFFFF;
}
.funerals-live-theme .fl-cta {
    background: linear-gradient(120deg, #1D4641 0%, #180026 100%);
}
@media (max-width: 991.98px) {
    .funerals-live-theme .fl-plan-desc { min-height: 0; }
}

/* ============================================================
   Funerals Live sub-brand chrome + magenta accents (Agam Figma
   SryxvxM6MwQ41yeVoH7xYz). Primary #8B104E, plum #4D1C34.
   ============================================================ */

/* Magenta primary button */
.fl-btn-primary,
.funerals-live-theme .btn-primary-dark {
    background-color: #8B104E;
    border: 1px solid #8B104E;
    color: #FFFFFF;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.fl-btn-primary:hover,
.funerals-live-theme .btn-primary-dark:hover {
    background-color: #6E0C3D;
    border-color: #6E0C3D;
    color: #FFFFFF;
}
.fl-btn-primary:focus-visible,
.funerals-live-theme .btn-primary-dark:focus-visible {
    outline: 2px solid #8B104E;
    outline-offset: 2px;
}

/* Magenta outline secondary button (FL theme) */
.funerals-live-theme .btn-secondary-dark2 {
    background-color: transparent;
    border: 1px solid #8B104E;
    color: #8B104E;
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* Grey hover (keeps the magenta text + border) — the outline secondary
   must not invert to the solid magenta primary fill on hover. */
.funerals-live-theme .btn-secondary-dark2:hover,
.funerals-live-theme .btn-secondary-dark2:focus-visible {
    background-color: #E8EEF4;
    color: #8B104E;
}

/* Magenta check icons in the FL theme */
.funerals-live-theme .pricing-green-check-list li::before {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%238B104E'/%3E%3Cpath d='M5.5 10L8.5 13L14.5 7' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.funerals-live-theme .fl-plan-price {
    color: #8B104E;
}

/* FL header */
.fl-header {
    background: #FFFFFF;
    border-bottom: 1px solid #F1F4F4;
    padding: 12px 0;
}
.fl-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    text-decoration: none;
}
.fl-brand-name {
    color: #8B104E;
    font-size: 22px;
}
.fl-brand-sub {
    color: #1D4641;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-top: 2px;
}
.fl-header .fl-nav-link {
    color: #1D4641;
    font-weight: 500;
    padding: 8px 16px;
    transition: color 0.2s ease;
}
.fl-header .fl-nav-link:hover,
.fl-header .fl-nav-link:focus-visible {
    color: #8B104E;
}
.fl-dropdown {
    border: 1px solid #F1F4F4;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 18px 40px -20px rgba(70, 51, 81, 0.28);
}
.fl-dropdown .dropdown-item {
    border-radius: 8px;
    color: #1D4641;
    padding: 8px 12px;
}
.fl-dropdown .dropdown-item:hover,
.fl-dropdown .dropdown-item:focus {
    background: #F7F6F3;
    color: #8B104E;
}
.fl-toggler {
    border: none;
}
.fl-offcanvas .fl-brand-name {
    font-size: 20px;
}

/* FL newsletter card + plum footer */
.fl-newsletter {
    background: #FFFFFF;
    padding-top: 32px;
}
.fl-newsletter-inner {
    background: #F7F6F3;
    border-radius: 16px;
    padding: 28px 32px;
}
.fl-newsletter-title {
    color: #1D4641;
    font-size: 24px;
}
.fl-newsletter-group {
    background: #FFFFFF;
    border: 1px solid #F1F4F4;
    border-radius: 100px;
    padding: 4px 4px 4px 18px;
    min-width: 300px;
}
.fl-newsletter-group .form-control {
    border: none;
    box-shadow: none;
    background: transparent;
}
.fl-newsletter-btn {
    background: #8B104E;
    color: #FFFFFF;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.fl-newsletter-btn:hover {
    background: #6E0C3D;
    color: #FFFFFF;
}
.fl-newsletter-msg {
    color: #8B104E;
    font-size: 14px;
}
.fl-newsletter-msg a { color: inherit; text-decoration: underline; }
.fl-footer {
    background: #4D1C34;
    padding: 40px 0 32px;
}
.fl-footer-links li a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}
.fl-footer-links li a:hover {
    color: #FFCCCF;
}
.fl-social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #8B104E;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.fl-social-icon:hover {
    background: #6E0C3D;
    color: #FFFFFF;
}
.fl-footer-copy {
    color: #FFCCCF;
    font-size: 12px;
}