/**
 * 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%);
font-family: 'Helvetica Neue', sans-serif;
font-size: var(--text-sm);
font-weight: var(--font-bold);
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;
background: linear-gradient(to bottom,
#252020 0%,
#000000 30%,
#201f1f 50%,
#000000 70%,
#101010 100%),
radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 70%),
url('/wid/static/images/4_2510x5760.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
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;
background: linear-gradient(90deg, transparent 0%, rgba(160, 146, 116, 0.4) 20%, rgba(160, 146, 116, 0.8) 50%, rgba(160, 146, 116, 0.4) 80%, transparent 100%);
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;
background: url('/wid/static/images/bg_dark_mode.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
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;
background: url('/wid/static/images/bg-invoice_maps.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* 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;
background: url('/wid/static/images/bg-debugger-splash.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* 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;
background: linear-gradient(to bottom,
#252020 0%,
#000000 30%,
#201f1f 50%,
#000000 70%,
#101010 100%),
url('/wid/static/images/4_2510x5760.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Debugger Header Element */
.layout--debugger__header {
display: flex;
align-items: left;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid #2a2a2a;
}
/* 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;
background: url('/wid/static/images/bg_dark_mode.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* 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;
border-bottom: 1px solid #2a2a2a;
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 {
border: 1px solid #2a2a2a;
padding: 15px;
text-align: center;
transition: all 0.3s ease;
background: #1e1f21;
}
/* Debugger Summary Element */
.layout--debugger__summary {
margin-top: 24px;
}
/* Debugger Summary Content Element */
.layout--debugger__summary-content {
padding: 12px;
border-radius: 4px;
font-family: 'Consolas', monospace;
font-size: 13px;
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;
border: 1px solid #2a2a2a;
transition: all 0.3s ease;
}
/* Debugger XPPLX Box Hover */
.layout--debugger__xpplx-box:hover {
transform: translateY(-5px);
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
/* 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 {
background: rgba(255,255,255,0.05);
border: 1px solid #3a3a3a;
border-radius: 8px;
padding: 20px;
margin-bottom: 15px;
transition: all 0.3s ease;
}
/* Debugger XPPLX Inner Hover */
.layout--debugger__xpplx-inner:hover {
background: rgba(255,255,255,0.08);
}
/* 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;
background: linear-gradient(90deg, transparent 0%, rgba(160, 146, 116, 0.4) 20%, rgba(160, 146, 116, 0.8) 50%, rgba(160, 146, 116, 0.4) 80%, transparent 100%);
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 {
color: inherit;
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;
    }
}