/* Design tokens & Core Variables */
:root {
    --Background-Brand-Fresh-Greens-Lighter: #E2EBC9;
    --Background-Brand-Fresh-Greens-Light: #B2CA6F;
    --Text-Semantic-Success-Primary: #2B4F34;
    --Background-Brand-Secondary: #9FBD4B;
    --Text-Brand-Primary: #0A1B0E;
    --Text-Neutral-Secondary: #313231;
    --Text-Brand-Secondary: #5F712D;
    --Background-Brand-Primary: #112D18;
    --Text-Brand-Inverse: #F5F8ED;
    --Background-Semantic-Success-Subtle: #E3F7E9;
    --Background-Brand-Yellows-Light: #E9DDA7;
    --Background-Brand-Fresh-Greens-Dark: #7F973C;
    --Text-Neutral-Primary: #0C0C0C;
    --Text-Neutral-Tertiary: #494B4A;
    --Icon-Neutral-Inverse-Primary: #D7D8D7;
}

/* Base structural setups */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    scroll-behavior: smooth;
    font-family: "Public Sans", sans-serif;
    background-color: #FFFFFF;
    color: var(--Text-Brand-Primary);
    /* Safe canvas-level bounding box preventions */
    overflow-x: hidden;
}

/* Elements structural layout options */
section {
    position: relative;
    overflow: visible; /* Prevents motif asset clipping throughout the page hierarchy */
}

.text-center { text-align: center; }
.brand-dark { color: var(--Text-Semantic-Success-Primary); }

/* Absolute Edge Unclipped Motif Positioning Engine */
.motif {
    position: absolute;
    z-index: 5000;
    pointer-events: none;
    will-change: transform;
}
.motif img {
    width: 100%;
    height: auto;
    display: block;
}

/* Sizing properties mapping exact width constraints cleanly scaled down using standard responsive layout clamp logic */
.motif-g3  { top: 9%;   left: 15px;  width: clamp(35px, 6vw, 82.2px);  animation: slowFloat 22s ease-in-out infinite alternate; }
.motif-g4  { top: 18%;  right: 10px; width: clamp(32px, 5vw, 74px);    animation: slowFloat 18s ease-in-out infinite 1s alternate; }
.motif-v6  { top: 48%;  left: 5px;   width: clamp(25px, 4vw, 74px);    animation: slowFloat 20s ease-in-out infinite alternate; }
.motif-g5  { top: 15%;   left: 20px;  width: clamp(30px, 5vw, 83px);    animation: slowFloat 25s ease-in-out infinite 0.5s alternate; }
.motif-g6  { bottom: 6%; right: 33px; width: clamp(35px, 6vw, 82px);   animation: slowFloat 21s ease-in-out infinite alternate; }
.motif-v7  { top: 52%;  right: 10px;  width: clamp(25px, 4vw, 55px);    animation: slowFloat 19s ease-in-out infinite 1.5s alternate; }
.motif-g7  { top: 12%;  left: 0px;  width: clamp(32px, 5vw, 83px);    animation: slowFloat 24s ease-in-out infinite alternate; }
.motif-g8  { bottom: 4%; right: 20px; width: clamp(32px, 5vw, 74px);    animation: slowFloat 20s ease-in-out infinite 2s alternate; }
.motif-g9  { top: 6%;   left: 15px;  width: clamp(35px, 6vw, 82px);    animation: slowFloat 23s ease-in-out infinite alternate; }
.motif-g10 { top: 45%;  right: 10px; width: clamp(32px, 5vw, 74px);    animation: slowFloat 26s ease-in-out infinite 0.5s alternate; }
.motif-g11 { top: -40px; left: 10%;   width: clamp(32px, 5vw, 74px);    animation: slowFloat 17s ease-in-out infinite alternate; }


@keyframes slowFloat {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(3deg); }
    100% { transform: translateY(10px) rotate(-1deg); }
}

/* Top Navigation Engine Layout */
.nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: padding 0.3s ease;
}

.top-nav {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    background-color: transparent;
    transition: background-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
}

.nav-wrapper.scrolled {
    padding: 12px 24px;
}
.nav-wrapper.scrolled .top-nav {
    border-radius: 32px;
    background: var(--Background-Brand-Fresh-Greens-Lighter, #E2EBC9);
    box-shadow: 0 5px 13px -5px rgba(16, 25, 40, 0.05), 0 2px 4px -1px rgba(16, 25, 40, 0.02);
}

.nav-container {
    width: 100%;
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo img { height: 36px; display: block; }
.nav-links { display: flex; gap: 32px; }
.nav-links a {
    text-decoration: none;
    color: var(--Text-Neutral-Secondary);
    font-size: 16px;
    font-weight: 500;
    transition: color 0.2s ease;
}
.nav-links a:hover { color: var(--Text-Semantic-Success-Primary); }

.nav-actions { position: relative; }

/* Fixed Contact Us Button Design Properties */
.btn-contact {
    display: flex;
    padding: var(--V-padding-Medium, 12px) var(--H-padding-Medium, 20px);
    justify-content: center;
    align-items: center;
    gap: var(--Spacing-Medium, 8px);
    border-radius: var(--full, 99px);
    background: var(--Background-Brand-Secondary, #9FBD4B);
    
    color: var(--Text-Brand-Primary, #0A1B0E);
    text-align: right;
    font-family: "Public Sans", sans-serif;
    font-size: var(--Font-Size-16, 16px);
    font-style: normal;
    font-weight: var(--Font-Weight-semibold, 600);
    line-height: 150%;
    letter-spacing: var(--Letter-Spacing-0, 0);
    border: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.btn-contact:hover { opacity: 0.9; }

/* Contact Tooltip Box Styles */
.tooltip {
    display: none;
    position: absolute;
    top: 55px;
    right: 0;
    background-color: #FFFFFF;
    border: 0.5px solid var(--Background-Brand-Fresh-Greens-Light);
    border-radius: 8px;
    padding: 14px 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    white-space: nowrap;
    z-index: 1010;
}
.tooltip p {
    font-size: 14px;
    color: var(--Text-Brand-Primary);
    line-height: 160%;
}
.tooltip-label {
    font-weight: 700;
    color: var(--Text-Brand-Secondary);
    font-family: monospace, sans-serif;
    margin-right: 4px;
}
.tooltip.show { display: block; }

/* Core Primary Button Template Layout */
.btn-primary {
    background: var(--Background-Brand-Primary, #112D18);
    color: var(--Text-Brand-Inverse, #F5F8ED);
    border: none;
    border-radius: 99px;
    padding: 16px 36px;
    font-family: "Public Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }

/* Section Page Typography Engine - Standard Synced Rules */
.hero-title, .section-title {
    color: var(--Text-Brand-Primary, #0A1B0E);
    font-family: "Public Sans", sans-serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 700;
    line-height: 110.239%;
    letter-spacing: -1.8px;
}
.hero-subtitle, .section-subtitle {
    color: var(--Text-Neutral-Secondary, #313231);
    font-family: "Public Sans", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
}

/* Page 1: Hero Setup */
.hero-section {
    padding-top: 160px;
    padding-bottom: 80px;
    min-height: 100vh;
    background: linear-gradient(180deg, #FFF 34.82%, var(--Background-Brand-Fresh-Greens-Lighter, #E2EBC9) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
}
.badge-rounded {
    background-color: var(--Background-Brand-Fresh-Greens-Lighter);
    color: var(--Text-Semantic-Success-Primary);
    padding: 8px 18px;
    border-radius: 99px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}
.status-dot { width: 8px; height: 8px; background-color: var(--Background-Brand-Secondary); border-radius: 50%; }
.hero-title { text-align: center; margin-bottom: 24px; }
.hero-title .highlight-text { color: var(--Text-Brand-Secondary, #5F712D); }
.hero-subtitle { text-align: center; max-width: 720px; margin-bottom: 36px; }

.mockup-container { margin-top: 50px; width: 100%; max-width: 820px; }
.mockup-img { width: 100%; height: auto; display: block; }

/* Page 2: Brick Layer Staggered Marquee Engine */
.features-section {
    background-color: #FFFFFF;
    padding: 100px 0;
}
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 29px; /* Exact requested spacing gap */
    padding-bottom: 60px;
}
.marquee-row {
    display: flex;
    width: 100%;
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: loopScroll 40s linear infinite;
}
/* Staggering lines to simulate mid-point brick laying structural style */
.row-bottom .marquee-track {
    animation-direction: reverse;
    padding-left: 120px; 
}
.marquee-content { display: flex; gap: 16px; padding-right: 16px; }

.feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 30px;
    border: 0.5px solid var(--Background-Brand-Fresh-Greens-Light, #B2CA6F);
    background: #FCFFF3;
    color: var(--Text-Neutral-Primary, #0C0C0C);
    font-size: 16px;
    font-weight: 300;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.feature-tag .tag-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10.2689 3.45105C11.0665 2.18298 12.9335 2.18298 13.7311 3.45105L15.6599 6.5178C15.9406 6.96396 16.3864 7.28413 16.9023 7.41009L20.4489 8.27584C21.9153 8.63382 22.4922 10.3891 21.5187 11.5308L19.1643 14.2919C18.8218 14.6936 18.6515 15.2116 18.6897 15.7356L18.9527 19.3374C19.0615 20.8268 17.5511 21.9116 16.1518 21.3491L12.7678 19.9888C12.2755 19.7909 11.7245 19.7909 11.2322 19.9888L7.84818 21.3491C6.44893 21.9116 4.93851 20.8268 5.04726 19.3374L5.31026 15.7356C5.34853 15.2116 5.17825 14.6936 4.83572 14.2919L2.48129 11.5308C1.50776 10.3891 2.08469 8.63382 3.55115 8.27584L7.09768 7.41009C7.61365 7.28413 8.05944 6.96396 8.34006 6.5178L10.2689 3.45105Z' fill='%230A1B0E'/%3E%3C/svg%3E") no-repeat center center;
}
.feature-tag.active {
    background: var(--Background-Brand-Fresh-Greens-Light, #B2CA6F);
    color: var(--Text-Brand-Primary, #0A1B0E);
    font-weight: 600;
}
@keyframes loopScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.section-header { margin-bottom: 50px; padding: 0 24px; }
.section-title { margin-bottom: 16px; }
.section-subtitle { margin: 0 auto; max-width: 720px; }

/* Buyer, Seller, Dispatch Cards Specifications */
.categories-grid {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
.category-card {
    border-radius: var(--l, 20px);
    border: var(--xxs, 0.3px) solid var(--Icon-Neutral-Inverse-Primary, #D7D8D7);
    background: var(--White-True-white, #FFF);
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    border-radius: var(--l, 20px);
    display: flex;
    padding: 32px 24px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    flex: 1 0 0;
}
.card-inner-alignment { width: 100%; display: flex; flex-direction: column; align-items: left; text-align: center; }
.card-title-row { display: flex; align-items: center; gap: 12px; }
.card-icon { width: 24px; height: 24px; }
.category-card h3 { font-size: 24px; font-weight: 500; color: var(--Text-Neutral-Primary, #0C0C0C); }
.card-divider { height: 2px; width: 100%; margin: 12px 0 16px 0; }
.div-buyer { background: var(--Background-Brand-Yellows-Light, #E9DDA7); }
.div-seller { background: var(--Background-Brand-Fresh-Greens-Dark, #7F973C); }
.div-logistics { background: var(--Background-Brand-Primary, #112D18); }
.card-body { color: var(--Text-Neutral-Secondary); font-size: 16px; font-weight: 300; line-height: 130%; margin-bottom: 16px; }
.card-image-wrap { width: 100%; margin-top: auto; }
.card-image-wrap img { width: 100%; height: auto; display: block; }

.relative-card { position: relative; }
.motif-vector-pin { position: absolute; bottom: 24px; right: -15px; width: clamp(30px, 4vw, 55px); z-index: 5; pointer-events: none; }

/* Page 3: Single Page Frames Layout Section */
.benefits-section { background-color: #FFFFFF; padding: 80px 0; }
.frames-stack { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 48px; }
.frame-container-view { width: 100%; }
.frame-svg { width: 100%; height: auto; display: block; }

.center-btn-row { display: flex; justify-content: center; margin: 50px 0 80px 0; }

/* Adaptive Responsive Button Layout Rules */
.adaptive-btn {
    width: auto;
    max-width: 100%;
}

.value-prop-grid {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.prop-item { display: flex; flex-direction: column; align-items: flex-start; }

/* Specified Micro Sized Props Styles */
.prop-icon-box {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    border-radius: 12px;
    border: 2.143px solid var(--Background-Brand-Primary, #112D18);
    background: var(--Background-Semantic-Success-Subtle, #E3F7E9);
    margin-bottom: 20px;
}
.prop-icon-box img { width: 100%; height: 100%; object-fit: contain; }
.prop-title { font-size: 24px; font-weight: 700; letter-spacing: -0.72px; margin-bottom: 12px; }
.prop-content { color: var(--Text-Neutral-Secondary); font-size: 18px; line-height: 135%; }

/* Page 4: FAQs Centered Headers Top-Level Layout Hierarchy */
.faq-section { background-color: #FFFFFF; padding: 100px 0; }
.faq-centered-header { max-width: 800px; margin: 0 auto 50px auto; padding: 0 24px; }
.faq-main-title { font-size: 56px; font-weight: 700; letter-spacing: -1.68px; margin-bottom: 16px; }
.faq-sub-title { font-size: 18px; color: var(--Text-Neutral-Secondary); }

.faq-layout-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 60px;
    align-items: start;
}
.faq-illustration-box img { width: 100%; height: auto; }
.faq-accordion-list { display: flex; flex-direction: column; gap: 16px; }
.faq-accordion-item { border-radius: 4px; border: 0.5px solid var(--Background-Brand-Fresh-Greens-Light, #B2CA6F); background: #FBFFF1; overflow: hidden; }
.faq-header { padding: 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.faq-question { font-size: 18px; font-weight: 500; color: #000; }
.faq-toggle-icon { display: flex; align-items: center; transition: transform 0.25s ease; }

.faq-body { max-height: 0; overflow: hidden; padding: 0 24px; transition: max-height 0.3s ease, padding 0.3s ease; }
.faq-body p { color: var(--Text-Neutral-Tertiary); font-size: 18px; line-height: 150%; margin-bottom: 16px; }

/* Indented Inner FAQ Content Formatting */
.rules-heading { display: block; font-size: 16px; margin: 12px 0 6px 0; color: var(--Text-Brand-Primary); }
.indented-rules-list {
    padding-left: 28px; /* Indents list inward */
    margin-bottom: 16px;
}
.indented-rules-list li {
    color: var(--Text-Neutral-Tertiary);
    font-size: 16px;
    line-height: 150%;
    margin-bottom: 8px;
}

.faq-accordion-item.open .faq-body { max-height: 1200px; padding: 0 24px 24px 24px; }
.faq-accordion-item.open .faq-toggle-icon { transform: rotate(45deg); }

/* Page 5: Ready Business Banner with Scale Preservation Parameters */
.ready-business-section {
    /* background-color: #FFFFFF; */
    background: linear-gradient(to bottom, #FFFFFF 66.666%, #0A1B0E 66.666%);
    position: relative;
    z-index: 50; /* Positioned on top of the footer background mask */
    display: flex;
    justify-content: center;
}
.ready-frame-outer-wrapper { max-width: 1320px; width: 100%; padding: 0 24px; }
.ready-frame-container { width: 100%; position: relative; display: inline-block; }


.ready-frame-svg { width: 100%; height: auto; display: block; }

/* Perfect responsive button mapping layout constants */
.waitlist-floating-btn {
    position: absolute;
    left: calc((61 / 1272) * 100%);
    bottom: calc((101 / 445) * 100%);
    z-index: 60;
    padding: clamp(10px, 1.2vw, 16px) clamp(20px, 2.5vw, 36px);
    font-size: clamp(12px, 1.1vw, 16px);
    white-space: nowrap;
}

/* Layer Stacked Footer Element Configuration */
.main-footer {
    background: var(--Background-Brand-Greens-Darker, #0A1B0E);
    /* Calculated offset mask properties so it starts exactly 2/3 down from the top of the SVG banner */
  /*   padding: 260px 24px 40px 24px; */
    padding: 60px 24px 40px 24px;
    position: relative;
    z-index: 10;
  /*   margin-top: -150px; */ /* Hidden background stack overlap margin */
}

/* Restored Transparent Watermark Component */
.footer-bg-motif {
    position: absolute;
    bottom: 0;
    right: 0;
    width: clamp(250px, 40vw, 542.7px);
    height: clamp(180px, 30vw, 403.3px);
    background: url('../assets/nkwado-background.svg') no-repeat right bottom;
    background-size: contain;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
}

.footer-top-container { max-width: 1320px; margin: 0 auto; display: flex; justify-content: space-between; position: relative; z-index: 5; }
.footer-brand-column { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.footer-logo { height: 36px; display: block; }

/* Requested Footer Subtitle Specifications Styling */
.footer-brand-subtitle {
    color: #FFF;
    font-family: "Public Sans", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}
.social-row { display: flex; gap: 16px; margin-top: 4px; }
.social-row img { width: 24px; height: 24px; transition: transform 0.2s ease; }
.social-row img:hover { transform: scale(1.1); }

.footer-links-grid { display: flex; gap: 80px; }
.footer-column { display: flex; flex-direction: column; gap: 16px; }
.footer-column h5 { color: #FFF; font-size: 16px; font-weight: 700; }
.footer-column a { color: #FFF; text-decoration: none; font-size: 16px; font-weight: 400; transition: color 0.2s ease; }
.footer-column a:hover { color: var(--Background-Brand-Fresh-Greens-Light); }

.footer-divider {
    max-width: 1320px;
    margin: 60px auto 30px auto;
    border-top: 0.8px solid var(--Background-Brand-Fresh-Greens-Light, #B2CA6F);
    position: relative;
    z-index: 5;
}
.footer-bottom-container { max-width: 1320px; margin: 0 auto; display: flex; justify-content: space-between; position: relative; z-index: 5; }
.copyright { color: #E6E7EA; font-size: 14px; }
.legal-row { display: flex; gap: 24px; }
.legal-row a { color: #E6E7EA; text-decoration: none; font-size: 14px; transition: color 0.2s ease; }
.legal-row a:hover { color: #FFF; }

/* Micro Dialog Modal Popups Framework Layout */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(10, 27, 14, 0.6);
    z-index: 5000;
    justify-content: center; align-items: center; padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal-card { background-color: #FFFFFF; padding: 32px; border-radius: 16px; max-width: 440px; width: 100%; }
.modal-card h3 { font-size: 22px; margin-bottom: 12px; }
.modal-card p { font-size: 15px; margin-bottom: 24px; color: var(--Text-Neutral-Secondary); }
.modal-card input { width: 100%; padding: 14px; border-radius: 8px; border: 1px solid var(--Background-Brand-Fresh-Greens-Light); font-size: 16px; margin-bottom: 20px; outline: none; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; }
.btn-secondary { background: transparent; border: 1px solid var(--Background-Brand-Fresh-Greens-Light); border-radius: 99px; padding: 10px 24px; font-size: 15px; font-weight: 600; cursor: pointer; }
.modal-message { margin-top: 16px; font-size: 14px; text-align: center; }

/* Responsive Media Breakdown Rules Engine */
@media (max-width: 1024px) {
    .hero-title, .section-title { font-size: 46px; letter-spacing: -1.2px; }
    .card-inner-alignment { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .categories-grid {
      max-width: 600px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: 1fr; gap: 24px; 
    }
    .faq-layout-container { grid-template-columns: 1fr; gap: 40px; }
    /**/
}

@media (max-width: 800px) {
    .hero-title, .section-title { font-size: 46px; letter-spacing: -1.2px; }
    .card-inner-alignment { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .categories-grid {
      max-width: 450px;
      margin: 0 auto;
      padding: 0 24px;
      display: grid;
      grid-template-columns: 1fr; gap: 24px; 
    }
    /* .value-prop-grid { grid-template-columns: 1fr; gap: 32px; } */
    .faq-layout-container { grid-template-columns: 1fr; gap: 40px; }
    .footer-top-container { flex-direction: column; gap: 48px; }
    .footer-links-grid { gap: 40px; justify-content: space-between; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero-title, .section-title { font-size: 34px; letter-spacing: -0.8px; }
    
    /* Responsive scaling for subtitles on mobile */
    .hero-subtitle, .section-subtitle, .faq-sub-title { font-size: 15px; line-height: 140%; }
    .faq-main-title { font-size: 34px; }

    /* Last page waitlist text font scaling rules override */
    .mobile-scaling-font {
        font-size: clamp(10px, 2.6vw, 13px) !important;
        padding: 8px 16px !important;
        /* bottom: calc((45 / 445) * 100%) !important; */ /* Visual offset balancing alignment */
        bottom: calc((65 / 445) * 100%) !important; /* Visual offset balancing alignment */
    }

    /* Left justified mobile footer alignment blocks setup */
    .footer-brand-column {
        align-items: flex-start;
        text-align: left;
        width: 100%;
    }
    .footer-logo {
        margin-left: 0;
    }
    /* Scaled down mobile social media icon views */
    .social-row img {
        width: 20px;
        height: 20px;
    }

    /* Fonts scale down specifications processing */
    .copyright, .legal-row a {
        font-size: 12px;
    }
    .footer-column h5 {
        font-size: 14px;
    }
    .footer-column a {
        font-size: 14px;
    }

    /* .footer-links-grid {
        flex-direction: column;
        gap: 28px;
    }
    .footer-bottom-container {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    .main-footer {
        padding-top: 180px;
        margin-top: -100px;
    } */
}


@media (max-width: 400px) {

  .mobile-scaling-font {
    font-size: clamp(7px, 1.2vw, 10px) !important;
    padding: 4px 8px !important; 
    bottom: calc((60 / 445) * 120%) !important; /* Visual offset balancing alignment */
  }
  .value-prop-grid { grid-template-columns: 1fr; gap: 32px; }
}