/* =============================================================
   XICA REBRAND — NEW PAGES SPECIFIC EXTENSIONS
   Loaded on: home.php, page-aide.php, page-ignition.php only.
   Assumes structural layout metrics are processed by xica-rebrand.css.
   ============================================================= */

/* =========================================================
   1. EXTENDED SPATIAL GRIDS (8px-UNIT SYSTEM)
   ========================================================= */
:root {
    --space-4:   4px;
    --space-8:   8px;
    --space-16:  16px;
    --space-24:  24px;
    --space-32:  32px;
    --space-48:  48px;
    --space-64:  64px;
    --space-96:  96px;
    --space-128: 128px;
    
    --section-pad:   48px;
    --section-pad-l: 64px;
    --gap-section:   32px;
}
@media (min-width: 768px) {
    :root {
        --section-pad: 64px;
        --section-pad-l: 80px;
        --gap-section: 48px;
    }
}
@media (min-width: 1024px) {
    :root {
        --section-pad: 80px;
        --section-pad-l: 100px;
        --gap-section: 80px;
    }
}

.section-pad    { padding-block: var(--section-pad); }
.section-pad-sm { padding-block: calc(var(--section-pad) * 0.7); }
.section-pad-lg { padding-block: var(--section-pad-l); }

/* =========================================================
   2. UNIQUE CONTENT DISPLAY MATRICES
   ========================================================= */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.grid-split { display: grid; grid-template-columns: 1fr; gap: var(--gap-section); }
@media (min-width: 1024px) { .grid-split { grid-template-columns: 1fr 1fr; } }
.gap-section { gap: var(--gap-section); }

/* =========================================================
   3. DISPLAY TYPE SCALING
   ========================================================= */
.h-mega { font-size: clamp(96px, 26vw, 480px); line-height: 1; text-align: center; margin: clamp(24px, 4vw, 40px) 0; letter-spacing: 0; }
.h-sub-jp { font-size: clamp(15px, 2.1vw, 19px); font-weight: 500; margin-bottom: 16px; }
.h-page-jp { font-size: clamp(34px, 6vw, 58px); line-height: 1.3; }

.body-jp--measure { max-width: 38em; }

/* =========================================================
   4. LUXURY SURFACE & PRINT-EDITION HAIRLINES
   ========================================================= */
.hairline-box        { border: 0.5px solid var(--rule); padding: clamp(20px, 3vw, 32px); background: var(--paper); }
.hairline-box-dark   { border: 0.5px solid rgba(255,255,255,0.18); padding: clamp(20px, 3vw, 32px); }
.hairline-box-accent { border: 1px solid var(--ink); }
.border-rule         { border: 0.5px solid var(--rule); }
.rule-top            { border-top: 0.5px solid var(--rule); }
.rule-bottom         { border-bottom: 0.5px solid var(--rule); }
.strong-rule-top     { border-top: 1px solid var(--ink); padding-top: clamp(24px, 4vw, 40px); }
.bg-paper-2          { background-color: var(--paper-2); }
.bg-paper-3          { background-color: var(--paper-3); }

/* Hard Seam Boundary Shift Overrides */
.bg-ink              { background-color: var(--ink); color: var(--paper); box-shadow: inset 0 1px 0 var(--ink); }

/* ScaleY Layering for Absolute Half-Pixel Retina Output */
.hairline-rule {
    height: 1px; border: none; background: var(--rule); transform: scaleY(0.5); transform-origin: top; margin-block: 0;
}
.hairline-rule-dark {
    height: 1px; background: rgba(255,255,255,0.18); transform: scaleY(0.5); transform-origin: top;
}

/* Standalone Print-Equivalent Editorial Break */
.chapter-rule { width: 100%; height: 1px; background: var(--ink); display: block; flex-shrink: 0; }

/* =========================================================
   5. SPECIFIC MICRO-INTERACTION & DISPLAY DECORATIONS
   ========================================================= */
.bg-ink .btn {
    border-color: rgba(255,255,255,0.5);
    background-image: linear-gradient(to top, var(--paper) 50%, transparent 50%);
    background-size: 100% 202%; background-position: 0 0; color: var(--paper);
}
.bg-ink .btn:hover, .bg-ink .btn:focus-visible {
    background-position: 0 100%; color: var(--ink); border-color: var(--paper);
}

.btn-arrow-glyph {
    display: inline-block; font-family: var(--mono); transition: transform 0.18s cubic-bezier(0.25, 0, 0, 1);
}
.btn:hover .btn-arrow-glyph, .btn:focus-visible .btn-arrow-glyph { transform: translateX(3px); }

/* =========================================================
   6. STRUCTURAL SEGMENTS & SEQUENTIAL ARRAYS
   ========================================================= */
.process-row { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.process-row .step-arrow { color: var(--grey-2); font-family: var(--mono); align-self: center; transform: rotate(90deg); display: inline-block; }
.step-box-horizontal { flex: 1; text-align: center; padding: 20px 16px; }

@media (min-width: 1024px) {
    .process-row { flex-direction: row; justify-content: space-between; align-items: stretch; gap: 8px; }
    .process-row .step-arrow { transform: none; display: flex; align-items: center; margin: 0 4px; }
    .step-box-horizontal { min-width: 0; padding: 24px 14px; }
}

/* =========================================================
   7. CORE COMPONENT DOMAIN PLATFORMS
   ========================================================= */
.mode-tag { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; padding: 3px 10px; border: 0.5px solid var(--rule); color: var(--grey-1); margin-bottom: 8px; }
.mode-tag-accent { border-color: var(--ink); color: var(--ink); }

.aip-chip { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; padding: 2px 8px; background: var(--paper-3); border: 0.5px solid var(--grey-3); color: var(--grey-1); margin-right: 6px; margin-bottom: 4px; }
.aip-chip-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.aip-bar { max-width: 1100px; margin-inline: auto; border: 0.5px solid var(--ink); background: var(--ink); padding: 24px clamp(20px, 3vw, 32px); display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .aip-bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; } }
.aip-bar > p:last-child { flex: 1; min-width: 0; }

.delivery-modes { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .delivery-modes { grid-template-columns: 1fr 1fr; } }

.pain-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.pain-grid > .hairline-box, .pain-grid > .hairline-box-accent { border-bottom-width: 0; }
.pain-grid > .hairline-box:last-child, .pain-grid > .hairline-box-accent:last-child { border-bottom-width: 0.5px; }
@media (min-width: 768px) {
    .pain-grid { grid-template-columns: 1fr 1fr; }
    .pain-grid > .hairline-box { border-right-width: 0.5px; border-bottom-width: 0.5px; }
    .pain-grid > .hairline-box-accent { border-bottom-width: 1px; }
}

.page-hero { padding-block: clamp(64px, 10vw, 120px); }
.step-card-text { font-size: clamp(13px, 1.8vw, 16px); line-height: 1.5; }

.insights-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 600px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .insights-grid { grid-template-columns: repeat(3, 1fr); } }
.insights-grid > div { aspect-ratio: 1 / 1; }

.core-index { font-family: var(--mono); font-size: clamp(16px, 1.9vw, 22px); letter-spacing: 0.1em; text-transform: uppercase; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* =========================================================
   8. DISPLAY WATERMARK SYSTEM
   ========================================================= */
.section-with-mega-num { position: relative; overflow: hidden; }
.section-mega-num {
    position: absolute; top: -0.1em; right: 0; font-family: var(--mono); font-size: clamp(96px, 16vw, 192px);
    line-height: 1; color: var(--grey-3); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
    pointer-events: none; user-select: none; z-index: 0;
}
.section-with-mega-num > * { position: relative; z-index: 1; top: 0px; }
.bg-paper-2 .section-mega-num { color: var(--grey-2); opacity: 0.35; }

/* =========================================================
   9. EDITORIAL QUOTE DESIGN MATRIX
   ========================================================= */
.pull-quote { border-left: 1px solid var(--ink); padding-left: clamp(20px, 3vw, 32px); margin-block: clamp(32px, 5vw, 56px); }
.pull-quote p { font-family: var(--serif-jp); font-size: clamp(13px, 1.7vw, 18px); line-height: 1.55; font-weight: 500; letter-spacing: 0.005em; color: var(--ink-2); }
.pull-quote .pull-quote-source { display: block; margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--grey-2); }
.bg-ink .pull-quote { border-left-color: rgba(255,255,255,0.3); }
.bg-ink .pull-quote p { color: var(--paper-3); }

.editorial-quote { max-width: 840px; margin-inline: auto; margin-block: clamp(24px, 4vw, 40px); }
.editorial-quote .pull-quote { margin-top: 0; margin-bottom: 0; }
.editorial-quote-attribution { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding-left: calc(clamp(20px, 3vw, 32px) + 1px); }
.editorial-quote-portrait {
    width: 80px; height: 98px; flex-shrink: 0; border: 0.5px solid var(--rule); background: var(--paper-3);
    display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--grey-2); font-family: var(--mono);
}

/* =========================================================
   10. SCROLL-LINKED PASSIVE INDEX METRIC
   ========================================================= */
.scroll-index {
    position: fixed; left: clamp(12px, 2vw, 24px); top: 50%; transform: translateY(-50%);
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; color: var(--grey-3);
    writing-mode: vertical-rl; display: none; flex-direction: column; align-items: center; gap: 6px;
    z-index: 50; pointer-events: none; user-select: none; transition: opacity 0.4s ease;
}
@media (min-width: 1280px) { .scroll-index { display: flex; } }
.scroll-index-sep { opacity: 0.4; margin-block: 4px; }
.scroll-index-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; transition: opacity 0.2s ease; }
.scroll-index-label { font-size: 11px; letter-spacing: 0.1em; color: var(--grey-3); opacity: 0.6; max-height: 120px; overflow: hidden; text-overflow: ellipsis; }

/* =========================================================
   11. ASYNCHRONOUS COMPONENT STAGGER LOGIC
   ========================================================= */
.section-header-group { overflow: visible; }
.section-header-group .section-eyebrow {
    opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0, 0, 1); transition-delay: 0ms;
}
.section-header-group .section-heading {
    opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 0, 0, 1); transition-delay: 80ms;
}
.section-header-group.is-visible .section-eyebrow,
.section-header-group.is-visible .section-heading { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .section-header-group .section-eyebrow, .section-header-group .section-heading {
        opacity: 1; transform: none; transition: none;
    }
}

/* =========================================================
   12. AIDE VISUAL LAYER — GRAPHICS ARCHITECTURE SYSTEM
   ========================================================= */
.aide-arch-wrap { width: 100%; background: var(--paper); border: 0.5px solid var(--rule); padding: clamp(20px, 3vw, 40px); box-sizing: border-box; margin-top: clamp(32px, 4vw, 48px); }
.aide-arch-header { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 0.5px solid var(--rule); margin-bottom: 20px; }
.aide-arch-legend { display: flex; flex-wrap: wrap; gap: 12px 24px; padding-top: 16px; margin-top: 16px; border-top: 0.5px solid var(--rule); font-family: var(--mono); font-size: 12px; color: var(--grey-1); letter-spacing: 0.14em; text-transform: uppercase; }
.aide-arch-legend span { color: var(--grey-2); }
.aide-arch-legend span:first-child { color: var(--grey-1); }

/* SVG Engineering States via IntersectionObserver */
.aide-arch-svg .aide-arch-frame { opacity: 0; transition: opacity 0.5s ease var(--d, 0s); }
.aide-arch-svg.is-in .aide-arch-frame { opacity: 1; }
.aide-arch-svg .aide-arch-node text { opacity: 0; transition: opacity 0.5s ease calc(var(--d, 0s) + 0.15s); }
.aide-arch-svg.is-in .aide-arch-node text { opacity: 1; }
.aide-arch-svg .aide-arch-draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.7s cubic-bezier(.6,0,.2,1) var(--d, 0s); }
.aide-arch-svg.is-in .aide-arch-draw { stroke-dashoffset: 0; }
.aide-arch-svg .aide-arch-fadein { opacity: 0; transition: opacity 0.5s ease var(--d, 0s); }
.aide-arch-svg.is-in .aide-arch-fadein { opacity: 1; }
.aide-arch-svg .aide-arch-aipbar { opacity: 0; transition: opacity 0.6s ease 1.2s; }
.aide-arch-svg.is-in .aide-arch-aipbar { opacity: 1; }

.core-section-layout { display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 1024px) { .core-section-layout { grid-template-columns: 1.2fr 1fr; } }

.core-accent { width: 100%; aspect-ratio: 4 / 3; max-width: 360px; border: 0.5px solid var(--rule); background: var(--paper); position: relative; overflow: hidden; }
.core-accent svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.core-accent-label { position: absolute; top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--grey-2); pointer-events: none; }
.core-accent-label.left  { left: 14px; }
.core-accent-label.right { right: 14px; }

.core-acc-dot { opacity: 0; transition: opacity 0.4s ease var(--d, 0s); }
.core-accent.is-in .core-acc-dot { opacity: 1; }
.core-acc-path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s cubic-bezier(.6,0,.2,1) var(--d, 0s); }
.core-accent.is-in .core-acc-path { stroke-dashoffset: 0; }
.core-acc-ring { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s cubic-bezier(.6,0,.2,1) var(--d, 0s); }
.core-accent.is-in .core-acc-ring { stroke-dashoffset: 0; }

/* Track + Fill Column Spine System */
.aide-spine { position: fixed; left: 24px; top: 50%; transform: translateY(-50%); z-index: 40; display: none; gap: 16px; align-items: stretch; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
@media (min-width: 1400px) { .aide-spine { display: flex; } }
.aide-spine.is-visible { opacity: 1; pointer-events: auto; }
.aide-spine-track { width: 1px; background: var(--rule); position: relative; min-height: 360px; flex-shrink: 0; }
.aide-spine-fill { position: absolute; left: 0; top: 0; width: 1px; background: var(--ink); transition: height 0.15s linear; }

/* Dark Section Luminescent Inversion States */
.aide-spine.is-dark .aide-spine-track { background: rgba(255,255,255,0.15); }
.aide-spine.is-dark .aide-spine-fill  { background: var(--paper); }
.aide-spine.is-dark .spine-mark       { color: rgba(255,255,255,0.28); }
.aide-spine.is-dark .spine-mark.is-active { color: var(--paper); }
.aide-spine.is-dark .spine-mark:hover { color: rgba(255,255,255,0.65); }

.spine-marks { display: flex; flex-direction: column; justify-content: space-between; min-height: 360px; }
.spine-mark { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--grey-3); transition: color 0.3s ease; cursor: pointer; background: none; border: none; padding: 0; text-align: left; text-transform: uppercase; }
.spine-mark:hover { color: var(--grey-1); }
.spine-mark.is-active { color: var(--ink); }
.spine-mark-tick { width: 12px; height: 0.5px; background: currentColor; flex-shrink: 0; transition: width 0.2s ease, height 0.2s ease; }
.spine-mark.is-active .spine-mark-tick { width: 18px; height: 1px; }
.spine-mark-num { font-variant-numeric: tabular-nums; }
.spine-mark-label { font-size: 10px; opacity: 0.7; }

/* High-End Enterprise Vector Curves (Smooth Deceleration) */
.js-core-accent svg .svg-group-before { transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1); opacity: 0.15; }
.js-core-accent.is-in svg .svg-group-before { opacity: 0.45; }
.js-core-accent svg .svg-transformation-arrow { transform: translateX(-6px); opacity: 0; transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1); transition-delay: 0.2s; }
.js-core-accent.is-in svg .svg-transformation-arrow { transform: translateX(0); opacity: 1; }
.js-core-accent svg .pop-node { transform: scale(0); transform-origin: center; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.js-core-accent.is-in svg .pop-node { transform: scale(1); transition-delay: var(--delay, 0s); }

.js-core-accent svg .draw-edge { stroke-dasharray: 140; stroke-dashoffset: 140; transition: stroke-dashoffset 1s cubic-bezier(0.25, 1, 0.5, 1); }
.js-core-accent.is-in svg .draw-edge { stroke-dashoffset: 0; transition-delay: var(--delay, 0s); }
.js-core-accent svg .draw-stream { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1); }
.js-core-accent.is-in svg .draw-stream { stroke-dashoffset: 0; transition-delay: var(--delay, 0s); }
.js-core-accent svg .draw-ring { stroke-dasharray: 450; stroke-dashoffset: 450; transform: rotate(-20deg); transform-origin: 280px 135px; transition: stroke-dashoffset 1.3s cubic-bezier(0.16, 1, 0.3, 1), transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
.js-core-accent.is-in svg .draw-ring { stroke-dashoffset: 0; transform: rotate(0deg); transition-delay: var(--delay, 0s); }

.page-view { display: none; padding-top: var(--header-h); }
@media (min-width: 1024px) { .page-view { padding-top: 96px; } }
.page-view.active { display: block; animation: fadeIn 0.4s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.img-placeholder { background-color: var(--paper-3); display: flex; align-items: center; justify-content: center; border: 0.5px solid var(--rule); color: var(--grey-1); }
.aspect-video  { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }

/* ================================================================
   XICA — SPIRAL SECTION LAYOUT FIX
   ================================================================ */


/* ── A. Stacking-context + overflow containment ──────────────────
   ─────────────────────────────────────────────────────────────── */
.xr-spiral-section {
    isolation: isolate;
    overflow: clip;
}


/* ── B. Grid alignment ───────────────────────────────────────────
   align-items: start  prevents each grid cell from stretching to
   the row's maximum height. Each item is now only as tall as its
   intrinsic content, so neither column can force the other into
   an oversized cell that overflows its own paint boundary.

   Scoped to .xr-spiral-section so it does not affect other
   .grid-split instances elsewhere on the page.
   ─────────────────────────────────────────────────────────────── */
.xr-spiral-section .grid-split {
    align-items: start;
}


/* ── C. SVG container sizing at sub-desktop ──────────────────────
   ─────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .xr-spiral-section .grid-split > div:last-child {
        width: min(100%, 560px) !important;
        margin-inline: auto;
    }
}


/* ── D. Text-column vertical alignment ───────────────────────────
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1280px) {
    .xr-spiral-section .grid-split > div:first-child {
        justify-content: flex-start;
    }
}

/* ─── WHAT Section — Isometric Before/After diagram ─── */

.why-aide-diagram-column {
    width: 100%;
    background-color: var(--paper);
    border: 0.5px solid var(--rule);
    padding: clamp(10px, 2vw, 30px);
    box-sizing: border-box;
}

.why-aide-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Grid fade-in */
.why-aide-section svg .blueprint-grid {
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.why-aide-section.is-visible svg .blueprint-grid { opacity: 0.85; }

/* Corner tick draw */
.why-aide-section svg .corner-ticks line {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.why-aide-section.is-visible svg .corner-ticks line {
    stroke-dashoffset: 0;
    transition-delay: 0.1s;
}

/* Header banners slide down */
.why-aide-section svg .why-header-banner {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.why-aide-section.is-visible svg .why-header-banner {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
}

/* Chevron arrows draw */
.why-aide-section svg .why-chev-arrow {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.why-aide-section.is-visible svg .why-chev-arrow {
    stroke-dashoffset: 0;
    transition-delay: var(--d, 1s);
}

/* Isometric layer rise */
.why-aide-section svg .why-iso {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s cubic-bezier(0.25, 1, 0.5, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.why-aide-section.is-visible svg .why-iso {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--d, 0s);
}

/* Generic fade+rise for labels, connectors, icons */
.why-aide-section svg .why-tfade {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.8s ease,
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.why-aide-section.is-visible svg .why-tfade {
    opacity: 1;
    transform: translateY(0);
    transition-delay: var(--d, 0.3s);
}

/* Feedback loop path draw */
.why-aide-section svg .feedback-loop-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
}
.why-aide-section.is-visible svg .feedback-loop-line {
    stroke-dashoffset: 0;
    transition-delay: 1.4s;
}

/* Feedback loop label fade */
.why-aide-section svg .why-tfade-text {
    opacity: 0;
    transition: opacity 1s ease;
}
.why-aide-section.is-visible svg .why-tfade-text {
    opacity: 1;
    transition-delay: 1.6s;
}

/* Homepage AIDE Before after */
@media (max-width: 639px) {
    .core-ba-triptych-grid {
        grid-template-columns: 1fr;
    }
    .core-ba-triptych-grid > div {
        border-right: none;
        border-bottom: 0.5px solid var(--rule);
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .core-ba-triptych-grid > div:last-child {
        border-bottom: none;
    }
}