/**
 * base.css – self-contained, token-based foundation that REPLACES the legacy
 * ThemeREX bundle (style.css / colors.css / shortcodes.css / responsive.css /
 * animation.css / woocommerce / min.css). Clean slate: nothing here depends on
 * the old theme. Load order: tokens.css -> base.css (-> per-page newlayout.css).
 *
 * Scope: global shell (reset, typography, container, grid, header, footer,
 * buttons, forms) + minimal compatibility shims for theme classes still present
 * in the markup (top_panel_*, menu_main_nav, sc_*, row/col-*). sc_-heavy page
 * bodies are rebuilt page-by-page (concept Step 5). Reference for the old look:
 * the P2P-web module.
 */

/* ============ Reset / base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-bg);color:var(--c-body);
  font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--c-blue);text-decoration:none}
a:hover{color:var(--c-blue-variant)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;color:var(--c-text);line-height:1.25;margin:0 0 .5em}
h1{font-size:2.2rem}h2{font-size:1.8rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1.1rem}h6{font-size:1rem}
p,li{margin:0 0 1em}
hr{border:0;border-top:1px solid var(--c-line);margin:1.2em 0}
:focus-visible{outline:2px solid var(--c-orange);outline-offset:2px}

/* ============ Layout shell ============ */
.body_wrap,.page_wrap{background:var(--c-bg)}
.central_container,.central_container_footer{max-width:var(--container-max);margin:0 auto;padding:0 18px}

/* ============ Grid (replaces bootstrap row/col-*) ============ */
.row{display:flex;flex-wrap:wrap;margin:0 -10px}
[class*="col-"]{padding:0 10px;width:100%}
.col-md-1{width:8.333%}.col-md-2{width:16.667%}.col-md-3{width:25%}.col-md-4{width:33.333%}
.col-md-5{width:41.667%}.col-md-6{width:50%}.col-md-7{width:58.333%}.col-md-8{width:66.667%}
.col-md-9{width:75%}.col-md-10{width:83.333%}.col-md-11{width:91.667%}.col-md-12{width:100%}
.pull-right{margin-left:auto}.pull-left{margin-right:auto}
@media(max-width:991px){
  [class*="col-md-"],[class*="col-lg-"],[class*="col-sm-"]{width:100%}
}

/* ============ Buttons (pills, brand) ============ */
.green,.white,.dark,.sc_button,
input[type=submit],input[type=reset],button.btn{
  display:inline-block;border:0;border-radius:var(--r-btn);
  padding:12px 24px;font-family:var(--font-button);font-size:16px;font-weight:600;
  line-height:1.4;text-align:center;text-decoration:none;cursor:pointer;
  transition:filter .15s ease,background-color .15s ease,color .15s ease;
}
.green,.sc_button{background:var(--c-green) !important;color:var(--c-btn-text) !important}
.green:hover,.sc_button:hover{filter:brightness(.95)}
.white{background:var(--c-card);border:1.5px solid var(--c-blue-variant);color:var(--c-btn-text)}
.white:hover{background:var(--c-blue-variant);color:#fff}
.dark{background:var(--c-input-grey);color:var(--c-text)}

/* ============ Forms ============ */
input,select,textarea{font-family:var(--font-body);font-size:1rem;color:var(--c-text)}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=search],input[type=date],select.form-control,textarea.form-control{
  width:100%;padding:10px 12px;border:1px solid var(--c-line);border-radius:8px;background:var(--c-card)}
input:focus,select:focus,textarea:focus{border-color:var(--c-blue);outline:none}

/* ============ Header (desktop) – styles existing theme classes cleanly ============ */
.top_panel_wrap{background:var(--c-card);border-bottom:1px solid var(--c-line);box-shadow:0 1px 3px rgba(18,40,66,.05)}
.top_panel_middle .content_wrap{max-width:none;margin:0;padding:0 28px;
  display:flex;align-items:center;gap:18px;min-height:64px}
.contact_logo .logo img{height:60px;width:auto;display:block}
/* text brand (replaces logo image) */
.brand-link{display:inline-flex;text-decoration:none}
.brand{display:inline-flex;flex-direction:column;line-height:1.02;font-family:var(--font-display);
  font-weight:800;font-size:26px;letter-spacing:.5px;color:var(--c-blue);text-transform:uppercase}
.brand > span{font-size:9.5px;font-weight:600;letter-spacing:.2px;color:var(--c-muted);
  text-transform:none;margin-top:2px}
.header_mobile .brand{font-size:20px}
.header_mobile .brand > span{font-size:7.5px;letter-spacing:.1px}
/* header = 3 columns: logo left, nav centered, sign-in right */
.contact_logo{flex:1 1 0}
.menu_main_wrap{margin:0;flex:0 0 auto}
.header_signin{flex:1 1 0;display:flex;justify-content:flex-end;align-items:center}
.header_signin a{display:inline-flex;align-items:center;color:var(--c-text);font-family:var(--font-button);font-weight:700;padding:10px 4px;transition:color .15s}
.header_signin a:hover{color:var(--c-blue)}
.menu_main_nav{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px;font-family:var(--font-body)}
.menu_main_nav > li{position:relative}
.menu_main_nav > li > a{display:flex;align-items:center;gap:7px;padding:10px 13px;border-radius:8px;
  color:var(--c-muted);font-weight:600;white-space:nowrap}
.menu_main_nav > li > a:hover{background:var(--c-chip);color:var(--c-blue-variant)}
.menu_main_nav > li.current-menu-item > a,
.menu_main_nav > li.current-menu-parent > a,
.menu_main_nav > li.current-menu-ancestor > a{color:var(--c-blue);border-bottom:2px solid var(--c-blue-variant);padding-bottom:8px}
.menu_main_nav i[class^="icon-"]{font-style:normal}

/* dropdown (sub-menu) via CSS hover – no theme JS needed */
.menu_main_nav .sub-menu{position:absolute;top:100%;left:0;min-width:210px;list-style:none;margin:0;padding:8px;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-chip);box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s;z-index:60}
.menu_main_nav > li:hover > .sub-menu{opacity:1;visibility:visible;transform:translateY(4px)}
.menu_main_nav .sub-menu > li{margin:0}
.menu_main_nav .sub-menu > li > a{display:block;padding:9px 12px;border-radius:8px;color:var(--c-text);font-weight:600}
.menu_main_nav .sub-menu > li > a:hover{background:var(--c-chip);color:var(--c-blue)}

/* login / logout — plain word, far right of the header (not a button) */
.menu_user_register_login{margin-left:auto}
.menu_user_register_login > a{display:inline-flex;align-items:center;background:transparent;
  color:var(--c-text);padding:10px 4px;font-family:var(--font-button);font-weight:700;transition:color .15s}
.menu_user_register_login > a:hover{background:transparent;color:var(--c-blue)}
.menu_user_register_login > a svg{display:none}

/* inline red badge markers -> brand danger */
.menu_main_nav span[onclick]{color:var(--c-danger) !important}

/* ============ Header (mobile) ============ */
.header_mobile{display:none;background:var(--c-card);border-bottom:1px solid var(--c-line);box-shadow:0 1px 3px rgba(18,40,66,.05)}
.header_mobile .content_wrap{display:flex;align-items:center;min-height:56px;padding:0 12px}
.header_mobile .logo img{height:34px;width:auto}
.header_mobile .menu_button,.header_mobile .menu_pushy_button{cursor:pointer;font-size:24px;color:var(--c-blue)}
.header_mobile .side_wrap{position:fixed;inset:0 0 0 auto;width:84%;max-width:340px;background:var(--c-card);
  box-shadow:var(--shadow);transform:translateX(100%);transition:transform .25s;z-index:70;overflow:auto;padding:18px}
.header_mobile .side_wrap.opened,.header_mobile .side_wrap.active{transform:none}
.header_mobile .side_wrap .menu_main_nav{flex-direction:column;align-items:stretch}
@media(max-width:991px){
  .top_panel_wrap{display:none}
  .header_mobile{display:block;position:sticky;top:0;z-index:50}
}

/* ============ Footer ============ */
.footer-links-flex{display:flex;flex-direction:row;gap:2rem}
.footer-links-flex aside{flex:1 1 0}
@media(max-width:800px){.footer-links-flex{flex-direction:column;gap:1rem}}
a.footer-color{color:#fff;font-size:16px}

/* ============ Generic theme shortcode shims (sc_*) – minimal, refined per page in Step 5 ============ */
.sc_section{padding:24px 0}
.sc_title{font-family:var(--font-display);font-weight:700;color:var(--c-text)}
.sc_table,.table-responsive{width:100%;overflow-x:auto;border-radius:var(--r-card)}
.table{width:100%;border-collapse:collapse;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-card);overflow:hidden}
.table th{background:var(--c-chip);font-family:var(--font-display);font-weight:600;font-size:13px;
  color:var(--c-text);padding:12px 14px;text-align:left}
.table td{padding:12px 14px;border-top:1px solid var(--c-line);color:var(--c-text)}
.table.table-hover tbody tr:hover{background:var(--c-chip)}

/* utility */
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.hide_small{}
@media(max-width:991px){.hide_small{display:none !important}}

/* ============ Header fixes (2026-06-02): single logo + sticky + mobile bottom bar ============ */
/* theme shipped two logos (logo_main + logo_fixed for the sticky state); show only one */
.contact_logo .logo .logo_fixed{display:none}
/* sticky desktop header on scroll */
.top_panel_wrap{position:sticky;top:0;z-index:50}

/* slim mobile Sign In pill (shown in the mobile header) */
.mobile_signin{display:none;align-items:center;margin-left:auto;
  background:transparent;color:var(--c-text);
  padding:7px 2px;font-family:var(--font-button);font-weight:700;white-space:nowrap;transition:color .15s}
.mobile_signin:hover{background:transparent;color:var(--c-blue)}
.mobile_signin svg{display:none}

/* mobile bottom tab bar (public, pre-login) – analogous to the post-login hybrid nav */
.mobile_bottombar{display:none}
@media(max-width:991px){
  /* header shrinks to logo + Sign In only: hide the old mini-nav + drawer */
  .header_mobile .menu_main_wrap,
  .header_mobile .side_wrap,
  .header_mobile .mask{display:none !important}
  .header_mobile .content_wrap{display:flex;align-items:center;gap:12px}
  .mobile_signin{display:inline-flex}

  body{padding-bottom:64px} /* room for the fixed bottom bar */
  .mobile_bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--c-card);border-top:1px solid var(--c-line);box-shadow:0 -3px 12px rgba(0,0,0,.12)}
  .mobile_bottombar a,.mobile_bottombar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 2px;color:var(--c-muted);font-size:11px;font-weight:600;text-align:center}
  .mobile_bottombar button{border:0;background:none;font-family:inherit;cursor:pointer}
  .mobile_bottombar a i[class^="icon-"]{font-size:20px;font-style:normal}
  .mobile_bottombar a.active,.mobile_bottombar a:hover,
  .mobile_bottombar button:hover,.mobile_bottombar button[aria-expanded="true"]{color:var(--c-blue)}
}

/* Info "More" bottom sheet (mobile) */
.alx-more-sheet[hidden]{display:none}
.alx-more-sheet{position:fixed;inset:0;z-index:80}
.alx-more-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);
  opacity:0;transition:opacity 180ms ease}
.alx-more-panel{position:absolute;left:0;right:0;bottom:0;
  background:var(--c-card);border-top:1px solid var(--c-line);
  border-radius:16px 16px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.3);
  padding:8px 0 calc(12px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform 220ms ease}
.alx-more-sheet.is-open .alx-more-backdrop{opacity:1}
.alx-more-sheet.is-open .alx-more-panel{transform:translateY(0)}
.alx-more-head{display:flex;align-items:center;justify-content:space-between;
  padding:10px 18px 6px;font-weight:700;color:var(--c-text);
  text-transform:uppercase;letter-spacing:.05em;font-size:13px}
.alx-more-close{border:0;background:none;font-size:26px;line-height:1;
  color:var(--c-muted);cursor:pointer;padding:0 6px}
.alx-more-links{display:flex;flex-direction:column}
.alx-more-links a{padding:14px 18px;color:var(--c-text);text-decoration:none;
  font-size:15px;border-top:1px solid var(--c-line)}
.alx-more-links a:active,.alx-more-links a:hover{background:var(--c-bg-muted);color:var(--c-blue)}

/* ============ Campaign listing (replaces theme .products / .product.column-1_3 grid) ============ */
/* container .central_container already provides side padding (edge spacing on mobile) */
.list_products{background:transparent}
.products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.products .product{width:auto;float:none;margin:0;display:flex}
.products .product .post_item_wrap{display:flex;flex-direction:column;width:100%;
  background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);
  box-shadow:var(--shadow);overflow:hidden;transition:box-shadow .18s ease,transform .18s ease}
.products .product .post_item_wrap:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.products .product .post_thumb img{width:100%;height:auto;display:block}
.products .product .post_content{padding:6px 4px 18px}
/* tablet: 2 per row */
@media(max-width:991px){ .products{grid-template-columns:repeat(2,1fr);gap:18px} }
/* mobile: 1 per row, with edge spacing from .central_container padding */
@media(max-width:767px){ .products{grid-template-columns:1fr;gap:18px} }

/* ============ Scroll animations (reveal.js) ============ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ Campaign risk scale (AAA..C position indicator) ============ */
.risk-scale{max-width:560px;width:100%}
.risk-scale-head{position:relative;height:26px}
.risk-scale-val{position:absolute;left:var(--risk-pos,50%);transform:translateX(-50%);
  background:var(--c-blue);color:#fff;font-family:var(--font-display);font-weight:700;font-size:12px;
  padding:3px 10px;border-radius:50px;white-space:nowrap;box-shadow:var(--shadow)}
.risk-scale-track{position:relative;height:14px;border-radius:50px;
  background:linear-gradient(90deg,var(--c-success) 0%,var(--c-warning) 55%,var(--c-danger) 100%)}
.risk-scale-pin{position:absolute;top:50%;left:var(--risk-pos,50%);transform:translate(-50%,-50%);
  width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--c-blue);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.risk-scale-ends{display:flex;justify-content:space-between;align-items:center;margin-top:6px;
  color:var(--c-muted);font-size:11px;font-weight:600}
.risk-scale-mid{color:var(--c-muted);font-weight:400}

/* ============ Footer social icons: side by side + larger ============ */
.sc_socials{display:inline-flex;align-items:center;justify-content:center;gap:16px;margin:8px 0}
.sc_socials_item{display:inline-flex;margin:0}
.sc_socials:not(.sc_socials_share) .social_icons{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
  transition:background .15s ease,transform .15s ease}
.sc_socials:not(.sc_socials_share) .social_icons:hover{background:rgba(255,255,255,.28);transform:translateY(-2px);color:#fff}
.sc_socials:not(.sc_socials_share) .social_icons [class^="icon-"]{font-size:24px;line-height:1}

/* ============ News/blog share icons: side by side + smaller ============ */
.sc_socials_share .share_caption > div{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
.sc_socials_share .sc_socials_item{display:inline-flex;align-items:center}
.sc_socials_share .social_icons{width:auto;height:auto;background:none;border-radius:0}
.sc_socials_share .social_icons:hover{background:none;transform:none}
.sc_socials_share .fb-share-button{width:auto}
.sc_socials_share img{width:34px;height:34px;object-fit:contain;display:block}

/* ============ Campaign funding bar ("status bar") – with pep ============ */
.fund-bar{position:relative;height:32px;border-radius:50px;overflow:hidden;
  background:var(--c-chip);box-shadow:inset 0 0 0 1px var(--c-line)}
.fund-bar-fill{position:absolute;top:0;left:0;bottom:0;border-radius:50px;
  background:linear-gradient(90deg,var(--c-green) 0%,var(--c-green-alt) 100%);
  box-shadow:0 0 14px rgba(1,223,13,.55);transition:width 1s ease}
.fund-bar-fill::after{content:"";position:absolute;inset:0;border-radius:50px;
  background-image:linear-gradient(45deg,rgba(255,255,255,.28) 25%,transparent 25%,transparent 50%,
    rgba(255,255,255,.28) 50%,rgba(255,255,255,.28) 75%,transparent 75%,transparent);
  background-size:30px 30px;animation:fund-stripes 1s linear infinite}
@keyframes fund-stripes{from{background-position:0 0}to{background-position:30px 0}}
.fund-bar .sc_skills_text{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
  height:32px;margin:0;color:#fff;font-family:var(--font-display);font-weight:700;font-size:13px;
  letter-spacing:.3px;text-shadow:0 1px 2px rgba(0,0,0,.4);padding:0 14px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.fund-bar-fill::after{animation:none}}

/* Fully funded (100%): solid bar, stripe animation off */
.fund-bar[data-done="true"] .fund-bar-fill::after{display:none}

/* ============ Login modal overlay ============ */
.alx-modal{position:fixed;inset:0;z-index:1000;display:none}
.alx-modal.is-open{display:block}
.alx-modal__overlay{position:absolute;inset:0;background:rgba(3,8,16,.72)}
.alx-modal__dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(420px,calc(100% - 32px));max-height:90vh;overflow:auto;background:var(--c-card);
  border-radius:16px;border:1px solid var(--c-line);box-shadow:0 24px 70px rgba(0,0,0,.6);padding:30px 26px}
.alx-modal__close{position:absolute;top:10px;right:14px;border:0;background:none;font-size:26px;
  line-height:1;color:var(--c-muted);cursor:pointer}
.alx-modal__close:hover{color:var(--c-text)}
.alx-modal__title{font-family:var(--font-display);font-weight:700;color:var(--c-blue);text-align:center;margin:0 0 18px;font-size:24px}
body.alx-modal-open{overflow:hidden}
.alx-modal.is-open .alx-modal__dialog{animation:alx-pop .2s ease}
@keyframes alx-pop{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@media(prefers-reduced-motion:reduce){.alx-modal.is-open .alx-modal__dialog{animation:none}}

/* ============ Login modal: clean floating labels (mask the input border) ============ */
.alx-modal .floating-label-group{position:relative;margin-bottom:1.4em}
.alx-modal .floating-label-group input{width:100%;padding:14px 12px;border:1px solid var(--c-line);
  border-radius:10px;background:var(--c-card);color:var(--c-text);font-size:16px;font-family:var(--font-body)}
.alx-modal .floating-label-group input:focus{border-color:var(--c-blue);outline:none}
.alx-modal .floating-label-group label{position:absolute;left:10px;top:14px;pointer-events:none;
  transition:.18s ease all;padding:0 6px;font-size:16px;color:var(--c-muted);background:transparent;line-height:1}
.alx-modal .floating-label-group:focus-within label,
.alx-modal .floating-label-group input:not(:placeholder-shown) ~ label{
  top:-8px;left:8px;font-size:12px;color:var(--c-blue);background:var(--c-card)}

/* ============ Post-login dashboard sub-nav (replaces left sidebar) ============ */
.portal-wrap{max-width:1100px;margin:0 auto;padding:0 18px}
.portal-subnav{display:block;margin:0 0 22px;border-bottom:1px solid var(--c-line);
  background:transparent;border-radius:0;box-shadow:none;padding:0}
.portal-grp-label{display:none}
.portal-grp-items{display:flex;flex-wrap:nowrap;gap:2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.portal-subnav a{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;
  padding:11px 14px;color:var(--c-muted);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer;
  border-bottom:3px solid transparent;border-radius:0;background:transparent;transition:color .15s ease,border-color .15s ease}
.portal-subnav a:hover{color:var(--c-blue);background:transparent}
.portal-subnav a.active{color:var(--c-blue);background:transparent;border-bottom-color:var(--c-green)}
.portal-subnav .badge{background:var(--c-danger);color:#fff;border-radius:50px;
  font-size:11px;font-weight:700;padding:1px 7px;margin-left:2px;line-height:1.5}
.portal-content{width:100%}

/* Mobile: dashboard sub-nav becomes a sticky horizontal-scroll tab strip
   directly under the sticky mobile header (which is min-height:56px).
   Desktop (>=992px) is unchanged. */
@media(max-width:991px){
  .portal-subnav{
    position:sticky; top:56px; z-index:40;
    margin:0 -18px 16px;            /* break out of portal-wrap's 18px padding -> edge to edge */
    padding:0 18px;
    background:var(--c-bg);
    border-bottom:1px solid var(--c-line);
  }
  .portal-grp-items{scrollbar-width:none}            /* hide scrollbar (Firefox) */
  .portal-grp-items::-webkit-scrollbar{display:none} /* hide scrollbar (Chrome/Safari) */
}

/* ============ Post-login Summary: KPI tiles + stat panels (alx-summary) ============ */
.alx-summary > h3.tooltip2{background:var(--c-card);border:1px solid var(--c-line);border-left:4px solid var(--c-blue);
  color:var(--c-text);border-radius:var(--r-card);padding:16px 18px;margin:0 0 16px;font-family:var(--font-display);
  font-size:14px;font-weight:600;display:flex;align-items:center;gap:12px;flex-wrap:wrap;box-shadow:var(--shadow)}
.alx-summary > h3.tooltip2 span{font-size:24px;font-weight:700;color:var(--c-blue);margin-left:auto}
.alx-kic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:var(--c-card-2);color:var(--c-blue);font-size:20px;font-style:normal;flex:none}
.alx-summary .content_with_border .white .alx-kic{grid-row:1;grid-column:1;margin-bottom:0}
.alx-summary .sc_title{font-family:var(--font-display);font-weight:700;color:var(--c-text);font-size:18px;margin:24px 0 12px;padding:0}
.alx-summary .content_with_border{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px;
  border:0 !important;margin:0 !important;padding:0 !important;background:transparent !important}
.alx-summary .content_with_border .white{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:8px;align-items:center;
  background:var(--c-card) !important;border:1px solid var(--c-line) !important;
  border-radius:var(--r-card) !important;box-shadow:var(--shadow) !important;padding:16px !important;width:auto !important;
  margin:0 !important;color:var(--c-text) !important;text-align:left !important;transition:box-shadow .15s ease}
.alx-summary .content_with_border .white:hover{filter:none !important;box-shadow:var(--shadow-hover) !important;color:var(--c-text) !important}
.alx-summary .content_with_border .white h4{grid-row:1;grid-column:2;margin:0 !important;font-size:13px;font-weight:600;color:var(--c-muted);
  font-family:var(--font-body);line-height:1.3}
.alx-summary .content_with_border .white h4 a{color:var(--c-muted);font-weight:600}
.alx-summary .content_with_border .white h4 a:hover{color:var(--c-blue)}
.alx-summary .content_with_border .white > span{grid-row:2;grid-column:1 / -1;font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--c-text)}
/* Hero KPI (Total Portfolio): own full-width card above the 4-tile grid */
.alx-summary .alx-hero-kpi{display:flex;align-items:center;gap:16px;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-card);box-shadow:var(--shadow);padding:18px 22px;margin:0 0 14px}
.alx-summary .alx-hero-kpi .alx-kic{width:54px;height:54px;font-size:27px;margin-bottom:0}
.alx-summary .alx-hero-kpi h4{margin:0 0 2px;font-size:14px;font-weight:600;color:var(--c-muted);font-family:var(--font-body)}
.alx-summary .alx-hero-kpi .alx-hero-val{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--c-blue);line-height:1.1}
.alx-summary .sc_table{overflow-x:auto}
.alx-summary table.table{width:100%;border-collapse:collapse;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.alx-summary table.table th{background:var(--c-chip);color:var(--c-text);font-family:var(--font-display);font-weight:600;
  font-size:13px;padding:11px 14px;text-align:right}
.alx-summary table.table th:first-child{text-align:left}
.alx-summary table.table td{padding:11px 14px;text-align:right;border-top:1px solid var(--c-line);color:var(--c-text)}
.alx-summary table.table tr th[style*="left"]{color:var(--c-muted);font-weight:600}

/* ============ Transaction / list cards (replace data tables) ============ */
/* list header (title + inline filters) + filter dropdowns */
.alx-list-head{margin:0 0 14px;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--c-text)}
.alx-filter-sel{width:80px;float:left;font-size:13px}
/* responsive schedule table: real table >=992px, card list below */
.alx-rtable th:nth-child(1){width:30%}
.alx-rtable th:nth-child(2),.alx-rtable th:nth-child(3),.alx-rtable th:nth-child(4){width:17%}
.alx-rtable th:nth-child(5){width:19%}
.alx-rtable td,.alx-rtable th{text-align:right}
.alx-rtable td:first-child,.alx-rtable th:first-child{text-align:left}
.alx-rtable td:last-child,.alx-rtable th:last-child{text-align:center}
@media(max-width:991px){
  .alx-rtable,.alx-rtable tbody,.alx-rtable tr,.alx-rtable td{display:block;width:auto}
  .alx-rtable tr:first-child{display:none}
  .alx-rtable tr{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);
    box-shadow:var(--shadow);padding:8px 14px;margin-bottom:10px}
  .alx-rtable td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    text-align:right !important;border:0;padding:6px 0}
  .alx-rtable td::before{content:attr(data-label);color:var(--c-muted);font-weight:600;text-align:left}
}
/* wide ledger variant (e.g. Overview 9-col matrix): no fixed 5-col widths */
.alx-rtable--auto th,.alx-rtable--auto td{width:auto}
.alx-rtotal th,.alx-rtotal td{background:var(--c-chip);font-weight:700;color:var(--c-text)}
@media(max-width:991px){.alx-rtotal{display:block}.alx-rtotal th,.alx-rtotal td{display:flex;justify-content:space-between;gap:12px;border:0;padding:6px 0;text-align:right}.alx-rtotal th::before,.alx-rtotal td::before{content:attr(data-label);color:var(--c-muted);font-weight:600}}
.alx-txn-list{display:flex;flex-direction:column;gap:10px}
.alx-txn{display:flex;align-items:center;gap:14px;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-card);padding:13px 16px;box-shadow:var(--shadow);transition:box-shadow .15s ease;
  cursor:pointer;touch-action:manipulation}
.alx-txn:hover{box-shadow:var(--shadow-hover);border-color:var(--c-blue)}
.alx-txn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.alx-txn-ic{width:44px;height:44px;border-radius:11px;background:var(--c-card-2);color:var(--c-blue);
  display:grid;place-items:center;flex:none;font-size:20px}
.alx-txn-ic i{font-style:normal}
.alx-txn-body{min-width:0;flex:1}
.alx-txn-title{font-weight:600;color:var(--c-text);line-height:1.3}
.alx-txn-title a{color:var(--c-text)}
.alx-txn-title a:hover{color:var(--c-blue)}
.alx-txn-meta{color:var(--c-muted);font-size:13px;margin-top:2px}
.alx-txn-status{margin-top:5px}
.alx-status{font-size:12px;font-weight:700;color:var(--c-muted)}
.alx-pill-action{display:inline-block;background:var(--c-green);color:var(--c-btn-text);border-radius:50px;
  padding:4px 13px;font-size:12px;font-weight:700;text-decoration:none}
.alx-pill-action:hover{filter:brightness(.95);color:var(--c-btn-text)}
.alx-txn-right{margin-left:auto;text-align:right;flex:none}
.alx-txn-amt{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--c-blue)}
@media(max-width:560px){.alx-txn{flex-wrap:wrap}}

/* balance info lines + in/out icons for wallet cards */
.alx-balance-line{background:var(--c-chip);border-radius:10px;padding:10px 14px;margin:0 0 12px;
  font-weight:600;color:var(--c-text);font-size:14px}
.alx-balance-line:last-of-type{margin:12px 0 0}
.alx-txn-ic.alx-in{background:var(--c-pos-bg);color:var(--c-success);font-size:22px;font-weight:700}
.alx-txn-ic.alx-out{background:var(--c-neg-bg);color:var(--c-danger);font-size:22px;font-weight:700}

/* ============ Post-login dashboard chrome ============ */
.alx-dash-bg{background:var(--c-bg-muted)}
.alx-dash-head{background:var(--c-bg-muted);text-align:center;padding:26px 18px 8px}
.alx-dash-title{font-family:var(--font-display);font-weight:700;color:var(--c-blue);font-size:30px;margin:0}
.alx-dash-bg .content_wrap{padding-bottom:28px}
/* subheadlines per concept: green accent bar */
.alx-summary .sc_title{position:relative;padding-left:15px !important}
.alx-summary .sc_title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:20px;background:var(--c-green);border-radius:3px}
/* Investment into P2P / ECF -> vertical stat list (block right after a section title) */
.alx-summary .sc_title + .content_with_border{display:flex !important;flex-direction:column;gap:0 !important;
  background:var(--c-card) !important;border:1px solid var(--c-line) !important;border-radius:var(--r-card) !important;
  box-shadow:var(--shadow) !important;padding:0 !important;overflow:hidden}
.alx-summary .sc_title + .content_with_border .white{display:flex !important;align-items:center;justify-content:space-between;
  gap:12px;border:0 !important;border-bottom:1px solid var(--c-line) !important;border-radius:0 !important;
  box-shadow:none !important;padding:13px 16px !important;background:transparent !important}
.alx-summary .sc_title + .content_with_border .white:last-child{border-bottom:0 !important}
.alx-summary .sc_title + .content_with_border .white:hover{box-shadow:none !important;background:var(--c-chip) !important}
.alx-summary .sc_title + .content_with_border .white h4{margin:0 !important;flex:1}
.alx-summary .sc_title + .content_with_border .white > span{font-size:16px !important;white-space:nowrap}
/* KYC / verification notices: framed card, not blank on bg */
.alx-notice{background:var(--c-card);border:1px solid var(--c-line);border-left:4px solid var(--c-orange);
  border-radius:var(--r-card);box-shadow:var(--shadow);padding:16px 18px;margin:0 0 16px}

/* sign-in as plain word, far right (high-specificity overrides) */
.menu_main_nav > li.menu_user_register_login > a{border:0;border-radius:0;background:transparent;color:var(--c-text);font-weight:700;padding:10px 4px}
.menu_main_nav > li.menu_user_register_login > a:hover{background:transparent;color:var(--c-blue)}

/* ============ Dashboard list pages: buttons, filter tabs, totals ============ */
/* action buttons (sc_button variants from the theme markup) */
.sc_button_style_filled2{background:var(--c-danger) !important;color:#fff !important}
.sc_button_style_filled2:hover{filter:brightness(.95)}
.sc_button_style_border{background:transparent !important;border:1.5px solid var(--c-blue-variant) !important;color:var(--c-blue) !important}
.sc_button_size_small{padding:7px 15px !important;font-size:13px !important}
.amountHighlight{font-weight:700;color:var(--c-text)}
/* in-page filter tabs (e.g. AcceptedInvestments: P2P Active / ECF / Finished / All) */
#sidebar.list-group{display:flex !important;flex-wrap:wrap;gap:6px;justify-content:center;
  background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 0 16px !important}
#sidebar .list-group-item2{display:inline-flex !important;margin:0 !important}
#sidebar .list-group-item2::before{content:none !important}
#sidebar .list-group-item2 .list-group-item{display:inline-block !important;padding:8px 16px !important;
  border-radius:50px !important;background:var(--c-chip) !important;color:var(--c-muted) !important;
  font-weight:600 !important;border:0 !important}
#sidebar .list-group-item2 .list-group-item:hover{background:var(--c-active) !important;color:var(--c-blue) !important}
/* total rows: tokenize the inline grey (#d0d0d0) so they fit + work in dark */
.table tr[style*="d0d0d0"]{background:var(--c-chip) !important}
.table tr[style*="d0d0d0"] td{color:var(--c-text) !important}

/* ============ .white used as a content cell (col-* white) -> card, not button ============ */
[class*="col-"].white{display:block;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:var(--r-card);box-shadow:var(--shadow);padding:14px 16px;margin:0 0 12px;
  color:var(--c-text);width:auto;text-align:left;font-family:var(--font-body)}
[class*="col-"].white:hover{filter:none;color:var(--c-text)}
[class*="col-"].white h4{margin:0 0 6px;color:var(--c-muted);font-size:13px;font-weight:600;font-family:var(--font-body)}
[class*="col-"].white > span{font-family:var(--font-display);font-weight:700;color:var(--c-text)}

/* Report (Finance Report) time/year filter links: readable, not heavy blue links */
.table td a.icon-search,.table th a.icon-search{color:var(--c-text);font-weight:600}
.table td a.icon-search:hover,.table th a.icon-search:hover{color:var(--c-blue)}

/* ============ All dashboard tables (incl. class-less <table>) ============ */
.portal-content table{width:100%;border-collapse:collapse;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:var(--r-card);overflow:hidden;margin:0 0 14px}
.portal-content table th{background:var(--c-chip);font-family:var(--font-display);font-weight:600;
  font-size:13px;color:var(--c-text);padding:11px 14px;text-align:left}
.portal-content table td{padding:11px 14px;border-top:1px solid var(--c-line);color:var(--c-text);vertical-align:middle}
.portal-content table tbody tr:hover{background:var(--c-chip)}
/* CMS / refer&earn content: frame text vs background */
.alx-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:18px 20px;margin:0 0 16px}
.alx-card .sc_title{position:relative;padding-left:14px}
.alx-card .sc_title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:18px;background:var(--c-green);border-radius:3px}

/* icons on Investment into P2P/ECF stat rows */
.alx-summary .sc_title + .content_with_border .white .alx-srow-ic{width:34px;height:34px;font-size:17px;
  margin:0 4px 0 0;border-radius:10px;flex:none}

/* ============ Short Report: period toggle (CSS-only, survives AJAX) ============ */
.sr-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sr-toggle{display:inline-flex;background:var(--c-chip);border-radius:50px;padding:4px;gap:4px;margin:0 0 14px}
.sr-toggle label{padding:8px 16px;border-radius:50px;color:var(--c-muted);font-weight:600;cursor:pointer;font-size:14px;white-space:nowrap}
#sr-last:checked ~ .sr-toggle label[for="sr-last"],
#sr-this:checked ~ .sr-toggle label[for="sr-this"],
#sr-year:checked ~ .sr-toggle label[for="sr-year"]{background:var(--c-blue);color:#fff}
/* show only the active period column (1=label,2=last,3=this,4=year) */
#sr-last:checked ~ .sc_table th:nth-child(3),#sr-last:checked ~ .sc_table td:nth-child(3),
#sr-last:checked ~ .sc_table th:nth-child(4),#sr-last:checked ~ .sc_table td:nth-child(4){display:none}
#sr-this:checked ~ .sc_table th:nth-child(2),#sr-this:checked ~ .sc_table td:nth-child(2),
#sr-this:checked ~ .sc_table th:nth-child(4),#sr-this:checked ~ .sc_table td:nth-child(4){display:none}
#sr-year:checked ~ .sc_table th:nth-child(2),#sr-year:checked ~ .sc_table td:nth-child(2),
#sr-year:checked ~ .sc_table th:nth-child(3),#sr-year:checked ~ .sc_table td:nth-child(3){display:none}

/* ============ Short Report list look (match mockup) ============ */
.sr-table tr:first-child{display:none}                 /* hide Time/period header row */
.sr-table th.sr-rowhead{text-align:left;color:var(--c-text) !important;font-weight:700 !important}
.alx-srep-ic{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--c-card-2);color:var(--c-blue);font-weight:700;font-size:15px;margin-right:10px;vertical-align:middle}
/* Report (Finance Report) time/year links: white/readable */
.portal-content table a.icon-search{color:var(--c-text)}
.portal-content table a.icon-search:hover{color:var(--c-blue)}
/* Total Portfolio tile accent */
/* Total Portfolio now rendered as .alx-hero-kpi (see above) */

/* col-lg / col-sm widths (Bootstrap classes used in markup; bootstrap.css not loaded) */
.col-lg-1{width:8.333%}.col-lg-2{width:16.667%}.col-lg-3{width:25%}.col-lg-4{width:33.333%}.col-lg-5{width:41.667%}.col-lg-6{width:50%}.col-lg-7{width:58.333%}.col-lg-8{width:66.667%}.col-lg-9{width:75%}.col-lg-10{width:83.333%}.col-lg-11{width:91.667%}.col-lg-12{width:100%}
.col-sm-1{width:8.333%}.col-sm-2{width:16.667%}.col-sm-3{width:25%}.col-sm-4{width:33.333%}.col-sm-5{width:41.667%}.col-sm-6{width:50%}.col-sm-7{width:58.333%}.col-sm-8{width:66.667%}.col-sm-9{width:75%}.col-sm-10{width:83.333%}.col-sm-11{width:91.667%}.col-sm-12{width:100%}

/* ============ Inline concept SVG icons inside icon boxes (match mockup) ============ */
.alx-kic > svg{width:22px;height:22px;display:block;stroke:currentColor;fill:none}
.alx-summary .sc_title + .content_with_border .white .alx-srow-ic > svg{width:18px;height:18px}
/* concept nav icons (Header top-nav + mobile bottom bars) */
.menu_main_nav a svg.alx-navic{width:17px;height:17px;stroke:currentColor;fill:none;flex:none;vertical-align:middle}
.mobile_bottombar a svg.alx-navic{width:22px;height:22px;stroke:currentColor;fill:none}
/* concept footer contact icons */
.alx-footic{stroke:currentColor;fill:none;vertical-align:middle}

/* ============ web2.js runtime: mobile drawer mask, submenu, scroll-to-top ============ */
.header_mobile .mask{position:fixed;inset:0;background:rgba(11,37,69,.45);opacity:0;visibility:hidden;
  transition:opacity .25s ease;z-index:49}
.header_mobile .mask.show{opacity:1;visibility:visible}
.header_mobile .side_wrap{z-index:55}
.header_mobile .side_wrap .close{padding:14px 16px;text-align:right;font-weight:600;color:var(--c-muted);cursor:pointer}
.header_mobile .side_wrap .close:hover{color:var(--c-blue)}
.header_mobile .side_wrap .sub-menu{display:none;list-style:none;margin:0;padding:0 0 6px 14px}
.header_mobile .side_wrap li.open > .sub-menu{display:block}
.scroll_to_top{position:fixed;right:18px;bottom:78px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--c-blue);color:#fff;font-size:18px;text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease;
  z-index:60;box-shadow:var(--shadow-hover)}
.scroll_to_top.show{opacity:1;visibility:visible;transform:none}

/* ============ Icon polish + header nav spacing (2026-06-02) ============ */
/* round caps/joins = Lucide look; fixes FAQ "?" dot rendering with no linecap */
.alx-navic,.alx-kic svg,.alx-footic{stroke-linecap:round;stroke-linejoin:round}
/* more breathing room in the top nav (icon<->label and item<->item) */
.menu_main_nav > li > a{gap:9px;padding:11px 16px}
.mobile_bottombar a{gap:4px}

/* concept icons on dashboard sub-tabs (portal-subnav) */
.portal-subnav a{display:inline-flex;align-items:center;gap:7px}
.portal-subnav a svg.alx-subic{width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* concept SVG inside transaction card icon circle */
.alx-txn-ic > svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ============ Transaction card: amount +/- color + status pill (2026-06-02) ============ */
.alx-txn-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
/* Mobile: the right column wraps onto its own row. Use border-box + padding (not
   margin) so width:100% + indent never overflows the card (was clipping the
   amount and status pill off the right edge on narrow screens). Placed after the
   rule above so it wins the cascade on mobile. */
@media(max-width:560px){
  .alx-txn-right{box-sizing:border-box;width:100%;margin-left:0;padding-left:58px;
    flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;text-align:left}
}
/* WCAG: 16px amount = normal text, needs >=4.5:1. Hardcoded #16a34a was 3.30:1 (fail).
   Use text-safe status tokens (token-based -> dark-mode ready). */
.alx-txn-amt{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}
.alx-txn-amt.pos{color:var(--c-success-text)}
.alx-txn-amt.neg{color:var(--c-danger-text)}
.alx-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 11px;border-radius:50px;
  font-size:12px;font-weight:600;text-transform:capitalize;background:var(--c-chip);color:var(--c-muted);white-space:nowrap}
.alx-pill i[class^="icon-"]{font-size:12px !important;margin:0 !important}
.alx-pill:has(.icon-ok){background:var(--c-pos-bg);color:var(--c-success-text)}
.alx-pill:has(.icon-cancel){background:var(--c-neg-bg);color:var(--c-danger-text)}
.alx-pill:has(.icon-hourglass),.alx-pill:has(.icon-spin3){background:rgba(180,120,10,.16);color:#b45309}

/* ============ Investment list: filter chips + total line ============ */
.alx-filterbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:0}
.alx-filterbar a{padding:7px 14px;border-radius:50px;background:var(--c-chip);color:var(--c-muted);
  font-weight:600;font-size:14px;cursor:pointer;text-decoration:none}
.alx-filterbar a:hover,.alx-filterbar a.active{background:var(--c-blue);color:#fff}
.alx-txn-total{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 16px;margin-top:8px;background:var(--c-chip);border-radius:12px;
  font-family:var(--font-display);font-weight:700;color:var(--c-text)}
.alx-txn-total .lbl{color:var(--c-muted);font-weight:600}

/* ============ Repayment per-campaign accordion ============ */
.alx-accordion{background:var(--c-card);border:1px solid var(--c-line);border-radius:12px;
  margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow)}
.alx-accordion-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;cursor:pointer;flex-wrap:wrap}
.alx-accordion-head:hover{background:var(--c-chip)}
.alx-accordion-title{font-family:var(--font-display);font-weight:700;color:var(--c-text)}
.alx-accordion-sums{display:flex;align-items:center;gap:16px;color:var(--c-text);font-weight:600;flex-wrap:wrap}
.alx-accordion-sums .lbl{color:var(--c-muted);font-weight:600;margin-right:4px}
.alx-accordion-sums .icon-down{color:var(--c-blue)}
.alx-accordion table{margin:0;border-radius:0}

/* ============ Account (Konto) page: side nav + summary stat rows ============ */
.alx-acct-nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;background:var(--c-card);border:1px solid var(--c-line);
  border-radius:14px;padding:8px;box-shadow:var(--shadow);margin-bottom:18px}
.alx-acct-nav a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:9px;white-space:nowrap;
  color:var(--c-text);font-weight:600;cursor:pointer;text-decoration:none}
.alx-acct-nav a:hover{background:var(--c-chip)}
.alx-acct-nav a.active{background:var(--c-blue);color:#fff}
.alx-acct-nav a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.alx-acct-nav .alx-check{margin-left:2px;color:var(--c-success-text);font-size:14px}
.alx-acct-nav a.active .alx-check{color:#fff}
.alx-acct-nav hr{border:0;border-top:1px solid var(--c-line);margin:6px 4px}
.alx-acct-stats{background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;margin-top:6px}
.alx-acct-stats .row2{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--c-line)}
.alx-acct-stats .row2:last-child{border-bottom:0}
.alx-acct-stats .lbl{color:var(--c-muted);font-weight:600}
.alx-acct-stats .val{font-weight:700;color:var(--c-text);text-align:right}

/* ============ Account verification: uploaded-doc gallery + upload dropzone ============ */
.alx-doc-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin:0 0 18px}
.alx-doc-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:12px;padding:12px;
  box-shadow:var(--shadow);text-align:center}
.alx-doc-card img{max-width:100%;height:auto;border-radius:8px;display:block;margin:0 auto}
.alx-upload-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;
  padding:18px;box-shadow:var(--shadow)}
.alx-upload-card .dropify-wrapper{border:2px dashed var(--c-line);border-radius:12px;background:var(--c-bg);
  padding:18px;transition:border-color .2s ease}
.alx-upload-card .dropify-wrapper:hover{border-color:var(--c-blue)}
.alx-upload-card .fileupload_preview{max-width:100%;height:auto;border-radius:8px}

/* ============ KYC 3-slot uploader + traffic-light (Ampel) ============ */
.alx-slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:8px}
.alx-upload-slot{background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;padding:14px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.alx-slot-head{display:flex;align-items:center;gap:8px}
.alx-ampel{width:13px;height:13px;border-radius:50%;flex:none}
.alx-ampel.red{background:var(--c-danger)}
.alx-ampel.yellow{background:#eab308}
.alx-ampel.green{background:var(--c-success)}
.alx-slot-label{font-weight:700;color:var(--c-text);font-size:14px}
.alx-slot-state{margin-left:auto;font-size:12px;font-weight:600;color:var(--c-muted)}
.alx-upload-slot.green .alx-slot-state{color:var(--c-success-text)}
.alx-upload-slot.yellow .alx-slot-state{color:#b45309}
.alx-upload-slot.red .alx-slot-state{color:var(--c-danger-text)}
/* The status class (green/yellow/red) collides with the global .green CTA
   (#01DF0D !important), which would paint the whole slot box solid green.
   Keep the slot a normal card; status is shown by the ampel dot + state text. */
.alx-upload-slot.green,
.alx-upload-slot.yellow,
.alx-upload-slot.red{background:var(--c-card) !important;color:var(--c-text) !important}
.alx-dropzone{position:relative;border:2px dashed var(--c-line);border-radius:12px;background:var(--c-bg);
  min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;cursor:pointer;padding:16px;transition:border-color .18s ease,background .18s ease}
.alx-dropzone:hover,.alx-dropzone:focus,.alx-dropzone.dragover{border-color:var(--c-blue);background:var(--c-chip);outline:none}
.alx-dz-preview{max-width:100%;max-height:130px;border-radius:8px;object-fit:contain}
.alx-dz-inner{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--c-muted)}
.alx-dz-text{font-size:13px;line-height:1.4}
.alx-dz-text b{color:var(--c-blue)}
.alx-dz-progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(0,0,0,.08);
  border-radius:0 0 10px 10px;display:none}
.alx-dz-progress.show{display:block}
.alx-dz-bar{height:100%;width:0;background:var(--c-blue);transition:width .15s ease}

/* ── "checking document… please wait" state (Gemini runs inside the request) ── */
.alx-dropzone.processing{border-style:solid;border-color:var(--c-blue);
  background:var(--c-chip);animation:alx-dz-pulse 1.3s ease-in-out infinite}
.alx-dropzone.processing .alx-dz-text{color:var(--c-text);font-weight:600}
.alx-dropzone.processing .alx-dz-inner>svg{display:none}
.alx-dropzone.processing .alx-dz-inner::before{content:"";width:26px;height:26px;border-radius:50%;
  border:3px solid var(--c-line);border-top-color:var(--c-blue);animation:alx-spin .8s linear infinite}
.alx-dropzone.processing .alx-dz-progress{display:block}
.alx-dropzone.processing .alx-dz-bar{width:100%;background:linear-gradient(90deg,var(--c-line),var(--c-blue),var(--c-line));
  background-size:200% 100%;animation:alx-dz-indet 1.1s linear infinite}
@keyframes alx-dz-pulse{0%,100%{box-shadow:0 0 0 0 rgba(47,109,246,.25)}50%{box-shadow:0 0 0 4px rgba(47,109,246,.12)}}
@keyframes alx-dz-indet{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* the required-doc slots are compact rows: show a small inline spinner + busy text */
.alx-fin-docslot.alx-dropzone.processing{border-style:solid}
.alx-fin-docslot.alx-dropzone.processing .alx-ampel{animation:alx-spin .8s linear infinite}

/* ============ Fund bar polish: non-selectable label + clear funded state ============ */
/* the % / RM label sits over the bar; selecting it looked like a static blue bar */
.fund-bar .sc_skills_text{user-select:none}
/* fully funded (100%+): solid success green, no stripe animation */
.fund-bar[data-done="true"] .fund-bar-fill{
  background:linear-gradient(90deg,var(--c-green-alt) 0%,var(--c-green) 100%);
  box-shadow:0 0 12px rgba(25,185,52,.5)}
/* subtle brand-tinted text selection (so selecting never mimics a blue UI bar) */
::selection{background:rgba(28,88,142,.22)}

/* KYC slot: multiple images per slot (uploads accumulate, never replace) */
.alx-slot-gallery{display:flex;flex-wrap:wrap;gap:8px}
.alx-slot-gallery:empty{display:none}
.alx-doc-thumb{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--c-line)}

/* ============ Account sub-pages in dashboard style (.alx-acct-content) ============ */
/* section headers -> green accent bar like the dashboard */
.alx-acct-content .sc_title{font-family:var(--font-display);font-weight:700;color:var(--c-text);
  font-size:18px;margin:0 0 12px;padding-left:14px !important;position:relative}
.alx-acct-content .sc_title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:18px;background:var(--c-green);border-radius:3px}
/* form section box -> card */
.alx-acct-content .row.content_with_border{background:var(--c-card) !important;
  border:1px solid var(--c-line) !important;border-radius:14px;box-shadow:var(--shadow);
  padding:18px !important;margin:0 0 18px !important}
.alx-acct-content .content_with_border h4{color:var(--c-muted);font-weight:600;font-size:13px;margin:0 0 6px}
.alx-acct-content .control-label{color:var(--c-muted);font-weight:600;font-size:13px}
.alx-acct-content .form-group{margin-bottom:14px}
/* clean tokenized inputs */
.alx-acct-content input[type="text"],.alx-acct-content input[type="email"],
.alx-acct-content input[type="password"],.alx-acct-content input[type="number"],
.alx-acct-content input[type="tel"],.alx-acct-content input[type="date"],
.alx-acct-content select,.alx-acct-content textarea,.alx-acct-content .sc_form_email{
  width:100%;background:var(--c-card-2);border:1px solid var(--c-line);border-radius:9px;
  padding:10px 12px;color:var(--c-text);font-family:var(--font-body);font-size:14px}
.alx-acct-content input:focus,.alx-acct-content select:focus,.alx-acct-content textarea:focus{
  outline:none;border-color:var(--c-blue);box-shadow:0 0 0 3px rgba(28,88,142,.14)}
/* alerts -> notice cards */
.alx-acct-content .alert{border-radius:10px;padding:12px 14px;border:1px solid var(--c-line);
  background:var(--c-chip);color:var(--c-text)}
.alx-acct-content .alert-warning{background:rgba(202,138,4,.12);border-color:rgba(202,138,4,.3);color:#b45309}
.alx-acct-content .alert-info{background:rgba(28,88,142,.10);border-color:rgba(28,88,142,.25);color:var(--c-blue)}
/* tables inside account -> themed like the dashboard */
.alx-acct-content table.table{width:100%;border-collapse:collapse;background:var(--c-card);
  border:1px solid var(--c-line);border-radius:12px;overflow:hidden}
.alx-acct-content table.table th{background:var(--c-chip);color:var(--c-text);
  font-family:var(--font-display);font-weight:600;padding:11px 14px;text-align:left}
.alx-acct-content table.table td{padding:11px 14px;border-top:1px solid var(--c-line);color:var(--c-text)}

/* Account forms: labels directly above the input (stacked, dashboard-style) */
.alx-acct-content .content_with_border [class*="col-"]{width:100% !important;max-width:100% !important;
  flex:0 0 100% !important;float:none !important}
.alx-acct-content .content_with_border h4,
.alx-acct-content .content_with_border .control-label{display:block;margin:12px 0 6px;
  color:var(--c-muted);font-weight:600;font-size:13px}
.alx-acct-content .content_with_border .form-group{margin-bottom:10px}

/* green "done" check inside the account portal-subnav tabs */
.portal-subnav .alx-check{color:var(--c-success-text);font-size:13px;margin-left:2px}
.portal-subnav a.active .alx-check{color:var(--c-blue)}

/* ============ Issuer campaign card (dense financials -> key/value grid) ============ */
.alx-campaign-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;
  box-shadow:var(--shadow);padding:16px;margin-bottom:14px}
.alx-cc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.alx-cc-title{font-family:var(--font-display);font-weight:700;color:var(--c-text);font-size:16px}
.alx-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px 16px}
.alx-kv .kv{display:flex;flex-direction:column;gap:2px}
.alx-kv .kv .k{color:var(--c-muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.alx-kv .kv .v{color:var(--c-text);font-weight:700;font-family:var(--font-display);font-size:14px}

/* ============ Get-financed wizard step indicator (.pearls) ============ */
.pearls{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 22px}
.pearls .pearl{flex:1 1 90px;text-align:center;min-width:90px;display:flex;flex-direction:column;align-items:center;gap:7px}
.pearls .pearl > a{display:flex;flex-direction:column;align-items:center;gap:7px;
  color:var(--c-muted);text-decoration:none;padding:6px 4px;font-weight:600}
.pearls .pearl .pearl-number{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:var(--c-chip);color:var(--c-muted);font-weight:700;font-family:var(--font-display);
  border:2px solid var(--c-line);transition:.15s}
.pearls .pearl .pearl-title{font-size:12px;line-height:1.3}
.pearls .pearl.active > a{color:var(--c-blue)}
.pearls .pearl.active .pearl-number{background:var(--c-blue);color:#fff;border-color:var(--c-blue)}
.pearls .pearl > a:hover .pearl-number{border-color:var(--c-blue)}

/* general document upload (campaign request): filename chips */
.alx-slot-files{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.alx-doc-file{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;
  background:var(--c-chip);color:var(--c-text);font-size:13px;font-weight:600;border:1px solid var(--c-line)}
.alx-doc-file i{color:var(--c-blue)}

/* ============ ui-ux-pro-max utilities (WP2-WP8, token-based) ============ */

/* WP3 Touch: 44px targets, 8px gap, no tap delay */
.alx-tap{min-width:44px;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;touch-action:manipulation}

/* WP3 clickable card affordance (excludes alx-txn, which already defines it) */
.alx-card--clickable,.alx-transfer{cursor:pointer;
  transition:box-shadow .2s,border-color .2s}
.alx-card--clickable:hover,.alx-transfer:hover{box-shadow:var(--shadow-hover);border-color:var(--c-blue)}

/* WP2 brand focus ring on key interactive controls (global orange :focus-visible stays) */
.alx-bottombar a:focus-visible,.alx-seg button:focus-visible,
.alx-card--clickable:focus-visible,.alx-transfer:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* WP4/WP8 amounts: tabular figures + two-tier status (small text vs large bold) */
.alx-amount{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;
  text-align:right;font-family:var(--font-display);font-weight:700}
.alx-amount.pos{color:var(--c-success-text)}
.alx-amount.neg{color:var(--c-danger-text)}
.alx-amount.lg{font-size:21px}
.alx-amount.lg.pos{color:var(--c-success)}
.alx-amount.lg.neg{color:var(--c-danger)}
/* color-only helpers for replacing inline style="color:green/red" (WP9/WP4) */
.alx-pos{color:var(--c-success-text)}
.alx-neg{color:var(--c-danger-text)}

/* WP8 readable prose width */
.alx-prose{max-width:70ch;line-height:1.65}

/* WP5 skeleton loader: reserve height + shimmer; reduced-motion safe */
.alx-skeleton{position:relative;overflow:hidden;border-radius:var(--r-chip);
  background:var(--skeleton-base);min-height:1em}
.alx-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--skeleton-shine),transparent);
  animation:alx-shimmer 1.3s infinite}
.alx-skeleton--tile{height:84px;margin-bottom:14px}
.alx-skeleton--row{height:56px;margin-bottom:10px}
@keyframes alx-shimmer{100%{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.alx-skeleton::after{animation:none}}

/* WP5 empty state */
.alx-empty{text-align:center;padding:40px 20px;color:var(--c-muted)}
.alx-empty__title{font-family:var(--font-display);font-weight:700;color:var(--c-text);
  font-size:18px;margin:0 0 6px}

/* WP7 hybrid bottom-tab bar (markup added later) -> uses z-index scale */
.alx-bottombar{position:sticky;bottom:0;z-index:var(--z-bottombar);display:flex;gap:8px;
  background:var(--c-card);border-top:1px solid var(--c-line);padding:4px;touch-action:manipulation}
.alx-bottombar a{flex:1;min-height:44px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:var(--c-muted);text-decoration:none;font-size:12px;font-weight:600}
.alx-bottombar a[aria-current="page"]{color:var(--c-blue)}
@media(min-width:992px){.alx-bottombar{display:none}}  /* desktop -> top-nav instead */

/* WP7 segmented control (in-page sub-tabs / filters) */
.alx-seg{display:inline-flex;gap:4px;background:var(--c-chip);border-radius:var(--r-chip);padding:4px;
  overflow-x:auto;max-width:100%}
.alx-seg button{min-height:36px;padding:6px 14px;border:0;background:none;border-radius:8px;
  color:var(--c-muted);font-weight:600;font-size:14px;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.alx-seg button[aria-selected="true"]{background:var(--c-card);color:var(--c-blue);box-shadow:var(--shadow)}

/* account messages – native disclosure cards (replaces click-to-expand table + actionScript) */
.alx-msg{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden}
.alx-msg>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 16px;min-height:44px;touch-action:manipulation}
.alx-msg>summary::-webkit-details-marker{display:none}
.alx-msg>summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.alx-msg:hover{box-shadow:var(--shadow-hover);border-color:var(--c-blue)}
.alx-msg-ic{width:42px;height:42px;border-radius:50%;background:var(--c-card-2);color:var(--c-blue);display:grid;place-items:center;flex:none}
.alx-msg-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.alx-msg-subj{font-weight:600;color:var(--c-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alx-msg-date{color:var(--c-muted);font-size:13px}
.alx-msg.headline .alx-msg-subj{font-weight:400;color:var(--c-muted)}
.alx-msg-chev{flex:none;color:var(--c-muted);transition:transform .2s}
.alx-msg[open] .alx-msg-chev{transform:rotate(180deg)}
.alx-msg__body{padding:4px 16px 16px;border-top:1px solid var(--c-line);color:var(--c-text)}

/* referral inline sub-nav (Explain / Referrals / Earn) – replaces inline-styled list-group */
.alx-refnav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 16px}
.alx-refnav a{display:inline-flex;align-items:center;min-height:40px;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--c-chip);color:var(--c-blue);font-weight:600}
.alx-refnav a:hover{background:var(--c-active)}
.alx-invite{text-align:center;color:var(--c-muted)}
.alx-invite a{font-weight:700;color:var(--c-blue);word-break:break-all}

/* small utilities */
.alx-clear{clear:both}
.alx-notice-row{padding:6px 0}
.alx-mt{margin-top:10px}
.alx-mb0{margin-bottom:0}
.alx-center{text-align:center}

/* account KYC form (BasicInformation/KycInformation) – inline-style replacements */
.alx-mt12{margin-top:12px}
.alx-radio-label{font-weight:700;margin-left:10px}
.alx-legal{padding:0 20px;color:var(--c-muted);font-size:13.5px}
.alx-legal ul{margin:6px 0 0 18px}
.alx-row0{margin:0}

/* repayment issuer cards – progress + coloured upcoming/repaid (concept) */
.alx-prog{height:6px;border-radius:5px;background:var(--c-line);overflow:hidden;margin-top:8px;max-width:420px}
.alx-prog>i{display:block;height:100%;background:var(--c-success);border-radius:5px}
.alx-up{color:var(--c-blue);font-weight:600}
.alx-re{color:var(--c-success-text);font-weight:600}

/* repayment KPI header (matches geld-mockup) */
.alx-rpkpi{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px;margin:0 0 18px}
@media(max-width:760px){.alx-rpkpi{grid-template-columns:1fr}}
.alx-rpkpi .k{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:16px 18px}
.alx-rpkpi .k.hero{background:linear-gradient(135deg,var(--c-blue),var(--c-blue-variant));color:#fff}
.alx-rpkpi .lbl{font-size:12.5px;font-weight:600;color:var(--c-muted)}
.alx-rpkpi .k.hero .lbl{color:rgba(255,255,255,.85)}
.alx-rpkpi .val{font-family:var(--font-display);font-weight:700;font-size:20px;margin-top:3px}
.alx-rpkpi .k.hero .val{font-size:28px}
.alx-rpkpi .val small{font-size:14px;opacity:.8;margin-right:3px}
.alx-danger-text{color:var(--c-danger-text)}

/* overdue issuer card (repayment) */
.alx-txn-late{border-left:4px solid var(--c-danger)}
.alx-txn-late .alx-prog>i{background:var(--c-danger)}
.alx-pill-bad{background:var(--c-neg-bg);color:var(--c-danger-text)}

/* split filter bar (left = Gruppieren, right = Status) */
.alx-filterbar-split{justify-content:space-between;align-items:center}
.alx-fb-grp{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.alx-fb-label{font-weight:700;color:var(--c-muted);font-size:13px;margin-right:2px}

/* ===== Top-up / Payout (money forms) – concept elements ===== */
.alx-bal-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--c-blue),var(--c-blue-variant));color:#fff;border-radius:16px;padding:22px 24px;box-shadow:var(--shadow);margin-bottom:18px}
:root[data-theme="dark"] .alx-bal-hero{background:linear-gradient(135deg,#1d3a5a,#16263a);box-shadow:0 0 0 1px var(--c-line)}
.alx-bal-hero .lbl{font-size:13.5px;font-weight:600;opacity:.85;display:flex;align-items:center;gap:7px}
.alx-bal-hero .lbl svg{width:15px;height:15px}
.alx-bal-hero .val{font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1.1;margin-top:6px}
.alx-bal-hero .val small{font-size:18px;opacity:.8;margin-right:6px}
.alx-bal-hero .secure{position:absolute;right:18px;top:18px;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;background:rgba(255,255,255,.15);padding:5px 10px;border-radius:50px}
.alx-bal-hero .secure svg{width:13px;height:13px}
.alx-bal-hero .hrow{display:flex;gap:26px;margin-top:16px;flex-wrap:wrap}
.alx-bal-hero .hrow .k{font-size:12.5px;opacity:.8;font-weight:600}
.alx-bal-hero .hrow .v{font-family:var(--font-display);font-weight:600;font-size:16px;margin-top:1px}
.alx-amt-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.alx-amt-chips button{font-weight:600;font-size:14px;color:var(--c-blue);background:var(--c-chip);border:1px solid transparent;border-radius:50px;padding:9px 15px;min-height:40px;cursor:pointer;touch-action:manipulation}
.alx-amt-chips button:hover{background:var(--c-active)}
.alx-amt-chips button.max{color:var(--c-success-text);background:var(--c-pos-bg)}
.alx-secure{display:inline-flex;align-items:center;gap:7px;color:var(--c-muted);font-size:12.5px;margin-top:12px}
.alx-secure svg{width:14px;height:14px;color:var(--c-success-text)}
.alx-btn-full{width:100%}
@keyframes alx-spin{to{transform:rotate(360deg)}}
.sc_button.is-loading{opacity:.75;pointer-events:none}
.sc_button.is-loading::after{content:"";display:inline-block;width:14px;height:14px;margin-left:8px;border:2px solid rgba(0,0,0,.3);border-top-color:currentColor;border-radius:50%;animation:alx-spin .7s linear infinite;vertical-align:middle}
.alx-rpkpi--2{grid-template-columns:1.3fr 1fr}@media(max-width:760px){.alx-rpkpi--2{grid-template-columns:1fr}}
.alx-twocol{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:991px){.alx-twocol{grid-template-columns:1fr}}
.alx-walletfilter a{cursor:pointer}

/* ===== Password change – strength meter, match, show/hide ===== */
.alx-pwform{max-width:560px}
.alx-pwform .alx-field{margin-bottom:16px}
.alx-pwform .alx-field > h4,.alx-pwform .alx-field > label{display:block;font-weight:600;font-size:13.5px;margin:0 0 6px}
.alx-pwfield{position:relative}
.alx-pwfield input{width:100%;padding-right:42px}
.alx-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:none;color:var(--c-muted);cursor:pointer;font-size:16px;line-height:1}
.alx-pwbar{height:7px;border-radius:5px;background:var(--c-line);overflow:hidden;margin-top:8px}
.alx-pwbar>i{display:block;height:100%;width:0;background:var(--c-danger);transition:width .25s,background .25s}
.alx-pwlist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.alx-pwlist li{font-size:12.5px;color:var(--c-muted);display:flex;align-items:center;gap:7px}
.alx-pwlist li::before{content:"\25CB";font-weight:700}
.alx-pwlist li.ok{color:var(--c-success-text)}
.alx-pwlist li.ok::before{content:"\2713"}
.alx-pwmsg-err{color:var(--c-danger-text);font-size:12.5px;font-weight:600;margin-top:6px;display:none}
.alx-pwmsg-ok{color:var(--c-success-text);font-size:12.5px;font-weight:600;margin-top:6px;display:none}

.alx-pwsubmit{margin-top:16px}

.alx-hidden{display:none !important}

.alx-alert-lg{font-size:1.15rem}

/* tame the long legal text blocks (Investor-Typ / PEP) – scroll instead of wall */
.alx-legal{max-height:170px;overflow:auto;border-left:2px solid var(--c-line);margin:4px 0 8px;border-radius:0 6px 6px 0}

.alx-cbx{margin-right:20px}

/* account misc utilities */
.alx-fs-sm{font-size:.8rem}
.alx-mt-lg{margin-top:var(--sp-lg)}
.alx-mt22{margin-top:22px}
.alx-pad-popup{padding:.5em 2em}
.alx-vbar-label{font-weight:bold;margin-right:10px}

/* BasicInformation address as ID-document (full passport/ID look, concept web2_account_mockup) */
.iddoc{position:relative;border:1px solid var(--c-line);border-radius:var(--r-card);background:radial-gradient(circle at 18% 0,rgba(28,88,142,.06),transparent 42%),radial-gradient(circle at 100% 100%,rgba(1,223,13,.05),transparent 38%),var(--c-card);box-shadow:var(--shadow);overflow:hidden;margin-bottom:18px}
.iddoc::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(28,88,142,.04) 0 2px,transparent 2px 9px);pointer-events:none}
.iddoc-band{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;background:linear-gradient(135deg,var(--c-blue),var(--c-blue-variant));color:#fff;padding:11px 18px;font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:1px}
:root[data-theme="dark"] .iddoc-band{background:linear-gradient(135deg,#1d3a5a,#16263a)}
.iddoc-band .no{display:flex;align-items:center;gap:9px;font-weight:600;opacity:.92;letter-spacing:.5px}
.iddoc-band .holo{width:26px;height:26px;border-radius:50%;background:conic-gradient(from 0deg,#ff5f6d,#ffc371,#24fe41,#1fa2ff,#a18cd1,#ff5f6d);opacity:.6}
.iddoc-body{position:relative;display:grid;grid-template-columns:130px 1fr;gap:22px;padding:20px 18px}
@media(max-width:560px){.iddoc-body{grid-template-columns:1fr;justify-items:center}}
.iddoc-photo{display:flex;flex-direction:column;align-items:center;gap:10px}
.iddoc-photo .photo{width:108px;height:130px;border-radius:8px;border:2px dashed var(--c-line);background:var(--c-card-2);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:36px;color:var(--c-blue);position:relative}
.iddoc-photo .photo svg{width:46px;height:46px;opacity:.85}
.iddoc-photo .photo::after{content:"FOTO";position:absolute;bottom:7px;font-size:9px;letter-spacing:2px;color:var(--c-muted);font-weight:700}
.photo-up{font-size:12px;font-weight:700;color:var(--c-blue);background:var(--c-chip);border:0;border-radius:var(--r-pill);min-height:36px;padding:0 12px;cursor:pointer}
.photo-up:hover{background:var(--c-active)}
.flag{font-size:12.5px;font-weight:700;background:var(--c-chip);border-radius:var(--r-pill);padding:5px 11px;color:var(--c-text)}
.iddoc-fields{min-width:0;width:100%}
.iddoc-fields h4{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--c-muted);margin:0 0 1px}
.docrow{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:12px}
.docrow.one{grid-template-columns:1fr}
@media(max-width:560px){.docrow{grid-template-columns:1fr}}
.docf{display:flex;flex-direction:column;min-width:0}
.docf label,.docf h4{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--c-muted);margin:0 0 1px}
.iddoc-fields input[type=text],.iddoc-fields input[type=date],.iddoc-fields input[type=tel],.iddoc-fields select,.docin{font-family:'Courier New',ui-monospace,monospace;font-weight:700;font-size:15px;letter-spacing:.5px;color:var(--c-text);background:transparent;border:0;border-bottom:1.5px dotted var(--c-line);border-radius:0;padding:6px 2px;min-height:38px;width:100%}
.iddoc-fields input:focus,.iddoc-fields select:focus,.docin:focus{outline:none;border-bottom:1.5px solid var(--c-blue);background:transparent}
.iddoc-fields select,select.docin{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%236b7a89" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 2px center;padding-right:20px}
.docsep{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c-blue);margin:8px 0 12px}
.docsep::after{content:"";flex:1;height:1px;background:var(--c-line)}
.mrz{position:relative;font-family:'Courier New',ui-monospace,monospace;font-weight:700;font-size:13px;letter-spacing:2.5px;line-height:1.75;white-space:pre;overflow-x:auto;color:var(--c-text);background:var(--c-chip);border-top:1px dashed var(--c-line);padding:12px 18px}
.iddoc-foot{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--c-line);flex-wrap:wrap}
.iddoc-foot .fnote{font-size:12px;color:var(--c-muted);display:flex;align-items:center;gap:7px;flex:1;min-width:180px}
.iddoc-foot .fnote svg{width:14px;height:14px;color:var(--c-success-text);flex:none}

/* account overview header + quick access (concept: web2_account_mockup) */
.alx-acc-head{display:flex;align-items:center;gap:16px;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px;flex-wrap:wrap}
.alx-acc-head .alx-avatar{width:54px;height:54px;border-radius:50%;background:var(--c-blue);color:#fff;display:grid;place-items:center;flex:none}
.alx-acc-head .alx-avatar svg{width:28px;height:28px}
.alx-acc-head .nm{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--c-text)}
.alx-acc-head .em{color:var(--c-muted);font-size:13.5px}
.alx-acc-steps{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.alx-step{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:6px 11px;border-radius:50px;background:var(--c-pos-bg);color:var(--c-success-text)}
.alx-step.todo{background:var(--c-chip);color:var(--c-muted)}
.alx-step svg{width:13px;height:13px}
.alx-quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px}
.alx-qtile{display:flex;align-items:center;gap:10px;background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:14px;font-weight:600;cursor:pointer;text-decoration:none;color:var(--c-text);transition:box-shadow .15s,transform .15s}
.alx-qtile:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px);color:var(--c-blue)}
.alx-qtile .qic{width:38px;height:38px;border-radius:10px;background:var(--c-card-2);color:var(--c-blue);display:grid;place-items:center;flex:none}
.alx-qtile .qic svg{width:18px;height:18px}

/* collapsible account section (Regulatorischer Status) */
.alx-collapse{margin:0}
.alx-collapse>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px}
.alx-collapse>summary::-webkit-details-marker{display:none}
.alx-collapse>summary::after{content:"\25BE";color:var(--c-muted);font-size:.7em}
.alx-collapse:not([open])>summary::after{content:"\25B8"}

/* newsletter: checkboxes as toggle switches (concept) */
input.alx-cbx{appearance:none;-webkit-appearance:none;width:44px;height:24px;border-radius:50px;background:var(--c-line);position:relative;cursor:pointer;vertical-align:middle;flex:none;border:0;transition:background .2s;margin-right:12px}
input.alx-cbx::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
input.alx-cbx:checked{background:var(--c-success)}
input.alx-cbx:checked::after{transform:translateX(20px)}

/* --- modal overlay for account popups (investment/ecf notice) 2026-06-03 --- */
.popup_wrap_bg{position:fixed;inset:0;background:rgba(11,37,69,.55);z-index:10000;backdrop-filter:blur(2px)}
.popup_wrap.popup_login{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10001;width:min(680px,92vw);max-height:86vh;overflow:auto;background:var(--c-bg);color:var(--c-text);border:1px solid var(--c-line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.popup_wrap.popup_login .form_wrap{padding:24px}
.popup_wrap.popup_login .form_left{width:100%}
.popup_wrap.popup_login .validateCheckBox{margin-top:18px}

/* ═══════════════════════════════════════════════════════════════════════
   ALX-FOOTER — redesigned footer (2026-06-05)
   Always dark: uses hardcoded dark values so footer is dark in both
   light and dark themes. Token vars used where they still apply.
   ═══════════════════════════════════════════════════════════════════════ */
.alx-footer{
  background:#0b1929;
  border-top:2px solid #1a3352;
  padding:40px 0 28px;
  font-family:var(--font-body,'Source Sans Pro',sans-serif);
  color:#9fb2c6;
}
.alx-footer .alx-footer-wrap{
  max-width:var(--container-max,1200px);
  margin:0 auto;
  padding:0 18px;
}

/* Footer columns — Explore / Resources / SME Financing / Legal / Company & Contact */
.alx-footer-cols{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:40px;
  align-items:start;
  padding-bottom:28px;
  border-bottom:1px solid #1a3352;
}

/* Legal entity band — sits between the two divider lines */
.alx-footer-entity{
  padding:20px 0;
  border-bottom:1px solid #1a3352;
}
.alx-footer-entity-main{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 14px;
}
.alx-footer-entity .alx-footer-address{margin-top:8px}
.alx-footer-entity .alx-footer-licence{margin-top:6px}
/* footer language selector (moved out of the header) */
.alx-footer-lang{display:flex;align-items:center;gap:14px;padding:16px 0 4px;color:#7f93aa;font-size:13px}
.alx-footer-lang>svg{width:16px;height:16px;flex:none;opacity:.8}
.alx-footer-lang a{color:#7f93aa;text-decoration:none;font-weight:600;transition:color .15s}
.alx-footer-lang a:hover{color:#fff}
.alx-footer-lang a.alx-lang-active{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.alx-footer-col{text-align:left;min-width:0}
.alx-footer-col ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:9px;
}
.alx-footer-col li{margin:0}
.alx-footer-col ul a{
  color:#9fb2c6;font-size:13px;text-decoration:none;transition:color 150ms;
}
.alx-footer-col ul a:hover{color:#4a9fe0}
.alx-footer-col-head{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6f829a;
  margin:0 0 12px;
}
.alx-footer-company{
  font-size:13px;
  font-weight:600;
  color:#e7eef6;
}
.alx-footer-reg{
  font-size:11px;
  color:#6f829a;
  margin-left:4px;
}
.alx-footer-address{
  font-size:13px;
  line-height:1.65;
  color:#9fb2c6;
  margin-top:6px;
  font-style:normal;
}

/* Regulation trust badge */
.alx-footer-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#13243a;
  border:1px solid #2d5a3f;
  border-radius:6px;
  padding:5px 10px;
  font-size:11px;
  font-weight:600;
  color:#7fd6a3;
}
.alx-footer-badge svg{width:14px;height:14px;flex-shrink:0}

/* Baseline: copyright + social */
.alx-footer-baseline{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.alx-footer-copy{
  font-size:12px;
  color:#6f829a;
}
.alx-footer-social{
  display:flex;
  gap:8px;
}
.alx-footer-social a{
  width:34px;height:34px;
  border-radius:50%;
  background:#13243a;
  border:1px solid #21405f;
  display:flex;align-items:center;justify-content:center;
  transition:border-color 150ms,background 150ms;
  text-decoration:none;
  color:#9fb2c6;
}
.alx-footer-social a:hover{border-color:#4a9fe0;background:#18304a;color:#4a9fe0}
.alx-footer-social svg{width:15px;height:15px}
.alx-footer-nl-label{
  font-size:12px;
  font-weight:600;
  color:#e7eef6;
  margin:14px 0 8px;
}
.alx-footer-nl-form{
  display:flex;
  max-width:300px;
  margin:0 auto;
}
.alx-footer-nl-form input[type="email"]{
  flex:1;
  padding:8px 12px;
  border:1px solid #21405f;
  border-right:none;
  border-radius:50px 0 0 50px;
  background:#13243a;
  color:#e7eef6;
  font-size:13px;
  font-family:inherit;
  outline:none;
  transition:border-color 150ms;
}
.alx-footer-nl-form input[type="email"]::placeholder{color:#6f829a}
.alx-footer-nl-form input[type="email"]:focus{border-color:#4a9fe0}
.alx-footer-nl-form button{
  padding:8px 14px;
  border-radius:0 50px 50px 0;
  background:#1C588E;
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 150ms;
}
.alx-footer-nl-form button:hover{background:#4a9fe0}
.alx-footer-nl-form button svg{width:15px;height:15px;fill:#fff}

/* Contact links column */
.alx-footer-contact{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
}
.alx-footer-contact .alx-footer-col-head{margin-bottom:2px}
.alx-footer-contact a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  color:#9fb2c6;
  text-decoration:none;
  transition:color 150ms;
}
.alx-footer-contact a:hover{color:#4a9fe0}
.alx-footer-contact svg{
  width:15px;height:15px;
  stroke:currentColor;fill:none;
  flex-shrink:0;
}

/* Keyboard focus visibility for all footer links */
.alx-footer a:focus-visible{
  outline:2px solid #4a9fe0;
  outline-offset:3px;
  border-radius:3px;
}

/* Responsive */
@media(max-width:860px){
  .alx-footer-cols{
    grid-template-columns:1fr 1fr;
    gap:28px;
    text-align:center;
    justify-items:center;
  }
  .alx-footer-col{text-align:center}
  .alx-footer-contact{align-items:center}
  .alx-footer-entity{text-align:center}
  .alx-footer-entity-main{justify-content:center}
  .alx-footer-lang{justify-content:center}
  .alx-footer-baseline{justify-content:center;flex-direction:column}
}
@media(max-width:480px){
  /* Keep two link columns on phones — there is room for two blocks side by side. */
  .alx-footer-cols{grid-template-columns:1fr 1fr;gap:20px 18px}
}
@media(max-width:330px){
  .alx-footer-cols{grid-template-columns:1fr}
}

/* ================================================================
   ALX-TOAST – non-blocking notificat
/* ============ Two ways to invest (P2P vs ECF explainer, homepage) ============ */
.alx-twoways{max-width:1140px;margin:0 auto;padding:56px 18px 16px}
.alx-twoways-head{text-align:center;max-width:720px;margin:0 auto 34px}
.alx-tw-kicker{display:inline-block;color:var(--c-blue);font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:.72rem;background:rgba(28,88,142,.10);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.alx-twoways-head h2{margin:0 0 10px;color:var(--c-text);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800}
.alx-twoways-head h2 .alx-tw-accent{color:var(--c-blue)}
.alx-twoways-head p{margin:0;color:var(--c-muted);font-size:.95rem;line-height:1.55;text-align:center}
.alx-twoways-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.alx-tw-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:16px;padding:26px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.alx-tw-card--p2p{border-top:4px solid var(--c-green-alt)}
.alx-tw-card--ecf{border-top:4px solid var(--c-blue)}
.alx-tw-top{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.alx-tw-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.alx-tw-card--p2p .alx-tw-ic{background:rgba(25,185,52,.14);color:var(--c-green-alt)}
.alx-tw-card--ecf .alx-tw-ic{background:rgba(28,88,142,.14);color:var(--c-blue)}
.alx-tw-tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.06em;padding:3px 9px;border-radius:999px;margin-bottom:4px;text-transform:uppercase}
.alx-tw-tag--p2p{background:rgba(25,185,52,.15);color:var(--c-green-alt)}
.alx-tw-tag--ecf{background:rgba(28,88,142,.15);color:var(--c-blue)}
.alx-tw-card h3{margin:0;color:var(--c-text);font-size:1.35rem}
.alx-tw-sub{margin:6px 0 16px;color:var(--c-muted);font-size:.92rem}
.alx-tw-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column}
.alx-tw-list li{display:flex;align-items:center;gap:12px;font-size:.9rem;border-top:1px solid var(--c-line);padding:12px 0}
.alx-tw-list li svg{width:20px;height:20px;flex:none;color:var(--c-muted)}
.alx-tw-list li span{color:var(--c-muted)}
.alx-tw-list li b{margin-left:auto;color:var(--c-text);text-align:right;font-weight:700}
.alx-tw-cta{margin-top:auto;display:block;text-align:center;text-decoration:none;font-weight:700;padding:12px 24px;border-radius:var(--r-btn)}
.alx-tw-cta--green{background:var(--c-green-alt);color:#06210f}
.alx-tw-cta--blue{background:var(--c-blue);color:#fff}
.alx-tw-cta:hover{filter:brightness(1.06)}
.alx-tw-cta--green:hover{color:#06210f}
.alx-tw-cta--blue:hover{color:#fff}
.alx-tw-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:var(--c-card-2);border:1px solid var(--c-line);border-radius:16px;padding:22px;margin-top:22px}
.alx-tw-ti{display:flex;gap:12px;align-items:flex-start}
.alx-tw-ti svg{width:24px;height:24px;flex:none;color:var(--c-blue)}
.alx-tw-ti b{display:block;font-size:.9rem;color:var(--c-text)}
.alx-tw-ti span{display:block;font-size:.78rem;color:var(--c-muted);margin-top:2px}
.alx-twoways-foot{text-align:center;margin-top:24px}
.alx-twoways-foot a{color:var(--c-blue);text-decoration:none;font-weight:700}
.alx-twoways-foot a:hover{text-decoration:underline}
@media(max-width:760px){.alx-twoways-grid{grid-template-columns:1fr}.alx-tw-trust{grid-template-columns:1fr 1fr}}

/* Inline contextual links (homepage body) */
.alx-inline-link{display:inline-block;color:var(--c-blue);text-decoration:none;font-weight:600;font-size:.9rem}
.alx-inline-link:hover{text-decoration:underline}

/* Trust strip under the hero (replaces the old logo + headline band) */
.alx-trust{text-align:center;max-width:920px;margin:0 auto;padding:8px 18px 28px}
.alx-trust-title{color:#0B2545;font-weight:800;line-height:1.25;
  font-size:clamp(1.25rem,2.6vw,1.9rem);margin:0 0 18px}
.alx-trust-badge{display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:#0B2545;font-weight:700;font-size:.9rem;
  padding:9px 18px;border-radius:999px;box-shadow:0 2px 10px rgba(11,37,69,.18)}
.alx-trust-badge svg{flex:none;color:#1a8f5a}

/* Standing risk warning strip (homepage, above the campaigns) */
.alx-riskbar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:0;padding:14px 22px;font-size:.85rem;line-height:1.5;text-align:center;
  color:#dbe6f2;background:#0b2545;border:0;border-radius:0}
.alx-riskbar b{color:#fff}
.alx-riskbar svg{flex:none;color:#dbe6f2}
.alx-riskbar a{color:#cfe3f7;font-weight:700;text-decoration:underline}
.alx-riskbar a:hover{color:#fff}
@media(max-width:991px){.alx-riskbar{padding:12px 16px;font-size:.8rem}}

/* Footer SC licence line */
.alx-footer-licence{margin-top:8px;font-size:12px;color:#7f93aa;line-height:1.5}

/* How it works — 3 steps (homepage) */
.alx-steps{max-width:1000px;margin:8px auto 0;padding:32px 18px 8px;text-align:center}
.alx-steps-head{margin:0 0 24px;color:var(--c-text);font-size:clamp(1.4rem,2.6vw,1.8rem);font-weight:800}
.alx-steps-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
.alx-steps-grid li{background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;padding:24px 18px;display:flex;flex-direction:column;align-items:center;gap:8px}
.alx-step-n{width:40px;height:40px;border-radius:999px;background:var(--c-blue);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.alx-steps-grid b{color:var(--c-text);font-size:1.05rem}
.alx-steps-grid p{margin:0;color:var(--c-muted);font-size:.9rem;line-height:1.5}
@media(max-width:760px){.alx-steps-grid{grid-template-columns:1fr;gap:14px}}

/* Floating WhatsApp lead button (public pages) */
.alx-wa{position:fixed;left:18px;bottom:18px;z-index:90;width:54px;height:54px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.3);text-decoration:none;transition:transform .15s ease}
.alx-wa:hover{transform:scale(1.06);color:#fff}
@media(max-width:991px){.alx-wa{bottom:76px;left:14px;z-index:70}} /* behind the mobile More-sheet (z-index 80) */

/* Language switcher — compact globe dropdown (desktop) */
.alx-lang-drop>a{white-space:nowrap}
.alx-lang-drop .sub-menu .alx-lang-active{font-weight:700;color:var(--c-blue)}
/* Mobile panel — small pill row */
.alx-lang-switch-mobile{display:flex;gap:4px;padding:8px 0 2px}
.alx-lang-btn{font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:4px;
  border:1px solid var(--c-line);color:var(--c-muted);text-decoration:none;
  transition:background .15s,color .15s;white-space:nowrap}
.alx-lang-btn:hover{background:var(--c-line);color:var(--c-text)}
.alx-lang-btn.alx-lang-active{background:var(--c-blue);color:#fff;border-color:var(--c-blue)}
/* RMO footer badge as link (keep pill look, no underline) */
.alx-footer-badge{text-decoration:none;transition:border-color .15s ease,color .15s ease}
a.alx-footer-badge:hover{border-color:#3a7a54;color:#9be3bd}

/* ===== Why-6 trust tiles (homepage) ===== */
.alx-why6{max-width:1100px;margin:0 auto;padding:48px 18px}
.alx-why6-head{text-align:center;margin-bottom:28px}
.alx-why6-head h2{margin:0;color:var(--c-text);font-size:clamp(1.5rem,3vw,2rem);font-weight:800}
.alx-why6-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.alx-why-tile{background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;padding:24px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.alx-why-tile:hover{transform:translateY(-3px);border-color:var(--c-blue);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.alx-why-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(74,159,224,.14);color:var(--c-blue);margin-bottom:14px}
.alx-why-ic svg{width:24px;height:24px}
.alx-why-tile h3{margin:0 0 6px;color:var(--c-text);font-size:1.05rem}
.alx-why-tile p{margin:0;color:var(--c-muted);font-size:.9rem;line-height:1.5}
.alx-why6-foot{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:24px}
@media(max-width:860px){.alx-why6-grid{grid-template-columns:1fr}}

/* ===== Partner / affiliation strip ===== */
.alx-partners-sec{display:none}
.alx-partners{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:center;padding:8px 0}
.alx-partner{color:var(--c-muted);font-weight:800;font-size:.95rem;letter-spacing:.03em;border:1px solid var(--c-line);border-radius:10px;padding:10px 18px;background:var(--c-card)}

/* ===== Closing CTA band ===== */
.alx-ctaband-sec{margin:0;padding:0}
.alx-ctaband{background:linear-gradient(120deg,#10243c,#0f2f50);border:0;border-radius:0;padding:52px 24px;text-align:center}
.alx-ctaband h2{margin:0 0 6px;color:#fff;font-size:clamp(1.5rem,3vw,2rem);font-weight:800}
.alx-ctaband p{margin:0 auto 20px;color:#cdd8e4;max-width:60ch}
.alx-ctaband-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.alx-cta-pri,.alx-cta-acc{display:inline-block;font-weight:700;text-decoration:none;padding:12px 26px;border-radius:var(--r-btn)}
.alx-cta-pri{background:var(--c-blue);color:#04121f}
.alx-cta-acc{background:#1ec94a;color:#06210f}
.alx-cta-pri:hover,.alx-cta-acc:hover{filter:brightness(1.06)}

/* ===================== Homepage hero (CEO redesign, Step 1) 2026-06-26 ===================== */
.alx-h2{display:grid;grid-template-columns:clamp(560px,46vw,780px) 1fr;align-items:stretch;background:var(--c-bg)}
.alx-h2-left{padding:56px 40px 48px clamp(20px,6vw,72px);display:flex;flex-direction:column;justify-content:center}
.alx-h2-inner{max-width:620px;box-sizing:border-box}
.alx-h2-eyebrow{color:var(--c-blue);font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:.78rem;margin-bottom:14px}
.alx-h2 h1{font-family:var(--font-display);font-size:clamp(2.1rem,3.8vw,3.1rem);font-weight:800;line-height:1.1;margin:0 0 18px;color:var(--c-text)}
.alx-h2 h1 .alx-h1-a{color:var(--c-blue)}
.alx-h2-sub{color:var(--c-muted);font-size:1.04rem;line-height:1.6;max-width:52ch;margin:0 0 26px}
.alx-h2-sub b{color:var(--c-blue);font-weight:700}
.alx-h2-dual{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.alx-h2-box{background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.alx-h2-box--inv{border-top:3px solid var(--c-green-alt)}
.alx-h2-box--iss{border-top:3px solid var(--c-blue)}
.alx-h2-bh{display:flex;align-items:center;gap:12px}
.alx-h2-ic{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.alx-h2-box--inv .alx-h2-ic{background:rgba(25,185,52,.14);color:var(--c-green-alt)}
.alx-h2-box--iss .alx-h2-ic{background:rgba(28,88,142,.16);color:var(--c-blue)}
.alx-h2-box h3{margin:0;font-size:1.05rem;color:var(--c-text);font-family:var(--font-display)}
.alx-h2-box p{margin:0;color:var(--c-muted);font-size:.88rem;line-height:1.5;flex:1}
.alx-h2-cta{border:none;border-radius:var(--r-btn);padding:11px 18px;font-weight:700;font-size:.9rem;text-decoration:none;text-align:center;display:inline-block;font-family:var(--font-button);transition:transform .15s,box-shadow .15s,filter .15s}
.alx-h2-cta--green{background:var(--c-green-alt);color:#06210f}
.alx-h2-cta--blue{background:var(--c-blue);color:#fff}
.alx-h2-cta:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.alx-h2-cta--green:hover{color:#06210f}
.alx-h2-cta--blue:hover{color:#fff}
.alx-h2-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin-top:30px;max-width:520px}
.alx-h2-stat{display:flex;gap:10px;align-items:flex-start;color:inherit;text-decoration:none}
.alx-h2-stat .alx-h2-si{width:26px;height:26px;flex:none;color:var(--c-blue)}
.alx-h2-stat b{display:block;color:var(--c-text);font-weight:800;font-size:1rem;line-height:1.15}
.alx-h2-stat span{display:block;color:var(--c-muted);font-size:.76rem;margin-top:2px}
a.alx-h2-stat:hover b{color:var(--c-blue)}
.alx-h2-right{position:relative;min-height:560px;overflow:hidden;background:linear-gradient(160deg,#1d2c3e,#0b1622)}
.alx-h2-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.alx-h2-ovl{position:absolute;inset:0;background:linear-gradient(90deg,var(--c-bg) 0%,rgba(15,23,34,.10) 32%,transparent 62%)}
.alx-h2-journey{position:absolute;right:28px;bottom:34px;width:300px;max-width:calc(100% - 56px);background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;padding:20px;box-shadow:var(--shadow-hover)}
.alx-h2-jic{width:40px;height:40px;border-radius:50%;background:rgba(25,185,52,.14);color:var(--c-green-alt);display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.alx-h2-journey h4{margin:0 0 12px;color:var(--c-text);font-size:1rem;font-family:var(--font-display)}
.alx-h2-journey ul{margin:0;padding:0;list-style:none}
.alx-h2-journey li{display:flex;gap:8px;align-items:flex-start;color:var(--c-text);font-size:.85rem;margin-bottom:8px}
.alx-h2-journey li svg{flex:none;width:16px;height:16px;color:var(--c-green-alt);margin-top:2px}
@media(max-width:900px){
  .alx-h2{grid-template-columns:1fr;width:100%}
  .alx-h2-left{padding:26px 0 20px;width:100%}
  .alx-h2-inner{padding:0 16px;max-width:none;margin:0;width:100%}
  .alx-h2-right{min-height:300px}
  .alx-h2-dual{grid-template-columns:1fr}
  .alx-h2-journey{position:static;width:auto;max-width:none;margin:16px 0 0}
  .alx-h2-ovl{display:none}
}

/* ===================== Why Alixco (box list) + Referral (CEO redesign) 2026-06-26 ===================== */
.alx-why2{max-width:1140px;margin:0 auto;padding:56px 18px 16px;text-align:center}
.alx-why2-kicker{display:inline-block;color:var(--c-green-text);font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:.72rem;margin-bottom:14px;background:rgba(25,185,52,.12);padding:5px 12px;border-radius:999px}
.alx-why2 h2{margin:0 0 10px;font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:800;color:var(--c-text)}
.alx-why2-sub{max-width:680px;margin:0 auto 30px;color:var(--c-muted);font-size:.97rem;line-height:1.6}
.alx-why2-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;text-align:left}
.alx-wbox{background:var(--c-card);border:1px solid var(--c-line);border-radius:16px;padding:26px;box-shadow:var(--shadow)}
.alx-wbox-head{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--c-line);margin-bottom:18px}
.alx-wbox-ic{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none}
.alx-wbox--inv .alx-wbox-ic{background:rgba(28,88,142,.14);color:var(--c-blue)}
.alx-wbox--biz .alx-wbox-ic{background:rgba(25,185,52,.14);color:var(--c-green-alt)}
.alx-wbox-head h3{margin:0;font-size:1.15rem;color:var(--c-text)}
.alx-wbox-head p{margin:2px 0 0;font-size:.85rem;color:var(--c-muted)}
.alx-wlist{display:flex;flex-direction:column;gap:16px;margin-bottom:18px}
.alx-wli{display:flex;gap:12px;align-items:flex-start}
.alx-wli .ck{width:22px;height:22px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px}
.alx-wbox--inv .ck{background:rgba(28,88,142,.16);color:var(--c-blue)}
.alx-wbox--biz .ck{background:rgba(25,185,52,.16);color:var(--c-green-alt)}
.alx-wli b{display:block;font-size:.95rem;color:var(--c-text);margin-bottom:2px}
.alx-wli span{display:block;font-size:.83rem;color:var(--c-muted);line-height:1.5}
.alx-why2-cta{margin-top:32px}
.alx-why2-cta .green{display:inline-block;padding:14px 40px}
.alx-why2-reg{margin-top:16px;font-size:.82rem;color:var(--c-muted);display:inline-flex;gap:8px;align-items:center;justify-content:center}
.alx-why2-reg svg{width:16px;height:16px;color:var(--c-green-alt);flex:none}
.alx-ref{background:var(--c-bg-muted)}
.alx-ref-wrap{max-width:1140px;margin:0 auto;padding:56px 18px}
.alx-ref-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.alx-ref-img{position:relative;border-radius:18px;min-height:480px;background-size:cover;background-position:center;display:flex;align-items:flex-end;padding-bottom:36px}
.alx-ref-simple{position:relative;margin:0 18px -38px 18px;background:rgba(11,37,69,.95);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:20px;color:#dbe6f2;box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:3}
.alx-ref-simple h4{margin:0 0 14px;font-size:1rem;color:#fff;display:flex;gap:8px;align-items:center}
.alx-ref-steps{display:flex;gap:10px}
.alx-ref-step{flex:1;text-align:center}
.alx-ref-step .sn{width:34px;height:34px;border-radius:50%;background:rgba(25,185,52,.20);color:#7ef08a;display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font-weight:800}
.alx-ref-step b{display:block;font-size:.78rem;color:#fff}
.alx-ref-step span{display:block;font-size:.7rem;color:#aebfd0;margin-top:2px}
.alx-ref-foot{display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap}
.alx-ref-amt{display:flex;align-items:center;gap:8px}
.alx-ref-amt .rm{background:var(--c-green-alt);color:#06210f;border-radius:6px;padding:4px 9px;font-weight:800;font-size:.74rem;flex:none}
.alx-ref-amt .amt{font-weight:800;color:#fff;font-size:.92rem;line-height:1.1}
.alx-ref-amt .amt small{display:block;font-weight:600;color:#aebfd0;font-size:.66rem;margin-top:1px}
.alx-ref-rec{display:flex;align-items:flex-start;gap:8px;font-size:.72rem;color:#aebfd0;line-height:1.35;flex:1;min-width:150px}
.alx-ref-rec svg{width:18px;height:18px;color:var(--c-green-alt);flex:none;margin-top:1px}
.alx-ref-kicker{display:inline-block;color:var(--c-green-text);font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:.72rem;margin-bottom:14px;background:rgba(25,185,52,.12);padding:5px 12px;border-radius:999px}
.alx-ref-r h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:0 0 14px;line-height:1.12;color:var(--c-text)}
.alx-ref-r h2 .alx-ref-accent{color:var(--c-green-alt)}
.alx-ref-lead{color:var(--c-muted);font-size:.98rem;line-height:1.6;margin:0 0 22px}
.alx-ref-lead b{color:var(--c-green-text)}
.alx-ref-ben{display:flex;gap:14px;margin-bottom:16px}
.alx-ref-ben-ic{width:42px;height:42px;border-radius:50%;background:rgba(25,185,52,.12);color:var(--c-green-alt);display:flex;align-items:center;justify-content:center;flex:none}
.alx-ref-ben b{display:block;color:var(--c-text);font-size:.95rem}
.alx-ref-ben span{display:block;color:var(--c-muted);font-size:.84rem;line-height:1.5;margin-top:2px}
.alx-ref-r .green{display:inline-block;margin-top:8px;padding:14px 40px}
/* Referral CTA row: primary Join + secondary link to the full /agents page */
.alx-ref-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:8px}
.alx-ref-cta .green{margin-top:0}
.alx-ref-more{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;
  color:var(--c-blue);text-decoration:none;transition:gap .2s ease,color .2s ease}
.alx-ref-more svg{transition:transform .2s ease}
.alx-ref-more:hover{color:var(--c-green-text)}
.alx-ref-more:hover svg{transform:translateX(3px)}
.alx-ref-more:focus-visible{outline:2px solid var(--c-blue);outline-offset:3px;border-radius:4px}
.alx-ref-note{display:block;margin-top:12px;font-size:.78rem;color:var(--c-muted)}
@media(max-width:760px){
  .alx-why2-grid{grid-template-columns:1fr}
  .alx-ref-grid{grid-template-columns:1fr}
  .alx-ref-simple{margin:0 8px}
  .alx-ref-img{padding-bottom:8px;min-height:300px}
}