/* ============================================================================
   Zeal.Maui public site — compiled styles (mirrors Zeal.Blazor.Web home page).
   Hand-authored CSS (no SCSS pipeline here yet); .scss sources kept alongside.
   ========================================================================== */

/*#region FONTS*/
@font-face {
	font-family: "WhitneySSmBold";
	src: url("/css/fonts/Whitney-Bold.woff2") format("woff2"), url("/css/fonts/Whitney-Bold.woff") format("woff");
	font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "Font Awesome 6 Pro";
	font-style: normal; font-weight: 900;
	src: url("/css/fonts/fa-solid-900.woff2") format("woff2");
}
.fi { font-family: "Font Awesome 6 Pro"; font-weight: 900; font-style: normal; line-height: 1; }
.fi-bars::before { content: "\f0c9"; }
.fi-expand::before { content: "\f065"; }
.fi-compress::before { content: "\f066"; }
.fi-phone::before { content: "\f095"; }
.fi-envelope::before { content: "\f0e0"; }
.fi-info::before { content: "\f05a"; }
.fi-lock::before { content: "\f023"; }
.fi-user::before { content: "\f007"; }
.fi-clock::before { content: "\f017"; }
.fi-globe::before { content: "\f0ac"; }
.fi-server::before { content: "\f233"; }
.fi-xmark::before { content: "\f057"; }
.fi-dollar::before { content: "\f155"; }
.fi-atom::before { content: "\f5d2"; }
.fi-chart::before { content: "\f1fe"; }
.fi-dish::before { content: "\f7c0"; }
.fi-users::before { content: "\f0c0"; }
.fi-grad::before { content: "\f19d"; }
.fi-check::before { content: "\f560"; }
.fi-file::before { content: "\f15c"; }
/*#endregion FONTS*/

/*#region BASE*/
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
	font-family: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background-color: #333333; color: #ffffff;
	/* ⚠️ NO -webkit-font-smoothing: antialiased — THIS WAS THE FUZZY TEXT (Vince, 2026-08-06).
	   On Windows it switches Chrome/Edge from ClearType SUBPIXEL antialiasing to GREYSCALE, which throws away
	   two thirds of the horizontal resolution the OS uses to draw stems. Every glyph on every page went soft.
	   It reads as a "smoothing" improvement and is one on a Mac; on Windows it is strictly a downgrade.
	   zt-ui.css already refused it for the same reason — this line was overriding that decision site-wide. */
}
a { text-decoration: none; color: inherit; }
.page { padding-bottom: 60px; } /* room for the fixed bottom navbar */
/*#endregion BASE*/

/*#region HTML ELEMENTS (sections)*/
h2 { font-family: WhitneySSmBold; font-size: 32pt; margin: 0 0 .5rem 0; }
h2 .fi, h2 .zt-fa { color: gold; margin-right: .5rem; }
ul { list-style: none; padding: 0 0 0 15px; margin: 0; text-align: left; }
ul li { position: relative; padding-left: 1.6em; font-size: 17pt; margin: .35em 0; }
ul li::before { content: "\f058"; font-family: "Font Awesome 6 Pro"; font-weight: 900; position: absolute; left: 0; top: .15em; color: gold; }

@media (max-width: 1024px) { h2 { font-size: 19pt; } ul li { font-size: 13pt; } }
@media (max-width: 640px)  { h2 { font-size: 18pt; } ul li { font-size: 11pt; } }
/*#endregion*/

/*#region SECTIONS*/
.section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.section-content { position: relative; z-index: 2; display: flex; width: 100%; height: 100%; }
.section-content-col { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 4rem; text-align: left; overflow: hidden; }
.section-content-col img { max-width: 100%; max-height: 95%; height: auto; }

@media (max-width: 1024px) { .section-content-col { padding: 3rem; } }
@media (max-width: 640px) {
	.section { min-height: auto; }
	.section-content { flex-direction: column; }
	.section-content-col { width: 100%; flex: none; padding: 1rem 2rem; }
}

.dark-section { background-color: #333333; color: #fff; }
.tiffany-section { background-color: rgb(241, 250, 255); color: #222; }
.white-section { background-color: #fafafa; color: #222; }
.connected-section { background: linear-gradient(135deg,#1b1f2a 0%,#2a3140 45%,#1d2733 100%); color: #fff; }
.documents-section { background: linear-gradient(135deg,#12212a 0%,#1c3340 45%,#14242e 100%); color: #fff; }
.welcome-section { background: linear-gradient(135deg,#211c16 0%,#3a2f20 45%,#1f1d18 100%); color: #fff; margin-bottom: 60px; }
.billing-section { background: linear-gradient(135deg,#14182a 0%,#232c4a 45%,#161b2e 100%); color: #fff; }
.communications-section { background: linear-gradient(135deg,#1b1726 0%,#2d2442 45%,#191a2e 100%); color: #fff; }
.programs-section { background: linear-gradient(135deg,#102220 0%,#1b3a32 45%,#122420 100%); color: #fff; }

/* reverse columns on wide screens */
.reverse-section .section-content { flex-direction: row-reverse; }
@media (max-width: 640px) { .reverse-section .section-content { flex-direction: column; } }
/*#endregion*/

/*#region HERO*/
.hero-section .section-content-col .logo { max-width: 80%; height: auto; }
.hero-section .hero-intro { margin-top: 15px; padding-left: 25px; font-weight: 700; font-size: 16pt; }
/* STACK THE PRIMARY (SCHEDULE A DEMO) ROW ABOVE THE SECONDARY (CALL/CONTACT) ROW — the legacy home's
   hierarchy. INLINE-FLEX shrinks the column to the wider (secondary) row so the primary button can stretch
   to exactly the combined width of Call us + Contact us. */
.hero-section .hero-buttons { padding-left: 25px; margin-top: 1rem; display: inline-flex; flex-direction: column; gap: 12px; align-items: stretch; }
.hero-buttons-primary { display: flex; }
.hero-buttons-primary .ztbtn { width: 100%; }
/* CALL US + CONTACT US each take HALF the row, so the two rows are always the SAME total width — the
   production hierarchy (the big Schedule button spans exactly the pair below it). */
.hero-buttons-secondary { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-buttons-secondary .ztbtn { flex: 1 1 0; }

/* CALL ZEAL MODAL — the legacy proportions: roomier body text and a clear gap between the question and
   the Cancel/Call row (the default modal rhythm sat them too tight for a one-line confirm). */
#CallZealModal .zt-modal-body { padding: 1.35rem 1.35rem 0.5rem; font-size: 1.05rem; }
#CallZealModal .zt-modal-footer { padding: 1rem 1.35rem 1.35rem; }
/* THE LEGACY'S fa-beat PULSE on the Schedule-a-Demo calendar icon (FA's animation class isn't in our subset,
   so the equivalent keyframes live here). Honors reduced-motion via the shared media query below. */
@keyframes zt-beat { 0%, 90%, 100% { transform: scale(1); } 45% { transform: scale(1.25); } }
.hero-buttons-primary .ztbtn .zt-fa { animation: zt-beat 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero-buttons-primary .ztbtn .zt-fa { animation: none !important; } }
@media (max-width: 640px) { .hero-section .hero-intro, .hero-section .hero-buttons { padding-left: 15px; } }
/*#endregion*/

/*#region WAVES*/
.zt-waves { position: absolute; inset: 0; width: 100%; height: 39vh; overflow: hidden; z-index: 0; pointer-events: none; clip-path: polygon(0 0,100% 0,100% 40%,0 75%); box-shadow: 0 12px 25px rgba(0,0,0,.25); opacity: .3; }
.wave-layer { position: absolute; inset: 0; top: -26vh; mix-blend-mode: screen; filter: saturate(160%) contrast(125%); }
.wave-layer.w-gold-1 { opacity: .99; } .wave-layer.w-gray-1 { opacity: .60; }
.wave-layer.w-gold-2 { opacity: .75; } .wave-layer.w-gray-2 { opacity: .45; }
.wave-svg { position: absolute; top: 0; left: 0; width: 330%; height: 90%; }
@keyframes wave-slide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.w-gold-1 .wave-svg { animation: wave-slide 33s linear infinite; }
.w-gray-1 .wave-svg { animation: wave-slide 22s linear infinite reverse; }
.w-gold-2 .wave-svg { animation: wave-slide 14s linear infinite; }
.w-gray-2 .wave-svg { animation: wave-slide 18s linear infinite reverse; }
@media (prefers-reduced-motion: reduce) { .wave-svg { animation: none !important; } }
/*#endregion*/

/*#region BUTTONS*/
.zt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; flex: 0 0 auto; white-space: nowrap; border: none; border-radius: 8px; padding: .9rem 1.6rem; font-size: 15pt; font-weight: 700; cursor: pointer; color: #fff; }
.zt-btn-success { background-color: #2d602d; }
.zt-btn-success:hover { background-color: #357a35; }
.zt-btn .fi { font-size: 1.3em; }
/*#endregion*/

/*#region NAVBAR (fixed bottom)*/
.zt-navbar { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; background: #333333; display: flex; align-items: center; padding: 0 16px; z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,.4); }
.zt-navbar .menu-btn { color: #fff; font-size: 26px; cursor: pointer; padding: 6px 12px 6px 0; }
.zt-navbar .zeal-logo img { height: 34px; }
.zt-navbar .spacer { flex: 1; }
.zt-navbar .min-max { color: #fff; font-size: 22px; cursor: pointer; padding: 6px; background: none; border: none; }
/*#endregion*/

/*#region SLIDE-OUT MENU (CSS checkbox toggle)*/
#menuToggle, #infoToggle { position: absolute; opacity: 0; pointer-events: none; }
.navmenu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 1500; display: none; }
#menuToggle:checked ~ .navmenu-overlay { display: block; }
.navmenu-panel { position: fixed; top: 20px; left: 20px; z-index: 1600; display: none; }
#menuToggle:checked ~ .navmenu-panel { display: block; }
/* matches ZtNavGroup/ZtNavButton: translucent 68px tiles, no card panel */
.nav-group { margin: 20px 0 0 0; }
.nav-group-title { color: #fff; font-weight: 600; font-size: 10pt; display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.nav-group-buttons { display: grid; grid-auto-flow: column; gap: 10px; }
.nav-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 68px; height: 68px; background: rgba(255,255,255,0.20); opacity: .90; border-radius: 3px; color: #fff; cursor: pointer; border: none; text-decoration: none; transition: all .2s ease; }
.nav-btn .fi { font-size: 14pt; }
.nav-btn .nav-label { font-size: 7pt; font-weight: 500; }
.nav-btn:hover { opacity: 1; color: #ffcb04; }
.nav-btn:hover .fi { color: #ffcb04; transform: scale(1.2); }
/*#endregion*/

/*#region INFO MODAL (CSS checkbox toggle)*/
.info-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 2000; display: none; align-items: flex-start; justify-content: center; }
#infoToggle:checked ~ .info-modal-backdrop { display: flex; }
.info-modal { background: #fff; color: #222; width: 620px; max-width: 92vw; margin-top: 90px; border-radius: 10px; overflow: hidden; box-shadow: 0 16px 50px rgba(0,0,0,.5); }
.info-modal-header { background: #ffcb04; color: #222; display: flex; align-items: center; gap: 12px; padding: 16px 20px; font-size: 22px; font-weight: 700; }
.info-modal-header .fi { font-size: 22px; }
.info-modal-header .info-close { margin-left: auto; cursor: pointer; color: #222; font-size: 24px; }
.info-modal-body { padding: 18px 22px; }
.info-row { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 16px; color: #333; }
.info-row .fi { color: #555; width: 22px; text-align: center; }
.info-row img { height: 18px; }
/*#endregion*/

/*#region CONTENT PAGES (WaveLayout: waves + centered white card)*/
.fi-sms::before { content: "\f7cd"; }
.fi-person-q::before { content: "\e542"; }
.fi-database::before { content: "\f1c0"; }

/* WAVES BACKDROP (distinct class so it doesn't clash with the hero .zt-waves) */
.wl-waves { position: fixed; top: -78vh; left: 0; width: 100%; height: 160vh; z-index: 0; pointer-events: none; overflow: hidden; clip-path: polygon(0 0,100% 0,100% 75%,0 90%); box-shadow: 0 12px 25px rgba(0,0,0,.25); }
.wl-layer { position: absolute; inset: 0; mix-blend-mode: screen; filter: saturate(115%) contrast(105%); }
.wl-layer.w-gold-1 { opacity: .9; } .wl-layer.w-gray-1 { opacity: .6; }
.wl-layer.w-gold-2 { opacity: .55; } .wl-layer.w-gray-2 { opacity: .45; }

/* PAGE + CENTERED WHITE CARD */
.zeal-content-page { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 7vh 0 90px; }
.zeal-content-card { position: relative; z-index: 2; width: min(92vw, 560px); background: #fff; color: #222; border: 1px solid #999; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.45); padding: clamp(20px,4vw,34px); }
/* THE LOGO LINES UP WITH THE SECTION ICONS BENEATH IT, not with the card's own edge. The sections inside this
   card are ZtPageSections, and each one insets its icon by its own 1.5em left padding — so a logo flush to the
   card padding sat ~24px to the LEFT of every icon below it and read as misaligned. Matching that 1.5em puts the
   logo on the same vertical line the whole page is built on. Keep the two values the same: if
   .zt-page-section's horizontal padding ever changes, this follows it. */
.zeal-card-logo { margin-bottom: 1.2rem; padding-left: 1.5em; }
.zeal-card-logo img { height: 48px; }

/* DOC SECTIONS INSIDE THE WHITE CARD (dark text, gold icons) — public legal pages only.
   Renamed from .zt-page-section to avoid colliding with the RCL ZtPageSection component class. */
.zt-doc-section { padding: 14px 0; border-bottom: 1px solid #ececec; }
.zt-doc-section:last-child { border-bottom: none; padding-bottom: 0; }
.zt-doc-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: WhitneySSmBold; font-size: 14pt; color: #222; }
.zt-doc-section h3 .fi { color: #ebb41f; font-size: 15pt; }
.zt-doc-section p { margin: 0; font-size: 11.5pt; line-height: 1.5; color: #444; }
.zt-doc-section a { color: #b8860b; text-decoration: underline; }
/*#endregion*/

/*#region 404 / NOT FOUND*/
.fi-home::before { content: "\f015"; }
.zt-404 { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem 90px; gap: .6rem; position: relative; overflow: hidden; }
.zt-404::before { content: ""; position: absolute; top: 42%; left: 50%; width: 80vmax; height: 80vmax; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(235,180,31,.13) 0%, rgba(235,180,31,0) 60%); pointer-events: none; }
.zt-404 > * { position: relative; z-index: 1; }
.zt-404-logo { width: min(70%, 300px); margin-bottom: .4rem; }
.zt-404-code { font-family: WhitneySSmBold; font-size: clamp(64pt, 18vw, 110pt); line-height: 1; color: #ffcb04; text-shadow: 0 6px 30px rgba(235,180,31,.35); }
.zt-404-title { font-family: WhitneySSmBold; font-size: clamp(20pt, 6vw, 30pt); color: #fff; margin: 0; }
.zt-404-msg { color: #b8b8b8; font-size: clamp(12pt, 3.4vw, 15pt); max-width: 460px; margin: .2rem 0 1rem; line-height: 1.5; }
.zt-404-btn { margin-top: .4rem; }
/*#endregion*/