/* ==========================================================================
   frnd.css — every Frnd.us override in one file, loaded once after the
   template stylesheet and the page stylesheets (layouts/app.blade.php).

   Sections, in cascade order:
     1. Icon font    2. Buttons    3. Form status messages
     4. Color remap  5. Theme      6. Tokens    7. Type map

   Phase 4 of the style simplification plan (Oct 2026) merged seven files
   (icon-font-fix, button-colors, form-status, frnd-v2-auto, frnd-v2-theme,
   frnd-tokens, frnd-type-map) into this one. The order is unchanged.
   ========================================================================== */


/* ######################################################################
   1. ICON FONT
   ###################################################################### */

/* Icon font fix.
   The compiled stylesheet (public/build) points the icomoon font at /FrndUs2/build/..., an old
   path from when APP_URL was http://localhost/FrndUs2, so the icons rendered as blank squares.
   This re-declares the font from public/fonts using a relative path, which works under any folder name.
   Loaded after the Vite stylesheet in layouts/app.blade.php, so this declaration wins.
   It can be removed once APP_URL is corrected and the assets are rebuilt (npm.cmd run build). */
@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.woff?2ol74w') format('woff'),
	     url('../fonts/icomoon.ttf?2ol74w') format('truetype'),
	     url('../fonts/icomoon.svg?2ol74w#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}


/* ######################################################################
   2. BUTTONS
   ###################################################################### */

/* Button colors — Deep Water for the standard buttons (values set again in the theme section below). */
:root {
	--frnd-btn: #1B4A63;
	--frnd-btn-hover: #0E3F58;
	--frnd-btn-rgb: 27, 74, 99;
	--frnd-btn-text: #ffffff;
}

/* Main theme buttons (excludes the gray, outline and lavender variants and the pricing buttons, which have their own styles) */
.thm-btn:not(.thm-btn-gray):not(.thm-btn-outline):not(.thm-btn-lavender):not(.pricing-one__btn),
.thm-btn-orange {
	color: var(--frnd-btn-text);
	background: var(--frnd-btn);
	border-color: var(--frnd-btn);
}
.thm-btn:not(.thm-btn-gray):not(.thm-btn-outline):not(.thm-btn-lavender):not(.pricing-one__btn) i,
.thm-btn-orange i { color: var(--frnd-btn-text); }
.thm-btn:not(.thm-btn-gray):not(.thm-btn-outline):not(.thm-btn-lavender):not(.pricing-one__btn):hover,
.thm-btn-orange:hover {
	color: var(--frnd-btn-text);
	background: var(--frnd-btn-hover);
	border-color: var(--frnd-btn-hover);
	box-shadow: 0 8px 20px rgba(var(--frnd-btn-rgb), 0.35);
}

/* Account / app buttons */
.ds-btn-primary {
	color: var(--frnd-btn-text);
	background-color: var(--frnd-btn);
	border-color: var(--frnd-btn);
}
.ds-btn-primary:hover {
	color: var(--frnd-btn-text);
	background-color: var(--frnd-btn-hover);
	border-color: var(--frnd-btn-hover);
	box-shadow: 0 8px 20px rgba(var(--frnd-btn-rgb), 0.35);
}

/* Footer newsletter send button */
.footer-widget__btn { background-color: var(--frnd-btn); color: var(--frnd-btn-text); }
.footer-widget__btn:hover { background-color: var(--frnd-btn-hover); }

/* Keyboard focus ring */
.thm-btn:focus-visible, .ds-btn-primary:focus-visible, .footer-widget__btn:focus-visible {
	outline: 2px solid #262626 !important;
	outline-offset: 2px;
}


/* ######################################################################
   3. FORM STATUS MESSAGES
   ###################################################################### */

/* Form status messages ([data-form-message] and friends).
   Shown by public/js/form-status.js whenever new text arrives:
   fade in 300ms -> visible 4s -> fade out 300ms (4.6s total), then hidden again. */
[data-form-message],
[data-participation-message],
#ppic-message {
	display: none;
}
[data-form-message].fs-show,
[data-participation-message].fs-show,
#ppic-message.fs-show {
	display: block !important;
	margin-top: var(--space-3);
	margin-bottom: var(--space-4);
	padding: var(--space-3) var(--space-4);
	border: 1px solid #1B4A63;
	border-radius: 8px;
	background: rgba(27, 74, 99, 0.08);
	color: inherit;
	font-size: var(--small-size);
	line-height: 1.5;
	animation: fsFade 4600ms ease forwards;
}
@keyframes fsFade {
	0%      { opacity: 0; }
	6.52%   { opacity: 1; }  /* 300ms */
	93.48%  { opacity: 1; }  /* +4000ms */
	100%    { opacity: 0; }  /* +300ms */
}
@media (prefers-reduced-motion: reduce) {
	[data-form-message].fs-show,
	[data-participation-message].fs-show,
	#ppic-message.fs-show { animation-name: fsFadeReduced; }
	@keyframes fsFadeReduced { 0%, 99.9% { opacity: 1; } 100% { opacity: 0; } }
}


/* ######################################################################
   4. COLOR REMAP (template colors -> v2 palette)
   ###################################################################### */

/* AUTO-GENERATED by the Frnd.us style-guide re-theme (white page, sand panels, graphite ink, marker palettes): each rule repeats an original selector with its hard-coded dark-theme colors mapped to the Coastal palette. */

/* --- from public/css/bootstrap.css (neutrals only) --- */
.form-label { color: #262626; }
.form-control { border: 1px solid #E4DECF; }
.form-select { background-color: #F4F1E8; }
.form-select:disabled { background-color: rgba(38, 38, 38, 0.018); }
.form-select:-moz-focusring { text-shadow: 0 0 0 rgba(38, 38, 38, 0.2); }
.form-check-input { background-color: #F4F1E8; border: 1px solid #E4DECF; }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(38, 38, 38, 0.2),0 0 0 .25rem rgba(13,110,253,.25); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px rgba(38, 38, 38, 0.2),0 0 0 .25rem rgba(13,110,253,.25); }
.input-group-text { border: 1px solid #E4DECF; }
.shadow { box-shadow: 0 .5rem 1rem rgba(38, 38, 38, 0.075) !important; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(38, 38, 38, 0.037) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(38, 38, 38, 0.087) !important; }

/* --- from public/css/01-global.css --- */
:root { --thm-gray-bg: #F4F1E8; }
.preloader { background-color: #FFFFFF; }
.bootstrap-select .dropdown-menu>li+li>a { border-top: 1px solid #E4DECF; }
.bootstrap-select .dropdown-menu>li.selected>a { color: #262626; }
.bootstrap-select .dropdown-menu>li>a:hover { color: #262626; }
.form-group .ui-button .ui-icon { color: #505050; }
.scroll-to-top { background: rgba(38, 38, 38, 0.048); border: 1px solid #E4DECF; }
.thm-btn-two:hover { box-shadow: 0 8px 20px rgba(27, 74, 99, 0.25); }

/* --- from public/css/style.css --- */
.box-layout .page-wrapper { box-shadow: 0px 0px 15px rgba(38, 38, 38, 0.05); }
.ErrorRed { color: #EE4F27 !important; }
.SuccessGreen { color: #505050 !important; }
.Red { color: #EE4F27 !important; }
.Yellow { color: #EE4F27 !important; }
.LightOrange { color: #EE4F27 !important; }
.Orange { color: #EE4F27 !important; }
.Brown { color: #EE4F27 !important; }
.Teal { color: #5E3685; }
.Green { color: #1F6B45 !important; }
.White { color: #262626 !important; }
.LighterBlue { color: #5E3685 !important; }
.BabyBlue { color: #5E3685 !important; }
.LightGray { color: #505050 !important; }
.VeryLightGray { color: #505050 !important; }
.VeryVeryLightGray { color: #262626 !important; }
.White { color: #262626 !important; }
.YellowBg { background-color: #FEC0AE; }
.BlueBg { background-color: #1B4A63; }
.GrayBg { color: #505050; }
.ErrorMessage a { color: #EE4F27; }
.ErrorMessageFail { border: 1px solid rgba(228, 87, 46, 0.25); background: rgba(238, 79, 39, 0.1); color: #EE4F27; }
.SuccessMessage { border: 1px solid rgba(31, 107, 69, 0.25); background: rgba(31, 107, 69, 0.1); color: #1F6B45; }
.ErrorMessageModal { background-color: rgba(238, 79, 39, 0.1); color: #EE4F27; border: 1px solid rgba(228, 87, 46, 0.25); }
.InterstitialBackgroundCSS { background-color: rgba(255, 255, 255, 0.85); }
.InterstitialContentCSS { background-color: #F4F1E8; border: 1px solid #E4DECF; color: #505050; box-shadow: 0 15px 14px 0 rgba(38, 38, 38, 0.2); }
.Small span { color: #262626; }
p { color: #505050; }
.Large { color: #262626; }
.Large span { color: #505050; }
.Larger { color: #262626; }
.Larger span { color: #505050; }
H2 { color: #262626; }
H2 span { color: #5E3685; }
H1 { color: #262626; }
H1 span { color: #EE4F27; }
.Shadow { text-shadow: 1px 1px 1px rgba(38, 38, 38, 0.2); }
.Hyperlink { color: #5E3685 !important; }
.NoData { border: 1px solid #E4DECF; background: rgba(38, 38, 38, 0.03); color: #505050; }
.MarkerCard--info { box-shadow: 0 18px 45px rgba(38, 38, 38, 0.2); }
:root { --m-shadow: 0 15px 14px 0 rgba(38, 38, 38, 0.2); --m-shadow-soft: inset -1px -1px rgba(38, 38, 38, 0.1),
		                 inset 1px 1px rgba(38, 38, 38, 0.15),
		                 0 4px 16px -8px rgba(38, 38, 38, 0.115); --m-accent: #EE4F27; --m-link: #5E3685; --m-link-dark: #5E3685; --m-light-muted: #505050; --m-light-border: #E4DECF; --m-dark-bg: rgba(255, 255, 255, 0.92); --m-dark-bg-solid: #FFFFFF; --m-dark-text: #262626; --m-dark-muted: #505050; --m-dark-border: #E4DECF; --m-chip-bg: rgba(238, 79, 39, 0.14); --m-chip-border: rgba(228, 87, 46, 0.26); --m-chip-text: #EE4F27; --m-chip-dark-bg: rgba(238, 79, 39, 0.18); --m-chip-dark-border: rgba(228, 87, 46, 0.3); --m-chip-dark-text: #EE4F27; }
.MarkerCard_Strong { color: #262626; }
.MarkerCard_Strong span { color: #262626; }
.Marker_Location { color: #262626; }
.mPinDot { box-shadow: 0 0 0 4px rgba(27, 74, 99, 0.18); }
.MarkerBubble { border: 1px solid #E4DECF; color: #262626; }
.MarkerCard_Footer { border-top: 1px solid #E4DECF; }
.MarkerCard_dark .MarkerCard_Footer { border-top: 1px solid #E4DECF; }
.mBtn--orange { border-color: rgba(228, 87, 46, 0.45); box-shadow: 0 8px 18px rgba(27, 74, 99, 0.25),
			inset 0 1px 0 rgba(38, 38, 38, 0.175); }
.mBtn--orange:hover { box-shadow: 0 12px 26px rgba(27, 74, 99, 0.25),
			inset 0 1px 0 rgba(38, 38, 38, 0.2); }
.mBtn--ghost { background: rgba(38, 38, 38, 0.036); border-color: #E4DECF; }
.mBtn--ghost:hover { background: rgba(38, 38, 38, 0.072); border-color: #E4DECF; box-shadow: 0 6px 16px rgba(38, 38, 38, 0.125); }
.mBtn--lavendar { border-color: rgba(27, 74, 99, 0.5); box-shadow: 0 6px 16px rgba(27, 74, 99, 0.25),
			inset 0 1px 0 rgba(38, 38, 38, 0.175); }
.mBtn--lavendar:hover { background: #1B4A63; box-shadow: 0 10px 26px rgba(27, 74, 99, 0.25),
			inset 0 1px 0 rgba(38, 38, 38, 0.2); }
.thm-btn-orange:hover { background-color: #EE4F27; border-color: #E4572E; box-shadow: 0 8px 20px rgba(27, 74, 99, 0.25); }
.thm-btn-lavender { background-color: #1B4A63; border-color: #1B4A63; }
.thm-btn-lavender:hover { background-color: #0E3F58; border-color: #1B4A63; box-shadow: 0 8px 20px rgba(27, 74, 99, 0.25); }
.thm-btn-gray { background: rgba(38, 38, 38, 0.03); border: 1px solid #E4DECF; }
.thm-btn-gray:hover { color: #262626; background: rgba(38, 38, 38, 0.06); border-color: #E4DECF; }
.thm-btn-outline { border: 1px solid #E4DECF; }
.thm-btn-outline:hover { color: #262626; border-color: #E4DECF; background: rgba(38, 38, 38, 0.048); }
.FriendButton.saved { background: #1F6B45; }
.FriendButton.error { background: #EE4F27; }
:root { --thm-bg: #FFFFFF; --thm-surface: #F4F1E8; --thm-border: #E4DECF; --thm-text: #262626; --thm-muted: #505050; --thm-primary-soft: rgba(31, 107, 69, 0.15); --thm-accent: #1B4A63; }
.card.surface { border: 1px solid rgba(38, 38, 38, 0.06); box-shadow: inset -1px -1px rgba(38, 38, 38, 0.1),
                        inset 1px 1px rgba(38, 38, 38, 0.15),
                        0 4px 16px -8px rgba(38, 38, 38, 0.115); }
.card.surface:hover { border-color: #E4DECF; background-color: rgba(244, 241, 232, 0.9); }
.form-control,
        .form-select { background-color: #FFFFFF; border: 1px solid #E4DECF; color: #262626; }
.form-control:focus,
        .form-select:focus { background-color: #FFFFFF; color: #262626; box-shadow: 0 0 0 3px rgba(27, 74, 99, 0.15); }
.form-control::placeholder { color: #767676; }
.accordion-button:not(.collapsed) { background-color: rgba(38, 38, 38, 0.018); }
.accordion-body { border-bottom: 1px solid rgba(38, 38, 38, 0.06); }
.accordion-item { border-color: rgba(38, 38, 38, 0.06); }
.carousel-caption { background: rgba(38, 38, 38, 0.135); }
.nav-tabs { border-bottom: 1px solid #E4DECF; }
.nav-tabs .nav-link { color: #505050; }
.nav-tabs .nav-link:hover { color: #505050; }
select::-webkit-scrollbar-track { background: #F4F1E8; }
select::-webkit-scrollbar-thumb { background: #F4F1E8; border: 2px solid #E4DECF; }
.BadgeBody { border: 1px dashed #E4DECF; }
.BadgeNumber[data-badge]:after { color: #262626; box-shadow: 0 0 1px rgba(38, 38, 38, 0.2); }
.promo-article { color: #262626; }
.promo-title { color: #262626; }
.promo-date { color: rgba(38, 38, 38, 0.6); }
.frnd-datepicker.ui-datepicker { border: 1px solid #E4DECF; background: #F4F1E8; box-shadow: 0 15px 14px 0 rgba(38, 38, 38, 0.2); }
.frnd-datepicker .ui-datepicker-title { color: #262626; }
.frnd-datepicker .ui-datepicker-prev,
.frnd-datepicker .ui-datepicker-next { border: 1 solid #E4DECF; }
.frnd-datepicker .ui-datepicker-prev:hover,
.frnd-datepicker .ui-datepicker-next:hover { background: rgba(38, 38, 38, 0.024); }
.frnd-datepicker thead th { color: rgba(38, 38, 38, 0.55); }
.frnd-datepicker td a,
.frnd-datepicker td span { border: 1px solid rgba(38, 38, 38, 0.06); background: #FFFFFF; color: rgba(38, 38, 38, 0.9); }
.frnd-datepicker td a:hover { background: rgba(38, 38, 38, 0.048); }
.frnd-datepicker .ui-datepicker-today a { border-color: #E4DECF; background: rgba(38, 38, 38, 0.036); }
.frnd-datepicker .ui-datepicker-current-day a { color: #262626; box-shadow: 0 8px 20px rgba(27, 74, 99, 0.25); }
.frnd-datepicker .ui-state-disabled span { color: rgba(38, 38, 38, 0.25); }
.frnd-datepicker select.ui-datepicker-month,
.frnd-datepicker select.ui-datepicker-year { background: rgba(38, 38, 38, 0.036); color: #262626; border: 1px solid #E4DECF; }
hr { border-top: 1px solid #E4DECF; }
.label { color: rgba(38, 38, 38, 0.8); }
.content { color: rgba(38, 38, 38, 0.85); }
.promo-link { color: #505050; }
.recent_heading h4 { color: #5E3685; }
.srch_bar input { border: 1px solid #E4DECF; }
.chat-bubble-row.is-mine .chat-bubble { background-color: rgba(31, 107, 69, 0.2); }
.chat_ib .ArchiveThreadLink { color: #505050; }
.chat_ib .ArchiveThreadLink:hover { color: #EE4F27; }
.chat_ib p { color: #505050; }
.sent_msg p { background: #1B4A63 none repeat scroll 0 0; }
.msg_send_btn { background: #1B4A63 none repeat scroll 0 0; }
.pagination .pg-pagination li a { color: #505050; border: 1px solid #E4DECF; background: rgba(38, 38, 38, 0.03); }
#ui-datepicker-div { background: #F4F1E8; box-shadow: 0 12px 28px rgba(38, 38, 38, 0.2); }
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover { background: rgba(38, 38, 38, 0.048); }
#ui-datepicker-div td a:hover { background: rgba(38, 38, 38, 0.048); }
#ui-datepicker-div td a.ui-state-highlight,
#ui-datepicker-div td .ui-state-highlight { color: #EE4F27; border-color: rgba(228, 87, 46, 0.5); }

/* --- from public/css/ds-theme.css --- */
.ds-text-gradient-rainbow { background: linear-gradient(89.98deg, #FEC0AE 29.9%, #FEC0AE 71.24%, #DDC4FD 96.05%); }
.ds-text-gradient-light { background: linear-gradient(140deg, #ffffff, #F4F1E8); }
.ds-btn-primary { color: #262626; }
.ds-btn-primary:hover { color: #262626; }
.ds-btn-secondary:hover { background-color: rgba(38, 38, 38, 0.048); border-color: #E4DECF; }
.ds-btn-ghost { background-color: rgba(38, 38, 38, 0.03); }
.ds-btn-ghost:hover { background-color: rgba(38, 38, 38, 0.06); }
.ds-btn-success { color: #262626; }
.ds-btn-success:hover { color: #262626; }
.ds-btn-danger { color: #262626; }
.ds-btn-danger:hover { background-color: #EE4F27; border-color: #E4572E; }
.ds-card:hover { background-color: rgba(244, 241, 232, 0.9); }
.ds-card-elevated { background: radial-gradient(circle closest-corner at 50% 110%, #FFFFFF, transparent),
                linear-gradient(rgba(244, 241, 232, 0.6), transparent 60%); box-shadow: inset 0px 4px 12px 0px rgba(38, 38, 38, 0.025),
                0px 4px 16px -8px rgba(38, 38, 38, 0.115); }
.ds-badge-neutral { background-color: rgba(38, 38, 38, 0.036); }
.ds-alert-success { color: #1F6B45; }
.ds-alert-error { color: #EE4F27; }
.ds-alert-warning { color: #EE4F27; }
.ds-alert-info { color: #5E3685; }
.ds-accordion-header:hover { background-color: rgba(38, 38, 38, 0.018); }
.ds-modal-overlay { background-color: rgba(255, 255, 255, 0.85); }
.ds-modal-close:hover { background-color: rgba(38, 38, 38, 0.048); }
.ds-navbar-link:hover { background-color: rgba(38, 38, 38, 0.03); }
.ds-table tbody tr:hover td { background-color: rgba(38, 38, 38, 0.012); }
.ds-progress { background-color: rgba(38, 38, 38, 0.048); }
.ds-glass { background: rgba(255, 255, 255, 0.65); }
.ds-glass-light { background: rgba(38, 38, 38, 0.03); }
.ds-bg-gradient-warm { background: linear-gradient(135deg, rgba(254, 192, 174, 0.08), transparent 60%); }
.ds-bg-gradient-purple { background: linear-gradient(135deg, rgba(221, 196, 253, 0.08), transparent 60%); }
.ds-skeleton { background: linear-gradient(
        90deg,
        rgba(38, 38, 38, 0.024) 25%,
        rgba(38, 38, 38, 0.048) 50%,
        rgba(38, 38, 38, 0.024) 75%
    ); }

/* --- from public/css/module-css/footer.css --- */
.main-footer__shape-1 { background: linear-gradient(260deg, #DDC4FD 5.55%, #FEC0AE 50%, #FEC0AE 86.75%); }
.footer-widget__email-input-box input[type="email"] { border: 1px solid #E4DECF; background-color: #FFFFFF; }
.footer-widget__email-input-box input[type="email"]:focus { box-shadow: 0 0 0 3px rgba(27, 74, 99, 0.15); }
.footer-widget__btn:hover { background-color: #EE4F27; }
.site-footer__social a { color: #505050; }

/* --- from public/css/module-css/solutions.css --- */
.solutions-one__single:hover { border: 1px solid #1F6B45; }
.solutions-one__text { color: #5E3685; }
.solutions-one__btn { color: #5E3685; }
.solutions-two__content-one { background: #F4F1E8; }
.solutions-two__content-one:hover { border: 1px solid #1F6B45; }
.solutions-two__content-one-img-box { border: 1px solid #1B4A63; background: #F4F1E8; }
.solutions-two__content-two-single { background-color: #F4F1E8; border: 1px solid #1B4A63; }
.solutions-two__content-two-single:hover { border: 1px solid #1F6B45; }
.solutions-two__content-two-img::before { background: linear-gradient(103deg, #DDC4FD 8.08%, #DDC4FD 31.54%, #FEC0AE 60.38%, #FEC0AE 89.73%); }
.solutions-two__content-three { background-color: #F4F1E8; }
.solutions-two__content-three:hover { border: 1px solid #1F6B45; }
.solutions-two__content-three-left:before { border: 1px solid #E4DECF; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(23, 24, 37, 0.00) 101.72%); }
.solutions-two__browser-dot li { background: #EE4F27; }
.solutions-two__browser-dot li:nth-child(2) { background: #1B4A63; }
.solutions-two__browser-dot li:nth-child(3) { background: #FEC0AE; }
.solutions-two__content-three-shape-2 { background: linear-gradient(103deg, #DDC4FD 8.08%, #DDC4FD 31.54%, #FEC0AE 60.38%, #FEC0AE 89.73%); }

/* --- from public/css/module-css/pricing.css --- */
.pricing-one__shape-1 { background: linear-gradient(98deg, #DDC4FD 5.55%, #FEC0AE 32.85%, #FEC0AE 57.49%, #FEC0AE 86.75%); }
.pricing-one__shape-2 { background: linear-gradient(98deg, #DDC4FD 5.55%, #FEC0AE 32.85%, #FEC0AE 57.49%, #FEC0AE 86.75%); }
.pricing-one .slider { background-color: #1B4A63; }
.pricing-one__discount { background: #F4F1E8; }
.pricing-one__single { background: #F4F1E8; }
.pricing-one__single:hover { border: 1px solid #1F6B45; }
.pricing-one__overly-color { background: linear-gradient(180deg, #DDC4FD 0%, #FEC0AE 100%); }
.pricing-one__btn:before { background: linear-gradient(211deg, #DDC4FD 13.4%, #DDC4FD 118.74%); }

/* --- from public/css/module-css/free-trail.css --- */
.free-trail__wrap { border: 1px solid #1F6B45; background: #F4F1E8; }
.free-trail__shape-1 { background: linear-gradient(98deg, #DDC4FD 5.55%, #FEC0AE 32.85%, #FEC0AE 57.49%, #DDC4FD 86.75%); }

/* --- from public/css/module-css/page-title.css --- */
.page-title:before { background: linear-gradient(93deg, #DDC4FD 7.07%, #FEC0AE 97.81%); }

/* --- from public/css/module-css/header.css --- */
.main-header-one.fixed-header { border-bottom: 1px solid rgba(38, 38, 38, 0.06); }
.main-header-one.fixed-header::before { background: rgba(255, 255, 255, 0.85); }
.main-header .main-menu .navigation>li>ul { background-color: #F4F1E8; border: 1px solid #E4DECF; box-shadow: 0 15px 14px 0 rgba(38, 38, 38, 0.2); }
.main-header .main-menu .navigation>li>ul>li>a { color: #505050; }
.main-header .main-menu .navigation>li>ul>li>ul { background-color: #F4F1E8; border: 1px solid #E4DECF; box-shadow: 0 15px 14px 0 rgba(38, 38, 38, 0.2); }
.main-header .main-menu .navigation>li>ul>li>ul>li { border-bottom: 0px solid #E4DECF; }
.main-header .main-menu .navigation>li>ul>li>ul>li>a { color: #505050; }
.main-header.main-header-two.fixed-header .header-two-lower { box-shadow: 0px 10px 10px rgba(38, 38, 38, 0.025); }
.main-header.main-header-three.fixed-header .header-three-lower { box-shadow: 0px 10px 10px rgba(38, 38, 38, 0.025); }
.header-three__nav-outer-content .hamburger { border: 1px solid #E4DECF; }
.mobile-menu .menu-backdrop { background: rgba(255, 255, 255, 0.9); }
.mobile-menu .menu-box { background-color: #F4F1E8; border-right: 1px solid #E4DECF; }
.mobile-menu .navigation li { border-bottom: 1px solid rgba(38, 38, 38, 0.06); }
.mobile-menu .navigation li.dropdown .dropdown-btn { color: #505050; }
.main-header .mobile-menu .navigation li>a { color: #505050; }
.search-popup .color-layer { box-shadow: 0px 10px 15px rgba(38, 38, 38, 0.025); }
.search-popup .close-search { background-color: rgba(255, 255, 255, 0.9); color: #262626; }
.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"] { border: 1px solid #E4DECF; }
.close-sidebar-widget.close-button { background-color: rgba(255, 255, 255, 0.99); color: #262626; }
.about-sidebar .sidebar-inner::-webkit-scrollbar-thumb:hover { background: #F4F1E8; }

/* --- from public/css/module-css/video.css --- */
.video-one__play { border: 1px solid #1B4A63; background: rgba(244, 241, 232, 0.5); color: #5E3685; }
.video-one__play .ripple,
.video-one__play .ripple:before,
.video-one__play .ripple:after { box-shadow: 0 0 0 0 rgba(38, 38, 38, 0.15); }

/* --- from public/css/module-css/login.css --- */
.login-page__shape-2 { background: linear-gradient(250deg, #DDC4FD 14.67%, #FEC0AE 50%, #FEC0AE 82.95%); }
.login-page__close-icon a { border: 1px solid #1B4A63; }
.login-page__sign-option { border: 1px solid #1B4A63; }
.register-one__form input[type=text],
.register-one__form input[type=email],
.register-one__form input[type=password] { border: 1px solid #1B4A63; }
.register-one__form__email i,
.register-one__form__password i { color: #505050; }
.register-one__btn:hover { background: #EE4F27; border-color: #E4572E; box-shadow: 0 8px 20px rgba(27, 74, 99, 0.25); }

/* --- from public/css/module-css/career.css --- */
.career-page__sub-title { color: #EE4F27; }
.career-page__single { border: 1px solid #E4DECF; background: #F4F1E8; }
.career-page__single::before { border: 1px solid #1B4A63; background: #F4F1E8; }
.career-page__icon { background: #F4F1E8; }
.career-page__country-list>a { color: #5E3685; border: 1px solid #E4DECF; background-color: #F4F1E8; }
.career-page-top__content-box { border: 1px solid #E4DECF; }
.career-page-top__job-apply-box { border-bottom: 1px solid #E4DECF; }
.career-page-top__job-apply-icon { background: #F4F1E8; }
.career-page-top__job-apply-country-list>a { color: #5E3685; border: 1px solid #E4DECF; background-color: #F4F1E8; }
.career-page-top__job-apply-share-and-heart li a { color: #505050; }
.career-page-top__interested-job { background: #F4F1E8; }
.career-page-top__interested-job-sub-title span { color: #EE4F27; }

/* --- from public/css/module-css/404.css --- */
.error-page__shape-2 { background: linear-gradient(250deg, #DDC4FD 14.67%, #DDC4FD 38.22%, #FEC0AE 60.95%, #DDC4FD 82.95%); }
.error-page__btn { background: linear-gradient(210deg, #DDC4FD 23.7%, #DDC4FD 108.16%); box-shadow: 0px 20px 24px -10px rgba(27, 74, 99, 0.25); }

/* --- from public/css/module-css/activity-ticker.css --- */
.activity-ticker__icon { color: #EE4F27; }
.activity-ticker__item strong { color: #262626; }
.activity-ticker__item .activity-ticker__promo { color: #EE4F27; }

/* --- from public/css/module-css/perceived-speed.css --- */
.skeleton-card { border: 1px solid #E4DECF; background: rgba(38, 38, 38, 0.018); }
.skeleton-line,
.skeleton-block { background: rgba(38, 38, 38, 0.036); }
.skeleton-line::after,
.skeleton-block::after { background: linear-gradient(90deg, transparent, rgba(38, 38, 38, 0.072), transparent); }
.FrndToast { color: #262626; box-shadow: 0 12px 30px rgba(38, 38, 38, 0.175); }
.FrndToast--ok { background: rgba(31, 107, 69, 0.95); }
.FrndToast--error { background: rgba(238, 79, 39, 0.95); }

/* --- from resources/css/app.css --- */
.metrics-bars { border-bottom: 1px solid #E4DECF; }
.metrics-table { color: #262626; }
.metrics-table th,.metrics-table td { border-color: #E4DECF; }
.metrics-table th { color: #262626; }
.frnd-map-loader { background: #F4F1E8; border: 1px solid #E4DECF; }
.frnd-map-spinner { border: 4px solid #E4DECF; }

/* --- from public/css/button-colors.css --- */
.thm-btn:focus-visible, .ds-btn-primary:focus-visible, .footer-widget__btn:focus-visible { outline: 2px solid #1B4A63 !important; }

/* --- from public/css/form-status.css --- */
[data-form-message].fs-show,
[data-participation-message].fs-show,
#ppic-message.fs-show { border: 1px solid #1B4A63; background: rgba(27, 74, 99, 0.1); }

/* --- from resources/views/pages/about.blade.php (inline <style>) --- */
:root #about-benefits .about-biz { background: rgba(38, 38, 38, 0.012); }
:root #about-benefits .about-biz__icon { background: rgba(27, 74, 99, 0.18); color: #5E3685; }

/* --- from resources/views/pages/solutions.blade.php (inline <style>) --- */
:root #sol-pricing .pricing-one__single { box-shadow: 0 10px 30px rgba(38, 38, 38, 0.09); }
:root #sol-pricing .pricing-one__single:hover { box-shadow: 0 22px 48px rgba(38, 38, 38, 0.16); }
:root #sol-pricing .pricing-one__single--featured { box-shadow: 0 18px 44px rgba(27, 74, 99, 0.22); }
:root #sol-pricing .pricing-one__btn { background: #1B4A63; border: 1px solid #1B4A63; }
:root #sol-pricing .pricing-one__btn:hover, :root #sol-pricing .pricing-one__btn:focus { background: #0E3F58; border-color: #1B4A63; }
:root #sol-pricing .pricing-one__points li .circle-box { background: rgba(238, 79, 39, 0.16); }
:root .sol-compare__head-with { color: #1F6B45; background: rgba(31, 107, 69, 0.06); }
:root .sol-compare__step { background: #E8F2F8; } /* light blue tint of the brand blue #1B4A63 */
:root .sol-compare__head > :first-child { background: #1B4A63; color: #FFFFFF; margin: 0; } /* dark brand blue title bar, white text 9.5:1 */
:root .sol-compare__num { background: rgba(238, 79, 39, 0.14); }
:root .sol-compare__cell--with { background: rgba(31, 107, 69, 0.06); }
:root .sol-compare__cell--with .sol-compare__label { color: #1F6B45; }
:root .sol-compare__tag--leak { border: 1px solid rgba(228, 87, 46, 0.45); }
:root .sol-compare__tag--win { border: 1px solid rgba(31, 107, 69, 0.5); color: #1F6B45; }
:root .sol-compare__row--yours { background: rgba(38, 38, 38, 0.018); }
:root .sol-compare__row--yours .sol-compare__num { background: rgba(38, 38, 38, 0.048); }
:root .sol-funnel__stage { background: rgba(238, 79, 39, 0.14); }
:root .sol-funnel__leak { border: 1px solid rgba(228, 87, 46, 0.45); }
:root .sol-funnel__win { border: 1px solid rgba(31, 107, 69, 0.5); color: #1F6B45; }
:root .sol-funnel__row--yours { background: rgba(38, 38, 38, 0.024); border-color: #1B4A63; }
:root .sol-funnel__row--yours .sol-funnel__stage { background: rgba(38, 38, 38, 0.048); }
:root #sol-diagnosis .sol-term { background: rgba(38, 38, 38, 0.018); }

/* --- from resources/views/pages/styleguide.blade.php (inline <style>) --- */
:root .sg-nav { background: rgba(255, 255, 255, 0.85); }
:root .sg-code { background: rgba(38, 38, 38, 0.09); }

/* --- from resources/views/partials/landing-template-styles.blade.php (inline <style>) --- */
:root .lp-img { background: rgba(38, 38, 38, 0.018); }
:root .lp-band { background: linear-gradient(135deg, rgba(254, 192, 174, 0.12), rgba(38, 38, 38, 0.012)); }

/* --- from resources/views/partials/landing-theme.blade.php (inline <style>) --- */
:root .lp-form .lp-choice input[type="checkbox"]:focus { outline: 2px solid #E4572E; }


/* ######################################################################
   5. THEME (header, footer, page accents, pins, map)
   ###################################################################### */

/* ==========================================================================
   Frnd.us style guide palette (2026-10-09): white page, sand panels, Graphite
   text inks by size, #ee4f27 accent. Marker colors from "Marker palettes, v2" 
   Sand background, brown ink, and one color family per marker type:
     Promotion  orange  #E4572E   (button #C1421C, text #852A0E, light #FEC0AE, tint #FEEBE6)
     Location   green   #1F6B45   (text #085C37, light #B5DCC4, tint #E1F7E8)
     Event      violet  #8656B7   (text #5E3685, light #DDC4FD, tint #F4ECFF)
   Loaded last in layouts/app.blade.php (after frnd-v2-auto.css) so it overrides
   the original dark theme without a rebuild. To revert, remove both <link>s.
   ========================================================================== */
:root {
	/* Base */
	--v2-sand:        #F4F1E8;
	--v2-page:        #FFFFFF;  /* page background (--color-bg) */
	--v2-paper:       #FBF9F4;  /* raised sections */
	--v2-surface:     #F4F1E8;  /* cards, panels, inputs (--color-surface, sand) */
	--v2-line:        #E4DECF;
	--v2-line-strong: #D3CBB8;
	--v2-ink:         #262626;  /* body text and main buttons (Graphite) */
	--v2-ink-hover:   #3A3A3A;

	/* Standard buttons · Deep Water (replaces the ink buttons) */
	--v2-btn:         #1B4A63;  /* white text 9.5:1 */
	--v2-btn-hover:   #0E3F58;
	--v2-btn-active:  #00354C;
	--v2-muted:       #505050;  /* meta, captions, labels */
	--v2-accent:      #EE4F27;  /* brand orange: links, emphasis, active states */

	/* Graphite type inks: darker as text gets smaller */
	--v2-text-display: #333333; /* h1–h2 */
	--v2-text-heading: #2B2B2B; /* h3–h4 */
	--v2-text-body:    #262626; /* body */
	--v2-text-small:   #222222; /* 11–13px, h5–h6 */

	/* Marker families */
	--v2-promo:        #E4572E;
	--v2-promo-btn:    #C1421C;
	--v2-promo-text:   #852A0E;
	--v2-promo-light:  #FEC0AE;
	--v2-promo-tint:   #FEEBE6;
	--v2-loc:          #1F6B45;
	--v2-loc-text:     #085C37;
	--v2-loc-light:    #B5DCC4;
	--v2-loc-tint:     #E1F7E8;
	--v2-event:        #8656B7;
	--v2-event-text:   #5E3685;
	--v2-event-light:  #DDC4FD;
	--v2-event-tint:   #F4ECFF;

	--marker-promotion: var(--v2-promo);
	--marker-promotion-strong: var(--v2-promo-text);
	--marker-location: var(--v2-loc);
	--marker-location-strong: var(--v2-loc-text);
	--marker-event: var(--v2-event);
	--marker-event-strong: var(--v2-event-text);

	/* Original template tokens, remapped */
	--thm-base: var(--v2-accent);
	--thm-base-rgb: 238, 79, 39;
	--thm-gray: var(--v2-muted);
	--thm-gray-rgb: 80, 80, 80;
	--thm-white: var(--v2-ink);          /* "white" text in the dark theme becomes ink */
	--thm-white-rgb: 38, 38, 38;
	--thm-black: var(--v2-ink);
	--thm-black-rgb: 38, 38, 38;
	--thm-primary: var(--v2-btn);
	--thm-primary-rgb: 27, 74, 99;
	--thm-extra: var(--v2-btn-hover);
	--thm-bdr-color: var(--v2-line);
	--thm-body-bg: var(--v2-page);
	--thm-main-bg: var(--v2-surface);
	--thm-gradient-color1: var(--v2-ink);
	--thm-gradient-color2: var(--v2-ink-hover);

	/* ds design-system tokens */
	--ds-primary: var(--v2-accent);
	--ds-primary-hover: #D73703;
	--ds-primary-dark: #A72801;
	--ds-primary-rgb: 238, 79, 39;
	--ds-secondary: var(--v2-promo-light);
	--ds-secondary-rgb: 254, 192, 174;
	--ds-accent-purple: var(--v2-event);
	--ds-accent-purple-rgb: 134, 86, 183;
	--ds-text-lavender: var(--v2-muted);
	--ds-bg-midnight: var(--v2-page);
	--ds-bg-dark: var(--v2-paper);
	--ds-bg-deep: var(--v2-surface);
	--ds-bg-surface: var(--v2-surface);
	--ds-bg-elevated: var(--v2-surface);
	--ds-text-primary: var(--v2-ink);
	--ds-text-secondary: var(--v2-muted);
	--ds-text-muted: var(--v2-muted);
	--ds-text-paragraph: var(--v2-muted);
	--ds-text-dim: var(--v2-muted);
	--ds-border-subtle: var(--v2-line);
	--ds-border-light: var(--v2-line);
	--ds-border-medium: var(--v2-line-strong);
	--ds-border-strong: #C2B8A2;
	--ds-shadow-card: 0 1px 2px rgba(38, 38, 38, 0.06);
	--ds-shadow-drop: 0 4px 16px -8px rgba(38, 38, 38, 0.18);
	--ds-shadow-elevated: 0 12px 28px -12px rgba(38, 38, 38, 0.25);
	--ds-shadow-glow: none;
	--ds-success: var(--v2-loc);
	--ds-success-rgb: 31, 107, 69;
	--ds-info: var(--v2-event-text);
	--ds-info-rgb: 94, 54, 133;

	/* Buttons (button-colors.css): ink, like the reference site */
	--frnd-btn: var(--v2-btn);
	--frnd-btn-hover: var(--v2-btn-hover);
	--frnd-btn-rgb: 27, 74, 99;
	--frnd-btn-text: #FFFFFF;
}

/* --- Page --- */
body, .body-bg-color, .ds-page { background-color: var(--v2-page); color: var(--v2-text-body); }
.page-wrapper { background-color: transparent; }
::selection { background: var(--v2-promo-light); color: var(--v2-ink); }

/* Text on ink/colored fills stays white */
.thm-btn:not(.thm-btn-gray):not(.thm-btn-outline), .thm-btn:not(.thm-btn-gray):not(.thm-btn-outline) i,
.ds-btn-primary, .footer-widget__btn, .footer-widget__btn i,
.mBtn--green, .mBtn--green:hover, .mBtn--lavendar, .mBtn--lavendar:hover { color: #FFFFFF; }

/* Quiet buttons (Start, outline) */
.thm-btn-gray, .thm-btn-outline { color: var(--v2-ink); background: var(--v2-page); border: 1px solid var(--v2-line-strong); }
.thm-btn-gray:hover, .thm-btn-outline:hover { color: var(--v2-ink); background: var(--v2-surface); border-color: var(--v2-line-strong); }
.thm-btn-gray i, .thm-btn-outline i { color: inherit; }

/* Focus ring */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.thm-btn:focus-visible, .ds-btn-primary:focus-visible, .footer-widget__btn:focus-visible {
	outline: 2px solid var(--v2-ink) !important;
	outline-offset: 2px;
}

/* Map: the map container carries an inline dark fill while tiles load */
#map { background-color: var(--v2-paper) !important; border-color: var(--v2-line) !important; }

/* Section taglines */
.section-title__tagline-box { color: var(--v2-muted); }
.section-title__tagline-box i { color: var(--v2-ink); }

/* Sign-in options: white pill with ink text */
.login-page__sign-option { background-color: var(--v2-page); color: var(--v2-ink); border: 1px solid var(--v2-line-strong); }
.login-page__sign-option:hover { background-color: var(--v2-surface); color: var(--v2-ink); }

/* Pricing */
:root .pricing-one__btn, :root .pricing-one__btn:hover, :root .pricing-one__btn i, :root .pricing-one__popular { color: #FFFFFF; }
.accordion-body code { color: var(--v2-event-text); }

/* Landing templates: inputs sit on white, not on the ink token */
:root .lp-form input { background: var(--v2-surface); color: var(--v2-ink); border-color: var(--v2-line); }
:root .lp-form input::placeholder { color: var(--v2-muted); }

/* Light landing template (themes, Template1b/2b): same palette */
html:root {
	--lpl-bg: var(--v2-page);
	--lpl-alt: var(--v2-paper);
	--lpl-surface: var(--v2-surface);
	--lpl-border: var(--v2-line);
	--lpl-heading: var(--v2-text-display);
	--lpl-text: var(--v2-text-body);
	--lpl-muted: var(--v2-muted);
	--lpl-accent: var(--v2-accent);
	--lpl-accent-text: var(--v2-accent);
}

/* Mobile menu and dialogs: dim the page behind */
.mobile-menu .menu-backdrop { background-color: rgba(38, 38, 38, 0.45); }
.InterstitialBackgroundCSS { background-color: rgba(38, 38, 38, 0.4); }

/* Card "More" links use the marker color; the promotion orange needs its darker step as small text */
a[style*="--marker-promotion)"] { color: var(--v2-promo-btn) !important; }

/* Marker cards: keep the type-colored border; dividers were white-on-dark */
/* Marker card: moderately dark gray frame and dividers (#6B6B6B, 5.3:1 on white) */
.ds-card-marker-public, .ds-card-marker-public:hover { border: 1px solid #6B6B6B; }
.ds-card-marker-public hr { border-top-color: #6B6B6B !important; opacity: 1; }
/* "Join" call-to-action box: neutral border instead of the old lime */
.free-trail__wrap { border-color: var(--v2-line); }

/* Graphite type inks by size (style guide · Typography) */
h1, h2, .section-title__title, .ds-h1, .ds-h2, .lp-title, .lp-h2 { color: var(--v2-text-display); }
h3, h4, .ds-h3, .ds-h4 { color: var(--v2-text-heading); }
h5, h6, small, .ds-h5, .ds-h6 { color: var(--v2-text-small); }
p { color: var(--v2-text-body); }

/* Map pins (public/js/frnd-pin.js): bigger, ink-outlined, labeled at street zoom */
.frnd-pin { position: relative; width: 32px; height: 46px; cursor: pointer; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)); }
.frnd-pin svg { display: block; }
.frnd-cluster { cursor: pointer; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)); }
.frnd-cluster svg { display: block; }
.frnd-pin__label {
	position: absolute; left: 34px; top: 7px;
	display: none; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	padding: 3px 10px; border: 1.5px solid #262626; border-radius: 999px;
	background: #FFFFFF; color: #262626;
	font: 700 12px/1.3 Inter, system-ui, sans-serif;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.frnd-pins-labeled .frnd-pin__label { display: block; }
.frnd-pin:hover .frnd-pin__label, .frnd-pin:focus-within .frnd-pin__label { display: block; }

/* Marker pages take their marker family's color for accented text and the Create button.
   Promotions: Bright Orange · Locations: Forest Green · Events: Violet.
   The layout adds .page-promotions / .page-locations / .page-events to <body>. */
body.page-promotions { --page-accent: #E4572E; --page-accent-rgb: 228, 87, 46; --page-btn: #C1421C; --page-btn-hover: #A3371A; }
body.page-locations  { --page-accent: #1F6B45; --page-accent-rgb: 31, 107, 69; --page-btn: #1F6B45; --page-btn-hover: #185A39; }
body.page-events     { --page-accent: #8656B7; --page-accent-rgb: 134, 86, 183; --page-btn: #8656B7; --page-btn-hover: #70459B; }
body.page-promotions, body.page-locations, body.page-events {
	--thm-base: var(--page-accent);
	--thm-base-rgb: var(--page-accent-rgb);
	--ds-primary: var(--page-accent);
	--ds-primary-hover: var(--page-btn-hover);
	--ds-primary-rgb: var(--page-accent-rgb);
}
body.page-promotions .main-header-one__logo-box .thm-btn-orange,
body.page-locations .main-header-one__logo-box .thm-btn-orange,
body.page-events .main-header-one__logo-box .thm-btn-orange {
	--frnd-btn: var(--page-btn);
	--frnd-btn-hover: var(--page-btn-hover);
	--frnd-btn-rgb: var(--page-accent-rgb);
}
/* Headline accent words (e.g. "wanted", "Discover", "Adventure") use a hard-coded orange upstream */
body.page-promotions h1 span, body.page-locations h1 span, body.page-events h1 span,
body.page-promotions h2 span, body.page-locations h2 span, body.page-events h2 span { color: var(--page-accent); }

/* ==========================================================================
   Header and footer · Ocean (open-water blue from the map). No black in the frame.
   ========================================================================== */
:root {
	--frame-header: #2F6F9A;   /* white text 5.4:1 */
	--frame-footer: #245A80;   /* white text 7.4:1 */
	--frame-line:   #3E82B0;
	--frame-text:   #FFFFFF;
	--frame-muted:  #D6E8F4;   /* 5.9:1 on footer */
	--frame-hover:  #FFFFFF;   /* hovered links stay white and gain an underline */
	--create-home: #D73703;    /* home/default Create button · white text 4.7:1 */
	--create-home-hover: #C1421C;
	--frame-tint:   #DCEAF4;   /* light header blue for selected options · ink text 12.3:1 */
	--frame-tint-hover: #EDF4FA; /* hovered, unselected options · ink text 14:1 */
}
/* Selected options (list boxes such as My Locations / My Collections, and dropdown lists):
   light header blue with ink text. Chrome paints its own selection color unless a background
   image is set, so the tint is repeated as a flat gradient. */
select option:hover:not(:checked) { background: var(--frame-tint-hover) linear-gradient(var(--frame-tint-hover), var(--frame-tint-hover)); color: var(--v2-ink); -webkit-text-fill-color: var(--v2-ink); }
select option:checked,
select:focus option:checked { background: var(--frame-tint) linear-gradient(var(--frame-tint), var(--frame-tint)); color: var(--v2-ink); -webkit-text-fill-color: var(--v2-ink); /* Chrome forces white text on a focused list box */ }
.main-header, .main-header.fixed-header, .main-header-one.fixed-header,
.main-header-one.fixed-header::before { background-color: var(--frame-header); }
.main-header { border-bottom: 1px solid var(--frame-line); }
.main-header .main-menu .navigation > li > a,
.main-header .mobile-nav-toggler { color: var(--frame-text); font-weight: 600; }
.main-header .main-menu .navigation > li > a:hover,
.main-header .main-menu .navigation > li.current > a { color: var(--frame-hover); }
.main-header .navbar-toggler .icon-bar { background-color: var(--frame-text); }
.main-header .thm-btn-gray { background: transparent; border-color: #BFDDF0; color: var(--frame-text); }
.main-header .thm-btn-gray:hover { background: rgba(255, 255, 255, 0.12); border-color: #FFFFFF; color: var(--frame-text); }

/* Create: orange by default; Promotions / Locations / Events override with their own color.
   A 2px white ring separates the colored button from the navy bar. */
.main-header-one__logo-box .thm-btn-orange {
	--frnd-btn: var(--create-home);
	--frnd-btn-hover: var(--create-home-hover);
	--frnd-btn-rgb: 215, 55, 3;
	box-shadow: 0 0 0 2px #FFFFFF;
}
.main-header-one__logo-box .thm-btn-orange:hover { box-shadow: 0 0 0 2px #FFFFFF; }
body.page-promotions .main-header-one__logo-box .thm-btn-orange,
body.page-locations .main-header-one__logo-box .thm-btn-orange,
body.page-events .main-header-one__logo-box .thm-btn-orange {
	--frnd-btn: var(--page-btn);
	--frnd-btn-hover: var(--page-btn-hover);
	--frnd-btn-rgb: var(--page-accent-rgb);
}

.main-footer { background-color: var(--frame-footer); border-top: 1px solid var(--frame-line); margin-top: 1rem; }
.main-footer__bottom { border-top-color: var(--frame-line); }
.main-footer .footer-widget__title, .main-footer h3, .main-footer h4 { color: var(--frame-text); }
.main-footer .footer-widget__company-list a, .main-footer a:not(.thm-btn) { color: var(--frame-text); }
.main-footer .footer-widget__company-list a:hover, .main-footer a:not(.thm-btn):hover { color: var(--frame-hover); text-decoration: underline; }
.main-footer .footer-widget__about-text, .main-footer p, .main-footer .main-footer__bottom-text { color: var(--frame-muted); }
/* Small text style in the footer (the main Small rule only covers #main-content). Color stays light for contrast on the blue footer. */
.main-footer .Small { font-family: var(--small-font); font-size: var(--small-size); font-weight: var(--small-weight); line-height: var(--small-leading); letter-spacing: 0; text-transform: none; font-style: normal; }
.footer-widget__email-input-box input[type="email"] { background: #FFFFFF; border-color: #FFFFFF; color: #262626; }
.footer-widget__btn { --frnd-btn: var(--create-home); --frnd-btn-hover: var(--create-home-hover); background-color: var(--create-home); }
.footer-widget__btn:hover { background-color: var(--create-home-hover); }
.main-footer__shape-1 { display: none; }
.main-header .main-menu .navigation > li > a::after { color: var(--frame-text); }

/* Map spaces · Harbor blue (#A9D3EE) is the default background behind every map:
   the live map, its loading cover, and the static map preview on marker pages.
   The live map also passes backgroundColor '#A9D3EE' to Google (resources/js/map.js)
   so the canvas shows Harbor, not gray, before tiles arrive. */
:root { --map-bg: #A9D3EE; --map-border: #7FB6DB; }
#map { background-color: var(--map-bg) !important; border-color: var(--map-border) !important; }
.frnd-map-loader { background: var(--map-bg); border: 1px solid var(--map-border); }
.frnd-map-spinner { border-color: rgba(255, 255, 255, 0.55); border-top-color: #123246; }
#Marker_Location_Map { background-color: var(--map-bg); }

.main-header .main-menu .navigation > li > a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Standard buttons · Deep Water. Covers the theme buttons, account buttons,
   the "Share with a Friend" style buttons and pressed states. */
.mBtn--green, .mBtn--lavendar { background: var(--v2-btn); border-color: var(--v2-btn); color: #FFFFFF; box-shadow: 0 6px 14px rgba(27, 74, 99, 0.25); }
.mBtn--green:hover, .mBtn--lavendar:hover { background: var(--v2-btn-hover); border-color: var(--v2-btn-hover); color: #FFFFFF; }
.thm-btn:not(.thm-btn-gray):not(.thm-btn-outline):active, .ds-btn-primary:active, .mBtn--green:active { background: var(--v2-btn-active); border-color: var(--v2-btn-active); }

/* Homepage headline: Events / Locations / Promotions link to their pages in their marker colors */
.page-title h1 a.frnd-hl-link { color: inherit; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; transition: color .15s ease; }
.page-title h1 a.frnd-hl-link--event { text-decoration-color: #8656B7; }
.page-title h1 a.frnd-hl-link--location { text-decoration-color: #1F6B45; }
.page-title h1 a.frnd-hl-link--promotion { text-decoration-color: #E4572E; }
.page-title h1 a.frnd-hl-link--event:hover { color: #8656B7; }
.page-title h1 a.frnd-hl-link--location:hover { color: #1F6B45; }
.page-title h1 a.frnd-hl-link--promotion:hover { color: #E4572E; }

/* H1 matches the Headline text style: 3rem (48px), bold, tight leading */
h1 {
  font-size: 3rem; /* 48px */
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Larger browser text: let the header row wrap instead of pushing Start and the menu button off-screen.
   At the default text size everything fits on one line, so nothing changes. */
.main-header .inner-container { flex-wrap: wrap; row-gap: 0.5rem; }
.main-header .inner-container > .outer-box { margin-left: auto; }

/* Center the main menu (#navbarSupportedContent-ul) in the top bar on desktop:
   the Create button and the right-hand box take equal space on either side. */
@media only screen and (min-width: 75em) {
  .main-header .inner-container > .main-header-one__logo-box,
  .main-header .inner-container > .outer-box { flex: 1 1 0; min-width: 0; }
  .main-header .inner-container > .outer-box { justify-content: flex-end; }
  .main-header .inner-container > .nav-outer { flex: 0 0 auto; }
}

/* White down caret on the "Activities" dropdown in the top menu */
.main-header .main-menu .navigation > li.dropdown > a:after { color: #FFFFFF; }

/* Body text size for paragraphs */
p { font-size: 1.25rem; }


/* ######################################################################
   6. TOKENS (four text styles, spacing scale, utilities)
   ###################################################################### */

/* ==========================================================================
   Frnd.us tokens — the single source for text styles and spacing.
   Phase 1 of the style simplification plan (Oct 2026).

   RULES
   1. Every page uses at most four text styles: Headline, Heading, Body, Small.
      The page accent color may tint links and the highlighted Headline word.
   2. All spacing comes from the 9-step scale below (4px grid, in rem).
   3. Spacing between blocks is set on the container (.stack, .section),
      not as margins on each element.
   4. No sizes, colors or spacing typed into page templates; use these names.

   Buttons, form fields, the header and the footer are shared components and
   are not counted in the four.
   ========================================================================== */

:root {
  /* Fonts */
  --font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* 1. Headline — the one main title on a page */
  --headline-font: var(--font-display);
  --headline-size: 3rem;                            /* 48px */
  --headline-weight: 700;
  --headline-leading: 1.1;
  --headline-tracking: -0.02em;
  --headline-color: #333333;                        /* 12.6:1 on white */

  /* 2. Heading — section, card and pop-up titles */
  --heading-font: var(--font-display);
  --heading-size: 1.5rem;                           /* 24px */
  --heading-weight: 600;
  --heading-leading: 1.25;
  --heading-tracking: -0.01em;
  --heading-color: #2B2B2B;                         /* 14.2:1 */

  /* Heading sizes — one style, three sizes, set by the tag (or .t-h2/.t-h3/.t-h4).
     h5 and h6 use the h4 size. Cards always use the h3 size. */
  --h2-size: 2rem;                                  /* 32px */
  --h2-leading: 1.2;
  --h3-size: var(--heading-size);                   /* 24px */
  --h3-leading: var(--heading-leading);
  --h4-size: 1.25rem;                               /* 20px */
  --h4-leading: 1.3;

  /* 3. Body — paragraphs, lists, labels, card text */
  --body-font: var(--font-text);
  --body-size: 1rem;                                /* 16px */
  --body-weight: 400;
  --body-leading: 1.6;
  --body-color: #262626;                            /* 15.1:1 */

  /* 4. Small — dates, captions, eyebrow labels, helper text */
  --small-font: var(--font-text);
  --small-size: 0.875rem;                           /* 14px */
  --small-weight: 500;
  --small-leading: 1.5;
  --small-color: #505050;                           /* 8.1:1 */

  /* Accent — a tint on the styles above, never a style of its own.
     --accent-large: the highlighted Headline word (large text, 3:1 is enough).
     --accent-text:  links at body size (4.5:1 or better on white and sand). */
  --accent-large: var(--page-accent, #EE4F27);
  --accent-text: var(--page-accent-text, #C1421C);  /* 5.2:1 */

  /* Spacing — 4px grid. The number is the multiple of 4px. */
  --space-1: 0.25rem;   /*  4px  icon to label, inside small tags */
  --space-2: 0.5rem;    /*  8px  heading to its text, label to field */
  --space-3: 0.75rem;   /* 12px  vertical padding in buttons and fields */
  --space-4: 1rem;      /* 16px  paragraph to paragraph, between fields */
  --space-6: 1.5rem;    /* 24px  card and panel padding, grid gaps */
  --space-8: 2rem;      /* 32px  between groups inside a section */
  --space-12: 3rem;     /* 48px  section title to section content */
  --space-16: 4rem;     /* 64px  section top/bottom on phones */
  --space-24: 6rem;     /* 96px  section top/bottom on desktop */

  /* The template's own spacing tokens point at the same scale, so every
     component that uses them lands on it too (20, 40 and 80px snap). */
  --ds-space-1: var(--space-1);
  --ds-space-2: var(--space-2);
  --ds-space-3: var(--space-3);
  --ds-space-4: var(--space-4);
  --ds-space-5: var(--space-6);
  --ds-space-6: var(--space-6);
  --ds-space-8: var(--space-8);
  --ds-space-10: var(--space-12);
  --ds-space-12: var(--space-12);
  --ds-space-16: var(--space-16);
  --ds-space-20: var(--space-24);

  --section-pad: var(--space-24);
  --header-clear: 5.75rem;   /* height of the site header that sits over the top of each page */
  --gutter: var(--space-6);
}
@media (max-width: 47.99em) {
  :root { --section-pad: var(--space-16); --gutter: var(--space-4); }
}

/* Link-safe accent per page (the bright accents are fine for large text only). */
body.page-promotions { --page-accent-text: #C1421C; }   /* 5.2:1 */
body.page-locations  { --page-accent-text: #1F6B45; }   /* 6.5:1 */
body.page-events     { --page-accent-text: #8656B7; }   /* 5.2:1 */

/* --------------------------------------------------------------------------
   The four text styles. `:root` raises them above the template's rules so a
   class always wins over a tag or template selector. Margins are zero:
   spacing comes from the container.
   -------------------------------------------------------------------------- */
:root .t-headline {
  margin: 0;
  font-family: var(--headline-font);
  font-size: var(--headline-size);
  font-weight: var(--headline-weight);
  line-height: var(--headline-leading);
  letter-spacing: var(--headline-tracking);
  color: var(--headline-color);
  text-transform: none;
  font-style: normal;
}
:root .t-heading {
  margin: 0;
  font-family: var(--heading-font);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
  color: var(--heading-color);
  text-transform: none;
  font-style: normal;
}
/* Heading sizes as classes, for when the look should differ from the tag. */
:root :is(.t-h2, .t-h3, .t-h4) {
  margin: 0;
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
  color: var(--heading-color);
  text-transform: none;
  font-style: normal;
}
:root :is(.t-heading, .t-h2, .t-h3, .t-h4).t-h2 { font-size: var(--h2-size); line-height: var(--h2-leading); }
:root :is(.t-heading, .t-h2, .t-h3, .t-h4).t-h3 { font-size: var(--h3-size); line-height: var(--h3-leading); }
:root :is(.t-heading, .t-h2, .t-h3, .t-h4).t-h4 { font-size: var(--h4-size); line-height: var(--h4-leading); }
:root .t-body {
  margin: 0;
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  letter-spacing: 0;
  color: var(--body-color);
  text-transform: none;
  font-style: normal;
}
:root .t-small {
  margin: 0;
  font-family: var(--small-font);
  font-size: var(--small-size);
  font-weight: var(--small-weight);
  line-height: var(--small-leading);
  letter-spacing: 0;
  color: var(--small-color);
  text-transform: none;
  font-style: normal;
}

/* Accent tints */
:root .t-headline .t-accent,
:root .t-headline span { color: var(--accent-large); }
:root .t-link,
:root :is(.t-body, .t-small) a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
:root .t-link:hover,
:root :is(.t-body, .t-small) a:hover { text-decoration-thickness: 2px; }

/* --------------------------------------------------------------------------
   Layout helpers — spacing lives here, not on the text.
   -------------------------------------------------------------------------- */

/* A page section: standard top and bottom padding. */
:root .section { padding-block: var(--section-pad); }

/* A vertical stack: children separated by one gap. Default 16px. */
:root .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
:root .stack > * { margin-block: 0; }
:root .stack--2  { --stack-gap: var(--space-2); }
:root .stack--4  { --stack-gap: var(--space-4); }
:root .stack--6  { --stack-gap: var(--space-6); }
:root .stack--8  { --stack-gap: var(--space-8); }
:root .stack--12 { --stack-gap: var(--space-12); }

/* A row of items that wraps: buttons, tags, meta. Default 8px. */
:root .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-2)); }
:root .cluster--4 { --cluster-gap: var(--space-4); }

/* A responsive card grid: 24px gaps, cards at least 18rem wide. */
:root .card-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
}

/* Standard padding inside a card or panel. */
:root .pad-card { padding: var(--space-6); }

/* --------------------------------------------------------------------------
   Spacing utilities — for one-off spacing in templates instead of inline
   styles. mt-s6 = margin-top: space-6 (24px). !important so a utility always
   wins, like Bootstrap's own utilities.
   -------------------------------------------------------------------------- */
.mt-s0 { margin-top: 0 !important; } .mt-s1 { margin-top: var(--space-1) !important; } .mt-s2 { margin-top: var(--space-2) !important; } .mt-s3 { margin-top: var(--space-3) !important; } .mt-s4 { margin-top: var(--space-4) !important; } .mt-s6 { margin-top: var(--space-6) !important; } .mt-s8 { margin-top: var(--space-8) !important; } .mt-s12 { margin-top: var(--space-12) !important; } .mt-s16 { margin-top: var(--space-16) !important; } .mt-s24 { margin-top: var(--space-24) !important; }
.mb-s0 { margin-bottom: 0 !important; } .mb-s1 { margin-bottom: var(--space-1) !important; } .mb-s2 { margin-bottom: var(--space-2) !important; } .mb-s3 { margin-bottom: var(--space-3) !important; } .mb-s4 { margin-bottom: var(--space-4) !important; } .mb-s6 { margin-bottom: var(--space-6) !important; } .mb-s8 { margin-bottom: var(--space-8) !important; } .mb-s12 { margin-bottom: var(--space-12) !important; } .mb-s16 { margin-bottom: var(--space-16) !important; } .mb-s24 { margin-bottom: var(--space-24) !important; }
.ml-s0 { margin-left: 0 !important; } .ml-s1 { margin-left: var(--space-1) !important; } .ml-s2 { margin-left: var(--space-2) !important; } .ml-s3 { margin-left: var(--space-3) !important; } .ml-s4 { margin-left: var(--space-4) !important; } .ml-s6 { margin-left: var(--space-6) !important; } .ml-s8 { margin-left: var(--space-8) !important; } .ml-s12 { margin-left: var(--space-12) !important; } .ml-s16 { margin-left: var(--space-16) !important; } .ml-s24 { margin-left: var(--space-24) !important; }
.mr-s0 { margin-right: 0 !important; } .mr-s1 { margin-right: var(--space-1) !important; } .mr-s2 { margin-right: var(--space-2) !important; } .mr-s3 { margin-right: var(--space-3) !important; } .mr-s4 { margin-right: var(--space-4) !important; } .mr-s6 { margin-right: var(--space-6) !important; } .mr-s8 { margin-right: var(--space-8) !important; } .mr-s12 { margin-right: var(--space-12) !important; } .mr-s16 { margin-right: var(--space-16) !important; } .mr-s24 { margin-right: var(--space-24) !important; }
.pt-s0 { padding-top: 0 !important; } .pt-s1 { padding-top: var(--space-1) !important; } .pt-s2 { padding-top: var(--space-2) !important; } .pt-s3 { padding-top: var(--space-3) !important; } .pt-s4 { padding-top: var(--space-4) !important; } .pt-s6 { padding-top: var(--space-6) !important; } .pt-s8 { padding-top: var(--space-8) !important; } .pt-s12 { padding-top: var(--space-12) !important; } .pt-s16 { padding-top: var(--space-16) !important; } .pt-s24 { padding-top: var(--space-24) !important; }
.pb-s0 { padding-bottom: 0 !important; } .pb-s1 { padding-bottom: var(--space-1) !important; } .pb-s2 { padding-bottom: var(--space-2) !important; } .pb-s3 { padding-bottom: var(--space-3) !important; } .pb-s4 { padding-bottom: var(--space-4) !important; } .pb-s6 { padding-bottom: var(--space-6) !important; } .pb-s8 { padding-bottom: var(--space-8) !important; } .pb-s12 { padding-bottom: var(--space-12) !important; } .pb-s16 { padding-bottom: var(--space-16) !important; } .pb-s24 { padding-bottom: var(--space-24) !important; }
.pl-s0 { padding-left: 0 !important; } .pl-s1 { padding-left: var(--space-1) !important; } .pl-s2 { padding-left: var(--space-2) !important; } .pl-s3 { padding-left: var(--space-3) !important; } .pl-s4 { padding-left: var(--space-4) !important; } .pl-s6 { padding-left: var(--space-6) !important; } .pl-s8 { padding-left: var(--space-8) !important; } .pl-s12 { padding-left: var(--space-12) !important; } .pl-s16 { padding-left: var(--space-16) !important; } .pl-s24 { padding-left: var(--space-24) !important; }
.pr-s0 { padding-right: 0 !important; } .pr-s1 { padding-right: var(--space-1) !important; } .pr-s2 { padding-right: var(--space-2) !important; } .pr-s3 { padding-right: var(--space-3) !important; } .pr-s4 { padding-right: var(--space-4) !important; } .pr-s6 { padding-right: var(--space-6) !important; } .pr-s8 { padding-right: var(--space-8) !important; } .pr-s12 { padding-right: var(--space-12) !important; } .pr-s16 { padding-right: var(--space-16) !important; } .pr-s24 { padding-right: var(--space-24) !important; }


/* ######################################################################
   7. TYPE MAP (every page onto the four styles)
   ###################################################################### */

/* ==========================================================================
   Frnd.us type map — puts each page's text onto the four styles in
   frnd-tokens.css (Headline, Heading, Body, Small).

   Applies to every page except the style guide (which shows the styles
   itself): the page content in <main> and the pop-up windows. The header,
   footer, buttons and form fields are shared components and keep their own
   styles.

   The ids (#main-content) make these rules stronger than the template's,
   so they win without !important.
   ========================================================================== */

/* ---- Body is the default for everything in the page ------------------- */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) {
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  color: var(--body-color);
}

/* ---- 1. Headline ------------------------------------------------------- */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(h1, .lp-title, .ds-h1) {
  font-family: var(--headline-font);
  font-size: var(--headline-size);
  font-weight: var(--headline-weight);
  line-height: var(--headline-leading);
  letter-spacing: var(--headline-tracking);
  color: var(--headline-color);
  text-transform: none;
  font-style: normal;
}

/* ---- 2. Heading -------------------------------------------------------- */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(h2, h3, h4, h5, h6, .ds-h2, .ds-h3, .ds-h4, .ds-h5, .ds-h6, .lp-h2, .section-title__title, .pricing-one__price, .lp-stat strong, .lp-mapcard__body strong, .about-biz__text strong) {
  font-family: var(--heading-font);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
  color: var(--heading-color);
  text-transform: none;
  font-style: normal;
}

/* ---- 2a. Heading sizes: h2 32px, h3 24px, h4–h6 20px ------------------- */
/* :root:root outranks the Heading rule above, whose list includes ".lp-stat strong". */
:root:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(h2, .ds-h2, .lp-h2) { font-size: var(--h2-size); line-height: var(--h2-leading); }
:root:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(h4, h5, h6, .ds-h4, .ds-h5, .ds-h6) { font-size: var(--h4-size); line-height: var(--h4-leading); }
:root:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .fcard__title:is(h2, h4, h5, h6) { font-size: var(--h3-size); line-height: var(--h3-leading); }
:root:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(.t-h2, .t-h3, .t-h4).t-h2 { font-size: var(--h2-size); line-height: var(--h2-leading); }
:root:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(.t-h2, .t-h3, .t-h4).t-h3 { font-size: var(--h3-size); line-height: var(--h3-leading); }
:root:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(.t-h2, .t-h3, .t-h4).t-h4 { font-size: var(--h4-size); line-height: var(--h4-leading); }

/* ---- 3. Body ----------------------------------------------------------- */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(p, li, blockquote, dd, dt, td, th, address, label, .accordion-body, .Larger, .Large, .ds-text-md, .ds-text-lg, .ds-text-paragraph, .lp-lead, .lp-quote, .lp-choice__text, .frnd-map-status) {
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  letter-spacing: 0;
  color: var(--body-color);
  text-transform: none;
  font-style: normal;
}

/* ---- 4. Small ---------------------------------------------------------- */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(small, figcaption, time, .Small, .Smaller, .lp-tip, .fcard__label, .ds-text-xs, .ds-text-sm, .ds-label, .ds-text-muted, .ds-text-dim, .form-label, .lp-eyebrow, .section-title__tagline, .section-title__tagline-box, .lp-num, .lp-muted, .lp-form-note, .lp-form-message, .lp-img, .sol-compare__num, .sol-compare__tag, .pricing-one__tagline, .pricing-one__per, .about-hero-note, .about-biz__text span, .sol-compare__head, .sol-compare__head > span, .sol-compare__step span, .sol-compare__label, .sol-funnel__head, .sol-funnel__row h4 span, .sol-term dt, .pricing-one__points-lead .text p, .lp-issue__from, .lp-issue__date) {
  font-family: var(--small-font);
  font-size: var(--small-size);
  font-weight: var(--small-weight);
  line-height: var(--small-leading);
  letter-spacing: 0;
  color: var(--small-color);
  text-transform: none;
  font-style: normal;
}

/* ---- Inline text takes its parent's style ------------------------------
   Bold, italic and spans inside text don't make a fifth style. :where()
   keeps these rules weak, so a mapped class (a Small label inside a Heading,
   say) still wins. */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :where(p, li, blockquote, dd, h1, h2, h3, h4, h5, h6, .accordion-body, .Larger, .Large, .Small, .Smaller, .lp-tip, .lp-lead, .lp-title, .lp-h2, .lp-choice__text, .section-title__tagline-box) :where(strong, b, em, i:not([class*="icon"]):not([class*="fa"]), span:not([class*="icon"]):not([class*="fa-"])) {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :where(strong, b) { font-weight: inherit; color: inherit; }

/* The template's .White class forces a color with !important; on headings
   it should give the Heading color. */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(h1, h2, h3, h4, h5, h6).White { color: var(--heading-color) !important; }

/* Code samples are copy-and-paste components: monospace, Body size and color. */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(code, kbd, samp) { font-size: var(--body-size); color: var(--body-color); }

/* Template helper classes that force their own look */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :not(h1, h2, h3, h4, h5, h6).White { color: inherit !important; }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .text-muted { color: var(--small-color) !important; }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(.Strong, .Bold), :root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(.Strong, .Bold) * { font-weight: inherit !important; }  /* the template forces bold with !important */

/* ---- Accent tints (not extra styles) ---------------------------------- */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(h1, .lp-title) span:not([class*="icon"]):not([class*="fa-"]) {
  color: var(--accent-large);
}
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(p, li, blockquote, .lp-lead, .frnd-empty, .Strong, label) a:not(.thm-btn):not(.btn):not(.nav-link):not([role="tab"]),
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) a:not([class]):not(:has(*)),
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .Underline:not(.thm-btn):not(.btn) {
  font: inherit;
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Title links (a heading that links to its page) keep the heading color. */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(h2, h3, h4, h5, h6, .lp-h2) a:not(.thm-btn):not(.btn) { color: inherit; text-decoration: none; }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(h2, h3, h4, h5, h6, .lp-h2) a:not(.thm-btn):not(.btn):hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* ==========================================================================
   Spacing — template components on these pages, snapped to the 9-step scale.
   Section top/bottom padding uses --section-pad (96px desktop, 64px phones).
   Section titles sit 48px above their content (32px on phones).
   The page-title block keeps its own top padding: it clears the site header.
   ========================================================================== */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .free-trail { padding-top: var(--space-12); padding-bottom: var(--space-12); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .section-title__title { margin-top: var(--space-4); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .accrodion-title { padding-top: var(--space-6); padding-bottom: var(--space-6); padding-left: var(--space-8); padding-right: var(--space-6); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .accrodion-content { padding-bottom: var(--space-6); padding-left: var(--space-8); padding-right: var(--space-8); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .accrodion { margin-top: var(--space-4); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-one { padding-top: var(--space-12); padding-bottom: var(--space-12); padding-left: var(--space-16); padding-right: var(--space-8); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-one-left { margin-top: var(--space-4); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-one-img-box { padding-top: var(--space-6); padding-bottom: var(--space-6); padding-left: var(--space-6); padding-right: var(--space-6); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-two-single { padding-bottom: var(--space-12); padding-left: var(--space-12); padding-right: var(--space-12); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-two-title-box > h3 { margin-bottom: var(--space-6); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-three { padding-bottom: var(--section-pad); padding-left: var(--space-12); padding-right: var(--space-16); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-three-left { margin-top: var(--space-12); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-three-img-list > li { padding-left: var(--space-2); padding-right: var(--space-2); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-three-img-single { margin-bottom: var(--space-4); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-three-points-box { margin-top: var(--space-4); margin-bottom: var(--space-8); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-three-points > li { margin-top: var(--space-1); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .section-title { margin-bottom: var(--space-12); }

@media (max-width: 47.99em) {
  :root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .free-trail__wrap { padding-left: var(--space-6); padding-right: var(--space-6); }
  :root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-one { padding-left: var(--space-4); padding-right: var(--space-4); }
  :root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-one-right { margin-top: var(--space-12); }
  :root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-two-single { padding-left: var(--space-4); padding-right: var(--space-4); }
  :root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-three { padding-left: var(--space-4); padding-right: var(--space-4); }
  :root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .solutions-two__content-three-right { margin-top: var(--space-8); }
  :root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .section-title { margin-bottom: var(--space-8); }
}

/* Page title block: clears the site header (about 91px, --header-clear) plus 16px. */
@media (min-width: 48em) {
  :root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(.page-title__inner, .lp-section.page-title) { padding-top: calc(var(--header-clear) + var(--space-4)); }
}
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .page-title__inner { padding-bottom: var(--space-6); }

/* Badges are components, like buttons: white text on their colored fill. */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .pricing-one__popular, :root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .pricing-one__popular * { color: #FFFFFF; }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .pricing-one__popular { background: var(--accent-text); }  /* white text 5.2:1 */

/* Phase 3 components on the scale */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .carousel-caption { padding-top: var(--space-6); padding-bottom: var(--space-6); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .accordion-body { padding-left: var(--space-6); padding-right: var(--space-6); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) :is(.Larger, .Large) { padding-top: var(--space-3); padding-bottom: var(--space-3); }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .ds-badge { gap: var(--space-2); }

/* Clickable underlined text (.Underline, often with role="button") is a link: accent tint. */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .Underline:not(.thm-btn):not(.btn) { color: var(--accent-text) !important; }


/* ######################################################################
   8. BUTTON SPACING — the template's 13px / 21px button margins and
      padding moved onto the scale (12px / 24px). Containers that set
      their own button spacing still win.
   ###################################################################### */

.thm-btn { margin: var(--space-3) var(--space-6); }
.mBtn { margin-top: var(--space-3); margin-bottom: var(--space-3); padding: var(--space-3) var(--space-6); }


/* ######################################################################
   9. CARDS — the style guide's card component (Card section).
      Sand surface, 1px line, 8px corners, 24px padding. Inside: Small
      label, Heading title, Body text, optional checklist, button row.
      Layouts: .fcard (no image) · .fcard--split + --media-right / --media-left
      (two 50% columns, image floating in its column) · .fcard--top (image
      across the top). Split cards stack on phones, image first.
   ###################################################################### */

.fcard {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-6); border: 1px solid #E4DECF; border-radius: 8px;
  background: #F4F1E8; color: var(--body-color);
}
.fcard__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); flex: 1; min-width: 0; }
.fcard__label { font-family: var(--small-font); font-size: var(--small-size); font-weight: var(--small-weight); line-height: var(--small-leading); color: var(--small-color); }
.fcard__title { margin: 0; font-family: var(--heading-font); font-size: var(--heading-size); font-weight: var(--heading-weight); line-height: var(--heading-leading); letter-spacing: var(--heading-tracking); color: var(--heading-color); }
.fcard__text { margin: 0; }
.fcard__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.fcard__actions .thm-btn, .fcard__actions .mBtn, .fcard__actions .CenterButton > * { margin: 0; }
.fcard__list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fcard__list li { display: flex; gap: var(--space-2); align-items: baseline; margin: 0; }
.fcard__list li > i, .fcard__list li > .icon-check { flex: none; color: var(--accent-text); }
.fcard__list li p { margin: 0; }

.fcard--split, .fcard--top { padding: 0; gap: 0; overflow: hidden; }
.fcard__media { display: block; width: 100%; min-height: 12rem; object-fit: cover; background: #F4F1E8; }

.fcard--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.fcard--split .fcard__media {
  /* An <img> doesn't stretch on its own, so its size is set to the column minus the 24px insets. */
  box-sizing: border-box; align-self: start; width: calc(100% - var(--space-6)); height: calc(100% - 2 * var(--space-6));
  border: 1px solid #E4DECF; border-radius: 4px;
}
.fcard--media-right .fcard__media { margin: var(--space-6) var(--space-6) var(--space-6) 0; }
.fcard--media-left .fcard__media { order: -1; margin: var(--space-6) 0 var(--space-6) var(--space-6); }
.fcard--top .fcard__media { aspect-ratio: 16 / 9; min-height: 0; height: auto; }

/* A media slot holding a small photo grid instead of one image. */
.fcard__media--grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: var(--space-2); background: #FFFFFF; }
.fcard__media--grid img { width: 100%; height: 100%; min-height: 6rem; object-fit: cover; border-radius: 4px; display: block; }

/* Centered card: for a call to action. Text and buttons centered, text kept to a readable width. */
.fcard--center { align-items: center; text-align: center; padding: var(--space-12) var(--space-6); }
.fcard--center .fcard__text { max-width: 40rem; }
.fcard--center .fcard__actions { justify-content: center; }

/* Empty state in the marker list: no wider than a marker card (.ds-card-marker-public, max 400px), centered. */
#MarkerDisplayHTML .fcard.frnd-empty { width: 100%; max-width: 25rem; margin-inline: auto; }
/* The map status line takes its own full-width row above the cards, so it never pushes a card off center. */
#MarkerDisplayHTML > #mapStatus { flex: 0 0 100%; }
/* With no message, the status line takes no space at all. */
#mapStatus:empty { display: none; }

/* A row of cards with equal heights. */
.fcard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: var(--space-6); }
.fcard-stack { display: flex; flex-direction: column; gap: var(--space-8); }

@media (max-width: 47.99em) {
  .fcard--split { grid-template-columns: minmax(0, 1fr); }
  .fcard--split .fcard__media { order: -1; aspect-ratio: 16 / 9; width: calc(100% - 2 * var(--space-6)); height: auto; min-height: 0; margin: var(--space-6) var(--space-6) 0; }
  .fcard--split .fcard__media--grid { aspect-ratio: auto; }
}


/* Fade in all H1 headings on page load (600ms); spans inside H1 fade over 2s */
@keyframes frnd-h1-fade-in { from { opacity: 0; } to { opacity: 1; } }
h1 { animation: frnd-h1-fade-in 600ms ease-out both; }
h1 span { animation: frnd-h1-fade-in 2000ms ease-out both; }
@media (prefers-reduced-motion: reduce) { h1, h1 span { animation: none; } }

/* Homepage intro line (#home-p) uses the Headline text size */
:root body.page-home #home-p { font-size: var(--headline-size); line-height: var(--headline-leading); }

/* Primary .thm-btn: lighter background on hover (white text 6.3:1) */
.thm-btn:not(.thm-btn-gray):not(.thm-btn-outline):not(.thm-btn-lavender):not(.pricing-one__btn):hover {
	background: #2E6684;
	border-color: #2E6684;
}

/* Gray button: no glow around it on hover (template .thm-btn:hover adds one) */
.thm-btn.thm-btn-gray:hover { box-shadow: none; }

/* Top-nav dropdowns (e.g. Activities): open 12px below the link text instead of below its 30px bottom padding */
.main-header .main-menu .navigation > li > ul { margin-top: calc(var(--space-3) - 1.875rem); }

/* Help page FAQ: question titles are <p> (were <h4>). Keep the heading look and the +/- icon. */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .faq-one-accrodion .accrodion-title p {
  margin: 0;
  position: relative;
  font-family: var(--heading-font);
  font-size: var(--heading-size);
  font-weight: var(--heading-weight);
  line-height: var(--heading-leading);
  letter-spacing: var(--heading-tracking);
  color: var(--heading-color);
  transition: all 500ms ease;
}
.faq-one__inner .faq-one-accrodion .accrodion-title p::before {
  content: "\e901";
  font-family: 'icomoon' !important;
  font-size: 0.8125rem;
  color: var(--thm-gray);
  position: absolute;
  top: 50%;
  right: 0;
  line-height: 0.9375rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
  transition: all 500ms ease;
  width: 21px;
  height: 21px;
}
.faq-one__inner .faq-one-accrodion .accrodion.active .accrodion-title p::before { color: var(--thm-white); }

/* Help page + Solutions (#sol-faq) FAQ accordions — style guide "Accordion" (section 06):
   stacked flush in a sand panel, 1px divider rules, no radius or gaps,
   muted closed headers with ▾, open header with orange ▴. */
:root body :is(.page-help #main-content, #sol-faq) .faq-one-accrodion { background: #F4F1E8; }
:root body :is(.page-help #main-content, #sol-faq) .faq-one-accrodion .accrodion {
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(38, 38, 38, 0.22);
  border-radius: 0;
  box-shadow: none;
}
:root body :is(.page-help #main-content, #sol-faq) .faq-one-accrodion .accrodion:last-child { border-bottom: 0; }
:root body :is(.page-help #main-content, #sol-faq) .faq-one-accrodion .accrodion + .accrodion { margin-top: 0; }
:root body :is(.page-help #main-content, #sol-faq) .faq-one-accrodion .accrodion-title { padding: var(--space-3) var(--space-4); }
:root body :is(.page-help #main-content, #sol-faq) .faq-one-accrodion .accrodion-title :is(p, h4) {
  padding-right: var(--space-8);
  font-size: 0.9375rem;
  color: #645C50;
}
:root body :is(.page-help #main-content, #sol-faq) .faq-one-accrodion .accrodion.active .accrodion-title :is(p, h4) { color: var(--heading-color); }
:root body :is(.page-help #main-content, #sol-faq) .faq-one-accrodion .accrodion-title :is(p, h4)::before {
  content: "\25BE";
  font-family: inherit !important;
  font-size: 1rem;
  color: #A09789;
}
:root body :is(.page-help #main-content, #sol-faq) .faq-one-accrodion .accrodion.active .accrodion-title :is(p, h4)::before { content: "\25B4"; color: #262626; }
:root body :is(.page-help #main-content, #sol-faq) .faq-one-accrodion .accrodion-content { padding: 0 var(--space-4) var(--space-4); }
:root body :is(.page-help #main-content, #sol-faq) .faq-one-accrodion .accrodion-content p { font-size: 0.875rem; color: #484136; }

/* All form placeholders: lighter gray (#767676 = 4.5:1 on white, the lightest that still passes WCAG AA) */
:root input::placeholder,
:root textarea::placeholder { color: #767676 !important; opacity: 1; }

/* Help page FAQ: each stacked accordion group gets the same frame as the .card.surface Contact Us card */
:root body :is(.page-help #main-content, #sol-faq) .faq-one-accrodion {
  border: 1px solid rgba(38, 38, 38, 0.06);
  border-radius: var(--bs-card-border-radius, 0.375rem);
  box-shadow: inset -1px -1px rgba(38, 38, 38, 0.1),
              inset 1px 1px rgba(38, 38, 38, 0.15),
              0 4px 16px -8px rgba(38, 38, 38, 0.115);
  overflow: hidden;
}

/* Solutions comparison title bar: white text on the dark blue bar (beats the Small text-style color) */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .sol-compare__head > :first-child { color: #FFFFFF; }

/* Solutions comparison column labels (h4): white background, text in the column icon color */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .sol-compare__head > .sol-compare__head-without { background: #FFFFFF; color: #B3261E; margin: 0; } /* same red as the X icon */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .sol-compare__head > .sol-compare__head-with { background: #FFFFFF; color: #1F6B45; margin: 0; } /* same green as the check icon */

/* Solutions comparison cells: white, with a red X (Without) or green check (With) on each label (all steps) */
:root .sol-compare__cell--without,
:root .sol-compare__cell--with { background: #FFFFFF; }
/* Red X / green check before each cell's text (Font Awesome 6, loaded in the layout).
   On the paragraph, not the label: .sol-compare__label is hidden on desktop. */
:root .sol-compare__cell--without > p::before,
:root .sol-compare__cell--with > p::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  font-size: 2em;           /* twice the text size */
  line-height: 1;
  vertical-align: middle;
  margin-right: var(--space-2);
}
:root .sol-compare__cell--without > p::before { content: "\f00d"; color: #B3261E; }
:root .sol-compare__cell--with > p::before { content: "\f00c"; color: #1F6B45; }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .sol-compare__cell--without .sol-compare__label { color: #B3261E; }
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .sol-compare__cell--with .sol-compare__label { color: #1F6B45; }

/* ==========================================================================
   Error message — mirrors the Alert component (style guide, section 07):
   tinted fill, 3px lead rule on the left, square corners, 14px text.
   Red ramp instead of the orange accent. Text #7A1712 on #FDECEA = 9.4:1.
   Usage: <p class="frnd-error" role="alert"><strong class="frnd-error__title">Payment failed.</strong> Check your card details.</p>
   Hidden while empty, so it can sit in the page and be filled by script.
   ========================================================================== */
:root {
  --error-bg: #FDECEA;
  --error-rule: #B3261E;
  --error-text: #7A1712;
}
.frnd-error,
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .frnd-error {
  display: block;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-left: 3px solid var(--error-rule);
  border-radius: 0;
  background: var(--error-bg);
  color: var(--error-text);
  font-family: var(--body-font, inherit);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}
.frnd-error:empty { display: none; }
.frnd-error__title { font-family: var(--heading-font); font-weight: 600; color: inherit; }
.frnd-error a { color: inherit; text-decoration: underline; }

/* Form error placement (public/js/form-errors.js): directly above the submit button,
   full width of the space there, text centered. Works inside flex rows and columns. */
.frnd-error.frnd-form-error,
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .frnd-error.frnd-form-error {
  width: 100%;
  flex: 0 0 100%;
  align-self: stretch;
  grid-column: 1 / -1;
  text-align: center;
  margin: 0 0 var(--space-3);
}
.frnd-error.frnd-form-error:empty { display: none; }
/* Form errors are brief: fade in over 300ms, stay for 3s, fade out over 300ms (3.6s total).
   public/js/form-errors.js removes the box when the animation would end — keep both numbers in step. */
@keyframes frnd-form-error-fade {
  0%       { opacity: 0; }
  8.3333%  { opacity: 1; }   /* 300ms / 3600ms */
  91.6667% { opacity: 1; }   /* 300ms + 3000ms */
  100%     { opacity: 0; }
}
.frnd-error.frnd-form-error { animation: frnd-form-error-fade 3.6s linear both; }
.form-control.is-invalid, .form-select.is-invalid, input.is-invalid, textarea.is-invalid, select.is-invalid { border-color: var(--error-rule, #B3261E) !important; }


/* ==========================================================================
   BUTTON LEVELS — the four button styles from the style guide (section "Buttons").
   Every button on the site renders as exactly one of these:
     High notice  .btn-high      orange  #D73703  the one important action (Publish, Pay)
     Standard     .btn-standard  Shallows #2E6684 form submits (Submit, Save, Send)
     General CTA  .btn-deep      Deep Water #1B4A63 general actions / calls to action (Sign in, Get started)
     Muted        .btn-muted     sand #F4F1E8     secondary actions (Cancel, Reset, Previous)
   Older template classes are mapped onto a level below, so nothing renders off-palette
   (including buttons created by scripts). Order matters: later groups win, and an explicit
   level class on a button (btn-high / btn-standard / btn-deep / btn-muted) wins over its old class.
   !important is used on purpose: the template's button rules use very long selectors.
   ========================================================================== */
:root {
  --btn-high: #D73703; --btn-high-hover: #C1421C; --btn-high-active: #A72801; --btn-high-rgb: 215, 55, 3;
  --btn-standard: #2E6684; --btn-standard-hover: #1B4A63; --btn-standard-active: #164058; --btn-standard-rgb: 46, 102, 132;
  --btn-deep: #1B4A63; --btn-deep-hover: #0E3F58; --btn-deep-active: #00354C; --btn-deep-rgb: 27, 74, 99;
  --btn-muted: #F4F1E8; --btn-muted-border: #E4DECF; --btn-muted-hover: #E4DECF; --btn-muted-active: #D3CBB8; --btn-muted-text: #262626;
}

/* General CTA (Deep Water) — also the default for plain .thm-btn */
:root .btn-deep,
:root .thm-btn,
:root .thm-btn-orange,
:root .mBtn--green,
:root .pricing-one__btn { background: var(--btn-deep) !important; border: 1px solid var(--btn-deep) !important; color: #FFFFFF !important; }
:root .btn-deep:hover,
:root .thm-btn:hover,
:root .thm-btn-orange:hover,
:root .mBtn--green:hover,
:root .pricing-one__btn:hover { background: var(--btn-deep-hover) !important; border-color: var(--btn-deep-hover) !important; color: #FFFFFF !important; box-shadow: 0 8px 20px rgba(var(--btn-deep-rgb), 0.25) !important; }
:root .btn-deep:active,
:root .thm-btn:active,
:root .thm-btn-orange:active,
:root .mBtn--green:active,
:root .pricing-one__btn:active { background: var(--btn-deep-active) !important; border-color: var(--btn-deep-active) !important; }

/* Standard (Shallows) — form submits */
:root .btn-standard,
:root .thm-btn-lavender,
:root .ds-btn-primary,
:root .ds-btn-success,
:root .mBtn--lavendar,
:root .footer-widget__btn,
:root .btn-primary { background: var(--btn-standard) !important; border: 1px solid var(--btn-standard) !important; color: #FFFFFF !important; }
:root .btn-standard:hover,
:root .thm-btn-lavender:hover,
:root .ds-btn-primary:hover,
:root .ds-btn-success:hover,
:root .mBtn--lavendar:hover,
:root .footer-widget__btn:hover,
:root .btn-primary:hover { background: var(--btn-standard-hover) !important; border-color: var(--btn-standard-hover) !important; color: #FFFFFF !important; box-shadow: 0 8px 20px rgba(var(--btn-standard-rgb), 0.25) !important; }
:root .btn-standard:active,
:root .thm-btn-lavender:active,
:root .ds-btn-primary:active,
:root .ds-btn-success:active,
:root .mBtn--lavendar:active,
:root .footer-widget__btn:active,
:root .btn-primary:active { background: var(--btn-standard-active) !important; border-color: var(--btn-standard-active) !important; }

/* Muted (sand) — secondary actions */
:root .btn-muted,
:root .thm-btn-gray,
:root .thm-btn-outline,
:root .ds-btn-secondary,
:root .ds-btn-ghost,
:root .ds-btn:not(.ds-btn-primary):not(.ds-btn-success):not(.btn-high):not(.btn-standard):not(.btn-deep) { background: var(--btn-muted) !important; border: 1px solid var(--btn-muted-border) !important; color: var(--btn-muted-text) !important; box-shadow: none !important; }
:root .btn-muted:hover,
:root .thm-btn-gray:hover,
:root .thm-btn-outline:hover,
:root .ds-btn-secondary:hover,
:root .ds-btn-ghost:hover,
:root .ds-btn:not(.ds-btn-primary):not(.ds-btn-success):not(.btn-high):not(.btn-standard):not(.btn-deep):hover { background: var(--btn-muted-hover) !important; border-color: var(--btn-muted-active) !important; color: var(--btn-muted-text) !important; box-shadow: none !important; }
:root .btn-muted:active,
:root .thm-btn-gray:active,
:root .thm-btn-outline:active,
:root .ds-btn-secondary:active,
:root .ds-btn-ghost:active,
:root .ds-btn:not(.ds-btn-primary):not(.ds-btn-success):not(.btn-high):not(.btn-standard):not(.btn-deep):active { background: var(--btn-muted-active) !important; border-color: var(--btn-muted-active) !important; }

/* High notice (orange) — only where a button carries .btn-high */
:root .btn-high { background: var(--btn-high) !important; border: 1px solid var(--btn-high) !important; color: #FFFFFF !important; }
:root .btn-high:hover { background: var(--btn-high-hover) !important; border-color: var(--btn-high-hover) !important; color: #FFFFFF !important; box-shadow: 0 8px 20px rgba(var(--btn-high-rgb), 0.25) !important; }
:root .btn-high:active { background: var(--btn-high-active) !important; border-color: var(--btn-high-active) !important; }

/* Explicit level classes beat the old class they sit next to */
:root .btn-deep.btn-deep { background: var(--btn-deep) !important; border-color: var(--btn-deep) !important; color: #FFFFFF !important; }
:root .btn-deep.btn-deep:hover { background: var(--btn-deep-hover) !important; border-color: var(--btn-deep-hover) !important; color: #FFFFFF !important; }
:root .btn-standard.btn-standard { background: var(--btn-standard) !important; border-color: var(--btn-standard) !important; color: #FFFFFF !important; }
:root .btn-standard.btn-standard:hover { background: var(--btn-standard-hover) !important; border-color: var(--btn-standard-hover) !important; color: #FFFFFF !important; }
:root .btn-muted.btn-muted { background: var(--btn-muted) !important; border-color: var(--btn-muted-border) !important; color: var(--btn-muted-text) !important; box-shadow: none !important; }
:root .btn-muted.btn-muted:hover { background: var(--btn-muted-hover) !important; border-color: var(--btn-muted-active) !important; }
:root .btn-high.btn-high { background: var(--btn-high) !important; border-color: var(--btn-high) !important; color: #FFFFFF !important; }
:root .btn-high.btn-high:hover { background: var(--btn-high-hover) !important; border-color: var(--btn-high-hover) !important; }

/* Icons inherit the button's text color; no lift or template glow; disabled is faded */
:root :is(.btn-high, .btn-standard, .btn-deep, .btn-muted, .thm-btn, .ds-btn, .mBtn, .footer-widget__btn, .btn-primary) i { color: inherit !important; }
:root :is(.btn-high, .btn-standard, .btn-deep, .btn-muted, .thm-btn, .ds-btn, .mBtn, .btn-primary):hover { transform: none !important; }
:root :is(.btn-high, .btn-standard, .btn-deep, .btn-muted, .thm-btn, .ds-btn, .mBtn, .footer-widget__btn, .btn-primary):is(:disabled, [aria-disabled="true"]) { opacity: 0.55; cursor: not-allowed; box-shadow: none !important; }

/* Header sits on the dark frame: its secondary (muted) buttons keep the outlined-on-dark look */
:root .main-header :is(.thm-btn-gray, .btn-muted) { background: transparent !important; border-color: #BFDDF0 !important; color: var(--frame-text) !important; }
:root .main-header :is(.thm-btn-gray, .btn-muted):hover { background: rgba(255, 255, 255, 0.12) !important; border-color: #FFFFFF !important; color: var(--frame-text) !important; }

/* Sign In / Sign Up / Forgot Password modals: no gap under the title block (was 3.25rem in module-css/login.css) */
.login-page__top { margin-bottom: 0; }
/* "Continue with Google" box in the Sign In / Sign Up modals (also the account page's Google button): space below */
.login-page__sign-option-box { margin-bottom: 1rem; }

/* Sign In / Sign Up tabs in the account dialog */
.auth-tabs { display: flex; justify-content: center; gap: 0; margin: 0 auto var(--space-6); max-width: 22rem; border-bottom: 1px solid #E4DECF; }
.auth-tabs__tab { flex: 1 1 50%; padding: var(--space-3) var(--space-4); background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
  font-family: var(--heading-font); font-weight: 600; font-size: 1rem; color: #645C50; cursor: pointer; }
.auth-tabs__tab:hover { color: #262626; }
.auth-tabs__tab.is-active { color: #1B4A63; border-bottom-color: #1B4A63; }
.auth-tabs__tab:focus-visible { outline: 2px solid #1B4A63; outline-offset: 2px; }

/* Create / Edit Marker: no margin under each card's H4 title */
:root body:not(.page-styleguide) #main-content :is(#Marker_FormID, #card-add-locations) h4 { margin-bottom: 0; }

/* .section-subtitle (Create Marker option descriptions, etc.): Small size; the lead-in <strong class="White"> is bold */
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) p.section-subtitle,
.section-subtitle { font-size: var(--small-size); line-height: var(--small-leading); }
/* Lead-in <strong> inside .section-subtitle is bold. Must outrank the type-map rule that makes strong/b inherit weight. */
.section-subtitle strong,
:root body:not(.page-styleguide) :is(#main-content, .InterstitialContentCSS) .section-subtitle strong { font-weight: 700; }

/* Create Marker "Here": static map of the current location */
.here-map { border-radius: var(--bs-card-border-radius, 0.375rem); overflow: hidden; border: 1px solid #E4DECF; background: #F4F1E8; }
.here-map__img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 260; object-fit: cover; }
/* Location status under the map, e.g. "(25.79076, -80.13000)" or "(Locating you…)" */
#MessageGPS:not(:empty)::before { content: "("; }
#MessageGPS:not(:empty)::after { content: ")"; }

/* Create Marker Step 5: "Visits remain valid for (days)" label and field on one line */
.visit-window-inline:not(.Hide) { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.visit-window-inline .form-label { margin: 0; }
.visit-window-inline .form-control { width: 6rem; flex: 0 0 6rem; }

/* Long-format date fields ("October 19, 2026"), public/js/pretty-dates.js */
.pretty-date { position: relative; }
.pretty-date__display { cursor: pointer; padding-right: 2.5rem; background-color: #FFFFFF; }
.pretty-date__display[readonly] { background-color: #FFFFFF; }
.pretty-date__native { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.pretty-date__clear { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: transparent; color: #645C50; font-size: 1.125rem; line-height: 1; cursor: pointer; }
.pretty-date__clear:hover { background: #F4F1E8; color: #262626; }

/* Marker details page: no space under the marker title */
:root body:not(.page-styleguide) #main-content #marker-h1 { margin-bottom: 0; }

/* Marker details: title and check-in button take the marker type's color
   (text-safe shades: Location #1F6B45 6.5:1, Event #8656B7 5.2:1, Promotion #C1421C 5.2:1).
   The button overrides its Standard level on purpose; hover darkens one step. */
:root body:not(.page-styleguide) #main-content #marker-h1.marker-type-location { color: #1F6B45; }
:root body:not(.page-styleguide) #main-content #marker-h1.marker-type-event { color: #8656B7; }
:root body:not(.page-styleguide) #main-content #marker-h1.marker-type-promotion { color: #C1421C; }
:root #btn-marker-participation-submit.marker-type-location { background: #1F6B45 !important; border-color: #1F6B45 !important; }
:root #btn-marker-participation-submit.marker-type-location:hover { background: #185A39 !important; border-color: #185A39 !important; box-shadow: none !important; }
:root #btn-marker-participation-submit.marker-type-event { background: #8656B7 !important; border-color: #8656B7 !important; }
:root #btn-marker-participation-submit.marker-type-event:hover { background: #6E4399 !important; border-color: #6E4399 !important; box-shadow: none !important; }
:root #btn-marker-participation-submit.marker-type-promotion { background: #C1421C !important; border-color: #C1421C !important; }
:root #btn-marker-participation-submit.marker-type-promotion:hover { background: #A33515 !important; border-color: #A33515 !important; box-shadow: none !important; }

/* Tab content (marker details tabs, etc.): space above only (was var(--ds-space-6) 0 in ds-theme.css) */
.ds-tab-content { padding: var(--ds-space-4) 0 0 0; }