/**
 * 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;
}
.layout--debugger__item {
margin-bottom: 10px;
line-height: 1.4;
}
.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: flex-start;
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;
}