/* =============================================================
   Techbase Solution — Main Stylesheet
   techbasesolution.com | Light Theme | v1.0
   ============================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --or:#E8391D;--or2:#FF5533;--or-glow:rgba(232,57,29,0.06);--or-dim:rgba(232,57,29,0.06);
  --bg:#FFFFFF;--bg2:#F7F7F9;--bg3:#F0F0F4;--line:rgba(0,0,0,0.06);--line2:rgba(232,57,29,0.2);
  --g1:#111113;--g2:#4A4A5A;--g3:#8A8A9A;--green:#16A34A;
  --r:8px;--r2:14px;--r3:24px;--font:'Inter','Segoe UI',system-ui,sans-serif;
  --sh:0 10px 30px rgba(0,0,0,0.04);
}
body{font-family:var(--font);background:var(--bg);color:var(--g1);line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}ul{list-style:none}

/* ── SCROLL REVEAL ENGINE ── */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(0.16,1,0.3,1),transform 1s cubic-bezier(0.16,1,0.3,1)}
.reveal.active{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.15s}
.reveal-d2{transition-delay:.3s}
.reveal-d3{transition-delay:.45s}

/* ── HERO LOAD ANIMATION ── */
.hero-left{opacity:0;transform:translateY(30px);animation:heroIn 1s cubic-bezier(0.16,1,0.3,1) .1s forwards}
.hero-right{opacity:0;transform:translateY(30px);animation:heroIn 1s cubic-bezier(0.16,1,0.3,1) .35s forwards}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}

/* ── NAV ── */
.nav{position:sticky;top:0;left:0;right:0;z-index:1000;height:72px;display:flex;align-items:center;background:rgba(255,255,255,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;width:100%}
.nav-logo{display:flex;align-items:center;line-height:1}
.nav-logo img{height:50px;width:auto;display:block}
.nav-logo span{color:var(--or)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:8px 14px;font-size:.88rem;font-weight:500;color:var(--g2);border-radius:var(--r);transition:all .2s;white-space:nowrap}
.nav-links a:hover{color:var(--g1);background:var(--bg2)}
.nav-links a.act{color:var(--or);font-weight:600}
.dd{position:relative}
.dd>a{display:flex;align-items:center;gap:4px}
.dd>a::after{content:'';width:0;height:0;border:4px solid transparent;border-top-color:var(--g3);margin-top:2px;transition:transform .2s}
.dd:hover>a::after{transform:rotate(180deg)}
.dd-menu{display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:var(--r2);min-width:240px;padding:8px;box-shadow:var(--sh);margin-top:4px}
.dd:hover .dd-menu{display:block}
.dd-menu a{display:block;padding:10px 14px;font-size:.84rem;color:var(--g2);border-radius:var(--r)}
.dd-menu a:hover{color:var(--g1);background:var(--bg2)}
.nav-cta{background:var(--or);color:#fff!important;border-radius:var(--r);padding:10px 20px;font-weight:600;box-shadow:0 4px 14px rgba(232,57,29,.2);transition:all .2s;white-space:nowrap;}
.nav-cta:hover{background:var(--or2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,57,29,.3)}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:6px;z-index:1100}
.hamburger span{display:block;width:24px;height:2.5px;background:var(--g1);border-radius:2px;transition:all .3s ease}
.hamburger.open span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

/* ── MOBILE DRAWER ── */
.mobile-nav{
  position:fixed;top:0;right:0;bottom:0;
  width:min(320px,88vw);
  background:#fff;
  z-index:1050;
  box-shadow:-10px 0 48px rgba(0,0,0,0.12);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(0.4,0,0.2,1);
  overflow:hidden; /* clip children; scroll handled by inner body */
}
.mobile-nav.open{transform:translateX(0)}

/* drawer head — logo + close btn */
.mob-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.mob-drawer-logo{font-size:.95rem;font-weight:800;letter-spacing:-0.02em;color:var(--g1)}
.mob-drawer-logo em{color:var(--or);font-style:normal}

/* close button */
.mobile-menu-close{
  position:static; /* override previous absolute */
  width:44px;height:44px;
  border-radius:50%;
  background:var(--bg3);
  border:1px solid var(--line);
  color:var(--g2);
  font-size:22px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  flex-shrink:0;
  transition:background .2s,color .2s,transform .2s;
}
.mobile-menu-close:hover{background:var(--or-dim);color:var(--or);border-color:var(--line2)}
.mobile-menu-close:active{transform:rotate(90deg) scale(0.9)}

/* scrollable body */
.mob-drawer-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px 14px 32px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.mob-drawer-body::-webkit-scrollbar{width:3px}
.mob-drawer-body::-webkit-scrollbar-track{background:transparent}
.mob-drawer-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:2px}

/* flat links */
.mob-link{
  display:block;
  padding:11px 14px;
  font-size:.9rem;font-weight:500;
  color:var(--g2);
  border-radius:var(--r);
  transition:background .15s,color .15s;
}
.mob-link:hover{color:var(--g1);background:var(--bg2)}
.mob-link.m-cta{
  background:var(--or);color:#fff!important;
  text-align:center;font-weight:700;
  border-radius:var(--r);
  margin-top:10px;
  box-shadow:0 4px 14px rgba(232,57,29,.25);
}
.mob-link.m-cta:hover{background:var(--or2)}

/* accordion */
.mob-accordion{border-radius:var(--r);overflow:hidden}
.mob-acc-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;
  font-size:.9rem;font-weight:500;
  color:var(--g2);
  background:none;border:none;cursor:pointer;
  border-radius:var(--r);
  transition:background .15s,color .15s;
  font-family:inherit;
}
.mob-acc-trigger:hover{color:var(--g1);background:var(--bg2)}
.mob-acc-trigger[aria-expanded="true"]{color:var(--or);background:var(--or-dim)}
.mob-chevron{width:12px;height:12px;flex-shrink:0;transition:transform .25s ease;color:var(--g3)}
.mob-acc-trigger[aria-expanded="true"] .mob-chevron{transform:rotate(180deg);color:var(--or)}

/* accordion panel */
.mob-acc-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s cubic-bezier(0.4,0,0.2,1);
}
.mob-acc-panel.open{max-height:300px}
.mob-sub-link{
  display:block;
  padding:9px 14px 9px 26px;
  font-size:.85rem;font-weight:500;color:var(--g3);
  border-radius:var(--r);
  transition:color .15s,background .15s;
  position:relative;
}
.mob-sub-link::before{content:'';position:absolute;left:14px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--or-dim);border:1.5px solid var(--or)}
.mob-sub-link:hover{color:var(--g1);background:var(--bg2)}

/* ── HERO DASHBOARD IMAGE ── */
.hero-img-wrap{position:relative;width:100%}
.hero-img-wrap::before{content:'';position:absolute;inset:-24px;background:radial-gradient(ellipse at 60% 40%,rgba(232,57,29,0.10) 0%,transparent 65%);border-radius:24px;pointer-events:none;z-index:0}
.hero-img-frame{position:relative;z-index:1;border-radius:16px;}
.hero-img-frame img{width:110%;height:auto;display:block;border-radius:16px}
@media(max-width:991px){.hero-img-wrap{max-width:520px;margin:0 auto}}

/* ── HERO ── */
.hero{padding:60px 0;background:var(--bg);position:relative;overflow:hidden;min-height:calc(100vh - 72px);display:flex;align-items:center;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;background-position:center top}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,0) 0%,#ffffff 70%);pointer-events:none}
.hero-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:40px;align-items:center;position:relative;width:100%}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--or);margin-bottom:18px}
.eyebrow::before{content:'';width:18px;height:2px;background:var(--or);flex-shrink:0}
.hero-left h1{font-size:clamp(1.8rem,4vw,3.4rem);font-weight:850;line-height:1.15;letter-spacing:-0.02em;color:var(--g1);margin-bottom:20px}
.hero-left h1 .accent{color:var(--or)}
.hero-left p{font-size:1.05rem;color:var(--g2);line-height:1.65;max-width:540px;margin-bottom:28px}
.trust-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:100px;padding:6px 14px;font-size:.78rem;font-weight:600;color:var(--g2);box-shadow:0 2px 6px rgba(0,0,0,0.02)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.pill .dot.or{background:var(--or)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;background:var(--or);color:#fff;border-radius:var(--r);font-size:.92rem;font-weight:600;border:none;box-shadow:0 6px 20px rgba(232,57,29,.25);transition:all .2s}
.btn-primary:hover{background:var(--or2);transform:translateY(-1px);box-shadow:0 8px 26px rgba(232,57,29,.35)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;background:#fff;color:var(--g1);border:1px solid rgba(0,0,0,0.15);border-radius:var(--r);font-size:.92rem;font-weight:600;transition:all .2s}
.btn-ghost:hover{border-color:var(--or);color:var(--or);background:var(--or-dim)}
.hero-right{width:100%;display:flex;justify-content:center;position:relative}
.hero-graphic{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;width:100%;max-width:460px;position:relative;box-shadow:0 20px 50px rgba(0,0,0,0.06);border-top:4px solid var(--or)}
.dash-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.dash-title{font-size:.85rem;font-weight:700;color:var(--g1)}
.dash-badge{background:rgba(22,163,74,0.1);color:var(--green);border-radius:100px;padding:2px 8px;font-size:.65rem;font-weight:700;letter-spacing:.05em}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.ds{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center}
.ds-val{font-size:1.1rem;font-weight:800;color:var(--g1);line-height:1.1}
.ds-label{font-size:.62rem;color:var(--g3);margin-top:4px;white-space:nowrap}
.ds-val.or{color:var(--or)}
.dash-chart{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:16px}
.chart-label{font-size:.65rem;color:var(--g3);margin-bottom:12px}
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:60px}
.bar{flex:1;border-radius:3px 3px 0 0;background:var(--bg3);height:30%}
.bar.active{background:var(--or)}
.bar.hi{background:rgba(232,57,29,.25)}
.dash-nodes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.node{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 4px;text-align:center}
.node-icon{font-size:1.1rem;margin-bottom:4px}
.node-label{font-size:.58rem;font-weight:700;color:var(--g2);white-space:nowrap}

/* ── TRUST BAR ── */
.trust-bar{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;overflow:hidden;position:relative;cursor:grab}
.trust-bar:active{cursor:grabbing}
.trust-bar::before,.trust-bar::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.trust-bar::before{left:0;background:linear-gradient(to right,var(--bg2),transparent)}
.trust-bar::after{right:0;background:linear-gradient(to left,var(--bg2),transparent)}
.trust-track{display:flex;width:max-content;animation:ticker 32s linear infinite}
.trust-track:hover{animation-play-state:paused}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.trust-item{display:flex;align-items:center;gap:10px;padding:14px 32px;border-right:1px solid var(--line);flex-shrink:0;white-space:nowrap;user-select:none}
.trust-item-icon{width:30px;height:30px;border-radius:8px;background:var(--or-dim);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.trust-item-text strong{display:block;font-size:.78rem;font-weight:700;color:var(--g1);line-height:1.2}
.trust-item-text span{font-size:.68rem;color:var(--g3)}

/* ── SOFTWARE SUITE ── */
.suite{padding:80px 0;background:var(--bg)}
.suite-inner{max-width:1200px;margin:0 auto;padding:0 20px}
.sec-head{margin-bottom:48px}
.sec-head .eyebrow{margin-bottom:10px}
.sec-head h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;letter-spacing:-0.025em;color:var(--g1);line-height:1.15;margin-bottom:12px}
.sec-head p{font-size:.95rem;color:var(--g2);max-width:540px;line-height:1.7}
.suite-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.suite-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s;box-shadow:0 2px 12px rgba(0,0,0,0.03)}
.suite-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--or);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.suite-card:hover{border-color:var(--line2);transform:translateY(-5px);box-shadow:0 16px 48px rgba(232,57,29,0.1)}
.suite-card:hover::after{transform:scaleX(1)}
.suite-card-icon{width:52px;height:52px;border-radius:14px;background:var(--or-dim);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:22px;transition:background .2s}
.suite-card:hover .suite-card-icon{background:rgba(232,57,29,0.12)}
.suite-card h3{font-size:1.08rem;font-weight:700;color:var(--g1);margin-bottom:10px;line-height:1.3}
.suite-card p{font-size:.875rem;color:var(--g2);line-height:1.72;flex:1;margin-bottom:24px}
.suite-features{list-style:none;margin-bottom:28px;display:flex;flex-direction:column;gap:7px}
.suite-features li{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--g2)}
.suite-features li::before{content:'';width:14px;height:14px;border-radius:50%;background:var(--or-dim);border:1.5px solid var(--or);flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='2,5 4.5,7.5 8,3' fill='none' stroke='%23E8391D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:10px;background-repeat:no-repeat;background-position:center}
.suite-card .btn-learn{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;background:var(--g1);color:#fff;border-radius:var(--r);font-size:.84rem;font-weight:600;transition:.2s;align-self:flex-start;margin-top:auto}
.suite-card .btn-learn:hover{background:var(--or);box-shadow:0 4px 16px rgba(232,57,29,.25)}
.suite-card .btn-learn svg{width:14px;height:14px;transition:transform .2s}
.suite-card:hover .btn-learn svg{transform:translateX(3px)}
.suite-card.featured{border-color:var(--line2);background:linear-gradient(160deg,#fff 60%,rgba(232,57,29,0.03) 100%)}
.suite-card.featured .suite-card-badge{position:absolute;top:20px;right:20px;background:var(--or);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:100px}

/* ── AJL BANNER ── */
.ajl-wrap{background:var(--g1);padding:64px 0;position:relative;overflow:hidden}
.ajl-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(232,57,29,0.1) 0%,transparent 55%);pointer-events:none}
.ajl-wrap-inner{max-width:1200px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
.ajl-card-wrap{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);border-radius:20px;border-left:4px solid var(--or);display:grid;grid-template-columns:1fr auto;align-items:center;gap:48px;padding:44px 44px 44px 48px;transition:all .3s ease}
.ajl-card-wrap:hover{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.13);border-left-color:var(--or)}
.ajl-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.65rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--or);margin-bottom:14px}
.ajl-eyebrow::before{content:'—';margin-right:2px}
.ajl-card-wrap h2{font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:800;letter-spacing:-0.02em;color:#fff;line-height:1.25;margin-bottom:14px}
.ajl-card-wrap h2 em{color:var(--or);font-style:normal}
.ajl-body{font-size:.9rem;color:rgba(255,255,255,0.58);line-height:1.78;max-width:580px;margin-bottom:10px}
.ajl-body strong{color:rgba(255,255,255,0.82);font-weight:600}
.ajl-cta-col{display:flex;flex-direction:column;gap:12px;flex-shrink:0;min-width:200px}
.btn-ajl-solid{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;background:var(--or);color:#fff;border-radius:var(--r);font-size:.88rem;font-weight:600;box-shadow:0 4px 18px rgba(232,57,29,.35);transition:all .3s ease;white-space:nowrap}
.btn-ajl-solid:hover{background:var(--or2);transform:translateY(-2px);box-shadow:0 8px 26px rgba(232,57,29,.5)}
.btn-ajl-outline{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;background:transparent;color:rgba(255,255,255,0.8);border:1px solid rgba(255,255,255,0.18);border-radius:var(--r);font-size:.88rem;font-weight:600;transition:all .3s ease;white-space:nowrap}
.btn-ajl-outline:hover{border-color:rgba(255,255,255,0.42);color:#fff;background:rgba(255,255,255,0.06)}
.btn-ajl-outline svg{width:15px;height:15px;flex-shrink:0}

/* ── TESTIMONIALS ── */
.testi{padding:88px 0;background:var(--bg2)}
.testi-inner{max-width:1200px;margin:0 auto;padding:0 20px}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.testi-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:16px;transition:all .3s ease;box-shadow:0 2px 12px rgba(0,0,0,0.03)}
.testi-card:hover{border-color:var(--line2);transform:translateY(-4px);box-shadow:0 16px 44px rgba(232,57,29,0.08)}
.testi-stars{display:flex;gap:3px}
.testi-stars svg{width:15px;height:15px;fill:var(--or)}
.testi-quote{font-size:.9rem;color:var(--g2);line-height:1.75;flex:1;position:relative;padding-left:16px}
.testi-quote::before{content:'"';position:absolute;left:0;top:-4px;font-size:1.8rem;color:var(--or);font-family:Georgia,serif;line-height:1}
.testi-author{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)}
.testi-avatar{width:42px;height:42px;border-radius:50%;background:var(--bg3);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:var(--or);flex-shrink:0;overflow:hidden}
.testi-avatar img{width:100%;height:100%;object-fit:cover}
.testi-name{font-size:.84rem;font-weight:700;color:var(--g1);line-height:1.2}
.testi-company{font-size:.72rem;color:var(--g3)}
.testi-tag{display:inline-flex;align-self:flex-start;background:var(--or-dim);border:1px solid var(--line2);color:var(--or);font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:100px}

/* ── DEMO FORM ── */
.dfs{padding:88px 0;background:#f8f9fa}
.dfs-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.dfs-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.65rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#E8391D;margin-bottom:14px}
.dfs-eyebrow::before{content:'—';margin-right:2px;color:#E8391D}
.dfs-left h2{font-size:clamp(1.55rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-0.025em;color:#111113;line-height:1.22;margin-bottom:14px}
.dfs-left>p{font-size:.92rem;color:#4A4A5A;line-height:1.76;margin-bottom:28px}
.dfs-bullets{display:flex;flex-direction:column;gap:14px}
.dfs-bullet{display:flex;align-items:center;gap:13px}
.dfs-bullet-icon{width:36px;height:36px;border-radius:10px;background:rgba(232,57,29,0.07);border:1px solid rgba(232,57,29,0.18);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;margin-top:1px;color:var(--or)}
.dfs-bullet-text strong{display:block;font-size:.84rem;font-weight:700;color:#111113;margin-bottom:2px;line-height:1.3}
.dfs-bullet-text span{font-size:.80rem;color:#4A4A5A;line-height:1.55}
.dfs-card{background:#ffffff;border:1px solid rgba(0,0,0,0.07);border-radius:20px;padding:36px;box-shadow:0 8px 48px rgba(0,0,0,0.07)}
.dfs-card-title{font-size:1rem;font-weight:700;color:#111113;margin-bottom:4px}
.dfs-card-sub{font-size:.78rem;color:#8A8A9A;margin-bottom:22px}
.dfs-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.dfs-field{display:flex;flex-direction:column;gap:5px;margin-bottom:13px}
.dfs-field label{font-size:.72rem;font-weight:600;color:#4A4A5A;letter-spacing:.03em}
.dfs-field input,.dfs-field select{width:100%;padding:10px 13px;background:#f8f9fa;border:1px solid rgba(0,0,0,0.08);border-radius:8px;font-size:.86rem;font-family:inherit;color:#111113;outline:none;transition:all .3s ease;-webkit-appearance:none;appearance:none}
.dfs-field input::placeholder{color:#ADADBD}
.dfs-field input:focus,.dfs-field select:focus{border-color:#E8391D;background:#fff;box-shadow:0 0 0 3px rgba(232,57,29,0.1)}
.dfs-field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,4 6,8 10,4' fill='none' stroke='%238A8A9A' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px;padding-right:32px;cursor:pointer}
.dfs-btn{width:100%;padding:13px;background:#E8391D;color:#fff;border:none;border-radius:8px;font-size:.92rem;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 18px rgba(232,57,29,.28);transition:all .3s ease;margin-top:2px}
.dfs-btn:hover{background:#FF5533;transform:translateY(-2px);box-shadow:0 8px 26px rgba(232,57,29,.42)}
.dfs-btn svg{width:14px;height:14px;flex-shrink:0}
.dfs-privacy{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.7rem;color:#8A8A9A;margin-top:11px}
.dfs-privacy::before{content:'';width:7px;height:7px;border-radius:50%;background:#16A34A;flex-shrink:0}

/* ── DEMO FORM: Message textarea ── */
.dfs-field textarea{
  width:100%;
  min-height:96px;
  resize:vertical;
  padding:10px 14px;
  font-family:var(--font);
  font-size:.88rem;
  line-height:1.6;
  color:var(--g1);
  background:var(--bg2);
  border:1.5px solid var(--line);
  border-radius:var(--r);
  outline:none;
  transition:border-color .2s,box-shadow .2s;
  /* suppress default UA textarea gutter */
  vertical-align:top;
}
.dfs-field textarea::placeholder{color:var(--g3)}
.dfs-field textarea:focus{
  border-color:var(--or);
  box-shadow:0 0 0 3px rgba(232,57,29,0.10);
  background:var(--bg);
}

/* ── PHONE INPUT GROUP (fixed layout) ── */
.phone-input-group {
  display: flex !important;
  align-items: center;
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #f9fafb;
  overflow: hidden;
}
.phone-input-group:focus-within {
  border-color: #E8391D;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(232,57,29,0.1);
}
.country-code-select {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  padding: 10px 4px 10px 12px;
  border: none !important;
  border-right: 1px solid #e5e7eb !important;
  background: transparent !important;
  outline: none !important;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
}
.phone-number-field {
  flex: 1 1 0% !important;
  width: 0 !important;
  min-width: 0 !important;
  padding: 10px 14px;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  font-size: 14px;
  font-family: inherit;
  color: #1f2937;
}
.phone-number-field::placeholder { color: #ADADBD }

/* ============================================================
   ABOUT PAGE — SECTION 1: HERO & CORPORATE PROFILE
   Append to end of style.css
   ============================================================ */

/* Section container — identical grid texture + radial fade as homepage hero */
.about-hero {
  padding: 80px 0 96px;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
  position: relative;
  overflow: hidden;
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 30%, rgba(255,255,255,0) 0%, #ffffff 68%);
  pointer-events: none;
}

/* Inner grid */
.about-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── Overline — reuses .eyebrow exactly from homepage ──
   (.eyebrow rule already defined globally in style.css lines 176-177)
   No new CSS needed for the tag itself — it IS the homepage eyebrow. */

/* ── H1 ── */
.about-hero-h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 850;
  line-height: 1.13;
  letter-spacing: -0.025em;
  color: var(--g1);
  margin: 0 0 24px;
}
.about-accent {
  color: var(--or);
}

/* ── Body paragraphs ── */
.about-hero-left p {
  font-size: 1rem;
  line-height: 1.76;
  color: var(--g2);
  margin: 0 0 15px;
  max-width: 560px;
}
.about-hero-left p:last-of-type {
  margin-bottom: 32px;
}

/* ── CTAs — btn-primary and btn-ghost already global, just wrap ── */
.about-hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Right column ── */
.about-hero-right {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

/* Image frame */
.about-img-frame {
  position: relative;
  width: 100%;
  max-width: 540px;
}
.about-img-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  object-fit: cover;
  box-shadow:
    0 2px 8px  rgba(0,0,0,0.05),
    0 12px 36px rgba(0,0,0,0.09),
    0 28px 64px rgba(0,0,0,0.07);
}

/* Asymmetric orange accent — top-left corner bracket */
.about-img-frame::before {
  content: '';
  position: absolute;
  top: -14px;
  left: -14px;
  width: 52%;
  height: 52%;
  border-top: 2.5px solid var(--or);
  border-left: 2.5px solid var(--or);
  border-radius: 14px 0 0 0;
  pointer-events: none;
  z-index: 0;
}

/* Subtle tinted fill — bottom-right */
.about-img-frame::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 38%;
  height: 38%;
  background: var(--or-glow);
  border-radius: 0 0 18px 0;
  pointer-events: none;
  z-index: 0;
}

/* Floating years badge */
.about-img-badge {
  position: absolute;
  bottom: -20px;
  left: -20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  z-index: 2;
}
.about-badge-num {
  font-size: 2.1rem;
  font-weight: 900;
  color: var(--or);
  line-height: 1;
  letter-spacing: -0.03em;
}
.about-badge-num sup {
  font-size: 1rem;
  font-weight: 700;
  vertical-align: super;
}
.about-badge-lbl {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--g2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.55;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .about-hero-inner {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .about-hero-right {
    justify-content: center;
    order: -1;
  }
  .about-img-frame {
    max-width: 100%;
  }
  .about-img-badge {
    bottom: -16px;
    left: 16px;
  }
}
@media (max-width: 768px) {
  .about-hero {
    padding: 56px 0 72px;
    background-size: 30px 30px;
  }
  .about-hero-ctas {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   ABOUT PAGE — SECTION 2: GLOBAL FOOTPRINT & TRUST METRICS
   Replaces all previous about-global- rules in style.css
   ============================================================ */

.about-global {
  padding: 88px 0;
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about-global-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Section header ── */
.about-global-head {
  max-width: 640px;
  margin: 0 auto 64px;
  text-align: center;
}

.about-global-title {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--g1);
  margin: 10px 0 18px;
}

.about-global-intro {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--g2);
}

/* ── Metrics strip ── */
.about-global-metrics {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow: hidden;         /* clips children to rounded corners */
}

/* Each metric column */
.about-global-metric {
  flex: 1 1 0;              /* all four share equal width */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 32px;
  gap: 10px;
  min-width: 0;             /* prevents flex blowout on small viewports */
}

/* Orange big number */
.about-global-metric-num {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 900;
  color: var(--or);
  letter-spacing: -0.04em;
  line-height: 1;
}

.about-global-metric-num sup {
  font-size: 0.5em;
  font-weight: 700;
  vertical-align: super;
  letter-spacing: 0;
}

/* Uppercase tracked label */
.about-global-metric-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g1);
}

/* Sub-text */
.about-global-metric-desc {
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--g3);
  max-width: 200px;
  margin: 0 auto;
}

/* Vertical divider — sits between columns, stretches full height automatically */
.about-global-divider {
  width: 1px;
  background: var(--line);
  flex-shrink: 0;
  align-self: stretch;
}

/* ══════════════════════════════════════════
   ABOUT — GLOBAL FOOTPRINT: 2-COLUMN SPOTLIGHT
   Replaces: .about-global-metrics + .about-global-divider
   New scope: .about-global-spotlight, .about-gstat, .about-global-map
   ══════════════════════════════════════════ */

/* Spotlight grid — text left, map right */
.about-global-spotlight{
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:40px;
  align-items:center;
  margin-top:48px;
}

/* ── Text / stats column ── */
.about-global-text{display:flex;flex-direction:column;gap:0}
.about-global-stat-stack{display:flex;flex-direction:column;gap:6px}

/* Individual stat row */
.about-gstat{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:20px 22px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r2);
  transition:box-shadow .25s,transform .25s;
}
.about-gstat:hover{box-shadow:0 8px 28px rgba(0,0,0,0.07);transform:translateY(-2px)}

.about-gstat-icon{
  flex-shrink:0;
  width:40px;height:40px;
  border-radius:var(--r);
  background:var(--or-dim);
  border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.about-gstat-icon svg{width:18px;height:18px;stroke:var(--or)}

.about-gstat-body{display:flex;flex-direction:column;gap:2px}
.about-gstat-num{font-size:1.7rem;font-weight:850;letter-spacing:-0.03em;line-height:1;color:var(--g1)}
.about-gstat-num sup{font-size:.7em;vertical-align:super}
.about-gstat-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-top:2px}
.about-gstat-desc{font-size:.82rem;color:var(--g2);line-height:1.6;margin-top:4px}

/* ── Map column ── */
.about-global-map{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--r2);
  padding:24px;
  box-shadow:var(--sh);
  overflow:hidden;
}
.about-map-frame{
  width:100%;
  border-radius:var(--r);
  overflow:hidden;
  line-height:0; /* removes img gap */
}
.about-map-frame img{
  width:100%;
  height:auto;
  object-fit:cover;
  display:block;
  border-radius:var(--r);
}

/* ── Responsive ── */
@media(max-width:900px){
  .about-global-spotlight{
    grid-template-columns:1fr;
    gap:28px;
  }
  /* Text first, map below on mobile */
  .about-global-text{order:1}
  .about-global-map{order:2}
}
@media(max-width:600px){
  .about-gstat{padding:16px 16px}
  .about-global-map{padding:16px}
}

/* ── Responsive ── */

/* At 768px: collapse to 2×2 grid */
@media (max-width: 768px) {
  .about-global-metrics {
    flex-wrap: wrap;
  }
  .about-global-metric {
    flex: 1 1 calc(50% - 1px); /* two columns, account for divider width */
    padding: 36px 24px;
  }
  /* Hide vertical dividers — borders take over */
  .about-global-divider {
    display: none;
  }
  /* Add right border to col 1, bottom border to cols 1+2 */
  .about-global-metric:nth-child(1) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .about-global-metric:nth-child(3) {
    border-right: 1px solid var(--line);
  }
  .about-global-metric:nth-child(5) {
    border-bottom: 1px solid var(--line);
  }
}

/* At 480px: single column stack */
@media (max-width: 480px) {
  .about-global-metrics {
    flex-direction: column;
    border-radius: var(--r2);
  }
  .about-global-metric {
    flex: unset;
    width: 100%;
    padding: 32px 24px;
    border-right: none !important;
    border-bottom: 1px solid var(--line);
  }
  .about-global-metric:last-child {
    border-bottom: none;
  }
  .about-global-metric-desc {
    max-width: 280px;
  }
}

/* ============================================================
   ABOUT PAGE — SECTION 3: CORE INDUSTRIES (TABBED)
   Replaces all previous about-industries- rules in style.css
   ============================================================ */

.about-industries {
  padding: 88px 0 96px;
  background: var(--bg);
}

.about-industries-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Section header ── */
.about-industries-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.about-industries-title {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.18;
  color: var(--g1);
  margin: 10px 0 18px;
}

.about-industries-intro {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--g2);
}

/* ── Tab nav strip ── */
.about-industries-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: 6px;
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: none;
}
.about-industries-tabs::-webkit-scrollbar { display: none; }

/* Individual tab button */
.about-industries-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  font-family: var(--font);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--g2);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
  position: relative;
}

.about-industries-tab:hover {
  color: var(--g1);
  background: #fff;
}

/* Active state — white pill + orange underline */
.about-industries-tab.active {
  color: var(--g1);
  font-weight: 700;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}

.about-industries-tab.active::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2.5px;
  background: var(--or);
  border-radius: 2px;
}

/* Tab icon */
.about-ind-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.about-ind-tab-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

/* ── Tab panels ── */
.about-industries-panel {
  display: none;
  opacity: 0;
  transform: translateY(8px);
}

.about-industries-panel.active {
  display: block;
  animation: indPanelIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes indPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Card grid inside each panel ── */
.about-industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

/* Card shell */
.about-industries-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: 22px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              border-color 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
}

/* AFTER — replace with this */
.about-industries-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;                    /* hides it fully in resting state */
  pointer-events: none;          /* never captures hover events */
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.26s ease;
}

.about-industries-card:hover::after {
  transform: scaleX(1);
  opacity: 1;
}

.about-industries-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.07), 0 2px 6px rgba(0,0,0,0.03);
  border-color: var(--line2);
  background: #fff;
}

.about-industries-card:hover::after {
  transform: scaleX(1);
}

/* Icon box */
.about-industries-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: var(--r);
  background: var(--or-glow);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.about-industries-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--or);
}

/* Text body */
.about-industries-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.about-industries-card-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--g1);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

.about-industries-card-desc {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--g3);
  margin: 0;
}

/* ── Bottom CTA — Dark Premium Banner ── */
.about-industries-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 32px 40px 32px 44px;   /* 44px left = text clears the accent line */
  background: var(--g1);           /* dark corporate charcoal — matches AJL section */
  border-radius: var(--r2);
  position: relative;
  overflow: hidden;
  border-left: 4px solid var(--or); /* vibrant orange left accent — AJL DNA */
}

/* Subtle radial glow — mirrors AJL banner ::before */
.about-industries-foot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 50%, rgba(232,57,29,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Left copy block */
.about-industries-foot-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}

/* "Don't see your industry?" — uppercase overline style */
.about-industries-foot-overline {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* "Our engine is fully configurable." — orange bold headline */
.about-industries-foot-headline {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--or);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

/* CTA button — solid orange, white text, arrow */
.about-industries-foot-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  background: var(--or);
  color: #fff;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: var(--r);
  white-space: nowrap;
  box-shadow: 0 4px 18px rgba(232,57,29,0.35);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.about-industries-foot-btn:hover {
  background: var(--or2);
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(232,57,29,0.50);
}

.about-industries-foot-btn svg {
  transition: transform 0.2s ease;
}

.about-industries-foot-btn:hover svg {
  transform: translateX(3px);
}


/* ── Responsive ── */
@media (max-width: 900px) {
  .about-industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-industries-tab {
    font-size: 0.8rem;
    padding: 10px 14px;
  }
}

@media (max-width: 600px) {
  .about-industries {
    padding: 64px 0 72px;
  }
  .about-industries-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .about-industries-tabs {
    gap: 2px;
    padding: 4px;
  }
  .about-industries-tab {
    padding: 10px 10px;
    font-size: 0.74rem;
    gap: 5px;
  }
  .about-industries-foot {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 28px 24px 28px 28px;
    text-align: center;
  }

  .about-industries-foot-copy {
    align-items: center;
  }

  .about-industries-foot-overline {
    text-align: center;
  }
}

/* ============================================================
   SECTION A — MLM Software Hero
   ============================================================ */

/* Secondary paragraph — sits below the main <p> */
.mlm-hero-primary {
  /* inherits .hero-left p styles from style.css */
  margin-bottom: 14px; /* tighter gap before sub-paragraph */
}

.mlm-hero-sub {
  font-size: .92rem;
  color: var(--g3);
  line-height: 1.7;
  max-width: 540px;
  margin-bottom: 28px;
  padding-left: 14px;
  border-left: 2px solid var(--line2);
}

/* Slight frame tweak if a different screenshot asset is used */
.mlm-hero-img-frame img {
  /* inherits border-radius and width from .hero-img-frame img */
  /* override here if the MLM Software screenshot has different proportions */
}

.mlm-accent {
  color: var(--or);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero-right {
    width: 100%;
    justify-content: center;
  }

  .hero-img-wrap {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }

  .hero-img-frame,
  .mlm-hero-img-frame {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    height: auto;
  }

  .hero-img-frame img,
  .mlm-hero-img-frame img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* ============================================================
   SECTION B — 9 Core Features Grid
   Prefix: mlm-feat-
   Globals reused: .eyebrow, .reveal, .reveal-d1/d2 — from style.css
   ============================================================ */

/* ── Section shell ── */
.mlm-feat-section {
  padding: 96px 0 104px;
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
/* Subtle radial tint top-right */
.mlm-feat-section::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,57,29,0.04) 0%, transparent 65%);
  pointer-events: none;
}

.mlm-feat-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Section header ── */
.mlm-feat-header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 64px;
}
.mlm-feat-header .eyebrow {
  justify-content: center;
}
.mlm-feat-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
  margin: 0 0 14px;
}
.mlm-feat-subhead {
  font-size: .95rem;
  color: var(--g3);
  line-height: 1.68;
}

/* ── Card grid ── */
.mlm-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
}

/* ── Individual card ── */
.mlm-feat-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
  cursor: default;
  align-item: flex-start;
}

.mlm-feat-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.mlm-feat-card:hover {
  border-color: var(--line2);
  box-shadow: 0 12px 36px rgba(232,57,29,0.07), 0 2px 8px rgba(0,0,0,0.04);
  transform: translateY(-3px);
}

/* Orange top-border reveal on hover */
.mlm-feat-card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(0.16,1,0.3,1);
  border-radius: 2px 2px 0 0;
}
.mlm-feat-card:hover .mlm-feat-card-accent {
  transform: scaleX(1);
}

/* ── Icon wrap ── */
.mlm-feat-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--or-dim);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s;
  margin-top: 2px;
}
.mlm-feat-card:hover .mlm-feat-icon-wrap {
  background: rgba(232,57,29,0.1);
  border-color: rgba(232,57,29,0.3);
}
.mlm-feat-icon {
  width: 20px;
  height: 20px;
  color: var(--or);
}

/* Right col: number + title + desc stacked */
.mlm-feat-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

/* ── Card body ── */
.mlm-feat-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mlm-feat-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
}
.mlm-feat-desc {
  font-size: .8rem;
  color: var(--g3);
  line-height: 1.65;
  margin-top: 4px;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .mlm-feat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .mlm-feat-section { padding: 72px 0 80px; }
}
@media (max-width: 580px) {
  .mlm-feat-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .mlm-feat-card {
    flex-direction: row;
    gap: 12px;
  }
  .mlm-feat-icon-wrap {
    margin-top: 1px;
  }
  .mlm-feat-title {
    font-size: .88rem;
  }
  .mlm-feat-desc {
    font-size: .78rem;
  }
}

/* ============================================================
   SECTION C — How It Works (Equal Heights, Integrated Numbers)
   Prefix: mlm-flow-
   Globals reused: .eyebrow, .reveal, .reveal-d1/d2
   ============================================================ */

/* ── Section shell ── */
.mlm-flow-section {
  padding: 96px 0 104px;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.mlm-flow-section::before {
  content: '';
  position: absolute;
  bottom: -140px; right: -140px;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,57,29,0.04) 0%, transparent 65%);
  pointer-events: none;
}

.mlm-flow-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ── */
.mlm-flow-header {
  text-align: center;
  max-width: 580px;
  margin: 0 auto 60px;
}
.mlm-flow-header .eyebrow { justify-content: center; }
.mlm-flow-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
  margin: 0 0 12px;
}
.mlm-flow-subhead {
  font-size: .93rem;
  color: var(--g3);
  line-height: 1.68;
}

/* ── Pipeline grid ──
   5 columns: [step] [conn] [step] [conn] [step]
   Steps are equal width; connectors are fixed narrow width.
   align-items: stretch makes all step cells equal height. ── */
.mlm-flow-pipeline {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  align-items: stretch;
  gap: 0;
}

/* ── Step wrapper: fills full height of its cell ── */
.mlm-flow-step {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ── Card: stretches to fill step wrapper ── */
.mlm-flow-card {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.mlm-flow-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(0.16,1,0.3,1);
  border-radius: 2px 2px 0 0;
}
.mlm-flow-step:hover .mlm-flow-card {
  border-color: var(--line2);
  box-shadow: 0 10px 32px rgba(232,57,29,0.07);
  transform: translateY(-3px);
}
.mlm-flow-step:hover .mlm-flow-card::before {
  transform: scaleX(1);
}
.mlm-flow-card-final {
  border-color: rgba(232,57,29,0.18);
  background: linear-gradient(160deg, rgba(232,57,29,0.025) 0%, var(--bg) 50%);
}

/* ── Card top row: icon + number side by side ── */
.mlm-flow-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

/* Icon */
.mlm-flow-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--or-dim);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.mlm-flow-icon-wrap svg {
  width: 20px;
  height: 20px;
  color: var(--or);
}
.mlm-flow-step:hover .mlm-flow-icon-wrap {
  background: rgba(232,57,29,0.1);
}
.mlm-flow-icon-final {
  background: rgba(232,57,29,0.1);
  border-color: rgba(232,57,29,0.28);
}

/* Integrated step number — top-right of card */
.mlm-flow-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--or);
  opacity: 1;
  letter-spacing: -0.03em;
  line-height: 1;
  user-select: none;
}


/* ── Text ── */
.mlm-flow-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.3;
  letter-spacing: -0.012em;
  margin: 0;
}
.mlm-flow-desc {
  font-size: .83rem;
  color: var(--g3);
  line-height: 1.68;
  flex: 1; /* pushes desc to fill remaining card space uniformly */
}

/* ── Connectors: vertically centred between cards ── */
.mlm-flow-conn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 4px;
  /* vertically centred at icon row height (~44px from top + 28px padding) */
  padding-top: 56px;
  align-self: start;
}
.mlm-flow-conn-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(232,57,29,0.35) 0%,
    rgba(232,57,29,0.15) 100%
  );
}
.mlm-flow-conn-arrow {
  width: 10px;
  height: 10px;
  color: rgba(232,57,29,0.4);
  flex-shrink: 0;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  /* Collapse to single column; connectors become vertical */
  .mlm-flow-pipeline {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    max-width: 440px;
    margin: 0 auto;
    gap: 0;
  }
  .mlm-flow-step { height: auto; }
  .mlm-flow-card { transform: none !important; }

  /* Connector rotates to vertical */
  .mlm-flow-conn {
    flex-direction: column;
    padding: 4px 0;
    align-items: center;
    justify-content: center;
    height: 36px;
    align-self: auto;
  }
  .mlm-flow-conn-line {
    width: 1px;
    height: 100%;
    flex: 1;
    background: linear-gradient(180deg,
      rgba(232,57,29,0.35) 0%,
      rgba(232,57,29,0.12) 100%
    );
  }
  .mlm-flow-conn-arrow {
    transform: rotate(90deg);
  }
}


@media (max-width: 480px) {
  .mlm-flow-section  { padding: 56px 0 64px; }
  .mlm-flow-header   { margin-bottom: 40px; }
  .mlm-flow-card     { padding: 22px 18px 26px; }
  .mlm-flow-num      { font-size: 1.2rem; }
}

/* ═══════════════════════════════════════════════════
   CPS2 · Compensation Plans Showcase v3
   Tab design mirrors .about-industries-tab exactly
   Prefix: cps2-  cpsd-  |  Zero collision
   ═══════════════════════════════════════════════════ */

/* ── Section ── */
.cps2 {
  padding: 88px 0 96px;
  background: var(--bg2);
  border-top: 1px solid var(--line);
}
.cps2-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ── */
.cps2-header {
  max-width: 680px;
  margin: 0 auto 44px;
  text-align: center;
}
.cps2-header .eyebrow { margin-bottom: 12px; }
.cps2-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.026em;
  color: var(--g1);
  line-height: 1.16;
  margin-bottom: 14px;
}
.cps2-subhead {
  font-size: .97rem;
  color: var(--g2);
  line-height: 1.7;
}

/* ── Tab bar — clones about-industries-tabs ── */
.cps2-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: 6px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cps2-tabs::-webkit-scrollbar { display: none; }

.cps2-tab-icon {
  display: flex !important;    /* overrides both media-query display:none rules */
  align-items: center;
  justify-content: center;
  flex-shrink: 0;              /* icon never collapses inside the flex button */
}
.cps2-tab-icon svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* Individual tab — clones about-industries-tab */
.cps2-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  font-family: var(--font);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--g2);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
  position: relative;
}
.cps2-tab:hover:not(.active) {
  color: var(--g1);
  background: #fff;
}

/* Active — white card + orange underline (exact about pattern) */
.cps2-tab.active {
  color: var(--g1);
  font-weight: 700;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}
.cps2-tab.active::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 2.5px;
  background: var(--or);
  border-radius: 2px;
}

/* Tab icon */
.cps2-tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cps2-tab-icon svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
}

/* Tighten padding + gap on small screens so icon+text fit cleanly */
@media (max-width: 680px) {
  .cps2-tab {
    padding: 9px 11px;
    gap: 5px;
    font-size: .74rem;
  }
  .cps2-tab-icon svg {
    width: 13px;
    height: 13px;
  }
}
@media (max-width: 420px) {
  .cps2-tab {
    padding: 8px 10px;
    gap: 4px;
    font-size: .7rem;
  }
  .cps2-tab-icon svg {
    width: 12px;
    height: 12px;
  }
}
/* ── Panels container card ── */
.cps2-panels {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.05);
}

/* Individual panel — hidden by default */
.cps2-panel {
  display: none;
  opacity: 0;
  transform: translateY(8px);
}
.cps2-panel.active {
  display: block;
  animation: cps2In .28s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes cps2In {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Panel 2-column layout */
.cps2-panel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 320px;
}

/* ── Left: copy ── */
.cps2-left {
  padding: 40px 40px 40px 44px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--line);
}

/* Plan label badge */
.cps2-plan-label {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
  background: var(--or-dim);
  border: 1px solid var(--line2);
  border-radius: 100px;
  padding: 4px 12px;
  width: fit-content;
}

.cps2-plan-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--g1);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0;
}

.cps2-plan-body {
  font-size: .9rem;
  color: var(--g2);
  line-height: 1.74;
  flex: 1;
}

/* Note callout */
.cps2-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: 13px 15px;
  font-size: .82rem;
  color: var(--g3);
  line-height: 1.6;
}
.cps2-note svg { color: var(--or); flex-shrink: 0; margin-top: 1px; }

/* Board key points */
.cps2-keypoints {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cps2-keypoints li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .87rem;
  font-weight: 600;
  color: var(--g1);
}
.cps2-kp-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--or-dim);
  border: 1px solid var(--line2);
  color: var(--or);
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Right: diagram ── */
.cps2-right {
  padding: 32px 36px;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Diagram shell */
.cps2-diagram {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: 24px 20px 18px;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* ── Diagram atoms ── */
.cpsd-node {
  background: var(--or);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  border-radius: 8px;
  padding: 7px 16px;
  white-space: nowrap;
  line-height: 1;
}
.cpsd-node--root {
  background: var(--g1);
  font-size: .78rem;
  padding: 8px 18px;
}
.cpsd-node--sm {
  background: var(--or-dim);
  color: var(--or);
  border: 1px solid var(--line2);
  font-size: .68rem;
  padding: 5px 11px;
}
.cpsd-node--xs {
  background: var(--bg3);
  color: var(--g3);
  border: 1px solid var(--line);
  font-size: .62rem;
  padding: 4px 8px;
  border-radius: 6px;
}
.cpsd-node--breakaway {
  background: var(--or);
  color: #fff;
  border: none;
  font-size: .68rem;
  padding: 5px 11px;
  border-radius: 8px;
}

.cpsd-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  align-items: center;
}

.cpsd-fork {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  justify-content: center;
}
.cpsd-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.cpsd-line-v {
  width: 1px;
  height: 12px;
  background: var(--line);
}

.cpsd-caption {
  font-size: .6rem;
  color: var(--g3);
  font-weight: 600;
  letter-spacing: .04em;
  text-align: center;
}

/* Breakaway badge */
.cpsd-badge-or {
  font-size: .66rem;
  font-weight: 700;
  background: var(--or-dim);
  border: 1px solid var(--line2);
  color: var(--or);
  border-radius: 100px;
  padding: 5px 12px;
  text-align: center;
}

/* Board cells */
.cpsd-board-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.cpsd-board-cell {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--g2);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cpsd-board-cell span {
  font-size: .58rem;
  font-weight: 600;
  color: var(--g3);
}
.cpsd-board-cell--active {
  border-color: var(--line2);
  background: var(--or-dim);
  color: var(--or);
}
.cpsd-board-cell--active span { color: var(--or); opacity: .7; }
.cpsd-board-cell--done {
  background: rgba(22,163,74,.07);
  border-color: rgba(22,163,74,.25);
  color: var(--green);
}
.cpsd-board-cell--done span { color: var(--green); opacity: .7; }
.cpsd-board-arrow { font-size: .8rem; color: var(--g3); }

/* Compare row (Tri-Binary) */
.cpsd-compare {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.cpsd-compare-or,
.cpsd-compare-plain {
  font-size: .64rem;
  font-weight: 600;
  border-radius: 7px;
  padding: 5px 10px;
  text-align: center;
}
.cpsd-compare-or {
  background: var(--or-dim);
  border: 1px solid var(--line2);
  color: var(--or);
}
.cpsd-compare-plain {
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--g3);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .cps2-panel-inner { grid-template-columns: 1fr; }
  .cps2-left {
    padding: 32px 28px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .cps2-right { padding: 28px 28px 32px; }
}
@media (max-width: 600px) {
  .cps2 { padding: 60px 0 68px; }
  .cps2-tab { font-size: .72rem; padding: 9px 10px; }
  .cps2-tab-icon { display: none; }
  .cps2-left { padding: 24px 20px; }
  .cps2-right { padding: 20px 20px 28px; }
}

/* ── Compensation Plans: image above text on mobile ── */
@media (max-width: 767px) {
  .cps2-panel-inner {
    display: flex;
    flex-direction: column-reverse;
  }
}


/* [Duplicate DIAGRAM BASE STYLES block removed — rules defined above in cps2 section] */


/* ============================================================
   SECTION D — FAQ Accordion
   Prefix: mlm-faq-
   Globals reused: .eyebrow, .reveal, .reveal-d1/d2
   ============================================================ */

.mlm-faq-section {
  padding: 96px 0 104px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.mlm-faq-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ── */
.mlm-faq-header {
  text-align: center;
  margin-bottom: 52px;
}
.mlm-faq-header .eyebrow { justify-content: center; }
.mlm-faq-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
  margin: 0 0 12px;
}
.mlm-faq-subhead {
  font-size: .93rem;
  color: var(--g3);
  line-height: 1.65;
}

/* ── Accordion list ── */
.mlm-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Item ── */
.mlm-faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s;
}
.mlm-faq-item.mlm-faq-open {
  border-color: var(--line2);
  box-shadow: 0 6px 24px rgba(232,57,29,0.06);
}

/* ── Trigger button ── */
.mlm-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.mlm-faq-trigger:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: -2px;
  border-radius: 12px;
}

.mlm-faq-q {
  font-size: .97rem;
  font-weight: 650;
  color: var(--g1);
  line-height: 1.4;
  letter-spacing: -0.01em;
  flex: 1;
}
.mlm-faq-item.mlm-faq-open .mlm-faq-q {
  color: var(--or);
}

/* ── Chevron icon ── */
.mlm-faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s, transform .35s cubic-bezier(0.16,1,0.3,1);
  color: var(--g3);
}
.mlm-faq-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.mlm-faq-item.mlm-faq-open .mlm-faq-icon {
  background: rgba(232,57,29,0.08);
  border-color: var(--line2);
  color: var(--or);
  transform: rotate(180deg);
}

/* ── Panel (hidden/visible states) ── */
.mlm-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(0.16,1,0.3,1);
}
.mlm-faq-panel:not([hidden]) {
  display: grid;
  grid-template-rows: 1fr;
}
/* hidden attr overrides display — re-set when JS removes it */
.mlm-faq-panel[hidden] {
  display: grid !important;
  grid-template-rows: 0fr;
}

.mlm-faq-answer {
  overflow: hidden;
  font-size: .88rem;
  color: var(--g2);
  line-height: 1.72;
  padding: 0 24px;
  transition: padding .35s cubic-bezier(0.16,1,0.3,1);
}
.mlm-faq-panel:not([hidden]) .mlm-faq-answer {
  padding: 0 24px 22px;
}

/* ── Responsive ── */
@media (max-width: 580px) {
  .mlm-faq-section   { padding: 60px 0 68px; }
  .mlm-faq-trigger   { padding: 18px 18px; }
  .mlm-faq-answer    { padding: 0 18px; }
  .mlm-faq-panel:not([hidden]) .mlm-faq-answer { padding: 0 18px 18px; }
  .mlm-faq-q         { font-size: .9rem; }
}


/* =============================================================
   SECTION 1 — Hero & Comparison Grid
   direct-sales.html | prefix: ds-hero-comp-
   ============================================================= */

/* ── Outer section ── */
.ds-hero-comp-section {
  padding: 80px 0 72px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  /* Subtle grid texture from page-hero pattern */
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Radial brand glow — centered, not right-biased */
.ds-hero-comp-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(232,57,29,.055), transparent 70%);
  pointer-events: none;
}

.ds-hero-comp-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* ── Centered text stack ── */
.ds-hero-comp-head {
  text-align: center;
  margin-bottom: 56px;
}

/* Eyebrow — reuses global .eyebrow; centered override */
.ds-hero-comp-head .eyebrow {
  justify-content: center;
}

.ds-hero-comp-head h1 {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--g1);
  line-height: 1.12;
  margin-bottom: 18px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.ds-hero-comp-accent {
  color: var(--or);
}

.ds-hero-comp-head > p {
  font-size: 1rem;
  color: var(--g2);
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto 28px;
}

.ds-hero-comp-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ds-hero-comp-trust-note {
  font-size: .75rem;
  color: var(--g3);
  letter-spacing: .01em;
}

/* =============================================================
   SECTION 1 — Staggered Flat Compliance Panels
   direct-sales.html | prefix: ds-flat-frame-
   ============================================================= */

/* ── Two-column stage ── */
.ds-flat-frame-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 20px 0 60px;
}

/* ── Column wrappers — stagger via translateY ── */
.ds-flat-frame-col {
  flex: 1;
  max-width: 380px;
}

.ds-flat-frame-col--before {
  transform: translateY(25px);
}

.ds-flat-frame-col--after {
  transform: translateY(-25px);
}

/* ── Outer frame — thick colored border, deep radius ── */
.ds-flat-frame-outer {
  position: relative;
  border-radius: 22px;
  padding: 6px;         /* frame thickness = this padding value */
}

/* ── Outer frame color: Before — charcoal slate ── */
.ds-flat-frame-outer--before {
  background: #312d2b;
  box-shadow:
    0 16px 48px rgba(30,41,59,0.20),
    0  4px 12px rgba(30,41,59,0.12);
}

.ds-flat-frame-outer--after {
  background: var(--or);
  box-shadow:
    0 16px 48px rgba(232,57,29,0.20),
    0  4px 12px rgba(232,57,29,0.12);
}

/* ── Inner white content card ── */
.ds-flat-frame-inner {
  background: #FFFFFF;
  border-radius: 17px;  /* outer-radius minus padding = tight inset */
  padding: 28px 24px;
}

/* Before: bottom tab clearance */
.ds-flat-frame-outer--before .ds-flat-frame-inner {
  padding-bottom: 56px;
}

/* After: top tab clearance */
.ds-flat-frame-outer--after .ds-flat-frame-inner {
  padding-top: 56px;
}

/* ── Tab panels — tight text-wrapping badge per reference ── */
.ds-flat-frame-tab {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 10px 28px;
  border-radius: 10px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #FFFFFF;
}

/* ── Before tab background — charcoal slate ── */
.ds-flat-frame-tab--before {
  background: #312d2b;
  bottom: -1px;
  border-radius: 0 0 16px 16px;
  left: 0;
  right: 0;
  transform: none;
  text-align: center;
  padding: 13px 28px;
}

/* AFTER tab — brand orange, pinned to TOP, sits half-in/half-out */
.ds-flat-frame-tab--after {
  background: var(--or);
  top: -1px;             /* flush with outer frame top edge */
  border-radius: 16px 16px 0 0;
  left: 0;
  right: 0;
  transform: none;
  text-align: center;
  padding: 13px 28px;
}

/* ── Row lists ── */
.ds-flat-frame-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
}

.ds-flat-frame-list li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: .88rem;
  line-height: 1.4;
}

/* Before rows — muted */
.ds-flat-frame-outer--before .ds-flat-frame-list li {
  font-weight: 600;
  color: var(--g1);
}

/* After rows — sharp bold slate */
.ds-flat-frame-outer--after .ds-flat-frame-list li {
  font-weight: 600;
  color: var(--g1);
}

/* ── Icons ── */
.ds-flat-frame-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ds-flat-frame-icon svg {
  width: 11px;
  height: 11px;
}

/* ── Before icon — soft muted pastel red tint (unchanged) ── */
.ds-flat-frame-icon--before {
  background: rgba(192,57,43,.2);
  color: #C0392B;
}

/* After — vibrant green pill */
.ds-flat-frame-icon--after {
  background: rgba(22,163,74,.12);
  color: var(--green);
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .ds-flat-frame-stage {
    flex-direction: column;
    align-items: center;
    gap: 48px;           /* extra gap absorbs the stagger when stacked */
    padding-bottom: 40px;
  }

  /* Kill stagger on mobile — stacked cards don't need vertical offset */
  .ds-flat-frame-col--before,
  .ds-flat-frame-col--after {
    transform: none;
    width: 100%;
    max-width: 420px;
  }
}

@media (max-width: 440px) {
  .ds-flat-frame-inner  { padding: 22px 18px; }
  .ds-flat-frame-list li { font-size: .83rem; gap: 10px; }
}

/* =============================================================
   SECTION 2 — Direct Sales System Feature Grid
   direct-sales.html | prefix: ds-features-
   ============================================================= */

/* ── Section shell ── */
.ds-features-section {
  padding: 100px 0;
  background: #FFFFFF;
}

.ds-features-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Section header — centered override on global sec-head ── */
.ds-features-header {
  text-align: center;
  margin-bottom: 56px;
}

.ds-features-header .eyebrow {
  justify-content: center;
}

.ds-features-header h2 {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

/* ── 3-column grid ── */
.ds-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* ── Feature card ── */
.ds-features-card {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--r2);
  padding: 28px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.03);
  transition: transform .22s cubic-bezier(.25,.46,.45,.94),
              box-shadow .22s ease,
              border-color .22s ease;
}

.ds-features-card:hover {
  transform: translateY(-4px) scale(1.012);
  border-color: var(--or);
  box-shadow: 0 4px 16px rgba(232,57,29,0.08),
              0 16px 40px rgba(0,0,0,0.08);
}

/* ── Inline header: icon badge + title ── */
.ds-features-card-header {
  display: flex;
  align-items: flex-start;     /* aligns to top when h3 wraps */
  gap: 14px;
  margin-bottom: 14px;
}

/* ── Icon badge — left of title ── */
.ds-features-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  background: var(--or-glow);
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .22s ease;
}

.ds-features-card:hover .ds-features-icon {
  background: rgba(232,57,29,0.10);
}

.ds-features-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--or);
}

/* ── Right column: text wrapper ── */
.ds-features-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

/* ── Title — flush right of icon ── */
/* ── Title ── */
.ds-features-card h3 {
  font-size: .975rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0;
}

/* ── Body paragraph ── */
.ds-features-card p {
  font-size: .875rem;
  color: var(--g2);
  line-height: 1.72;
  margin: 0;
}

/* ── Payment gateway pills (inside text column) ── */
.ds-features-gateway-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.ds-features-pill {
  display: inline-block;
  padding: 4px 12px;
  background: var(--bg3);
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 600;
  color: var(--g2);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .ds-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .ds-features-section {
    padding: 64px 0;
  }

  .ds-features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ds-features-card {
    padding: 26px 22px 22px;
  }
}

/* =============================================================
   SECTION 3 — Compliance Trust Callout Banner
   direct-sales.html | prefix: ds-compliance-
   ============================================================= */

.ds-compliance-wrap {
  background: #FFFFFF;
  padding: 0 0 80px;
}

.ds-compliance-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Banner card — dark matte ── */
.ds-compliance-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 32px;
  background: #111317;
  border: 1px solid #22252A;
  border-radius: 8px;
  border-left: 4px solid var(--or);
}

/* ── Shield icon container — lifted charcoal ── */
.ds-compliance-icon {
  width: 44px;
  height: 44px;
  background: #ff553336;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ds-compliance-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--or);
}

/* ── Text block ── */
.ds-compliance-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ds-compliance-tag {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
}

/* ── Body copy — crisp white ── */
.ds-compliance-text p {
  font-size: .9rem;
  color: #FFFFFF;
  line-height: 1.65;
  margin: 0;
}

/* ── Strong inherits white ── */
.ds-compliance-text strong {
  font-weight: 700;
  color: #FFFFFF;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .ds-compliance-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 22px;
    gap: 14px;
  }

  .ds-compliance-wrap {
    padding-bottom: 56px;
  }
}

/* =============================================================
   SECTION 2B — Compensation Plans Showcase
   direct-sales.html | prefix: ds-plans-
   ============================================================= */

.ds-plans-section {
  padding: 80px 0 100px;
  background: var(--bg2);
}

.ds-plans-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Section header — centered ── */
.ds-plans-header {
  text-align: center;
  margin-bottom: 48px;
}

.ds-plans-header .eyebrow {
  justify-content: center;
}

.ds-plans-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--g1);
  line-height: 1.15;
  margin-top: 10px;
}

/* ── Tab track — pill segmented bar ── */
.ds-plans-tab-track {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.ds-plans-tab-scroll {
  display: flex;
  gap: 4px;
  background: #ECEEF2;
  border-radius: 14px;
  padding: 5px;
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ds-plans-tab-scroll::-webkit-scrollbar { display: none; }

/* ── Individual tab button ── */
.ds-plans-tab {
  flex-shrink: 0;
  padding: 9px 20px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--g3);
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
  position: relative;
}

/* Active tab — white pill, orange underline indicator */
.ds-plans-tab--active {
  background: #FFFFFF;
  color: var(--g1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 2px 10px rgba(0,0,0,0.05);
}

.ds-plans-tab--active::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2.5px;
  background: var(--or);
  border-radius: 2px;
}

.ds-plans-tab:not(.ds-plans-tab--active):hover {
  color: var(--g2);
  background: rgba(255,255,255,.5);
}

/* ── Main card container ── */
.ds-plans-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.04);
  padding: 40px;
  min-height: 280px;
}

/* ── Tab panel ── */
.ds-plans-panel {
  display: none;
}

.ds-plans-panel--active {
  display: flex;
  gap: 48px;
  align-items: center;
}

/* ── Left: diagram placeholder ── */
.ds-plans-diagram {
  flex: 0 0 260px;
  width: 260px;
  background: var(--bg2);
  border-radius: 12px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ds-plans-diagram-svg {
  width: 100%;
  height: auto;
}

/* ── Right: content block ── */
.ds-plans-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ds-plans-plan-tag {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
}

.ds-plans-content h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--g1);
  letter-spacing: -.02em;
  line-height: 1.25;
}

.ds-plans-content p {
  font-size: .92rem;
  color: var(--g2);
  line-height: 1.75;
  max-width: 480px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ds-plans-section { padding: 60px 0 72px; }

  .ds-plans-panel--active {
    flex-direction: column;
    gap: 28px;
  }

  .ds-plans-diagram {
    flex: none;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
  }

  .ds-plans-card { padding: 24px 20px; }

  .ds-plans-tab-track { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .ds-plans-tab { padding: 8px 14px; font-size: .78rem; }
}


/* ============================================================
   PAGE: Customisable MLM Software — Section 1: Hero & Grid
   Prefix: cmlm-
   ============================================================ */

/* ── Section wrapper ── */
.cmlm-hero {
  padding: 80px 0 96px;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
  position: relative;
  overflow: hidden;
}
.cmlm-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(232,57,29,0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* ── Inner container ── */
.cmlm-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* ── Hero text block ── */
.cmlm-hero-text {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
}
.cmlm-hero-text h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 850;
  line-height: 1.13;
  letter-spacing: -0.025em;
  color: var(--g1);
  margin: 0 0 20px;
}
.cmlm-accent {
  color: var(--or);
}
.cmlm-hero-text p {
  font-size: 1rem;
  line-height: 1.78;
  color: var(--g2);
  margin: 0 0 28px;
}
.cmlm-hero-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── 3-card grid ── */
.cmlm-route-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* ── Individual card (structural block, not a link) ── */
.cmlm-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}

/* Orange bottom accent bar — card hover only */
.cmlm-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.cmlm-card:hover {
  border-color: var(--line2);
  transform: translateY(-6px);
  box-shadow: 0 20px 52px rgba(232,57,29,0.11);
}
.cmlm-card:hover::after {
  transform: scaleX(1);
}

/* Featured variant — White Label */
.cmlm-card--featured {
  border-color: var(--line2);
  background: linear-gradient(160deg, #fff 55%, rgba(232,57,29,0.03) 100%);
}

/* ── Card top row: icon + badge ── */
.cmlm-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.cmlm-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--or-dim);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: background .2s;
}
.cmlm-card:hover .cmlm-card-icon {
  background: rgba(232,57,29,0.12);
}

/* Muted badge (default) */
.cmlm-card-badge {
  display: inline-flex;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--line);
  color: var(--g3);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}

/* Highlighted coral/orange badge — Enterprise Grade */
.cmlm-card-badge--or {
  background: var(--or-dim);
  border-color: var(--line2);
  color: var(--or);
}

/* ── Card heading & body ── */
.cmlm-card h2 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.3;
  margin: 0 0 10px;
}
.cmlm-card p {
  font-size: .875rem;
  color: var(--g2);
  line-height: 1.74;
  flex: 1;
  margin: 0 0 22px;
}

/* ── Feature list ── */
.cmlm-card-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0 0 28px;
  padding: 0;
}
.cmlm-card-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: var(--g2);
}
.cmlm-card-features li::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--or-dim);
  border: 1.5px solid var(--or);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='2,5 4.5,7.5 8,3' fill='none' stroke='%23E8391D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Buttons — anchors only, two variants ── */
.cmlm-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border-radius: var(--r);
  font-size: .84rem;
  font-weight: 600;
  font-family: var(--font);
  text-decoration: none;
  margin-top: auto;
  align-self: flex-start;
  transition: background .2s, box-shadow .2s, transform .15s;
  cursor: pointer;
}
.cmlm-btn svg {
  flex-shrink: 0;
  transition: transform .2s;
}
.cmlm-btn:hover svg {
  transform: translateX(3px);
}

/* Primary — rust/orange (Card 1) */
.cmlm-btn--primary {
  background: var(--or);
  color: #fff;
  box-shadow: 0 4px 16px rgba(232,57,29,0.22);
}
.cmlm-btn--primary:hover {
  background: var(--or2);
  box-shadow: 0 6px 22px rgba(232,57,29,0.38);
  transform: translateY(-1px);
}

/* Dark — charcoal (Cards 2 & 3) */
.cmlm-btn--dark {
  background: var(--g1);
  color: #fff;
}
.cmlm-btn--dark:hover {
  background: var(--or);
  box-shadow: 0 4px 16px rgba(232,57,29,0.28);
  transform: translateY(-1px);
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .cmlm-route-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
  .cmlm-hero-text {
    margin-bottom: 44px;
  }
}
@media (max-width: 640px) {
  .cmlm-hero {
    padding: 60px 0 72px;
  }
  .cmlm-hero-text h1 {
    font-size: clamp(1.7rem, 6vw, 2.2rem);
  }
  .cmlm-hero-pills {
    justify-content: flex-start;
  }
  .cmlm-route-grid {
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════
   MMA HERO SECTION
   mlm-mobile-app.html — Section 1
   ══════════════════════════════════════════════ */

.mma-hero {
  padding: 80px 0 96px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Subtle grid texture inherited from homepage hero pattern */
.mma-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}

.mma-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── LEFT: TEXT ── */
.mma-hero-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mma-hero-left h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 850;
  line-height: 1.13;
  letter-spacing: -0.025em;
  color: var(--g1);
  margin-bottom: 20px;
}

.mma-accent {
  color: var(--or);
}

.mma-hero-left p {
  font-size: 1rem;
  color: var(--g2);
  line-height: 1.72;
  max-width: 520px;
  margin-bottom: 36px;
}

/* ── MMA HERO: arrow micro-interaction on btn-primary ── */
.mma-hero-left .btn-primary .btn-arrow {
  display: inline-block;
  transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}

.mma-hero-left .btn-primary:hover .btn-arrow {
  transform: translateX(5px);
}

/* ── RIGHT: PHONE SCENE ── */
.mma-hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Platform badge strip */
.mma-platform-badges {
  display: flex;
  gap: 8px;
  z-index: 2;
  position: relative;
}

.mma-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--g2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mma-badge svg {
  color: var(--g1);
  flex-shrink: 0;
}

/* ── MMA HERO: right column image ── */
.mma-mockup-img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .mma-hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }

  .mma-hero-left {
    align-items: center;
  }

  .mma-hero-left p {
    margin-left: auto;
    margin-right: auto;
  }

  .mma-hero-right {
    order: -1;
  }
}

@media (max-width: 480px) {
  .mma-hero {
    padding: 56px 0 72px;
  }

  .mma-phone {
    width: 230px;
  }
}


/* ══════════════════════════════════════════════
   MMA BENEFITS SECTION — Grid Refactor
   mlm-mobile-app.html — Section 2
   ══════════════════════════════════════════════ */

.mma-benefits {
  padding: 80px 0;
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mma-benefits-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Section header ── */
.mma-benefits-head {
  max-width: 640px;
  margin: 0 auto 52px;
  text-align: center;
}

.mma-benefits-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
  margin-bottom: 14px;
}

.mma-benefits-head p {
  font-size: 1rem;
  color: var(--g2);
  line-height: 1.72;
}

/* ── Grid container ── */
.mma-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Fifth card: span 2 columns and centre it */
.mma-benefits-grid .mma-benefit-item:last-child {
  grid-column: 2 / 3;
}

/* ── Card ── */
.mma-benefit-item {
  display: flex;
  flex-direction: row;
  align-item: flex-start;
  gap: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: 28px 24px;
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

.mma-benefit-item > p {
  font-size: .83rem;
  color: var(--g2);
  line-height: 1.68;
  margin: 0;
}

.mma-benefit-item:hover {
  border-color: var(--line2);
  box-shadow: 0 8px 28px rgba(232, 57, 29, 0.07);
  transform: translateY(-3px);
}

/* ── Icon block ── */
.mma-benefit-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r);
  background: var(--or-dim);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--or);
  transition: background .2s ease;
}

.mma-benefit-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.mma-benefit-text h3 {
  font-size: .93rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.3;
}

.mma-benefit-text p {
  font-size: .83rem;
  color: var(--g2);
  line-height: 1.68;
  margin: 0;
}

.mma-benefit-icon svg {
  width: 20px;
  height: 20px;
}

.mma-benefit-item:hover .mma-benefit-icon {
  background: rgba(232, 57, 29, 0.12);
}

/* ── Body copy ── */
.mma-benefit-body {
  display: flex;
  flex-direction: column;
  gap: 0px;
  flex: 1;
}

.mma-benefit-body h3 {
  font-size: .93rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.3;
}

.mma-benefit-body p {
  font-size: .83rem;
  color: var(--g2);
  line-height: 1.68;
  margin: 0;
}

.mma-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}


/* ── Responsive ── */
@media (max-width: 900px) {
  .mma-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mma-benefits-grid .mma-benefit-item:last-child {
    grid-column: 1 / -1;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 600px) {
  .mma-benefits {
    padding: 56px 0;
  }

  .mma-benefits-head {
    text-align: left;
    margin-bottom: 32px;
  }

  .mma-benefits-grid {
    grid-template-columns: 1fr;
  }

  .mma-benefits-grid .mma-benefit-item:last-child {
    grid-column: unset;
    max-width: unset;
  }

  .mma-benefit-item:hover {
    transform: none;
  }
}


/* ══════════════════════════════════════════════
   MMA CORE FEATURES MATRIX
   mlm-mobile-app.html — Section 3
   ══════════════════════════════════════════════ */

.mma-features {
  padding: 80px 0;
  background: var(--bg);
}

.mma-features-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Section header ── */
.mma-features-head {
  margin-bottom: 48px;
}

.mma-features-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
}

/* ── Windowpane grid ── */
.mma-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Single shared border drawn via box-shadow on the container */
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

/* ── Individual cell ── */
.mma-feat-cell {
  padding: 32px 28px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: background .2s ease;
}

.mma-feat-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mma-feat-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--or-glow);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}

.mma-feat-cell:hover {
  background: var(--bg2);
}

.mma-feat-cell:hover::after {
  opacity: 1;
}

/* ── Icon ── */
.mma-feat-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--or);
  flex-shrink: 0;
  margin-bottom: 4px;
  margin-top: 1px;
}

.mma-feat-icon svg {
  width: 24px;
  height: 24px;
}

/* ── Text ── */
.mma-feat-cell h3 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.mma-feat-cell p {
  font-size: .8rem;
  color: var(--g3);
  line-height: 1.65;
  margin: 0;
}

/* Orange accent line on hover — top edge */
.mma-feat-cell:hover h3 {
  color: var(--or);
  transition: color .2s ease;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .mma-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .mma-features {
    padding: 56px 0;
  }

  .mma-features-grid {
    grid-template-columns: 1fr;
  }

  .mma-feat-cell {
    padding: 24px 20px;
  }
}


/* ══════════════════════════════════════════════
   MMA COMPENSATION PLANS — Full-Width Refactor
   mlm-mobile-app.html — Section 4
   ══════════════════════════════════════════════ */

.mma-plans {
  padding: 80px 0;
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mma-plans-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Full-width header row ── */
.mma-plans-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 36px;
}

.mma-plans-head-text {
  flex: 1;
  max-width: 600px;
}

.mma-plans-head-text h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
  margin-bottom: 12px;
}

.mma-plans-head-text p {
  font-size: .9rem;
  color: var(--g2);
  line-height: 1.72;
  margin: 0;
}

/* Count badge — right-aligned in header */
.mma-plans-count {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--or);
  border-radius: var(--r);
  flex-shrink: 0;
  align-self: flex-end;
}

.mma-plans-num {
  font-size: 2.2rem;
  font-weight: 850;
  color: var(--or);
  line-height: 1;
  letter-spacing: -0.03em;
}

.mma-plans-num-label {
  font-size: .68rem;
  font-weight: 600;
  color: var(--g3);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ── Full-width pill stack ── */
.mma-plans-stack {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow: hidden;
  background: var(--bg);
}

/* ── Individual pill ── */
.mma-plan-pill {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background .2s ease, padding-left .2s ease;
}

.mma-plan-pill:last-child {
  border-bottom: none;
}

.mma-plan-pill::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--or);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1);
}

.mma-plan-pill:hover {
  background: var(--bg2);
  padding-left: 32px;
}

.mma-plan-pill:hover::before {
  transform: scaleY(1);
}

/* Index */
.mma-plan-index {
  font-size: .68rem;
  font-weight: 800;
  color: var(--g3);
  letter-spacing: .1em;
  text-align: center;
  flex-shrink: 0;
  transition: color .2s ease;
}

.mma-plan-pill:hover .mma-plan-index {
  color: var(--or);
}

/* Body */
.mma-plan-body h3 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.25;
  margin-bottom: 3px;
  transition: color .2s ease;
}

.mma-plan-pill:hover .mma-plan-body h3 {
  color: var(--or);
}

.mma-plan-body p {
  font-size: .8rem;
  color: var(--g3);
  line-height: 1.55;
  margin: 0;
}

/* Tags */
.mma-plan-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mma-plan-tags span {
  font-size: .62rem;
  font-weight: 600;
  color: var(--g3);
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px 9px;
  white-space: nowrap;
  letter-spacing: .02em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.mma-plan-pill:hover .mma-plan-tags span {
  background: var(--or-dim);
  color: var(--or);
  border-color: var(--line2);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .mma-plans-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 28px;
  }

  .mma-plans-count {
    align-self: flex-start;
  }
}

@media (max-width: 600px) {
  .mma-plans {
    padding: 56px 0;
  }

  .mma-plan-pill {
    grid-template-columns: 36px 1fr;
    gap: 14px;
    padding: 18px 18px;
  }

  .mma-plan-tags {
    display: none;
  }

  .mma-plan-pill:hover {
    padding-left: 22px;
  }
}

/* ══════════════════════════════════════════════
   MMA FEATURE SUMMARY TABLE
   mlm-mobile-app.html — Section 5
   ══════════════════════════════════════════════ */

.mma-table-section {
  padding: 80px 0;
  background: var(--bg);
}

.mma-table-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.mma-table-head {
  max-width: 860px;
  margin: 0 auto 40px;
  text-align: center;
}

.mma-table-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
}

/* ── Wrapper ── */
.mma-table-wrap {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow: hidden;
}

/* ── Desktop header row — hidden on mobile ── */
.mma-spec-header {
  display: none;
}

/* ── Row list ── */
.mma-spec-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ════════════════════════
   MOBILE LAYOUT (default)
   ════════════════════════ */

.mma-spec-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  transition: background .18s ease;
}

.mma-spec-row:last-child,
.mma-spec-row--last {
  border-bottom: none;
}

.mma-spec-row:hover {
  background: var(--bg2);
}

/* Left block: icon + text */
.mma-spec-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

/* Icon badge */
.mma-td-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--r);
  background: var(--or-dim);
  border: 1px solid var(--line2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--or);
  margin-top: 1px;
}

.mma-td-icon svg {
  width: 13px;
  height: 13px;
}

/* Text stack */
.mma-spec-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mma-spec-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--g1);
  line-height: 1.3;
}

/* Mobile subtext — visible below title on mobile */
.mma-spec-sub {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: var(--g3);
  line-height: 1.5;
  flex-wrap: wrap;
}

/* Desktop detail column — hidden on mobile */
.mma-spec-detail {
  display: none;
  font-size: .85rem;
  color: var(--g2);
  align-items: center;
  gap: 6px;
}

/* Shared checkmark */
.mma-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(22, 163, 74, 0.08);
  border: 1.5px solid rgba(22, 163, 74, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--green);
}

.mma-check svg {
  width: 9px;
  height: 9px;
}

.mma-check-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ════════════════════════
   DESKTOP LAYOUT (≥ 640px)
   ════════════════════════ */

@media (min-width: 640px) {

  /* Restore header row */
  .mma-spec-header {
    display: grid;
    grid-template-columns: 52% 48%;
    padding: 11px 28px;
    background: var(--bg2);
    border-bottom: 1px solid var(--line);
  }

  .mma-spec-header span {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g3);
  }

  /* Row: two fixed columns via grid */
  .mma-spec-row {
    display: grid;
    grid-template-columns: 52% 48%;
    align-items: center;
    gap: 0;
    padding: 18px 28px;
  }

  /* Left block fills its column */
  .mma-spec-left {
    flex: unset;
  }

  /* Hide mobile subtext */
  .mma-spec-sub {
    display: none;
  }

  /* Show desktop detail — left-aligned in its column */
  .mma-spec-detail {
    display: inline-flex;
    align-items: center;
  }
}

/* ── Feature cell (left) ── */
.mma-td-feature {
  padding: 18px 28px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--g1);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  width: 40%;
}

/* [Duplicate .mma-td-icon / .mma-check / .mma-check-group removed — defined above] */

/* ── MMA TABLE: mobile responsive layout ── */

/* Mobile stacked layout inside feature cell */
.mma-td-mob-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.mma-td-text-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.mma-td-label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--g1);
  line-height: 1.3;
}

/* Detail text shown only on mobile (inside feature cell) */
.mma-td-detail-mob {
  font-size: .8rem;
  color: var(--g3);
  line-height: 1.55;
}

.mma-td-detail-mob .mma-check-group {
  justify-content: flex-start;
}

/* Increased mobile row padding */
.mma-td-feature {
  padding: 18px 18px;
  white-space: normal;
  width: 100%;
}

/* Hide desktop detail column on mobile */
.mma-td-desk-only {
  display: none;
}

/* ── Desktop: side-by-side layout ── */
@media (min-width: 640px) {
  .mma-spec-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    gap: 16px;
  }

  /* Hide mobile subtext on desktop */
  .mma-spec-sub {
    display: none;
  }

  /* Show desktop detail column */
  .mma-spec-detail {
    display: inline-flex;
    flex-shrink: 0;
    text-align: right;
  }
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .mma-table-section {
    padding: 56px 0;
  }

  .mma-table thead th,
  .mma-td-feature,
  .mma-td-detail {
    padding: 14px 18px;
  }

  .mma-td-feature {
    font-size: .82rem;
    width: 50%;
  }

  .mma-td-detail {
    font-size: .8rem;
  }
}

@media (max-width: 520px) {
  .mma-table-wrap {
    border-radius: var(--r);
  }

  .mma-table thead {
    display: none;
  }

  .mma-table tbody tr {
    display: flex;
    flex-direction: column;
    padding: 16px 18px;
    gap: 6px;
    border-bottom: 1px solid var(--line);
  }

  .mma-td-feature,
  .mma-td-detail {
    display: block;
    padding: 0;
    width: 100%;
    text-align: left;
    white-space: normal;
  }

  .mma-td-detail {
    font-size: .8rem;
    color: var(--g3);
  }

  .mma-check-group {
    justify-content: flex-start;
  }
}

/* ═══════════════════════════════════════════════════
   S4 · WBTBL — WB page table overrides + bug fixes
   ═══════════════════════════════════════════════════ */

/* Section background alternate */
.wbtbl { background: var(--bg2); border-top: 1px solid var(--line); }

/* Accent word in h2 */
.wbtbl-accent { color: var(--or); }

/* Constrain table card width */
.wbtbl .mma-table-wrap { max-width: 860px; }

/* Fix broken .mma-td-detail width rule (missing semicolon in original) */
.mma-td-detail { width: 60%; }

/* Ensure white-space wraps properly on feature titles at all sizes */
.mma-spec-title {
  white-space: normal;          /* allow wrap at narrow */
  word-break: break-word;
}

/* Desktop: lock title to single line if column is wide enough */
@media (min-width: 640px) {
  .mma-spec-title { white-space: nowrap; }
  /* Wider left column on WB table — more space for longer feature names */
  .wbtbl .mma-spec-header,
  .wbtbl .mma-spec-row {
    grid-template-columns: 55% 45%;
  }
  .wbtbl .mma-spec-header span:last-child {
    padding-left: 40px;
  }
  /* Offset detail column with left padding to match design system */
  .wbtbl .mma-spec-detail { padding-left: 24px; }
}

/* Divider lines — enforce on every row */
.mma-spec-row { border-bottom: 1px solid var(--line); }
.mma-spec-row:last-child,
.mma-spec-row.mma-spec-row--last { border-bottom: none; }

/* ══════════════════════════════════════════════
   MMA FAQ SECTION — Card Refactor
   mlm-mobile-app.html — Section 6
   ══════════════════════════════════════════════ */

.mma-faq {
  padding: 80px 0;
  background: var(--bg2);
  border-top: 1px solid var(--line);
}

.mma-faq-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ── */
.mma-faq-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.mma-faq-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
}

/* ── Card stack ── */
.mma-faq-stack {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Individual card ── */
.mma-faq-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease;
}

.mma-faq-item:has(.mma-faq-trigger[aria-expanded="true"]) {
  border-color: var(--or);
  box-shadow: 0 0 0 1px var(--or), 0 8px 24px rgba(232, 57, 29, 0.08);
}

/* ── Trigger button ── */
.mma-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  text-align: left;
}

.mma-faq-trigger span:first-child {
  font-size: .93rem;
  font-weight: 600;
  color: var(--g1);
  line-height: 1.4;
  transition: color .2s ease;
}

.mma-faq-trigger[aria-expanded="true"] span:first-child {
  color: var(--or);
}

/* ── Chevron icon badge ── */
.mma-faq-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--g3);
  transition: border-color .22s ease, background .22s ease,
              color .22s ease, transform .3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mma-faq-icon svg {
  width: 12px;
  height: 12px;
}

.mma-faq-trigger[aria-expanded="true"] .mma-faq-icon {
  border-color: var(--line2);
  background: var(--or-dim);
  color: var(--or);
  transform: rotate(180deg);
}

/* ── Answer panel ── */
.mma-faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(0.16, 1, 0.3, 1);
}

.mma-faq-panel p {
  font-size: .87rem;
  color: var(--g2);
  line-height: 1.75;
  padding: 0 24px 22px;
  margin: 0;
}

.mma-faq-panel.open {
  max-height: 300px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .mma-faq {
    padding: 56px 0;
  }

  .mma-faq-head {
    text-align: left;
    margin-bottom: 32px;
  }

  .mma-faq-trigger {
    padding: 18px 18px;
  }

  .mma-faq-panel p {
    padding: 0 18px 18px;
  }
}

/* ═══════════════════════════════════════════════════
   S1 · WBH — Website Builder Hero
   Prefix: wbh-  |  Zero collision with global styles
   ═══════════════════════════════════════════════════ */

/* ── Section: extend .page-hero ── */
.wbh {
  padding: 80px 0 96px;
  /* Reinforce grid texture already on .page-hero */
  background-size: 40px 40px;
}

/* ── Two-column grid: img LEFT · copy RIGHT ── */
.wbh-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* ══════════════
   LEFT — Visual
   ══════════════ */
.wbh-visual {
  position: relative;
  /* room for badge overflow + depth card */
  padding: 16px 16px 44px 0;
}

/* Subtle depth card behind image */
.wbh-depth-card {
  position: absolute;
  inset: 24px -10px -14px 24px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 20px;
  z-index: 0;
  transform: rotate(1.8deg);
}

/* Image frame */
.wbh-img-frame {
  position: relative;
  z-index: 1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 2px 0   rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.07),
    0 28px 64px rgba(0,0,0,0.09);
  border: 1px solid var(--line);
  /* Soft orange glow bleed */
  background: linear-gradient(135deg, rgba(232,57,29,.04) 0%, transparent 60%);
}
.wbh-img-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

/* ── Micro-badges ── */
.wbh-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 14px 7px 7px;
  font-size: .7rem;
  font-weight: 700;
  color: var(--g1);
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,0.09);
  z-index: 2;
}

/* Bottom-left badge */
.wbh-badge--bl {
  bottom: 20px;
  left: -14px;
}

/* Top-right badge */
.wbh-badge--tr {
  top: 4px;
  right: -18px;
}

/* Badge dot icon container */
.wbh-badge-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wbh-badge-dot--green {
  background: rgba(22,163,74,.12);
  color: var(--green);
}
.wbh-badge-dot--or {
  background: rgba(232,57,29,.1);
  color: var(--or);
}

/* ══════════════
   RIGHT — Copy
   ══════════════ */
.wbh-copy {
  display: flex;
  flex-direction: column;
}

/* Eyebrow spacing tweak for this page */
.wbh-copy .eyebrow {
  margin-bottom: 16px;
}

/* H1 */
.wbh-copy h1 {
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 850;
  line-height: 1.13;
  letter-spacing: -0.03em;
  color: var(--g1);
  margin-bottom: 20px;
}
.wbh-accent {
  color: var(--or);
}

/* Description */
.wbh-desc {
  font-size: 1.02rem;
  color: var(--g2);
  line-height: 1.72;
  max-width: 480px;
  margin-bottom: 28px;
}

/* Feature pill tags */
.wbh-pills {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36px;
}
.wbh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 15px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--g2);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.wbh-pill svg {
  color: var(--or);
  flex-shrink: 0;
}

/* CTA row */
.wbh-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .wbh-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  /* Stack: copy first on mobile */
  .wbh-copy  { order: 1; }
  .wbh-visual { order: 2; padding: 16px 0 44px; }
  .wbh-desc  { max-width: 100%; }
  .wbh-badge--tr { right: -8px; }
  .wbh-badge--bl { left: -8px; }
}

@media (max-width: 520px) {
  .wbh { padding: 52px 0 64px; }
  .wbh-badge { font-size: .65rem; padding: 5px 10px 5px 6px; }
  .wbh-badge-dot { width: 18px; height: 18px; }
  .wbh-depth-card { display: none; }
}

/* ═══════════════════════════════════════════════════
   S2 · WBS2 — Explanation & Core Features Spotlight
   Prefix: wbs2-  |  Zero collision with global styles
   ═══════════════════════════════════════════════════ */

.wbs2 {
  padding: 88px 0 96px;
  background: var(--bg2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.wbs2-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Full-width header ── */
.wbs2-header {
  margin-bottom: 52px;
}
.wbs2-header .eyebrow {
  margin-bottom: 12px;
}
.wbs2-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--g1);
  line-height: 1.18;
}
.wbs2-br { display: block; }

/* ── Asymmetric two-column body ── */
.wbs2-body {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 32px;
  align-items: start;
}

/* ══════════════════════
   LEFT — Concept card
   ══════════════════════ */
.wbs2-left {
  position: sticky;
  top: 96px; /* clears fixed nav */
}

.wbs2-concept-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--or);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.wbs2-card-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 10px;
}

.wbs2-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--g1);
  line-height: 1.3;
  margin-bottom: 14px;
  letter-spacing: -0.018em;
}

.wbs2-card-body {
  font-size: .92rem;
  color: var(--g2);
  line-height: 1.72;
  margin-bottom: 20px;
}

/* Outcome highlight box */
.wbs2-highlight-box {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--or-dim);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}
.wbs2-highlight-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--or);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.wbs2-highlight-box p {
  font-size: .855rem;
  color: var(--g1);
  line-height: 1.65;
}
.wbs2-highlight-box p strong {
  color: var(--or);
}

/* Trust list */
.wbs2-trust-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wbs2-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .82rem;
  color: var(--g2);
  font-weight: 500;
}
.wbs2-trust-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--or);
  flex-shrink: 0;
  opacity: .75;
}

/* ══════════════════════
   RIGHT — Feature grid
   ══════════════════════ */
.wbs2-feat-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.wbs2-feat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: border-color .22s, box-shadow .22s, transform .22s;
  position: relative;
  overflow: hidden;
}
/* Bottom-left accent line on hover */
.wbs2-feat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.wbs2-feat-card:hover {
  border-color: var(--line2);
  box-shadow: 0 8px 32px rgba(232,57,29,0.08);
  transform: translateY(-3px);
}
.wbs2-feat-card:hover::after {
  transform: scaleX(1);
}

/* Span full width for the 10th card (multi-language) */
.wbs2-feat-card--span {
/*  grid-column: 1 / -1; */
}

/* Feature icon badge */
.wbs2-feat-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--bg2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--g2);
  flex-shrink: 0;
  transition: background .2s, border-color .2s, color .2s;
}
.wbs2-feat-card:hover .wbs2-feat-icon {
  background: var(--or-dim);
  border-color: var(--line2);
  color: var(--or);
}
/* Orange variant for featured card */
.wbs2-feat-icon--or {
  background: var(--or-dim);
  border-color: var(--line2);
  color: var(--or);
}

/* Feature text */
.wbs2-feat-text { flex: 1; min-width: 0; }
.wbs2-feat-text h4 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.3;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.wbs2-feat-text p {
  font-size: .8rem;
  color: var(--g3);
  line-height: 1.6;
}

/* Language tag badge inside h4 */
.wbs2-lang-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--or);
  background: var(--or-dim);
  border: 1px solid var(--line2);
  border-radius: 100px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .wbs2-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .wbs2-left { position: static; }
  .wbs2-br  { display: none; }
}

@media (max-width: 600px) {
  .wbs2 { padding: 60px 0 68px; }
  .wbs2-feat-grid { grid-template-columns: 1fr; }
  .wbs2-feat-card--span { grid-column: unset; }
}


/* ═══════════════════════════════════════════════════
   S3 · WBHIW — How It Works override
   Reuses .mlm-flow-* entirely; this block only
   adjusts background tint to match the WB page context
   ═══════════════════════════════════════════════════ */
.wbhiw {
  background: var(--bg);
  border-top: 1px solid var(--line);
}


/* [Duplicate .wbtbl block removed — S4 WBTBL overrides defined above] */

/* ════════════════════════════════════════════
   SHARED SECTION WRAPPERS
   ════════════════════════════════════════════ */

.wl-hero {
  padding: 80px 0 88px;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  position: relative;
  overflow: hidden;
}
.wl-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 30%, rgba(232,57,29,.06), transparent 58%);
  pointer-events: none;
}
.wl-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.wl-section {
  padding: 80px 0;
}
.wl-section.bg-alt {
  background: var(--bg2);
}
.wl-section.bg-dark {
  background: var(--g1);
  position: relative;
  overflow: hidden;
}
.wl-section.bg-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(232,57,29,.08), transparent 55%);
  pointer-events: none;
}
.wl-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}


/* ════════════════════════════════════════════
   HERO SECTION
   ════════════════════════════════════════════ */

/* ── WL HERO SECTION ── */
.wl-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
}
.wl-hero-left {
  animation: heroIn 1s cubic-bezier(0.16,1,0.3,1) .1s both;
}
.wl-hero-left h1 {
  font-size: clamp(1.75rem, 4vw, 3.1rem);
  font-weight: 850;
  line-height: 1.13;
  letter-spacing: -0.028em;
  color: var(--g1);
  margin-bottom: 20px;
}
.wl-hero-left h1 em {
  color: var(--or);
  font-style: normal;
}
.wl-hero-left p {
  font-size: 1rem;
  color: var(--g2);
  line-height: 1.76;
  width: 100%;
  max-width: 520px;
  margin-bottom: 28px;
}
.wl-hero-left p strong {
  color: var(--g1);
  font-weight: 700;
}
.wl-hero-right {
  display: flex;
  justify-content: center;
  animation: heroIn 1s cubic-bezier(0.16,1,0.3,1) .28s both;
}

/* ── RIGHT COLUMN: ATTRIBUTE CARD ── */
.wl-attr-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 26px 22px;
  width: 100%;
  max-width: 420px;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.04),
    0 16px 48px rgba(0,0,0,0.07);
  position: relative;
  overflow: hidden;
}
.wl-attr-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--or), var(--or2));
  border-radius: 20px 20px 0 0;
}
.wl-attr-card::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(232,57,29,.06), transparent 70%);
  pointer-events: none;
}
.wl-attr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.wl-attr-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--g1);
  letter-spacing: .01em;
}
.wl-attr-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(22,163,74,.08);
  border: 1px solid rgba(22,163,74,.2);
  color: var(--green);
  border-radius: 100px;
  padding: 3px 10px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wl-attr-live::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  animation: pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
.wl-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.wl-kpi {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 11px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  transition: border-color .2s, box-shadow .2s;
}
.wl-kpi:hover {
  border-color: var(--line2);
  box-shadow: 0 4px 16px rgba(232,57,29,.06);
}
.wl-kpi-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  filter: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--or-dim);
  border: 1px solid var(--line2);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.wl-kpi-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wl-kpi-val {
  font-size: .84rem;
  font-weight: 800;
  color: var(--g1);
  line-height: 1.2;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.wl-kpi-val.or { color: var(--or); }
.wl-kpi-label {
  font-size: .6rem;
  color: var(--g3);
  line-height: 1.35;
}
.wl-card-divider {
  height: 1px;
  background: var(--line);
  margin: 14px 0;
}
.wl-attr-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
}
.wl-attr-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .78rem;
  color: var(--g2);
  font-weight: 500;
  line-height: 1.35;
}
.wl-attr-item::before {
  content: '';
  width: 15px; height: 15px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--or-dim)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='2,5 4.5,7.5 8,3' fill='none' stroke='%23E8391D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / 9px;
  border: 1.5px solid var(--line2);
}
.wl-timeline-wrap {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
}
.wl-timeline-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.wl-timeline-top span {
  font-size: .65rem;
  font-weight: 600;
  color: var(--g3);
}
.wl-timeline-top span:last-child {
  color: var(--or);
  font-weight: 700;
}
.wl-timeline-bar {
  background: var(--bg3);
  border-radius: 100px;
  height: 5px;
  overflow: hidden;
}
.wl-timeline-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--or), var(--or2));
  border-radius: 100px;
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1) .6s;
}
.wl-timeline-fill.animate { width: 72%; }

/* ── HERO RESPONSIVE ── */
@media (max-width: 960px) {
  .wl-hero-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .wl-hero-left {
    margin-bottom: 36px;
  }
  .wl-hero-left p {
    max-width: 100%;
  }
  .trust-pills  { justify-content: center; }
  .hero-ctas    { justify-content: center; }
  .wl-hero-left { text-align: center; }
  .wl-hero-right {
    justify-content: center;
  }
  .wl-attr-card {
    max-width: 520px;
    margin: 0 auto;
  }
}
@media (max-width: 600px) {
  .wl-hero { padding: 48px 0 56px; }
  .wl-hero-left h1 {
    font-size: clamp(1.5rem, 7vw, 2rem);
    letter-spacing: -.02em;
  }
  .wl-hero-left p { font-size: .95rem; }
  .wl-attr-card {
    padding: 20px 16px 18px;
    max-width: 100%;
    border-radius: 16px;
  }
  .wl-kpi { padding: 10px 9px; }
  .wl-kpi-val { font-size: .8rem; }
  .wl-kpi-label { font-size: .58rem; }
  .wl-attr-item { font-size: .74rem; }
}

/* ════════════════════════════════════════════
   COMPARISON TABLE SECTION — hierarchy + dark verdict
   ════════════════════════════════════════════ */

.wl-cmp-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.05);
}

/* Header row */
.wl-cmp-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
}
.wl-cmp-head-cell {
  padding: 14px 24px;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--g3);
}
.wl-cmp-head-cell.col-wl {
  color: var(--or);
  font-weight: 800;
}
.wl-cmp-head-cell.col-cb {
  color: var(--g3);
  font-weight: 500;
}

/* Data rows */
.wl-cmp-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-bottom: 1px solid var(--line);
  align-items: stretch;
  transition: background .12s;
}
.wl-cmp-row:last-child { border-bottom: none; }
.wl-cmp-row:nth-child(even) { background: var(--bg2); }
.wl-cmp-row:hover { background: rgba(232,57,29,.02); }

/* Cells */
.wl-cmp-cell {
  padding: 17px 24px;
  min-height: 58px;
  font-size: .875rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.wl-cmp-cell.col-metric {
  font-weight: 700;
  color: var(--g1);
}
.wl-cmp-cell.col-wl {
  font-weight: 600;
  color: var(--g1);
}
.wl-cmp-cell.col-wl::before {
  content: '✓';
  color: var(--green);
  font-weight: 800;
  font-size: .8rem;
  flex-shrink: 0;
  line-height: 1;
}
.wl-cmp-cell.col-cb {
  font-weight: 400;
  color: var(--g3);
}

/* ── DARK VERDICT CARD ── */
.wl-verdict {
  margin-top: 28px;
  background: #111113;
  border-radius: 16px;
  border-left: 4px solid var(--or);
  padding: 32px 36px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
/* subtle radial glow behind icon */
.wl-verdict::after {
  content: '';
  position: absolute;
  top: -40px; left: 20px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(232,57,29,.12), transparent 65%);
  pointer-events: none;
}
.wl-verdict-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(232,57,29,.1);
  border: 1px solid rgba(232,57,29,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.wl-verdict-body {
  position: relative;
  z-index: 1;
}
.wl-verdict-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 8px;
  display: block;
}
.wl-verdict-text {
  font-size: .95rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.78;
  margin-top: 0;
}
.wl-verdict-text strong {
  color: #fff;
  font-weight: 700;
}

/* ── SECTION TITLE ACCENT ── */
.wl-cmp-title-accent { color: var(--or); }

/* Responsive */
@media (max-width: 720px) {
  .wl-cmp-head,
  .wl-cmp-row       { grid-template-columns: 1.1fr 1fr 1fr; }
  .wl-cmp-cell,
  .wl-cmp-head-cell { padding: 13px 14px; font-size: .8rem; }
  .wl-verdict       { padding: 24px 20px; flex-direction: column; gap: 14px; }
}
@media (max-width: 480px) {
  .wl-cmp-head,
  .wl-cmp-row       { grid-template-columns: 1fr 1fr 1fr; }
  .wl-cmp-cell      { padding: 12px 10px; min-height: 48px; }
  .wl-cmp-head-cell { padding: 12px 10px; }
}

/* ════════════════════════════════════════════
   BRAND CUSTOMISATION SECTION
   ════════════════════════════════════════════ */

.wl-brand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.wl-brand-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 20px;
  display: flex;
  flex-direction: row;   /* icon left, text right */
  align-items: flex-start;
  gap: 14px;
  cursor: default;
  transition: border-color .22s, transform .22s, box-shadow .22s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.wl-brand-card:hover {
  border-color: var(--line2);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(232,57,29,.09);
}

/* icon + title row */
.wl-brand-card-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}
.wl-brand-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: var(--or-dim);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;          /* never squash */
  transition: background .22s;
}
.wl-brand-card:hover .wl-brand-icon { background: rgba(232,57,29,.12); }
.wl-brand-icon svg {
  width: 18px; height: 18px;
  stroke: var(--or);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* right text column */
.wl-brand-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.wl-brand-card h3 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.3;
  letter-spacing: -.01em;
  margin: 0;
}
.wl-brand-card p {
  font-size: .78rem;
  color: var(--g2);
  line-height: 1.65;
  margin: 0;
}

/* Responsive */
@media (max-width: 960px) {
  .wl-brand-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .wl-brand-grid { grid-template-columns: 1fr; gap: 12px; }
  .wl-brand-card { padding: 18px 16px; }
}
/* ════════════════════════════════════════════
   TURNAROUND TIMELINE SECTION — horizontal 2-row track
   ════════════════════════════════════════════ */

/* Two-row wrapper */
.wl-tl-track {
  flex-direction: column;
  gap: 0;
  margin-top: 48px;
}

/* Each row = one horizontal run of 3 steps */
.wl-tl-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  margin-bottom: 20px;
}

/* Continuous track line behind step nodes — row 1 */
.wl-tl-row::before {
  content: '';
  position: absolute;
  top: 28px; /* vertically centred on the badge */
  left: calc(50% / 3);         /* starts at centre of first badge */
  right: calc(50% / 3);        /* ends at centre of last badge */
  height: 2px;
  background: var(--line);
  z-index: 0;
}

/* Downward connector between row 1 end and row 2 start */
.wl-tl-bridge {
  display: flex;
  justify-content: flex-end;   /* hangs off the right of row 1 */
  padding-right: calc(100% / 6);
  pointer-events: none;
} */
.wl-tl-bridge-line {
  width: 2px;
  height: 32px;
  background: var(--line);
  position: relative;
}
/* arrowhead */
.wl-tl-bridge-line::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--line);
}

/* Row 2 track — left-aligned to match bridge drop */
.wl-tl-row.row-2::before {
  left: calc(50% / 3);
  right: calc(50% / 3);
}

/* Step item */
.wl-tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}

/* Node badge */
.wl-tl-node {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  color: var(--g3);
  letter-spacing: .04em;
  flex-shrink: 0;
  margin-bottom: 16px;
  transition: border-color .22s, color .22s, box-shadow .22s;
  position: relative;
  z-index: 2;
}
.wl-tl-step:hover .wl-tl-node {
  border-color: var(--or);
  color: var(--or);
  box-shadow: 0 0 0 5px var(--or-dim);
}

/* Card below node */
.wl-tl-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .22s, transform .22s, box-shadow .22s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.wl-tl-step:hover .wl-tl-card {
  border-color: var(--line2);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(232,57,29,.08);
}
.wl-tl-card h3 {
  font-size: .84rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.35;
  letter-spacing: -.01em;
}
.wl-tl-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--or);
  background: var(--or-dim);
  border: 1px solid var(--line2);
  border-radius: 100px;
  padding: 3px 11px;
  align-self: center;
  margin-top: auto;
}
.wl-tl-duration::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--or);
  flex-shrink: 0;
}


/* ── TOTAL BANNER — dark theme ── */
.wl-tl-total {
  margin-top: 32px;
  background: #111113;
  border: 1px solid rgba(232,57,29,.2);
  border-left: 4px solid var(--or);
  border-radius: 14px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
/* subtle glow behind icon */
.wl-tl-total::before {
  content: '';
  position: absolute;
  top: -30px; left: 16px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(232,57,29,.1), transparent 65%);
  pointer-events: none;
}
.wl-tl-total-left {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
}
.wl-tl-total-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(232,57,29,.15);
  border: 1px solid rgba(232,57,29,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wl-tl-total-icon svg {
  width: 20px; height: 20px;
  stroke: var(--or);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wl-tl-total-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 3px;
}
.wl-tl-total-title {
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
}
.wl-tl-total-right {
  position: relative;
  z-index: 1;
  text-align: right;
}
.wl-tl-total-val {
  font-size: 1.6rem;
  font-weight: 850;
  color: var(--or);
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
}
.wl-tl-total-sub {
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  margin-top: 4px;
  text-align: right;
}

/* responsive override */
@media (max-width: 720px) {
  .wl-tl-total     { flex-direction: column; align-items: flex-start; gap: 14px; }
  .wl-tl-total-right { text-align: left; }
  .wl-tl-total-val  { font-size: 1.3rem; }
  .wl-tl-total-sub  { text-align: left; }
}

/* ── RESPONSIVE ── */
@media (max-width: 720px) {
  /* collapse to vertical stack */
  .wl-tl-row        { grid-template-columns: 1fr; gap: 0; }
  .wl-tl-row::before { display: none; }
  .wl-tl-bridge,
  .wl-tl-bridge-line { display: none; }
  .wl-tl-step       { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; padding: 0 0 24px; position: relative; }
  /* vertical line on left */
  .wl-tl-step::before {
    content: '';
    position: absolute;
    left: 27px; top: 56px;
    width: 2px;
    bottom: 0;
    background: var(--line);
    z-index: 0;
  }
  .wl-tl-step:last-child::before { display: none; }
  .wl-tl-node       { margin-bottom: 0; flex-shrink: 0; }
  .wl-tl-card       { flex: 1; }
  .wl-tl-total      { flex-direction: column; align-items: flex-start; gap: 14px; }
  .wl-tl-total-val  { font-size: 1.3rem; }
  .wl-tl-total-sub  { text-align: left; }
}


/* ── AJL Page Hero ── */
.ajl-ph { padding: 72px 0 64px; }

.ajl-ph-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.ajl-ph-left h1 { margin-bottom: 18px; }
.ajl-ph-left > p { margin-bottom: 32px; }

.ajl-ph-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

/* WhatsApp secondary CTA — green tint override */
.ajl-wa-btn {
  color: var(--green);
  border-color: rgba(22, 163, 74, 0.28);
}
.ajl-wa-btn svg { color: var(--green); flex-shrink: 0; }
.ajl-wa-btn:hover {
  color: var(--green);
  border-color: rgba(22, 163, 74, 0.55);
  background: rgba(22, 163, 74, 0.06);
}

/* ── Warning card ── */
.ajl-warn-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: rgba(220, 60, 30, 0.05);
  border: 1px solid rgba(220, 60, 30, 0.18);
  border-left: 4px solid var(--or);
  border-radius: var(--r2);
  padding: 28px 28px 28px 24px;
}

.ajl-warn-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(232, 57, 29, 0.09);
  border: 1px solid rgba(232, 57, 29, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--or);
  margin-top: 2px;
}

.ajl-warn-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--or);
  margin-bottom: 8px;
}

.ajl-warn-text {
  font-size: .9rem;
  color: var(--g2);
  line-height: 1.72;
}

.ajl-warn-text strong {
  color: var(--g1);
  font-weight: 650;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .ajl-ph-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .ajl-ph { padding: 48px 0 40px; }
}

@media (max-width: 480px) {
  .ajl-ph-ctas { flex-direction: column; align-items: flex-start; }
  .ajl-ph-ctas .btn-primary,
  .ajl-ph-ctas .ajl-wa-btn { width: 100%; justify-content: center; }
}


/* ── AJL Info: Asymmetrical Split ── */
.ajl-info {
  padding: 88px 0;
  background: var(--bg2);
}
.ajl-info-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 56px;
  align-items: start;
}

/* ── LEFT: Spotlight — carry over unchanged ── */
.ajl-spotlight {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: var(--sh);
  position: sticky;
  top: 92px;
}
.ajl-spotlight .eyebrow { margin-bottom: 12px; }
.ajl-spotlight h2 {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.2;
  margin-bottom: 14px;
}
.ajl-spotlight-desc {
  font-size: .86rem;
  color: var(--g2);
  line-height: 1.78;
  margin-bottom: 22px;
}
.ajl-stat-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(22,163,74,.07) 0%, rgba(22,163,74,.03) 100%);
  border: 1px solid rgba(22,163,74,.22);
  border-radius: var(--r2);
  padding: 18px 20px;
  margin-bottom: 22px;
  overflow: hidden;
}
.ajl-stat-num {
  font-size: 1.65rem;
  font-weight: 850;
  letter-spacing: -0.035em;
  color: var(--green);
  line-height: 1;
  margin-bottom: 5px;
}
.ajl-stat-sub {
  font-size: .7rem;
  font-weight: 500;
  color: var(--g3);
  line-height: 1.5;
  max-width: 130px;
}
.ajl-stat-chart {
  width: 80px;
  height: 32px;
  flex-shrink: 0;
  opacity: .9;
}
.ajl-badge-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  overflow: hidden;
}
.ajl-badge-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 13px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.ajl-badge-item:last-child { border-bottom: none; }
.ajl-badge-item:hover { background: var(--bg2); }
.ajl-badge-item--warn { background: rgba(232,57,29,.03); }
.ajl-badge-item--warn:hover { background: rgba(232,57,29,.06); }
.ajl-pill {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--bg3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--g3);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.ajl-pill--warn {
  background: rgba(232,57,29,.08);
  border-color: rgba(232,57,29,.22);
  color: var(--or);
  font-size: .75rem;
}
.ajl-badge-item strong {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--g1);
  margin-bottom: 2px;
  line-height: 1.3;
}
.ajl-badge-item span {
  font-size: .73rem;
  color: var(--g3);
  line-height: 1.52;
}

/* ── RIGHT: Who needs it — UPDATED ── */
.ajl-who-head { margin-bottom: 22px; }
.ajl-who-head h2 {
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.2;
  margin: 10px 0 10px;
}
.ajl-who-head p {
  font-size: .86rem;
  color: var(--g2);
  line-height: 1.72;
}
.ajl-who-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Card: horizontal media-object layout */
.ajl-who-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 16px;
  display: flex;
  flex-direction: row;       /* ← horizontal */
  align-items: flex-start;
  gap: 14px;
  transition: border-color .22s, transform .22s, box-shadow .22s;
  box-shadow: 0 2px 8px rgba(0,0,0,.03);
}
.ajl-who-card:hover {
  border-color: var(--line2);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(232,57,29,.08);
}

/* Icon: left-pinned, fixed size, never shrinks */
.ajl-who-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--or-dim);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--or);
  transition: background .2s;
  margin-top: 1px;           /* optical alignment with h3 cap-height */
}
.ajl-who-card:hover .ajl-who-icon { background: rgba(232,57,29,.12); }

/* Text: takes remaining space */
.ajl-who-text { flex: 1; min-width: 0; }
.ajl-who-text h3 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.35;
  margin-bottom: 5px;
}
.ajl-who-text p {
  font-size: .78rem;
  color: var(--g2);
  line-height: 1.65;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ajl-info-inner { grid-template-columns: 1fr; gap: 40px; }
  .ajl-spotlight { position: static; }
  .ajl-who-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .ajl-who-grid { grid-template-columns: repeat(2, 1fr); }
  .ajl-info { padding: 56px 0; }
}
@media (max-width: 480px) {
  .ajl-who-grid { grid-template-columns: 1fr; }
  .ajl-spotlight { padding: 26px 20px; }
}


/* ── AJL Steps: Vertical Timeline ── */
.ajl-steps {
  padding: 88px 0;
  background: var(--bg);
}
.ajl-steps-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}
.ajl-steps-head {
  text-align: center;
  margin-bottom: 56px;
}
.ajl-steps-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
  margin: 10px 0 12px;
}
.ajl-steps-head p {
  font-size: .95rem;
  color: var(--g2);
  line-height: 1.74;
  max-width: 600px;
  margin: 0 auto;
}

/* ── Timeline ── */
.ajl-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ajl-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: stretch;
}
.ajl-step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.ajl-step-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--or);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--or);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background .2s, color .2s;
}
.ajl-step:hover .ajl-step-node {
  background: var(--or);
  color: #fff;
}
.ajl-step-node--final {
  background: var(--or);
  color: #fff;
}
.ajl-step-line {
  flex: 1;
  width: 2px;
  background: linear-gradient(to bottom, var(--line2) 0%, var(--line) 100%);
  margin: 4px 0;
  min-height: 24px;
}

/* ── Step card ── */
.ajl-step-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.03);
  transition: border-color .22s, box-shadow .22s, transform .22s;
}
.ajl-step:hover .ajl-step-card {
  border-color: var(--line2);
  box-shadow: 0 8px 28px rgba(232,57,29,.08);
  transform: translateX(3px);
}
.ajl-step-card--final {
  border-color: rgba(22,163,74,.25);
  background: linear-gradient(160deg, #fff 70%, rgba(22,163,74,.04) 100%);
}
.ajl-step:hover .ajl-step-card--final {
  border-color: rgba(22,163,74,.45);
  box-shadow: 0 8px 28px rgba(22,163,74,.1);
}
.ajl-step-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.35;
  margin-bottom: 10px;
}
.ajl-step-card p {
  font-size: .86rem;
  color: var(--g2);
  line-height: 1.74;
}

/* ── Status badges ── */
.ajl-step-meta { margin-bottom: 8px; }
.ajl-step-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ajl-step-badge--pre {
  background: rgba(99,102,241,.09);
  color: #4f46e5;
  border: 1px solid rgba(99,102,241,.2);
}
.ajl-step-badge--prep {
  background: rgba(234,179,8,.1);
  color: #a16207;
  border: 1px solid rgba(234,179,8,.25);
}
.ajl-step-badge--review {
  background: rgba(232,57,29,.07);
  color: var(--or);
  border: 1px solid var(--line2);
}
.ajl-step-badge--verify {
  background: rgba(14,165,233,.09);
  color: #0369a1;
  border: 1px solid rgba(14,165,233,.22);
}
.ajl-step-badge--approve {
  background: rgba(22,163,74,.09);
  color: var(--green);
  border: 1px solid rgba(22,163,74,.22);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .ajl-step {
    grid-template-columns: 40px 1fr;
    gap: 14px;
  }
  .ajl-step-node {
    width: 36px;
    height: 36px;
    font-size: .65rem;
  }
  .ajl-step-card { padding: 18px 18px; }
  .ajl-steps { padding: 56px 0; }
  .ajl-steps-head { margin-bottom: 40px; }
}


/* ── AJL Documents Required ── */
.ajl-docs {
  padding: 88px 0;
  background: var(--bg2);
}
.ajl-docs-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ajl-docs-head {
  margin-bottom: 32px;
}
.ajl-docs-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
  margin: 10px 0 12px;
}
.ajl-docs-head p {
  font-size: .95rem;
  color: var(--g2);
  line-height: 1.72;
  max-width: 560px;
}

/* ── Row wrappers ── */
.ajl-docs-row {
  display: grid;
  gap: 16px;
}
.ajl-docs-row--3 { grid-template-columns: repeat(3, 1fr); }
.ajl-docs-row--2 { grid-template-columns: repeat(2, 1fr); }

/* ── Card: media-object layout ── */
.ajl-doc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,.03);
  transition: border-color .22s, transform .22s, box-shadow .22s;
  display: flex;
  flex-direction: row;   /* icon left, body right */
  align-items: flex-start;
  gap: 14px;
}
.ajl-doc-card:hover {
  border-color: var(--line2);
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(232,57,29,.08);
}

/* ── Icon: fixed left ── */
.ajl-doc-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--or-dim);
  border: 1px solid var(--line2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--or);
  margin-top: 1px;       /* optical align to h3 cap-height */
  transition: background .2s;
}
.ajl-doc-card:hover .ajl-doc-icon { background: rgba(232,57,29,.12); }

/* ── Body: title + list, grouped right ── */
.ajl-doc-body {
  flex: 1;
  min-width: 0;          /* prevents overflow in narrow grid cells */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ajl-doc-body h3 {
  font-size: .94rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.3;
}

/* ── Checklist ── */
.ajl-doc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ajl-doc-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .82rem;
  color: var(--g2);
  line-height: 1.62;
}
.ajl-doc-list li::before {
  content: '';
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--or-dim) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpolyline points='2,5 4.5,7.5 8,3' fill='none' stroke='%23E8391D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat;
  border: 1px solid var(--line2);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ajl-docs-row--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ajl-docs-row--3,
  .ajl-docs-row--2 { grid-template-columns: 1fr; }
  .ajl-docs { padding: 56px 0; }
}


/* ── AJL Fees & Validity ── */
.ajl-fees {
  padding: 88px 0;
  background: var(--bg);
}
.ajl-fees-inner {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
}
.ajl-fees-head {
  text-align: center;
  margin-bottom: 40px;
}
.ajl-fees-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
  margin: 10px 0 12px;
}
.ajl-fees-head p {
  font-size: .95rem;
  color: var(--g2);
  line-height: 1.72;
}

/* ── Card wrapper ── */
.ajl-fees-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,.05);
  overflow: hidden;
}

/* ── Table rows ── */
.ajl-fees-table { display: flex; flex-direction: column; }
.ajl-fees-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.ajl-fees-row:nth-child(even) { background: var(--bg2); }
.ajl-fees-row:hover { background: rgba(232,57,29,.03); }
.ajl-fees-row--last { border-bottom: none; }

.ajl-fees-row dt {
  font-size: .9rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.4;
}
.ajl-dt-sub {
  display: block;
  font-size: .75rem;
  font-weight: 400;
  color: var(--g3);
  margin-top: 2px;
}
.ajl-fees-row dd { display: flex; align-items: center; }

/* ── Badges — all rows ── */
.ajl-fee-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;
}
.ajl-fee-note {
  font-size: .68rem;
  font-weight: 500;
  opacity: .8;
}
.ajl-fee-badge--or {
  background: rgba(232,57,29,.08);
  color: var(--or);
  border: 1px solid rgba(232,57,29,.2);
}
/* NEW: neutral slate for variable/unknown values */
.ajl-fee-badge--slate {
  background: var(--bg3);
  color: var(--g2);
  border: 1px solid var(--line);
}
.ajl-fee-badge--slate .ajl-fee-note {
  color: var(--g3);
  opacity: 1;
}
.ajl-fee-badge--green {
  background: rgba(22,163,74,.08);
  color: var(--green);
  border: 1px solid rgba(22,163,74,.2);
}
.ajl-fee-badge--amber {
  background: rgba(234,179,8,.1);
  color: #a16207;
  border: 1px solid rgba(234,179,8,.25);
}
.ajl-fee-badge--blue {
  background: rgba(14,165,233,.08);
  color: #0369a1;
  border: 1px solid rgba(14,165,233,.2);
}

/* ── Responsive ── */
@media (max-width: 560px) {
  .ajl-fees-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 20px;
  }
  .ajl-fees { padding: 56px 0; }
}


/* ── AJL vs Pyramid Scheme ── */
.ajl-compare {
  padding: 88px 0;
  background: var(--bg2);
}
.ajl-compare-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
.ajl-compare-head {
  text-align: center;
  margin-bottom: 40px;
}
.ajl-compare-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
  margin: 10px 0 8px;
}
.ajl-compare-head p {
  font-size: .72rem;
  color: var(--g3);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ── Outer card ── */
.ajl-compare-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,.05);
  overflow: hidden;
}

/* ── Table layout ── */
.ajl-compare-table { display: flex; flex-direction: column; }

.ajl-compare-header,
.ajl-compare-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
}

/* ── Header ── */
.ajl-compare-header { border-bottom: 2px solid var(--line); }
.ajl-col-feature {
  padding: 16px 20px;
  background: var(--bg3);
  border-right: 1px solid var(--line);
}
.ajl-col-head {
  padding: 16px 18px;
  display: flex;
  align-items: center;
}
.ajl-col-head--green {
  background: rgba(22,163,74,.05);
  border-right: 1px solid var(--line);
}
.ajl-col-head--red { background: rgba(220,38,38,.04); }
.ajl-col-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
}
.ajl-col-badge--green {
  background: rgba(22,163,74,.1);
  color: var(--green);
  border: 1px solid rgba(22,163,74,.22);
}
.ajl-col-badge--red {
  background: rgba(220,38,38,.08);
  color: #dc2626;
  border: 1px solid rgba(220,38,38,.2);
}

/* ── Data rows ── */
.ajl-compare-row {
  border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.ajl-compare-row:nth-child(even) .ajl-col-feature,
.ajl-compare-row:nth-child(even) .ajl-col-ajl,
.ajl-compare-row:nth-child(even) .ajl-col-pyr { background-color: var(--bg2); }
.ajl-compare-row:hover .ajl-col-feature,
.ajl-compare-row:hover .ajl-col-ajl,
.ajl-compare-row:hover .ajl-col-pyr { background-color: rgba(0,0,0,.02); }
.ajl-compare-row--last { border-bottom: none; }

.ajl-col-feature {
  padding: 15px 20px;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
}
.ajl-col-feature span {
  font-size: .86rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.4;
}
.ajl-col-ajl {
  padding: 15px 18px;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  color: #166534;
  font-weight: 500;
  background: rgba(22,163,74,.025);
}
.ajl-col-pyr {
  padding: 15px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .86rem;
  color: #991b1b;
  font-weight: 500;
  background: rgba(220,38,38,.025);
}

/* Cell icons */
.ajl-cell-check,
.ajl-cell-cross {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ajl-cell-check {
  background: rgba(22,163,74,.12);
  color: var(--green);
  border: 1px solid rgba(22,163,74,.25);
}
.ajl-cell-cross {
  background: rgba(220,38,38,.1);
  color: #dc2626;
  border: 1px solid rgba(220,38,38,.22);
}

/* ── MOBILE ONLY — targeted fix ── */
@media (max-width: 640px) {
  .ajl-compare-header { display: none; }

  .ajl-compare-row {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--line);
  }
  .ajl-compare-row--last { border-bottom: none; }

  /* Feature label */
  .ajl-col-feature {
    background: var(--bg3);
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 10px 16px;
  }

  /* AJL + Pyramid value cells — HORIZONTAL icon+text fix */
  .ajl-col-ajl,
  .ajl-col-pyr {
    flex-direction: row;      /* icon LEFT, text RIGHT on same line */
    align-items: center;      /* vertical centre-align */
    gap: 8px;                 /* gap between circle icon and text */
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 10px 16px;
  }
  .ajl-col-pyr { border-bottom: none; }

  /* Re-inject column label as a micro prefix ABOVE the flex row */
  .ajl-col-ajl::before,
  .ajl-col-pyr::before {
    display: block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 4px;
    /* Takes full width above the icon+text row */
    width: 100%;
    order: -1;                /* pushes label above flex children */
  }
  .ajl-col-ajl::before {
    content: '✓ Licensed Direct Selling';
    color: var(--green);
  }
  .ajl-col-pyr::before {
    content: '✕ Pyramid Scheme';
    color: #dc2626;
  }

  /* Wrap icon + text in a sub-row using flex on the cell itself */
  .ajl-col-ajl,
  .ajl-col-pyr {
    flex-wrap: wrap;          /* label wraps above, icon+text stay on one line */
  }
  /* Icon stays left, never wraps to its own line */
  .ajl-cell-check,
  .ajl-cell-cross { flex-shrink: 0; }

  .ajl-compare { padding: 56px 0; }
}


/* ── How Techbase Helps ── */
.ajl-helps {
  padding: 88px 0;
  background: var(--bg);
}
.ajl-helps-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.ajl-helps-head {
  margin-bottom: 48px;
  max-width: 640px;
}
.ajl-helps-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
  margin: 10px 0 12px;
}
.ajl-helps-head p {
  font-size: .95rem;
  color: var(--g2);
  line-height: 1.72;
}

/* ── 4-col grid ── */
.ajl-helps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ── Card: media-object ── */
.ajl-helps-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 13px;
  box-shadow: 0 2px 10px rgba(0,0,0,.03);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.ajl-helps-card:hover {
  border-color: var(--line2);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(232,57,29,.08);
}

/* ── Check icon badge ── */
.ajl-helps-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(22,163,74,.1);
  border: 1px solid rgba(22,163,74,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--green);
  margin-top: 1px;
  transition: background .2s, border-color .2s;
}
.ajl-helps-card:hover .ajl-helps-icon {
  background: rgba(22,163,74,.18);
  border-color: rgba(22,163,74,.4);
}

/* ── Text body ── */
.ajl-helps-body {
  flex: 1;
  min-width: 0;
}
.ajl-helps-body h3 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--g1);
  line-height: 1.35;
  margin-bottom: 5px;
}
.ajl-helps-body p {
  font-size: .8rem;
  color: var(--g2);
  line-height: 1.65;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ajl-helps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ajl-helps-grid { grid-template-columns: 1fr; }
  .ajl-helps { padding: 56px 0; }
}


/* ── AJL FAQ Accordion ── */
.ajl-faq-section {
  padding: 96px 0 104px;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
}
.ajl-faq-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.ajl-faq-header {
  text-align: center;
  margin-bottom: 52px;
}
.ajl-faq-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--g1);
  line-height: 1.15;
  margin: 0 0 12px;
}
.ajl-faq-subhead {
  font-size: .93rem;
  color: var(--g3);
  line-height: 1.65;
}

/* List */
.ajl-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Item */
.ajl-faq-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color .22s, box-shadow .22s;
}
.ajl-faq-item.ajl-faq-open {
  border-color: var(--line2);
  box-shadow: 0 6px 24px rgba(232,57,29,.06);
}

/* Trigger */
.ajl-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.ajl-faq-trigger:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: -2px;
  border-radius: 12px;
}

/* Question text */
.ajl-faq-q {
  font-size: .97rem;
  font-weight: 650;
  color: var(--g1);
  line-height: 1.4;
  letter-spacing: -0.01em;
  flex: 1;
}
.ajl-faq-item.ajl-faq-open .ajl-faq-q { color: var(--or); }

/* Chevron */
.ajl-faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s, transform .35s cubic-bezier(0.16,1,0.3,1);
  color: var(--g3);
}
.ajl-faq-icon svg {
  width: 14px;
  height: 14px;
  display: block;
}
.ajl-faq-item.ajl-faq-open .ajl-faq-icon {
  background: rgba(232,57,29,.08);
  border-color: var(--line2);
  color: var(--or);
  transform: rotate(180deg);
}

/* Panel */
.ajl-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(0.16,1,0.3,1);
}
.ajl-faq-panel:not([hidden]) {
  display: grid;
  grid-template-rows: 1fr;
}
.ajl-faq-panel[hidden] {
  display: grid !important;
  grid-template-rows: 0fr;
}

/* Answer */
.ajl-faq-answer {
  overflow: hidden;
  font-size: .88rem;
  color: var(--g2);
  line-height: 1.72;
  padding: 0 24px;
  transition: padding .35s cubic-bezier(0.16,1,0.3,1);
}
.ajl-faq-panel:not([hidden]) .ajl-faq-answer { padding: 0 24px 22px; }

/* Responsive */
@media (max-width: 580px) {
  .ajl-faq-section  { padding: 60px 0 68px; }
  .ajl-faq-trigger  { padding: 18px; }
  .ajl-faq-answer   { padding: 0 18px; }
  .ajl-faq-panel:not([hidden]) .ajl-faq-answer { padding: 0 18px 18px; }
  .ajl-faq-q        { font-size: .9rem; }
}


/* ══════════════════════════════════════════
   AJL LICENSE PAGE — BOTTOM CTA BANNER
   Scope: .ajl-cta-banner-* — no global conflicts
   ══════════════════════════════════════════ */

.ajl-cta-banner{padding:48px 0 64px}
.ajl-cta-banner-inner{max-width:1200px;margin:0 auto;padding:0 20px}

.ajl-cta-banner-card{
  position:relative;
  background:#111113;
  border-radius:var(--r3);
  padding:44px 48px;
  display:flex;
  align-items:center;
  gap:40px;
  overflow:hidden;
  /* Subtle red noise layer */
  box-shadow:0 24px 64px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Decorative ambient glow behind card */
.ajl-cta-banner-card::before{
  content:'';
  position:absolute;
  top:-60px;right:-60px;
  width:320px;height:320px;
  background:radial-gradient(circle,rgba(232,57,29,0.12) 0%,transparent 65%);
  pointer-events:none;
}

/* Left accent bar */
.ajl-cta-banner-bar{
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:var(--or);
  border-radius:var(--r3) 0 0 var(--r3);
}

/* Text block */
.ajl-cta-banner-text{flex:1;min-width:0}
.ajl-cta-banner-eyebrow{
  display:inline-block;
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--or);margin-bottom:10px;
}
.ajl-cta-banner-headline{
  font-size:clamp(1.15rem,2.2vw,1.55rem);
  font-weight:800;letter-spacing:-0.02em;line-height:1.25;
  color:#fff;margin-bottom:10px;
}
.ajl-cta-banner-body{
  font-size:.86rem;color:rgba(255,255,255,0.45);
  line-height:1.7;max-width:520px;
}

/* CTA block */
.ajl-cta-banner-actions{
  display:flex;flex-direction:column;
  gap:10px;flex-shrink:0;
}

/* Primary button */
.ajl-cta-banner-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--or);color:#fff;
  font-size:.88rem;font-weight:700;
  padding:13px 24px;
  border-radius:var(--r2);
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(232,57,29,0.30);
  transition:background .2s,transform .2s,box-shadow .2s;
}
.ajl-cta-banner-btn svg{width:14px;height:14px;flex-shrink:0;transition:transform .2s}
.ajl-cta-banner-btn:hover{background:var(--or2);transform:translateY(-2px);box-shadow:0 12px 32px rgba(232,57,29,0.40)}
.ajl-cta-banner-btn:hover svg{transform:translateX(3px)}

/* WhatsApp secondary link */
.ajl-cta-banner-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.72);
  font-size:.82rem;font-weight:600;
  padding:11px 20px;
  border-radius:var(--r2);
  white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s;
}
.ajl-cta-banner-wa svg{width:15px;height:15px;flex-shrink:0}
.ajl-cta-banner-wa:hover{background:rgba(255,255,255,0.10);color:#fff;border-color:rgba(255,255,255,0.2)}

/* ── Responsive ── */
@media(max-width:900px){
  .ajl-cta-banner-card{flex-direction:column;align-items:flex-start;padding:36px 32px 36px 36px;gap:28px}
  .ajl-cta-banner-actions{width:100%;flex-direction:row;flex-wrap:wrap}
  .ajl-cta-banner-btn,.ajl-cta-banner-wa{flex:1;min-width:180px}
}
@media(max-width:600px){
  .ajl-cta-banner{padding:32px 0 48px}
  .ajl-cta-banner-card{padding:28px 24px 28px 28px}
  .ajl-cta-banner-actions{flex-direction:column}
  .ajl-cta-banner-btn,.ajl-cta-banner-wa{width:100%}
}



/* ══════════════════════════════════════════
   CONTACT PAGE — SLOT 1: Dark Hero + Form
   ══════════════════════════════════════════ */
/* ── Contact Hero: dark card + form ── */
.cth-outer{padding:64px 0 0;background:var(--bg2)}
.cth-shell{max-width:1200px;margin:0 auto;padding:0 20px}
.cth-card{background:var(--g1);border-radius:24px;padding:56px 52px;position:relative;overflow:hidden;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:40px 40px;border:1px solid rgba(255,255,255,0.06)}
.cth-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(232,57,29,0.11) 0%,transparent 60%);pointer-events:none}
.cth-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start;position:relative;z-index:1}

/* Left column */
.cth-eyebrow{color:var(--or);margin-bottom:16px}
.cth-h2{font-size:clamp(1.8rem,2.2vw,2.7rem);font-weight:850;letter-spacing:-0.03em;color:#fff;line-height:1.18;margin-bottom:16px}
.cth-h2-accent{color:var(--or)}
.cth-lead{font-size:.9rem;color:rgba(255,255,255,0.52);line-height:1.78;margin-bottom:40px}

.cth-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 16px;margin-top:0}
.cth-info-block{display:flex;flex-direction:column;gap:6px}
.cth-info-block strong{font-size:.8rem;font-weight:700;color:#fff;line-height:1.2}
.cth-info-block span{font-size:.82rem;color:rgba(255,255,255,0.52);line-height:1.65}
.cth-info-block span,.cth-info-block a{font-size:.76rem}
.cth-email-link{word-break:break-all}
.cth-info-block a{color:rgba(255,255,255,0.52);transition:color .2s}
.cth-info-block a:hover{color:#fff}

/* Right: form card */
.cth-form-card{background:#fff;border-radius:20px;padding:36px;box-shadow:0 24px 64px rgba(0,0,0,0.22)}
.cth-form-title{font-size:1.1rem;font-weight:800;color:var(--g1);margin-bottom:4px;letter-spacing:-0.01em}
.cth-form-sub{font-size:.78rem;color:var(--g3);margin-bottom:22px}

/* Phone prefix field */
.cth-phone-wrap{display:flex;align-items:stretch;background:#f8f9fa;border:1px solid rgba(0,0,0,0.08);border-radius:8px;overflow:hidden;transition:all .3s ease}
.cth-phone-wrap:focus-within{border-color:var(--or);background:#fff;box-shadow:0 0 0 3px rgba(232,57,29,0.1)}
.cth-phone-prefix{display:flex;align-items:center;padding:0 11px;font-size:.82rem;font-weight:600;color:var(--g2);background:rgba(0,0,0,0.03);border-right:1px solid rgba(0,0,0,0.08);white-space:nowrap;flex-shrink:0}
.cth-phone-wrap input{flex:1;padding:10px 12px;background:transparent;border:none;font-size:.86rem;font-family:inherit;color:var(--g1);outline:none;-webkit-appearance:none;appearance:none;min-width:0}
.cth-phone-wrap input::placeholder{color:#ADADBD}

/* Submit override — pill-ish radius */
.cth-submit-btn{border-radius:10px;margin-top:4px;letter-spacing:.01em}

/* ── Response Promise card (left column) ── */
.cth-promise{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-left:4px solid var(--or);border-radius:14px;padding:18px 20px;margin:-20px 0 32px}
.cth-promise-title{font-size:.88rem;font-weight:700;color:#fff;margin-bottom:8px}
.cth-promise-body{font-size:.82rem;color:rgba(255,255,255,0.58);line-height:1.65}
.cth-promise-body strong{color:var(--or);font-weight:700}
.cth-promise-after{font-size:.78rem;color:rgba(255,255,255,0.38);margin-top:10px;line-height:1.5}

/* Responsive */
@media(max-width:960px){
  .cth-grid{grid-template-columns:1fr;gap:36px}
  .cth-card{padding:36px 28px}
}
@media(max-width:600px){
  .cth-outer{padding:48px 0 0}
  .cth-form-card{padding:26px 22px}
}
@media(max-width:600px){
  .cth-info-block strong{font-size:.75rem}
  .cth-info-block span,.cth-info-block a{font-size:.72rem}
}

/* ══════════════════════════════════════════
   CONTACT PAGE — SLOT 2: Maps with Overlays
   ══════════════════════════════════════════ */
.ctm-outer{padding:0 0 0;background:var(--bg2)}
.ctm-shell{max-width:1200px;margin:0 auto;padding:32px 20px 64px}
.ctm-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

.ctm-card{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 8px 32px rgba(0,0,0,0.07);height:450px}
.ctm-card iframe{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Glassmorphic badge */
.ctm-badge{position:absolute;top:20px;left:20px;z-index:10;background:rgba(255,255,255,0.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,0.06);border-radius:16px;padding:16px;display:flex;align-items:flex-start;gap:12px;max-width:260px;box-shadow:0 8px 28px rgba(0,0,0,0.1)}
.ctm-badge-pin{width:32px;height:32px;border-radius:9px;background:var(--or-dim);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--or)}
.ctm-badge-pin svg{width:14px;height:14px}
.ctm-badge-body{display:flex;flex-direction:column;gap:4px}
.ctm-badge-body strong{font-size:.82rem;font-weight:700;color:var(--g1);line-height:1.2}
.ctm-badge-body span{font-size:.72rem;color:var(--g2);line-height:1.5}
.ctm-badge-hours{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:.68rem;font-weight:600;color:var(--g3)}
.ctm-badge-hours svg{width:11px;height:11px;stroke:var(--or);flex-shrink:0}

@media(max-width:860px){
  .ctm-grid{grid-template-columns:1fr}
  .ctm-card{height:380px}
}
@media(max-width:480px){
  .ctm-card{height:320px}
  .ctm-badge{max-width:220px;padding:12px}
}

/* ══════════════════════════════════════════
   CONTACT PAGE — SLOT 3: Bottom CTA Banner
   ══════════════════════════════════════════ */
/* ── Contact CTA Banner — floating card ── */
.ct-cta-wrap{background:var(--bg2);padding:0 0 72px}
.ct-cta-shell{max-width:1100px;margin:0 auto;padding:0 20px}

.ct-cta-card{background:var(--g1);border-radius:24px;border:1px solid rgba(255,255,255,0.08);padding:64px 56px;position:relative;overflow:hidden;text-align:center;background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:40px 40px;box-shadow:0 32px 80px rgba(0,0,0,0.18)}
.ct-cta-glow2{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 80%,rgba(232,57,29,0.12) 0%,transparent 60%);pointer-events:none}

.ct-cta-content{position:relative;z-index:1;max-width:640px;margin:0 auto}
.ct-cta-eyebrow{color:var(--or);margin-bottom:18px}
.ct-cta-card h2{font-size:clamp(1.8rem,3.2vw,2.7rem);font-weight:850;letter-spacing:-0.03em;color:#fff;line-height:1.18;margin-bottom:14px}
.ct-cta-accent{color:var(--or)}
.ct-cta-card p{font-size:.95rem;color:rgba(255,255,255,0.5);line-height:1.72;margin-bottom:36px}

.ct-cta-wa-btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:#25D366;color:#fff;border-radius:100px;font-size:.92rem;font-weight:700;box-shadow:0 6px 28px rgba(37,211,102,0.35);transition:all .25s ease}
.ct-cta-wa-btn:hover{background:#1ebe5d;transform:translateY(-2px);box-shadow:0 10px 36px rgba(37,211,102,0.48)}
.ct-cta-wa-btn svg{flex-shrink:0}

@media(max-width:768px){
  .ct-cta-card{padding:44px 28px}
  .ct-cta-wrap{padding-bottom:52px}
}
@media(max-width:480px){
  .ct-cta-card{padding:36px 22px;border-radius:18px}
  .ct-cta-wa-btn{width:100%;justify-content:center}
}


/* ══════════════════════════════════════════
   MLM PLATFORM — BLOG & RESOURCES HUB
   Scope: .plat-* — no global conflicts
   ══════════════════════════════════════════ */

.plat{padding:80px 0;background:var(--bg2)}
.plat-inner{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.plat-head{text-align:center;margin-bottom:48px}
.plat-head h1{font-size:clamp(1.75rem,3.5vw,2.6rem);font-weight:800;letter-spacing:-0.03em;color:var(--g1);line-height:1.15;margin-bottom:14px}
.plat-sub{font-size:1rem;color:var(--g2);line-height:1.72;max-width:560px;margin:0 auto}

/* Tag pill — single uniform style */
.plat-tag{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:rgba(232,57,29,0.07);color:var(--or);border-radius:100px;padding:4px 11px;line-height:1.6;margin-bottom:14px}

/* Grid */
.plat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

/* Card — uniform across all 8 */
.plat-card{
  background:var(--bg);
  border-radius:var(--r2);
  border:1px solid var(--line);
  padding:28px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:var(--sh);
  transition:box-shadow .25s ease,transform .25s ease;
}
.plat-card:hover{box-shadow:0 18px 52px rgba(0,0,0,0.09);transform:translateY(-3px)}

.plat-card-top{display:flex;flex-direction:column;flex:1}

.plat-card-title{
  font-size:1rem;font-weight:700;line-height:1.4;
  letter-spacing:-0.01em;color:var(--g1);
  margin-bottom:10px;
  /* clamp to 3 lines to enforce uniform height */
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .2s;
}
.plat-card:hover .plat-card-title{color:var(--or)}

.plat-card-excerpt{
  font-size:.83rem;color:var(--g2);line-height:1.68;
  flex:1;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* Card footer */
.plat-card-foot{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;margin-top:18px;
  border-top:1px solid var(--line);
  flex-shrink:0;
}

.plat-rtime{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;font-weight:500;color:var(--g3);
}
.plat-rtime svg{width:12px;height:12px;flex-shrink:0}

.plat-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.76rem;font-weight:700;color:var(--or);
  transition:gap .2s,color .2s;
  white-space:nowrap;
}
.plat-link svg{width:13px;height:13px;flex-shrink:0;transition:transform .2s}
.plat-link:hover{color:var(--or2);gap:7px}
.plat-link:hover svg{transform:translateX(2px)}

/* Responsive */
@media(max-width:900px){
  .plat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .plat{padding:56px 0}
  .plat-grid{grid-template-columns:1fr}
  .plat-head{margin-bottom:36px}
}


/* ── FLOATING WHATSAPP (bottom-left) ── */
.floating-whatsapp{
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:999;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,0.45);
  transition:transform .2s ease, box-shadow .2s ease;
}
.floating-whatsapp:hover{
  transform:scale(1.1);
  box-shadow:0 6px 28px rgba(37,211,102,0.6);
}
/* pulse ring */
.floating-whatsapp::before{
  content:'';
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:2px solid rgba(37,211,102,0.5);
  animation:wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse{
  0%  {transform:scale(1);   opacity:.8}
  70% {transform:scale(1.28);opacity:0}
  100%{transform:scale(1.28);opacity:0}
}

/* ── ANNIVERSARY BADGE (bottom-right) ── */
.floating-badge-container{
  position:fixed;
  right:30px;
  bottom:100px;
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  transition:opacity .35s ease, transform .35s ease;
}
.floating-badge-container.hidden{
  opacity:0;
  transform:translateY(12px) scale(0.95);
  pointer-events:none;
}
.close-badge-btn{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(0,0,0,0.12);
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
  color:#4A4A5A;
  font-size:14px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  margin-bottom:-10px; /* overlaps top-right corner of badge */
  margin-right:-4px;
  z-index:1;
  position:relative;
  transition:background .2s, color .2s, transform .2s;
}
.close-badge-btn:hover{
  background:#E8391D;
  color:#fff;
  border-color:#E8391D;
  transform:rotate(90deg);
}
.anniversary-badge-img{
  max-width:130px;
  height:auto;
  display:block;
  border-radius:12px;
  transition:transform .2s ease;
}
.anniversary-badge-img:hover{transform:scale(1.04)}

@media(max-width:600px){
  .anniversary-badge-img{max-width:100px}
  .floating-whatsapp{left:16px;bottom:16px}
  .floating-badge-container{right:16px;bottom:16px}
}

/* ── Global: Scroll to Top ── */
.global-scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--g1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .2s ease;
}
.global-scroll-top svg {
  width: 18px;
  height: 18px;
  display: block;
}
.global-scroll-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.global-scroll-top:hover {
  background: var(--or);
  border-color: transparent;
  box-shadow: 0 6px 20px rgba(232,57,29,0.3);
  transform: translateY(-2px);
}
.global-scroll-top:focus-visible {
  outline: 2px solid var(--or);
  outline-offset: 3px;
}


/* ── FOOTER ── */
.ft{background:#111111;padding:64px 0 0}
.ft-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:48px}
/* replace .ft-brand-logo and .ft-brand-logo-box with: */
.ft-brand-logo{display:flex;align-items:center;margin-bottom:13px}
.ft-brand-logo img{height:50px;width:auto;display:block;filter:brightness(0) invert(1)}
.ft-brand-logo em{color:#E8391D;font-style:normal}
.ft-brand p{font-size:.8rem;color:rgba(255,255,255,0.4);line-height:1.78;max-width:230px;margin-bottom:18px}
.ft-social{flex-wrap:wrap}
.ft-social{display:flex;gap:8px}
.ft-social a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;transition:all .3s ease}
.ft-social a:hover{background:#E8391D;border-color:#E8391D}
.ft-social a svg{width:15px;height:15px;fill:rgba(255,255,255,0.55);transition:fill .3s ease}
.ft-social a:hover svg{fill:#fff}
.ft-col h4{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,0.3);margin-bottom:16px}
.ft-col ul{display:flex;flex-direction:column;gap:9px}
.ft-col ul li a{font-size:.82rem;color:rgba(255,255,255,0.52);transition:color .25s ease;line-height:1.3}
.ft-col ul li a:hover{color:#fff}
.ft-contact-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:13px}
.ft-contact-row svg{width:14px;height:14px;fill:none;stroke:#E8391D;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px}
.ft-contact-row span,.ft-contact-row a{font-size:.8rem;color:rgba(255,255,255,0.52);line-height:1.58;transition:color .25s ease}
.ft-contact-row a:hover{color:#fff}
.ft-bar{margin-top:48px;border-top:1px solid rgba(255,255,255,0.07);padding:18px 0}
.ft-bar-inner{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.ft-bar-inner p{font-size:.72rem;color:rgba(255,255,255,0.25)}
.ft-bar-inner p strong{color:rgba(255,255,255,0.42);font-weight:500}
.ft-bar-links{display:flex;gap:18px}
.ft-bar-links a{font-size:.72rem;color:rgba(255,255,255,0.32);transition:color .25s ease}
.ft-bar-links a:hover{color:rgba(255,255,255,0.72)}

/* ── PAGE SKELETON (inner pages) ── */
.page-hero{padding:72px 0 64px;background:var(--bg);border-bottom:1px solid var(--line);position:relative;overflow:hidden;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px}
.page-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,0) 0%,#ffffff 70%);pointer-events:none}
.page-hero-inner{max-width:1200px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
.page-hero-inner .eyebrow{margin-bottom:14px}
.page-hero-inner h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:800;letter-spacing:-0.03em;color:var(--g1);line-height:1.12;margin-bottom:16px}
.page-hero-inner>p{font-size:1rem;color:var(--g2);line-height:1.72;max-width:560px}
.page-body{max-width:1200px;margin:0 auto;padding:72px 20px}

/* ── RESPONSIVE ── */
@media(max-width:991px){
  .hero-inner{grid-template-columns:1fr;gap:48px;text-align:center}
  .hero-left p{margin:0 auto 28px}
  .trust-pills{justify-content:center}
  .hero-ctas{justify-content:center}
  .hero-right{order:2}
  .hero-left{order:1}
}
@media(max-width:900px){
  .suite-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr 1fr}
  .dfs-inner{grid-template-columns:1fr;gap:36px}
  .dfs{padding:60px 0}
  .ajl-card-wrap{grid-template-columns:1fr;gap:28px;padding:32px 24px 32px 28px}
  .ajl-cta-col{flex-direction:row;flex-wrap:wrap}
  .ft-inner{grid-template-columns:1fr 1fr;gap:32px}
  .ft-brand{grid-column:1/-1}
}
@media(max-width:768px){
  .nav-links,.nav-cta-wrap{display:none}
  .hamburger{display:flex}
  .hero{padding:40px 0;background-size:30px 30px}
  .hero-left h1{font-size:1.95rem;line-height:1.2}
  .hero-graphic{padding:16px}
  .ds-val{font-size:1rem}
  .suite{padding:56px 0}
  .sec-head{margin-bottom:32px}
  .testi{padding:56px 0}
  .ajl-wrap{padding:48px 0}
  .page-hero{padding:48px 0 40px}
}
@media (max-width: 768px) {
  .global-scroll-top {
    width: 40px;
    height: 40px;
    bottom: 20px;
    right: 20px;
  }

  .floating-badge-container {
    display: block;
    bottom: 75px;
    right: 20px;
    transform: scale(0.85);
    transform-origin: bottom right;
  }
}
@media(max-width:600px){
  .testi-grid{grid-template-columns:1fr}
  .dfs-row{grid-template-columns:1fr}
  .dfs-card{padding:22px}
}
@media(max-width:520px){
  .ft-inner{grid-template-columns:1fr}
  .ft-brand{grid-column:unset}
  .ft{padding:44px 0 0}
  .ft-bar-inner{flex-direction:column;align-items:flex-start}
}