/**
 * CORE.CSS — Shared structural layout for ALL apps
 * PURE LAYOUT: positioning, spacing, flex, grid only
 * ZERO colors, fonts, backgrounds, or visual styling
 * All visual properties live in technology.css + user.css (brand CSS)
 *
 * BEM Methodology with Layout Namespace:
 * .layout--block__element--modifier
 */
/******************************************************************************
 * GLOBAL LAYOUT
 ******************************************************************************/
.layout--body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
}
/******************************************************************************
 * HEADER COMPONENT
 ******************************************************************************/
.layout--header {
width: 100%;
padding: 20px 0;
position: relative;
height: 80px;
box-sizing: border-box;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
}
.layout--header__nav {
display: flex;
align-items: center;
gap: 10px;
margin-left: 20px;
z-index: 12;
}
.layout--header__nav-icon {
height: 15px;
width: auto;
}
.layout--header__logo-link {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 11;
}
.layout--header__logo-link::after {
content: "HOME";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
pointer-events: none;
}
.layout--header__logo-link:hover .layout--header__logo {
opacity: 0;
}
.layout--header__logo-link:hover::after {
opacity: 1;
}
.layout--header__logo {
height: 70%;
width: auto;
max-height: 66.5px;
}
.layout--header__actions {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-right: 20px;
z-index: 12;
}
/******************************************************************************
 * HERO COMPONENT
 ******************************************************************************/
.layout--hero {
display: flex;
align-items: center;
justify-content: center;
padding: 120px 80px;
min-height: 90vh;
position: relative;
overflow: hidden;
flex-direction: column;
text-align: center;
}
.layout--hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: -1;
}
.layout--hero > * {
flex: 1;
max-width: 1000px;
z-index: 2;
position: relative;
}
.layout--hero__subtitle > div:not(:last-child) {
margin-bottom: 2rem;
}
.layout--hero img {
max-width: 180px;
margin-bottom: 80px;
animation: fadeIn 1s ease-out 0.1s both;
}
.layout--hero .layout--hero__title {
margin-bottom: 60px;
animation: fadeInUp 1.2s ease-out;
}
.layout--hero .layout--hero__title img {
max-width: 100% !important;
width: auto !important;
height: 25rem !important;
margin-bottom: 60px;
object-fit: contain;
}
.layout--hero .layout--hero__subtitle {
margin-bottom: 80px;
max-width: 650px;
text-align: center;
animation: fadeInUp 1.4s ease-out 0.3s both;
}
.layout--hero__separator {
width: 100%;
height: 1px;
margin: 20px 0;
flex: none !important;
flex-shrink: 0 !important;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@media (max-width: 768px) {
.layout--hero {
padding: 80px 30px;
min-height: 80vh;
    }
.layout--hero .layout--hero__title {
margin-bottom: 40px;
    }
.layout--hero .layout--hero__title img {
height: 15rem !important;
max-width: 90% !important;
    }
.layout--hero .layout--hero__subtitle {
margin-bottom: 60px;
    }
.layout--hero img {
max-width: 140px;
margin-bottom: 60px;
    }
}
@media (max-width: 480px) {
.layout--hero .layout--hero__title img {
height: 10rem !important;
max-width: 95% !important;
    }
}
/******************************************************************************
 * CONNECTED SECTION
 ******************************************************************************/
.layout--connected {
position: relative;
z-index: 2;
padding: 100px 0;
}
.layout--connected__main-content {
width: 100%;
}
.layout--connected__image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding: 30px 0;
gap: 20px;
}
.layout--connected__text-content {
text-align: center;
margin: 20px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.layout--connected__img {
max-width: 500px;
height: auto;
}
.mxc-stxdxx-img {
max-width: 500px;
height: auto;
margin: 20px 0;
}
.layout--connected__image-container pre {
text-align: center;
margin: 20px 0 0 0;
white-space: pre-wrap;
word-wrap: break-word;
}
@media (max-width: 768px) {
.layout--connected { margin-top: 60px; }
.layout--connected__image-container { padding: 20px 0; gap: 15px; }
.layout--connected__text-content { margin: 15px 0; gap: 8px; }
.mxc-stxdxx-img { margin: 15px 0; }
.layout--connected__image-container pre { margin: 15px 0 0 0; }
}
/******************************************************************************
 * THREE COLUMNS SECTION
 ******************************************************************************/
.layout--three {
width: 100%;
padding: 60px 0;
display: flex;
justify-content: center;
position: relative;
z-index: 2;
}
.layout--three__columns-container {
display: flex;
justify-content: space-between;
width: 85%;
max-width: 1200px;
}
.layout--three__column {
flex: 1;
text-align: left;
padding: 0 40px;
}
.layout--three__column-title-img {
max-width: 200px;
height: auto;
margin-bottom: 15px;
}
.layout--three__contact-info {
margin-top: 20px;
}
@media (max-width: 768px) {
.layout--three { padding: 40px 0; }
.layout--three__columns-container { flex-direction: column; width: 95%; gap: 30px; }
.layout--three__column { padding: 0 20px; }
.layout--three__column-title-img { max-width: 180px; }
}
/******************************************************************************
 * CALL TO ACTION SECTION
 ******************************************************************************/
.layout--action {
width: 100%;
display: flex;
min-height: 400px;
}
.layout--action__image-container {
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.layout--action__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right top;
}
.layout--action__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px;
}
.layout--action__text-content {
text-align: center;
margin: 20px 0;
}
.layout--action__liveadvisor-img {
max-width: 425px;
height: auto;
}
@media (max-width: 768px) {
.layout--action { flex-direction: column; }
.layout--action__image-container { height: 400px; align-items: flex-end; }
.layout--action__image { object-position: center bottom; }
.layout--action__content { padding: 40px 30px; }
.layout--action__liveadvisor-img { max-width: 75%; }
}
/******************************************************************************
 * INVOICE MAPS FEATURE SECTION
 ******************************************************************************/
.layout--invoicemapsfeature {
width: 100%;
padding: 100px 0;
display: flex;
justify-content: center;
position: relative;
z-index: 2;
}
.layout--invoicemapsfeature__container {
display: flex;
justify-content: center;
align-items: center;
width: 85%;
max-width: 1200px;
gap: 40px;
}
.layout--invoicemapsfeature__image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.layout--invoicemapsfeature__image img {
max-width: 100%;
height: auto;
object-fit: contain;
}
.layout--invoicemapsfeature__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 40px;
}
.layout--invoicemapsfeature__multi-img {
max-width: 300px;
height: auto;
margin-bottom: 30px;
}
.layout--invoicemapsfeature__content > *:not(:last-child) {
margin-bottom: 30px;
}
@media (max-width: 768px) {
.layout--invoicemapsfeature__container { flex-direction: column; gap: 30px; width: 95%; }
.layout--invoicemapsfeature__content { padding: 0 20px; text-align: center; }
.layout--invoicemapsfeature__multi-img { max-width: 250px; margin: 0 auto 30px auto; }
.layout--invoicemapsfeature__content > *:not(:last-child) { margin-bottom: 20px; }
.layout--invoicemapsfeature__image img { max-width: 90%; }
}
/******************************************************************************
 * RESPONSIVE UTILITIES
 ******************************************************************************/
@media (max-width: 768px) {
.layout--hide-mobile { display: none !important; }
.layout--resize-mobile { width: 75% !important; height: auto !important; }
.layout--stack-mobile { flex-direction: column !important; width: 95% !important; }
.layout--spacing-mobile { padding: 20px 0 !important; margin-bottom: 30px !important; }
.layout--spacing-mobile:last-child { margin-bottom: 0 !important; }
.layout--button-spacing-mobile { margin-bottom: 40px !important; }
.layout--button-spacing-mobile-reduced { margin-bottom: 10px !important; }
}
.layout--button-spacing-mobile-reduced {
margin-bottom: 20px !important;
}
/******************************************************************************
 * AI DEBUGGER SPLASH SECTION
 ******************************************************************************/
.layout--debuggersplash {
width: 100%;
min-height: 800px;
padding: 0;
display: flex;
position: relative;
z-index: 2;
}
.layout--debuggersplash__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 80px 60px;
position: relative;
height: 100%;
}
.layout--debuggersplash__text-content {
text-align: left;
margin: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.layout--debuggersplash__image-container {
flex: 1;
display: flex;
align-items: flex-end;
justify-content: flex-end;
overflow: hidden;
}
.layout--debuggersplash__image {
height: 100%;
width: auto;
object-fit: cover;
object-position: right bottom;
}
.layout--debuggersplash__logo {
height: 90px;
width: auto;
margin-bottom: 40px;
display: block;
flex-shrink: 0;
align-self: flex-start;
max-width: none;
}
.layout--debuggersplash__text-content > div:not(:last-child) {
margin-bottom: 20px;
}
.layout--debuggersplash__text-content > div:last-child {
margin-top: auto;
padding-top: 60px;
}
@media (max-width: 768px) {
.layout--debuggersplash { flex-direction: column; padding: 0; margin: 0; width: 100vw; box-sizing: border-box; margin-bottom: 0; }
.layout--debuggersplash__image-container { height: 400px; align-items: flex-end; margin-bottom: 0; padding-bottom: 0; }
.layout--debuggersplash__image { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.layout--debuggersplash__content,
.layout--debuggersplash__image-container { padding-left: 20px; padding-right: 20px; margin-left: 0; margin-right: 0; width: 100%; }
.layout--debuggersplash__content { padding: 40px 20px; }
}
/******************************************************************************
 * DEBUGGER PANEL SECTION
 ******************************************************************************/
.layout--debugger {
width: 100%;
padding: 24px;
margin: 0;
border: none;
border-radius: 0;
box-sizing: border-box;
position: relative;
z-index: 2;
}
.layout--debugger__header {
display: flex;
align-items: left;
margin-bottom: 24px;
padding-bottom: 16px;
}
.layout--debugger__corelogic-img {
max-width: 700px;
height: auto;
}
.layout--debugger__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin-bottom: 24px;
align-items: stretch;
}
.layout--debugger__item {
margin-bottom: 0;
line-height: 1.4;
display: flex;
flex-direction: column;
}
.layout--debugger__section {
margin-bottom: 32px;
}
.layout--debugger__code-block {
padding: 12px;
border-radius: 4px;
}
.layout--debugger__inline-item {
display: inline-block;
margin-right: 12px;
margin-bottom: 8px;
}
.layout--debugger__nav-item {
padding: 12px;
display: flex;
align-items: center;
}
.layout--debugger__workflow-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
padding: 8px;
align-items: stretch;
}
.layout--debugger__workflow-item {
padding: 15px;
text-align: center;
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
}
.layout--debugger__summary {
margin-top: 24px;
}
.layout--debugger__summary-content {
padding: 12px;
border-radius: 4px;
}
.layout--debugger__summary-content p {
margin: 0 0 12px 0;
position: relative;
padding-left: 16px;
}
.layout--debugger__xpplx-boxes {
padding: 30px 0;
width: 100%;
}
.layout--debugger__xpplx-container {
display: flex;
justify-content: center;
align-items: stretch;
gap: 20px;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
.layout--debugger__xpplx-box {
flex: 1 1 0%;
width: calc(50% - 10px);
min-width: 0;
max-width: calc(50% - 10px);
overflow: hidden;
border-radius: 12px;
padding: 40px;
min-height: 300px;
display: flex;
flex-direction: column;
box-sizing: border-box;
}
.layout--debugger__xpplx-content {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.layout--debugger__xpplx-inner {
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
transition: all 0.3s ease;
}
.layout--debugger__xpplx-inner:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.layout--debugger__xpplx-container { flex-direction: column; gap: 20px; }
.layout--debugger__xpplx-box { padding: 30px 20px; min-height: auto; max-width: 100%; }
.layout--debugger__grid { grid-template-columns: 1fr; }
.layout--debugger__workflow-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.layout--debugger__corelogic-img { max-width: 90%; }
}
/******************************************************************************
 * FOOTER SECTION
 ******************************************************************************/
.layout--footer {
width: 100%;
margin-top: 80px;
}
.layout--footer__logo-container {
text-align: center;
padding: 80px 0 60px 0;
margin: 0;
border: none;
}
.layout--footer__corelogic-img {
max-width: 700px;
height: auto;
}
.layout--footer__content {
max-width: 1400px;
margin: 0 auto;
padding: 80px 40px 40px;
}
.layout--footer__grid-4 {
display: grid;
grid-template-columns: 40px auto 1fr auto 1fr auto 1fr auto 40px;
gap: 0;
padding-bottom: 40px;
}
@media (max-width: 768px) {
.layout--footer__grid-4 { display: flex; flex-direction: column; gap: 20px; padding: 20px; }
.footer-spacer { display: none; }
.layout--footer__content { padding: 40px 20px 20px; }
}
.layout--footer__grid-4 a { text-decoration: none; }
/******************************************************************************
 * MAIN CONTAINER — Content page wrapper
 ******************************************************************************/
.main-container {
width: 100%;
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
margin-top: 5px;
box-sizing: border-box;
}
/******************************************************************************
 * MAIN NAVIGATION BUTTONS
 ******************************************************************************/
.main-button-container {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 50px;
margin-top: 50px;
}
.main-button {
display: block;
width: 80%;
max-width: 300px;
padding: 12px 15px;
border: none;
cursor: pointer;
margin: 10px 0;
border-radius: 0;
text-align: center;
white-space: nowrap;
text-decoration: none;
}
.main-button:hover {
text-decoration: none;
}
@media (max-width: 768px) {
.main-button { padding: 10px 12px; }
.main-button-container { margin-top: 30px; margin-bottom: 30px; }
}
/******************************************************************************
 * TOOLS NAVIGATION CARDS
 ******************************************************************************/
.tools-section {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
margin-top: 10px;
}
.tools-grid {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin-top: 16px;
width: 100%;
}
.tools-card {
display: block;
width: 80%;
max-width: 300px;
padding: 16px 20px;
border-radius: 0;
position: relative;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
overflow: hidden;
text-align: left;
}
.tools-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
transition: left 0.4s ease;
}
.tools-card:hover {
text-decoration: none;
}
.tools-card:hover::before {
left: 100%;
}
@media (max-width: 768px) {
.tools-card { width: 95%; }
}
/******************************************************************************
 * ADMIN NAVIGATION
 ******************************************************************************/
.admin-section {
width: 90%;
max-width: 600px;
margin: 20px auto 40px auto;
text-align: center;
}
.admin-list {
list-style: none;
padding: 0;
margin: 15px auto 0 auto;
display: inline-block;
text-align: left;
}
.admin-list-item {
margin-bottom: 12px;
display: flex;
align-items: center;
}
.admin-bullet {
margin-right: 12px;
}
/******************************************************************************
 * FOOTER LAYOUT UTILITIES
 ******************************************************************************/
.layout--bullet-desktop {
display: inline;
}
@media (max-width: 768px) {
.layout--bullet-desktop { display: none !important; }
}
/******************************************************************************
 * DEBUGGER SPACING
 ******************************************************************************/
.debugger-container {
margin-top: 0;
}

/******************************************************************************
 * CSS BRILLIANCE DEBUGGER (temporary — remove when color system is complete)
 ******************************************************************************/
.brilliance-debugger {
padding: 10px 20px;
}
.brilliance-debugger__section {
margin-top: 8px;
}
.brilliance-debugger__slot {
display: grid;
grid-template-columns: 130px 1fr 28px 180px;
gap: 4px;
align-items: start;
line-height: 20px;
padding: 4px 0;
}
.brilliance-debugger__swatch {
display: inline-block;
width: 24px;
height: 24px;
border: 1px solid currentColor;
vertical-align: middle;
}
.brilliance-debugger__swatch--missing {
border-style: dashed;
}
.brilliance-debugger__raw {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 2px;
}
.brilliance-debugger__raw-swatch {
width: 24px;
height: 24px;
border: 1px solid currentColor;
flex-shrink: 0;
}
/******************************************************************************
 * EXTENDED UI IDENTITY — Phone mockup + controls layout
 ******************************************************************************/
.extid-phone {
width: 430px;
min-width: 430px;
border-radius: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
.extid-pending {
width: 430px;
min-width: 430px;
min-height: 600px;
border: 2px dashed currentColor;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.3;
}
.extid-controls {
flex: 1;
display: flex;
flex-direction: column;
}
.extid-zone {
margin-bottom: 48px;
}
.extid-zone__label {
letter-spacing: 2px;
margin-bottom: 16px;
}
.extid-zone__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.extid-circle-wrap {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 8px;
}
.extid-circle {
width: 100px;
height: 100px;
min-width: 100px;
border-radius: 50%;
cursor: pointer;
transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.extid-circle:hover {
transform: scale(1.08);
}
.extid-slot-btn {
border: 1px solid currentColor;
padding: 1px 6px;
cursor: pointer;
text-align: center;
}
.extid-slot-btn:hover {
opacity: 0.7;
}
.extid-slot-btn--active {
opacity: 0.3;
}
.extid-edit-btn--disabled {
opacity: 0.3;
cursor: default;
}
.extid-edit-btn--disabled:hover {
opacity: 0.3;
}
.sub-card-button {
display: inline-block;
cursor: pointer;
}
.sub-card-button--small {
padding: 2px 8px;
}
.sub-contact-row {
display: flex;
justify-content: space-between;
align-items: center;
}
/******************************************************************************
 * EXTENDED UI — Phone annotation overlays
 ******************************************************************************/
.extid-annotation {
display: none;
position: absolute;
pointer-events: none;
}
.extid-annotate .extid-annotation {
display: block;
}
/**
 * POSITIVE FEEDBACK AI - LAYOUT STRUCTURE
 * Component positioning, spacing, and structural layout only
 * No colors, fonts, or visual styling
 *
 * BEM Methodology with Layout Namespace:
 * .layout--block__element--modifier
 *
 * Examples:
 * .layout--header (block)
 * .layout--header__nav (element)
 * .layout--header__nav--mobile (element with modifier)
 * .layout--header--transparent (block with modifier)
 */
/******************************************************************************
 * GLOBAL LAYOUT
 ******************************************************************************/
/* Base Layout */
.layout--body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
}
/******************************************************************************
 * HEADER COMPONENT
 ******************************************************************************/
/* Header Block */
.layout--header {
width: 100%;
padding: 20px 0;
position: relative;
height: 80px;
box-sizing: border-box;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
}
/* Header Navigation Element */
.layout--header__nav {
display: flex;
align-items: center;
gap: 10px;
margin-left: 20px;
z-index: 12;
}
/* Header Navigation Icon Element */
.layout--header__nav-icon {
height: 15px;
width: auto;
}
/* Header Logo Link Element */
.layout--header__logo-link {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
z-index: 11;
}
/* Header Logo Link Hover Effect */
.layout--header__logo-link::after {
content: "HOME";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-transform: uppercase;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.layout--header__logo-link:hover .layout--header__logo {
opacity: 0;
transition: opacity 0.3s ease;
}
.layout--header__logo-link:hover::after {
opacity: 1;
}
/* Header Logo Element */
.layout--header__logo {
height: 70%;
width: auto;
max-height: 66.5px;
}
/* Header Actions Element */
.layout--header__actions {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-right: 20px;
z-index: 12;
}
/******************************************************************************
 * HERO COMPONENT
 ******************************************************************************/
/* Hero Block Layout */
.layout--hero {
display: flex;
align-items: center;
justify-content: center;
padding: 120px 80px;
min-height: 90vh;
position: relative;
overflow: hidden;
flex-direction: column;
text-align: center;
}
.layout--hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: -1;
}
.layout--hero > * {
flex: 1;
max-width: 1000px;
z-index: 2;
position: relative;
}
/* Hero Subtitle Element - Spacing */
.layout--hero__subtitle > div:not(:last-child) {
margin-bottom: 2rem;
}
/* Hero Generic Images */
.layout--hero img {
max-width: 180px;
margin-bottom: 80px;
animation: fadeIn 1s ease-out 0.1s both;
}
/* Hero Title Element */
.layout--hero .layout--hero__title {
margin-bottom: 60px;
animation: fadeInUp 1.2s ease-out;
}
/* Hero Title Image Element */
.layout--hero .layout--hero__title img {
max-width: 100% !important;
width: auto !important;
height: 25rem !important;
margin-bottom: 60px;
filter: brightness(1.2) contrast(1.1);
opacity: 0.95;
object-fit: contain;
}
/* Hero Subtitle Element */
.layout--hero .layout--hero__subtitle {
margin-bottom: 80px;
max-width: 650px;
text-align: center;
animation: fadeInUp 1.4s ease-out 0.3s both;
}
/* Hero Separator Element */
.layout--hero__separator {
width: 100%;
height: 1px;
margin: 20px 0;
opacity: 1;
flex: none !important;
flex-shrink: 0 !important;
}
/* Hero Animations */
@keyframes fadeInUp {
    from {
opacity: 0;
transform: translateY(30px);
    }
    to {
opacity: 1;
transform: translateY(0);
    }
}
@keyframes fadeIn {
    from {
opacity: 0;
    }
    to {
opacity: 1;
    }
}
/* Mobile Hero */
@media (max-width: 768px) {
.layout--hero {
padding: 80px 30px;
min-height: 80vh;
    }
.layout--hero .layout--hero__title {
margin-bottom: 40px;
    }
.layout--hero .layout--hero__title img {
height: 15rem !important;
max-width: 90% !important;
    }
.layout--hero .layout--hero__subtitle {
margin-bottom: 60px;
    }
.layout--hero img {
max-width: 140px;
margin-bottom: 60px;
    }
}
@media (max-width: 480px) {
.layout--hero .layout--hero__title img {
height: 10rem !important;
max-width: 95% !important;
    }
}
/******************************************************************************
 * CONNECTED SECTION
 ******************************************************************************/
/* Connected Block Layout */
.layout--connected {
position: relative;
z-index: 2;
padding: 100px 0;
}
/* Connected Main Content Element */
.layout--connected__main-content {
width: 100%;
}
/* Connected Image Container Element */
.layout--connected__image-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding: 30px 0;
gap: 20px;
}
/* Connected Text Content Element */
.layout--connected__text-content {
text-align: center;
margin: 20px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
/* Connected Image Element */
.layout--connected__img {
max-width: 500px;
height: auto;
}
/* MXC STXDXX Image Element */
.mxc-stxdxx-img {
max-width: 500px;
height: auto;
margin: 20px 0;
}
/* Connected Pre Element */
.layout--connected__image-container pre {
text-align: center;
margin: 20px 0 0 0;
white-space: pre-wrap;
word-wrap: break-word;
}
/* Connected Section Mobile Adjustments */
@media (max-width: 768px) {
.layout--connected {
margin-top: 60px;
    }
.layout--connected__image-container {
padding: 20px 0;
gap: 15px;
    }
.layout--connected__text-content {
margin: 15px 0;
gap: 8px;
    }
.mxc-stxdxx-img {
margin: 15px 0;
    }
.layout--connected__image-container pre {
margin: 15px 0 0 0;
    }
}
/******************************************************************************
 * THREE COLUMNS SECTION
 ******************************************************************************/
/* Three Columns Block Layout */
.layout--three {
width: 100%;
padding: 60px 0;
display: flex;
justify-content: center;
position: relative;
z-index: 2;
}
/* Three Columns Container Element */
.layout--three__columns-container {
display: flex;
justify-content: space-between;
width: 85%;
max-width: 1200px;
}
/* Column Element */
.layout--three__column {
flex: 1;
text-align: left;
padding: 0 40px;
}
/* Column Title Image Element */
.layout--three__column-title-img {
max-width: 200px;
height: auto;
margin-bottom: 15px;
}
/* Contact Info Element */
.layout--three__contact-info {
margin-top: 20px;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.layout--three {
padding: 40px 0;
    }
.layout--three__columns-container {
flex-direction: column;
width: 95%;
gap: 30px;
    }
.layout--three__column {
padding: 0 20px;
    }
.layout--three__column-title-img {
max-width: 180px;
    }
}
/******************************************************************************
 * CALL TO ACTION SECTION
 ******************************************************************************/
/* Call to Action Block Layout */
.layout--action {
width: 100%;
display: flex;
min-height: 400px;
}
/* Advisor Image Container Element */
.layout--action__image-container {
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Advisor Image Element */
.layout--action__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: right top;
}
/* Advisor Content Element */
.layout--action__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px;
}
/* Text Content Element */
.layout--action__text-content {
text-align: center;
margin: 20px 0;
}
/* Live Advisor Image Element */
.layout--action__liveadvisor-img {
max-width: 425px;
height: auto;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.layout--action {
flex-direction: column;
    }
.layout--action__image-container {
height: 400px;
align-items: flex-end;
    }
.layout--action__image {
object-position: center bottom;
    }
.layout--action__content {
padding: 40px 30px;
    }
.layout--action__liveadvisor-img {
max-width: 75%;
    }
}
/******************************************************************************
 * INVOICE MAPS FEATURE SECTION
 ******************************************************************************/
/* Invoice Maps Feature Block Layout */
.layout--invoicemapsfeature {
width: 100%;
padding: 100px 0;
display: flex;
justify-content: center;
position: relative;
z-index: 2;
}
/* Invoice Maps Container Element */
.layout--invoicemapsfeature__container {
display: flex;
justify-content: center;
align-items: center;
width: 85%;
max-width: 1200px;
gap: 40px;
}
/* Invoice Maps Image Element */
.layout--invoicemapsfeature__image {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
/* Constrain the main invoice maps image */
.layout--invoicemapsfeature__image img {
max-width: 100%;
height: auto;
object-fit: contain;
}
/* Invoice Maps Content Element */
.layout--invoicemapsfeature__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 40px;
}
/* Invoice Maps Multi Image Element */
.layout--invoicemapsfeature__multi-img {
max-width: 300px;
height: auto;
margin-bottom: 30px;
}
/* Add spacing between paragraphs */
.layout--invoicemapsfeature__content > *:not(:last-child) {
margin-bottom: 30px;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.layout--invoicemapsfeature__container {
flex-direction: column;
gap: 30px;
width: 95%;
    }
.layout--invoicemapsfeature__content {
padding: 0 20px;
text-align: center;
    }
.layout--invoicemapsfeature__multi-img {
max-width: 250px;
margin: 0 auto 30px auto;
    }
.layout--invoicemapsfeature__content > *:not(:last-child) {
margin-bottom: 20px;
    }
.layout--invoicemapsfeature__image img {
max-width: 90%;
    }
}
/******************************************************************************
 * RESPONSIVE UTILITIES
 ******************************************************************************/
/* Mobile Responsive Utilities */
@media (max-width: 768px) {
.layout--hide-mobile {
display: none !important;
    }
.layout--resize-mobile {
width: 75% !important;
height: auto !important;
    }
.layout--stack-mobile {
flex-direction: column !important;
width: 95% !important;
    }
.layout--spacing-mobile {
padding: 20px 0 !important;
margin-bottom: 30px !important;
    }
.layout--spacing-mobile:last-child {
margin-bottom: 0 !important;
    }
.layout--button-spacing-mobile {
margin-bottom: 40px !important;
    }
.layout--button-spacing-mobile-reduced {
margin-bottom: 10px !important;
    }
}
/* Reduced Mobile Spacing */
.layout--button-spacing-mobile-reduced {
margin-bottom: 20px !important;
}
/******************************************************************************
 * AI DEBUGGER SPLASH SECTION
 ******************************************************************************/
/* Debugger Splash Block Layout */
.layout--debuggersplash {
width: 100%;
min-height: 800px;
padding: 0;
display: flex;
position: relative;
z-index: 2;
}
/* Debugger Splash Content Element */
.layout--debuggersplash__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 80px 60px;
position: relative;
height: 100%;
}
/* Debugger Splash Text Content Element */
.layout--debuggersplash__text-content {
text-align: left;
margin: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Debugger Splash Image Container Element */
.layout--debuggersplash__image-container {
flex: 1;
display: flex;
align-items: flex-end;
justify-content: flex-end;
overflow: hidden;
}
/* Debugger Splash Image Element */
.layout--debuggersplash__image {
height: 100%;
width: auto;
object-fit: cover;
object-position: right bottom;
}
/* Debugger Splash Logo Element */
.layout--debuggersplash__logo {
height: 90px;
width: auto;
margin-bottom: 40px;
display: block;
flex-shrink: 0;
align-self: flex-start;
max-width: none;
}
/* Debugger Splash Text Elements */
.layout--debuggersplash__text-content > div:not(:last-child) {
margin-bottom: 20px;
}
.layout--debuggersplash__text-content > div:last-child {
margin-top: auto;
padding-top: 60px;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.layout--debuggersplash {
flex-direction: column;
padding: 0;
margin: 0;
width: 100vw;
box-sizing: border-box;
margin-bottom: 0;
    }
.layout--debuggersplash__image-container {
height: 400px;
align-items: flex-end;
margin-bottom: 0;
padding-bottom: 0;
    }
.layout--debuggersplash__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
    }
.layout--debuggersplash__content,
.layout--debuggersplash__image-container {
padding-left: 20px;
padding-right: 20px;
margin-left: 0;
margin-right: 0;
width: 100%;
    }
.layout--debuggersplash__content {
padding: 40px 20px;
    }
}
/******************************************************************************
 * DEBUGGER PANEL SECTION
 ******************************************************************************/
/* Debugger Block Layout */
.layout--debugger {
width: 100%;
padding: 24px;
margin: 0;
border: none;
border-radius: 0;
box-sizing: border-box;
position: relative;
z-index: 2;
}
/* Debugger Header Element */
.layout--debugger__header {
display: flex;
align-items: left;
margin-bottom: 24px;
padding-bottom: 16px;
}
/* Debugger Core Logic Image Element */
.layout--debugger__corelogic-img {
max-width: 700px;
height: auto;
}
/* Debugger Grid Element */
.layout--debugger__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
/* Debugger Item Element */
.layout--debugger__item {
margin-bottom: 10px;
}
/* Debugger Section Element */
.layout--debugger__section {
margin-bottom: 32px;
}
/* Debugger Code Block Element */
.layout--debugger__code-block {
padding: 12px;
border-radius: 4px;
}
/* Debugger Inline Item Element */
.layout--debugger__inline-item {
display: inline-block;
margin-right: 12px;
margin-bottom: 8px;
}
/* Debugger Navigation Item Element */
.layout--debugger__nav-item {
padding: 12px;
display: flex;
align-items: center;
}
/* Debugger Workflow Grid Element */
.layout--debugger__workflow-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
padding: 8px;
}
/* Debugger Workflow Item Element */
.layout--debugger__workflow-item {
padding: 15px;
text-align: center;
transition: all 0.3s ease;
}
/* Debugger Summary Element */
.layout--debugger__summary {
margin-top: 24px;
}
/* Debugger Summary Content Element */
.layout--debugger__summary-content {
padding: 12px;
border-radius: 4px;
line-height: 1.5;
}
/* Debugger Summary Paragraphs */
.layout--debugger__summary-content p {
margin: 0 0 12px 0;
position: relative;
padding-left: 16px;
}
/* Debugger XPPLX Boxes Section */
.layout--debugger__xpplx-boxes {
padding: 30px 0;
width: 100%;
}
/* Debugger XPPLX Container Element */
.layout--debugger__xpplx-container {
display: flex;
justify-content: center;
gap: 20px;
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* Debugger XPPLX Box Element */
.layout--debugger__xpplx-box {
flex: 1;
border-radius: 12px;
padding: 40px;
min-height: 300px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
}
/* Debugger XPPLX Box Hover */
.layout--debugger__xpplx-box:hover {
transform: translateY(-5px);
}
/* Debugger XPPLX Content Element */
.layout--debugger__xpplx-content {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Debugger XPPLX Inner Element */
.layout--debugger__xpplx-inner {
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
transition: all 0.3s ease;
}
/* Debugger XPPLX Inner Hover */
.layout--debugger__xpplx-inner:hover {
}
/* Debugger XPPLX Inner Last Child */
.layout--debugger__xpplx-inner:last-child {
margin-bottom: 0;
}
/* Mobile Debugger Adjustments */
@media (max-width: 768px) {
.layout--debugger__xpplx-container {
flex-direction: column;
gap: 20px;
    }
.layout--debugger__xpplx-box {
padding: 30px 20px;
min-height: auto;
    }
.layout--debugger__grid {
grid-template-columns: 1fr;
    }
.layout--debugger__workflow-grid {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
.layout--debugger__corelogic-img {
max-width: 90%;
    }
}
/******************************************************************************
 * FOOTER SECTION
 ******************************************************************************/
/* Footer Block Layout */
.layout--footer {
width: 100%;
margin-top: 80px;
}
/* Footer Logo Container Element */
.layout--footer__logo-container {
text-align: center;
padding: 0;
margin: 0;
border: none;
}
/* Footer Core Logic Image Element */
.layout--footer__corelogic-img {
max-width: 700px;
height: auto;
}
/* Footer Content Element */
.layout--footer__content {
max-width: 1400px;
margin: 0 auto;
padding: 80px 40px 40px;
}
/* Footer Navigation Grid Element */
.layout--footer__nav-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 80px;
margin-bottom: 60px;
}
/* Footer Navigation Column Element */
.layout--footer__nav-column {
display: flex;
flex-direction: column;
}
/* Footer Navigation List Element */
.layout--footer__nav-list {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Footer Navigation Link Element */
.layout--footer__nav-link {
padding: 4px 0;
border-bottom: 1px solid transparent;
}
/* Footer Navigation Link Hover */
.layout--footer__nav-link:hover {
transform: translateX(4px);
}
/* Footer Contact Info Element */
.layout--footer__contact-info {
margin-bottom: 32px;
}
/* Footer Newsletter Element */
.layout--footer__newsletter {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Footer Separator Element */
.layout--footer__separator {
width: 100%;
height: 1px;
margin: 20px 0;
opacity: 1;
flex: none;
flex-shrink: 0;
}
/* Footer Bottom Bar Element */
.layout--footer__bottom-bar {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-bottom: 40px;
}
/* Footer Brand Section Element */
.layout--footer__brand-section {
display: flex;
align-items: center;
gap: 24px;
}
/* Footer Tagline Element */
.layout--footer__tagline {
display: flex;
flex-direction: column;
gap: 4px;
}
/* Footer Legal Section Element */
.layout--footer__legal-section {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 16px;
}
/* Footer Legal Navigation Element */
.layout--footer__legal-nav {
display: flex;
align-items: center;
gap: 12px;
}
/* Footer Legal Separator Element */
.layout--footer__legal-separator {
margin: 0 5px;
}
/* Responsive Adjustments */
@media (max-width: 1024px) {
.layout--footer__nav-grid {
grid-template-columns: repeat(2, 1fr);
gap: 60px;
    }
.layout--footer__content {
padding: 60px 30px 30px;
    }
}
@media (max-width: 768px) {
.layout--footer__nav-grid {
grid-template-columns: 1fr;
gap: 40px;
    }
.layout--footer__bottom-bar {
flex-direction: column;
align-items: flex-start;
gap: 32px;
    }
.layout--footer__brand-section {
flex-direction: column;
align-items: flex-start;
gap: 16px;
    }
.layout--footer__legal-section {
align-items: flex-start;
width: 100%;
    }
.layout--footer__legal-nav {
flex-wrap: wrap;
    }
.layout--footer__content {
padding: 40px 20px 20px;
    }
}
@media (max-width: 480px) {
.layout--footer__nav-grid {
gap: 32px;
    }
.layout--footer__legal-nav {
flex-direction: column;
align-items: flex-start;
gap: 8px;
    }
.layout--footer__legal-separator {
display: none;
    }
}