/* 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;
}

.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;
}

.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;
}

/* 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;
}

/* Offcanvas (mobile): simplified stacked lists */
.offcanvas-body .mega-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
}

.offcanvas-body .mega-inner {
    flex-direction: column;
    padding: 8px 0 0 1rem;
    gap: 16px;
}

.offcanvas-body .mega-card,
.offcanvas-body .mega-sep,
.offcanvas-body .mega-col-desc,
.offcanvas-body .mega-subheader {
    display: none;
}

.offcanvas-body .mega-row {
    flex-direction: column;
    gap: 0;
}

.offcanvas-body .mega-col {
    padding: 4px 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: 1rem;
}

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%);
}

/* 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;
}

/* 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.webp') no-repeat right center;
    background-size: contain;
    pointer-events: none;
}

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

/* 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;
}

/* 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: 95vh;
    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;
}

.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: 33px;
}

.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: 24px;
    row-gap: 0;
    margin-bottom: 32px;
}

.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: 16px;
}

.m3-input {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    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;
    border-width: 2px;
}

.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,
.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;
    top: 17px;
    color: #807388;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    transition: all 0.15s ease;
    pointer-events: none;
    background: #fff;
    padding: 0;
    line-height: 1;
}

.m3-textarea {
    height: auto;
    min-height: 140px;
    padding: 20px 16px 12px;
    resize: vertical;
}

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;
}

.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;
}

.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 .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 (EulogyWriter / PassingMoments) */
.br-4xl {
    border-radius: 48px;
}

.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%;
    }

    .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 {
        padding: 56px 24px;
    }

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

    .our-team .section-heading {
        font-size: 55px;
    }

    .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;
    }

    .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 {
        height: 70vh;
    }

    .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: 40px;
    }

    .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: 710px;
    }

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

    .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;
}

/* 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;
    }
    .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%;
    }
}

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

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

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

    .hero-image {
        height: 320px;
    }

    .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;
    }

    .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;
}
.funerals-live-theme .btn-secondary-dark2:hover,
.funerals-live-theme .btn-secondary-dark2:focus-visible {
    background-color: #8B104E;
    color: #FFFFFF;
}

/* 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-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;
}