@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap");
/* Company welcome page only (Banderp/"بند"). Existing authenticated and
   support screens, and halafleet, keep their own layout untouched. Stacked
   top-nav + curved light hero + centered icon grid + login section below,
   per the reference layout the user asked to match. */

.band-page{min-height:100svh;display:flex;flex-direction:column;background:#fff}

/* ---------- top nav ---------- */
.band-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(20px,3.5vw,48px);background:#fff;position:relative;z-index:2}
.band-nav-logo{height:38px;width:auto;object-fit:contain}
.band-nav-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.band-nav-actions .lang-switch{background:#f3f5f9}
.band-nav-actions .lang-switch button{color:#5f6d82}
.band-nav-actions .lang-switch button.active{background:#1d4ed8;color:#fff}
.band-nav-actions .auth-download-btn{background:#f3f5f9;color:#29456a}
.band-nav-actions .auth-download-btn:hover{background:#e4e7ec}
.band-contact{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #d8e9df;border-radius:9px;color:#137749;background:#f5fcf8;font:600 12px/1.3 inherit}
.band-contact svg{width:20px;height:20px}

/* ---------- hero / story section ---------- */
.band-story{position:relative;overflow:hidden;background:#f3f5f9;padding:56px clamp(20px,5vw,88px) 44px;isolation:isolate}
.band-story::before{content:"";position:absolute;top:0;left:-8%;right:-8%;height:56px;background:#fff;clip-path:ellipse(58% 100% at 50% 0%);z-index:0}
.band-story::after{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(ellipse 620px 380px at 92% 100%,#8a2c3a10,transparent 60%),radial-gradient(ellipse 620px 380px at 4% 0%,#1d4ed810,transparent 60%);pointer-events:none}
.band-story-content{position:relative;z-index:1;width:100%;max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.band-eyebrow{font-size:11px;font-weight:700;letter-spacing:.7px;color:#475467;display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;background:#fff;border:1px solid #e4e7ec;padding:7px 13px;border-radius:99px;box-shadow:0 2px 6px #10182808}
.band-eyebrow>span{width:7px;height:7px;background:#16a34a;border-radius:50%;box-shadow:0 0 0 5px #16a34a15}
.band-story h1{font-size:clamp(30px,3.4vw,50px);font-weight:750;line-height:1.24;letter-spacing:-1px;margin:0 0 16px;color:#101828}
.band-story h1 em{font-style:normal;color:#1d4ed8}
.band-lead{font-size:clamp(13px,1.05vw,15px);line-height:1.9;color:#667085;max-width:660px;margin:0 0 24px}
.band-team{display:inline-flex;align-items:center;gap:22px;font-weight:600;font-size:14px;background:#101828;color:#fff;padding:12px 20px;border-radius:10px;transition:background .15s,transform .15s;box-shadow:0 10px 24px #10182822;margin-bottom:8px}
.band-team:hover{background:#1d4ed8;transform:translateY(-1px)}
.band-team span{font-size:17px}

/* icon grid -- white square tile (the "card"), plain label underneath, no
   wrapping border/shadow around the whole visual block: matches the
   reference (icon squares floating on the light section, not boxed). */
.band-visual{position:relative;z-index:1;width:100%;max-width:1080px;margin:40px auto 0}
.band-visual-top{display:flex;justify-content:center;margin-bottom:26px}
.band-visual-label{font-size:13px;font-weight:700;color:#101828}
.band-demo-label{display:none}

/* ~21 modules, 6/row on desktop (matches the reference grid density) -- six
   accents cycle across columns so the grid reads colorful like the
   reference instead of one flat tone, using Banderp's own palette. */
.band-module-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px 14px}
/* #بطاقات-قابلة-للفتح: كل بطاقة قسم بقت قابلة للضغط (تفتح مودال شرح
   مبسط + إمكانيات -- شوف renderInfoModal في login-marketing.js)، فمحتاجة
   مؤشر يد + تأثير هوفر بسيط يبين إنها تفاعلية، غير كده هي نفسها بالظبط. */
.band-module{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;cursor:pointer;border-radius:14px;padding:6px;transition:transform .15s}
.band-module:hover,.band-module:focus-visible{transform:translateY(-3px)}
.band-module:hover .band-module-icon,.band-module:focus-visible .band-module-icon{box-shadow:0 10px 22px #10182820;border-color:var(--accent)}
.band-module:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}
.band-module:nth-child(6n+1){--accent:#9f2b39}
.band-module:nth-child(6n+2){--accent:#1d4ed8}
.band-module:nth-child(6n+3){--accent:#16a34a}
.band-module:nth-child(6n+4){--accent:#c2660a}
.band-module:nth-child(6n+5){--accent:#0f8b8d}
.band-module:nth-child(6n+6){--accent:#7c3aed}
.band-module-icon{width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid #eceff3;box-shadow:0 6px 16px #10182812;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;color:var(--accent)}
.band-module strong{font-size:11.5px;font-weight:600;line-height:1.45;color:#344054}
.band-module-line{display:none}

.band-flow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;border-top:1px solid #e4e7ec;margin-top:34px;padding-top:22px}
.band-flow>span{font-size:11.5px;color:#475467;display:flex;gap:8px;align-items:center;font-weight:500}
.band-flow b{font-weight:700;font-size:10px;color:#1d4ed8;background:#e8effe;width:18px;height:18px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none}

.band-benefits{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:18px;color:#475467;font-size:11.5px;font-weight:500}
.band-benefits-title{flex-basis:100%;text-align:center;font-weight:700;font-size:12.5px;color:#101828;margin-bottom:4px}
.band-benefits span:before{content:"✓";color:#16a34a;margin-inline-end:6px;font-weight:700}

.band-story-bottom{position:relative;z-index:1;display:flex;justify-content:center;align-items:center;gap:10px;padding-top:30px;margin-top:8px;color:#98a2b3;font-size:10px}
.band-story-bottom>b{letter-spacing:2px;font-size:14px;font-weight:700;color:#101828}
.band-story-bottom>b>span{font-weight:400;color:#1d4ed8;margin-inline-start:3px}
.band-story-bottom>span{display:none}

/* ---------- login section (below the hero) ---------- */
.band-auth-section{flex:1;display:flex;align-items:center;justify-content:center;padding:44px 20px;background:#fff}
.band-auth-section .auth-card{width:100%;max-width:440px;border:1px solid #e4e7ec;border-radius:18px;box-shadow:0 16px 40px #10182810;margin:0;padding:36px clamp(24px,3vw,40px);background:#fff}
.band-auth-section .auth-subtitle{font-size:13px;line-height:1.7;margin-bottom:22px;color:#667085;text-align:center}
.band-auth-section .auth-tabs{margin-bottom:22px}
.band-auth-section .input,.band-auth-section .select{min-height:48px;border-radius:10px;background:#f9fafc}
.band-auth-section .form-group{margin-bottom:18px}
.band-auth-section .btn[type=submit]{min-height:48px;background:#1d4ed8;border-radius:10px;box-shadow:0 8px 20px #1d4ed82c;text-align:center;justify-content:center;font-weight:600}
.band-auth-section .auth-hint{margin-top:22px;line-height:1.8;border:1px solid #e5ebf4;background:#f8faff;border-radius:10px}

/* the shared .auth-copyright rule in styles.css is fixed/white-on-transparent
   (built for a dark auth screen) -- band-page ends on a plain white
   background, so it needs to sit in normal flow with dark-on-light text. */
.band-page .auth-copyright{position:static;padding:14px 24px;background:#f8faff;font-size:10px;color:#68778d;text-align:center;border-top:1px solid #e4e7ec}

.band-page a:focus-visible,.band-page button:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}

@media(max-width:1050px){
  .band-module-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 14px}
  .band-story{padding-top:48px}
}
@media(max-width:640px){
  .band-nav{padding:14px 16px}
  .band-nav-logo{height:32px}
  .band-contact span{display:none}
  .band-story{padding:40px 16px 32px}
  .band-story::before{height:40px}
  .band-story h1{font-size:30px}
  .band-visual{margin-top:30px}
  .band-module-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 10px}
  .band-module-icon{width:46px;height:46px;font-size:19px;border-radius:12px}
  .band-module strong{font-size:10.5px}
  .band-flow{gap:10px}
  .band-benefits{gap:12px}
  .band-auth-section{padding:32px 16px}
  .band-auth-section .auth-card{padding:28px 20px}
}
@media(prefers-reduced-motion:reduce){.band-team{transition:none}}

/* ==========================================================================
   المتجر الإلكتروني (Online Store) -- الصفحة العلنية /store/<slug>. قسم
   مستقل تمامًا عن .band-page فوق (ده تسويق "بند" نفسها، ده متجر شركة عميل
   -- زائر نهائي ممكن ميعرفش "بند" أصلاً)، فمقصود عمدًا إنه معندوش أي علاقة
   بكلاسات .band-*. اتحطّ في نفس الملف ده بس عشان يتضاف بدون تعديل
   index.html (نفس السبب اللي .band-page اتحطت بيه هنا أصلاً).
   ========================================================================== */
.store-page{min-height:100svh;display:flex;flex-direction:column;background:#f7f8fb;position:relative}
/* لغة الصفحة (.store-lang-switch) لازم تفضل مثبتة فوق دايمًا (أول عنصر
   في التدفق العادي)؛ اللي بيتوسّط رأسيًا هو بس محتوى حالة التحميل/غير
   متاح تحتها -- شوف .store-center-body، مش .store-page كله. */
.store-center-body{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}
.store-loading{font-size:14px;color:#8a93a6;text-align:center}
.store-notfound{text-align:center;max-width:380px;padding:32px 24px}
.store-notfound-icon{font-size:44px;margin-bottom:10px}
.store-notfound h1{font-size:19px;font-weight:800;margin:0 0 8px;color:#1c2537}
.store-notfound p{font-size:13.5px;color:#667085;line-height:1.7;margin:0 0 4px}
.store-order-serial{margin-top:6px;font-size:13.5px}
.store-notfound .btn{margin-top:16px}

/* عادي جوه تدفق الصفحة (مش fixed) -- عشان متتراكبش مع الهيدر لما يلف سطرين
   على الموبايل (اسم متجر طويل + تليفون). شريط رفيع فوق الهيدر مباشرة،
   محاذي لنهاية السطر (يمين بالعربي/شمال بالإنجليزي). */
.store-lang-switch{display:flex;justify-content:flex-end;padding:8px 16px;background:#fff;border-bottom:1px solid #e4e7ec}
.store-lang-switch button{border:none;background:transparent;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:700;color:#667085;cursor:pointer}
.store-lang-switch button.active{background:#1d4ed8;color:#fff}

.store-header{display:flex;align-items:center;gap:16px;padding:22px clamp(16px,3vw,40px);background:#fff;border-bottom:1px solid #e4e7ec}
.store-logo{width:56px;height:56px;border-radius:14px;object-fit:cover;flex-shrink:0}
.store-logo-placeholder{display:flex;align-items:center;justify-content:center;background:#eef2ff;font-size:26px}
.store-header-text{flex:1;min-width:0}
.store-header-text h1{font-size:18px;font-weight:800;margin:0 0 3px;color:#1c2537}
.store-header-text p{font-size:12.5px;color:#667085;margin:0 0 2px;line-height:1.6}
.store-header-text .store-phone{color:#1d4ed8;font-weight:700}
.store-cart-btn{position:relative;border:1px solid #e4e7ec;background:#f9fafc;border-radius:12px;padding:10px 16px;font-size:18px;cursor:pointer;flex-shrink:0}
.store-cart-badge{position:absolute;top:-6px;inset-inline-end:-6px;background:#dc2626;color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px}

.store-main{flex:1;padding:20px clamp(16px,3vw,40px) 40px;max-width:1100px;width:100%;margin:0 auto}
.store-empty{text-align:center;color:#8a93a6;font-size:13.5px;padding:60px 20px}
.store-category-section{margin-bottom:26px}
.store-category-title{font-size:14.5px;font-weight:800;color:#1c2537;margin:0 0 12px;padding-inline-start:2px}
.store-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.store-product-card{background:#fff;border:1px solid #e4e7ec;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.store-product-img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#f3f5f9}
.store-product-img-placeholder{display:flex;align-items:center;justify-content:center;font-size:30px;color:#c7cedb}
.store-product-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.store-product-name{font-size:13px;font-weight:700;color:#1c2537;line-height:1.4}
.store-product-desc{font-size:11.5px;color:#8a93a6;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.store-product-price{font-size:13.5px;font-weight:800;color:#1d4ed8;margin-top:2px}
.store-product-cart-ctrl{margin-top:auto;padding-top:8px}
.store-add-btn{width:100%;justify-content:center}
.store-qty-btn{width:30px;height:30px;border-radius:9px;border:1px solid #e4e7ec;background:#f9fafc;font-size:15px;font-weight:700;cursor:pointer;color:#1c2537}
.store-product-cart-ctrl .store-qty-btn{width:100%;display:inline-flex;align-items:center;justify-content:center}
.store-product-cart-ctrl{display:flex;align-items:center;gap:8px}
.store-qty-val{font-size:13.5px;font-weight:800;min-width:20px;text-align:center}

.store-cart-overlay{position:fixed;inset:0;background:#10182866;display:flex;justify-content:flex-end;z-index:30}
.store-cart-panel{width:100%;max-width:400px;background:#fff;height:100%;display:flex;flex-direction:column;box-shadow:-14px 0 40px #10182820}
.store-cart-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #e4e7ec}
.store-cart-head h3{font-size:15px;font-weight:800;margin:0;color:#1c2537}
.store-cart-body{flex:1;overflow-y:auto;padding:16px 18px 24px}
.store-cart-empty{text-align:center;color:#8a93a6;font-size:13px;padding:30px 0}
.store-cart-items{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.store-cart-item{display:flex;flex-direction:column;gap:6px;padding-bottom:12px;border-bottom:1px solid #f0f2f5}
.store-cart-item-name{font-size:13px;font-weight:700;color:#1c2537}
.store-cart-item-ctrl{display:flex;align-items:center;gap:8px}
.store-cart-item-price{margin-inline-start:auto;font-size:12.5px;font-weight:800;color:#1d4ed8}
.store-cart-total{display:flex;justify-content:space-between;font-size:14.5px;padding:12px 0;border-top:1px solid #e4e7ec;margin-bottom:14px}
.store-cart-panel .form-group{margin-bottom:12px}
.store-cart-panel .input,.store-cart-panel .textarea{min-height:42px;border-radius:10px;background:#f9fafc}

@media(max-width:640px){
  .store-header{flex-wrap:wrap;padding:16px}
  .store-product-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .store-cart-panel{max-width:100%}
}

/* Approved business positioning and free-trial call to action. */
/* #تصميم-تسويقي-أشمل: الجانب الأيمن (النسخة القديمة) كان مجرد نص متكدّس
   على خلفية مسطحة، بينما الجانب التاني (band-command/flow-explorer) كارت
   غامق مصقول بظلال وحدود -- ده اللي خلى المستخدم يوصفه إنه "سيئ جدًا"
   بالمقارنة. الحل هنا: تغليف نفس المحتوى (بلا حذف أي جملة حقيقية) جوه
   "band-hero-copy" -- كارت فاتح بحدود وظل وخلفية متدرجة وأشكال زخرفية
   خلفية، عشان يوازي وزن الكارت الغامق بصريًا، + تحويل جملة "الأشمل/الأسهل/
   الأوفر" لثلاث Pills ملوّنة بدل جملة نص عادية، + تحويل قائمة القطاعات
   لشيبس بأيقونات بدل نص مسطح، + دمج "ابدأ بالتجربة" مع زراير الدعوة
   لإجراء جوه كارت تحويل واحد (band-cta-card) بدل ما يكونوا عنصرين منفصلين.
   بطلب المستخدم صراحةً: "حاول تبدع في موائمة العرض بشكل احترافي و تسويق و
   مشوق و جاذب للعملاء". */
.band-hero-copy{position:relative;isolation:isolate;overflow:hidden;width:100%;box-sizing:border-box;background:linear-gradient(165deg,#ffffff 0%,#f6f9ff 62%,#f1f6ff 100%);border:1px solid #e3eaf5;border-radius:26px;padding:clamp(26px,3.2vw,42px);box-shadow:0 30px 70px -34px #10182838,0 2px 10px #10182808}
.band-hero-copy:before{content:"";position:absolute;z-index:-1;top:-90px;inset-inline-end:-90px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,#1d4ed81c,transparent 70%)}
.band-hero-copy:after{content:"";position:absolute;z-index:-1;bottom:-100px;inset-inline-start:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#0f8b8d18,transparent 70%)}
.band-hero-copy .band-eyebrow{background:#fff;box-shadow:0 4px 14px #10182810}
.band-hero-copy h1{position:relative}
.band-value-pills{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 20px}
.band-value-pills span{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;padding:8px 14px 8px 10px;border-radius:999px;border:1px solid var(--pill-b);background:var(--pill-bg);color:var(--pill-c)}
.band-value-pills span>i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fff;font-size:12px;box-shadow:0 2px 5px #10182814}
.band-value-pills span:nth-child(1){--pill-bg:#eaf1ff;--pill-b:#c9dcff;--pill-c:#1d4ed8}
.band-value-pills span:nth-child(2){--pill-bg:#e8f9f3;--pill-b:#c5efe0;--pill-c:#0f8b6c}
.band-value-pills span:nth-child(3){--pill-bg:#fff3e6;--pill-b:#fde0bd;--pill-c:#b5610a}
.band-story-content>.band-lead,.band-hero-copy>.band-lead{font-size:13.5px;line-height:1.95;margin-bottom:22px}
.band-sectors-block{margin:0 0 26px}
.band-sectors-label{display:block;font-size:11px;font-weight:700;color:#8a93a6;letter-spacing:.2px;margin-bottom:10px}
.band-sectors{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.band-sectors span{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#344054;background:#fff;border:1px solid #e4e7ec;border-radius:999px;padding:7px 13px 7px 9px;box-shadow:0 2px 6px #10182808;transition:transform .15s,box-shadow .15s,border-color .15s}
.band-sectors span:hover{transform:translateY(-2px);box-shadow:0 8px 16px #10182814;border-color:#c9dcff}
.band-sectors span>i{font-style:normal;font-size:13px;line-height:1}
.band-cta-card{position:relative;margin:0 0 16px;padding:20px 22px;border-radius:18px;border:1px solid #dce6fb;background:linear-gradient(135deg,#eef4ff 0%,#ffffff 55%);box-shadow:0 16px 34px -18px #1d4ed83a}
.band-cta-card-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.band-cta-card-icon{flex-shrink:0;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:19px;border-radius:12px;background:#101828;box-shadow:0 8px 18px #1d4ed830}
.band-cta-card-text strong{display:block;font-size:15.5px;color:#101828;line-height:1.6;margin-bottom:4px}
.band-cta-card-text p{font-size:12.5px;line-height:1.8;color:#667085;margin:0}
.band-hero-actions{display:flex;flex-wrap:wrap;gap:10px}
.band-start{border:0;cursor:pointer;font-family:inherit;background:linear-gradient(135deg,#1d4ed8,#1640b0);box-shadow:0 12px 26px -10px #1d4ed86e}
.band-start:hover{background:linear-gradient(135deg,#1640b0,#123385);transform:translateY(-2px)}
.band-start span{transition:transform .15s}.band-start:hover span{transform:translateX(-3px)}
[dir=ltr] .band-start:hover span,html:not([dir=rtl]) .band-start:hover span{transform:translateX(3px)}
.band-team-secondary{background:#fff;border:1px solid #d0d5dd;color:#344054;box-shadow:none}.band-team-secondary:hover{background:#f5f8ff;color:#1d4ed8;border-color:#c9dcff;transform:translateY(-2px)}
.band-reassurance{display:flex;align-items:center;gap:7px;font-size:12px;color:#667085;margin:0;line-height:1.6}
.band-reassurance>span{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#e8f9f3;color:#0f8b6c;font-size:10px;font-weight:800;flex-shrink:0}
@media(max-width:640px){.band-hero-copy{padding:22px 18px;border-radius:20px}.band-hero-actions{width:100%}.band-hero-actions .band-team{justify-content:center;width:100%}.band-story h1{font-size:30px;line-height:1.45}.band-cta-card{padding:16px}}

/* Welcome conversion design: scoped away from company online stores. */
.band-nav{gap:24px;min-height:100px;padding-block:18px}
.band-nav-promo{display:flex;align-items:center;justify-content:center;gap:22px;flex:1;min-width:0}
.band-nav-promo>div{display:flex;flex-direction:column;gap:4px}.band-nav-promo strong{font-size:18px;font-weight:750;color:#142d50}.band-nav-promo small{font-size:11px;color:#667085}
.band-nav-trial{display:inline-flex;align-items:center;gap:14px;border:0;border-radius:9px;background:#173b72;color:#fff;font:600 12px/1.5 inherit;padding:10px 16px;cursor:pointer;white-space:nowrap}
.band-nav-actions{flex-shrink:0}
.band-story{padding-top:48px;background:#f5f7fb}.band-story::before{display:none}
.band-hero-layout{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center;max-width:1320px;margin:0 auto;position:relative;z-index:1}
.band-hero-layout .band-story-content{align-items:flex-start;text-align:start;max-width:none}
.band-hero-layout h1{font-size:clamp(32px,3.5vw,57px);line-height:1.3;letter-spacing:-1.2px}
.band-hero-layout .band-promise{font-size:17px}.band-hero-layout .band-sectors,.band-hero-layout .band-hero-actions,.band-hero-layout .band-value-pills{justify-content:flex-start}
.band-hero-layout .band-lead{font-size:14px;line-height:1.9}.band-hero-layout .band-experience{font-size:12px}
.band-command{position:relative;min-width:0;max-width:590px;width:100%;margin:auto;padding:24px;border:1px solid #294969;border-radius:23px;color:#edf3fc;background:radial-gradient(ellipse at 100% 0%,#195c6460,transparent 60%),linear-gradient(140deg,#142d50,#0c1b34);box-shadow:0 28px 65px #142d5025;overflow:hidden}
.band-command-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:22px;border-bottom:1px solid #ffffff18}
.band-command-brand{direction:ltr;font-size:17px;letter-spacing:2px;font-weight:800}.band-command-brand>span{color:#83d7c2;font-weight:400;margin-inline-start:4px}
.band-illustration-label{font-size:9px;color:#a4b9d1;letter-spacing:.6px}.band-command-intro{margin:26px 0}.band-command-kicker{font-size:10px;color:#91b3d0;letter-spacing:1px}
.band-command-intro h2{font-size:clamp(21px,2vw,30px);line-height:1.6;color:#fff;font-weight:650;margin:8px 0 0}
.band-connect-core{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:center;width:168px;margin:0 auto 24px;background:#ffffff0c;border:1px solid #78d3c65c;border-radius:15px;padding:17px 12px;box-shadow:0 0 35px #53bdab14}
.band-connect-core:after{content:"";position:absolute;bottom:-24px;height:24px;width:1px;background:#72b4c7}
.band-connect-core b{font-size:24px;letter-spacing:3px;color:#98e4cc}.band-connect-core small{font-size:8px;margin-top:6px;color:#c2d4e6;white-space:nowrap}
.band-connected-teams{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border-top:1px solid #60879e;padding-top:15px;position:relative}
.band-connected-teams>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;background:#ffffff07;border:1px solid #ffffff18;padding:15px 5px;border-radius:10px}
.band-connected-teams>div:before{content:"";position:absolute;top:-16px;width:1px;height:15px;background:#60879e}.band-connected-teams span{font-size:24px;color:#8bd6c4}.band-connected-teams strong{font-size:10px;font-weight:500;color:#e1e9f4}.band-connected-teams i{height:3px;width:28px;border-radius:3px;background:#427287}
.band-journey{background:#ffffff06;border:1px solid #ffffff12;border-radius:12px;margin-top:24px;padding:16px}.band-journey>div{display:flex;align-items:center;gap:8px}.band-journey strong{font-size:11px;font-weight:550}.band-journey-dot{width:6px;height:6px;border-radius:50%;background:#83d7c2}
.band-journey ol{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:13px}.band-journey li{display:flex;align-items:center;gap:11px;font-size:11px;color:#b8cbe0}.band-journey li>b{font-size:9px;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#ffffff0a;color:#80d6bf;font-weight:500}.band-journey li>i{margin-inline-start:auto;color:#80d6bf;font-style:normal}
.band-command-foot{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#9bb7ce;padding-top:20px}.band-command-foot>span:last-child{color:#8de0c8;font-size:17px}
.band-hero-layout+.band-visual{border-top:1px solid #dfe5ee;padding-top:34px;margin-top:52px}
@media(min-width:1600px){.band-nav-promo strong{font-size:22px}.band-nav-promo small{font-size:12px}.band-nav-trial{padding:12px 22px}}
@media(max-width:1100px){.band-nav-promo small{display:none}.band-nav-promo{gap:12px}.band-nav-promo strong{font-size:14px}.band-nav-trial{font-size:11px;padding:9px 12px}.band-nav{gap:15px}.band-command{padding:20px}}
@media(max-width:850px){.band-hero-layout{grid-template-columns:1fr;gap:32px}.band-hero-layout .band-story-content{max-width:650px;margin:auto;align-items:center;text-align:center}.band-hero-layout .band-sectors,.band-hero-layout .band-hero-actions,.band-hero-layout .band-value-pills,.band-hero-layout .band-sectors-block{justify-content:center}.band-hero-copy .band-eyebrow,.band-value-pills,.band-sectors,.band-hero-actions{margin-inline:auto}.band-cta-card-top{text-align:start}.band-nav{flex-wrap:wrap}.band-nav-promo{order:3;flex-basis:100%;justify-content:space-between;border-top:1px solid #eef1f5;padding-top:14px}.band-nav-promo small{display:block}.band-nav-actions{margin-inline-start:auto}.band-command{max-width:540px}.band-story{padding-top:30px}}
@media(max-width:420px){.band-nav{gap:10px}.band-nav-promo strong{font-size:12px}.band-nav-promo small{font-size:9px}.band-nav-trial{font-size:10px;gap:7px}.band-command{padding:18px}.band-connected-teams{gap:6px}.band-connected-teams strong{font-size:9px}.band-illustration-label{font-size:8px}}


/* Readable, connected HTML trees; real text remains accessible in both languages. */
.band-flow-explorer{max-width:660px;padding:24px}
.band-fc-heading{margin:20px 0}.band-fc-heading h2{font-size:25px;line-height:1.5;margin:7px 0 0;color:#fff}
.band-fc-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0}
.band-fc-switch{display:flex;padding:4px;border:1px solid #ffffff20;background:#07172a66;border-radius:11px;gap:4px}
.band-fc-controls button,.band-fc-dialog-head button{font-family:inherit;font-size:11px;border:1px solid transparent;border-radius:8px;padding:9px 12px;cursor:pointer;background:transparent;color:#cad9eb;line-height:1.5}
.band-fc-switch button[aria-pressed=true]{background:#d5f8ec;color:#0d3d39;font-weight:700;box-shadow:0 2px 8px #0002}
.band-fc-controls [data-flow-expand]{border-color:#ffffff26;background:#ffffff08;color:#d9e7f6;white-space:nowrap}
.band-fc-caption{font-size:10px;color:#a7bfd7;line-height:1.7;margin:0 0 20px;text-align:center}
.band-fc-map{padding:0 1px 5px}.band-fc-root{position:relative;width:max-content;max-width:90%;min-width:168px;margin:0 auto;padding:14px 18px;display:flex;flex-direction:column;gap:5px;text-align:center;border:1px solid #80dbc26b;border-radius:12px;background:linear-gradient(130deg,#21495d,#18314c);box-shadow:0 8px 20px #0001}
.band-fc-root strong{font-size:16px;color:#a0efd3;line-height:1.5}.band-fc-root small{font-size:9px;color:#b8cee0;line-height:1.6}
.band-fc-root:after{content:"";position:absolute;bottom:-23px;inset-inline-start:50%;height:22px;border-inline-start:1px solid #7398b3}
.band-fc-executive{margin-top:22px;min-width:210px;background:#ffffff08;border-color:#7398b3}.band-fc-executive strong{font-size:13px;color:#edf4fb}
.band-fc-branches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;margin-top:22px;border-top:1px solid #7398b3;padding-top:18px;position:relative}
.band-fc-branch{position:relative;min-width:0;padding:0 0 12px;border:1px solid #ffffff14;background:#ffffff04;border-radius:10px;overflow:visible}
.band-fc-branch:before{content:"";position:absolute;height:19px;top:-19px;inset-inline-start:50%;border-inline-start:1px solid #7398b3}
.band-fc-branch:nth-child(n+3):before{height:25px;top:-25px}
.band-fc-branch h3{font-size:11px;line-height:1.6;min-height:46px;display:flex;align-items:center;justify-content:center;text-align:center;padding:9px 8px;margin:0;border-bottom:1px solid #ffffff13;border-top:2px solid var(--flow-accent);border-radius:10px 10px 0 0;background:#ffffff06;color:var(--flow-accent)}
.band-fc-branch ul{list-style:none;margin:12px 10px 0;padding:0 12px 0 0;border-inline-start:1px solid #627f9c;padding-inline-start:12px;padding-inline-end:0}
.band-fc-branch li{position:relative;display:flex;gap:6px;align-items:center;min-height:34px;padding:6px 7px;border:1px solid #ffffff0d;background:#ffffff05;border-radius:6px;color:#e2eaf6;font-size:10px;line-height:1.5;margin-bottom:6px;overflow-wrap:anywhere}
.band-fc-branch li:before{content:"";position:absolute;inset-inline-start:-13px;width:12px;top:50%;border-top:1px solid #627f9c}.band-fc-branch li>span:first-child[aria-hidden]{font-size:12px;flex-shrink:0}
.band-fc-team{font-size:9px;text-align:center;color:#91b2cb;border:1px dashed #7398b355;margin:12px 10px 0;padding:7px 3px;border-radius:6px;position:relative}.band-fc-team:before{content:"";position:absolute;top:-13px;inset-inline-start:50%;height:12px;border-inline-start:1px solid #627f9c}
.band-fc-note{font-size:10px;line-height:1.8;color:#a7bfd7;margin:16px 0 0;padding:12px;border-radius:8px;background:#ffffff06}
.band-fc-panel[hidden]{display:none!important}
.band-fc-dialog{width:min(1160px,94vw);max-width:94vw;max-height:92svh;border:1px solid #44617b;border-radius:18px;background:#10243f;color:#e8eff8;padding:0;box-shadow:0 30px 100px #0008}
.band-fc-dialog::backdrop{background:#061629bb;backdrop-filter:blur(5px)}
.band-fc-dialog-head{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #ffffff20;position:sticky;top:0;background:#10243f;z-index:2}.band-fc-dialog-head strong{font-size:15px}.band-fc-dialog-head button{border-color:#ffffff30;background:#ffffff08}
.band-fc-dialog-content{padding:24px}.band-fc-dialog-content .band-fc-branch li{font-size:12px;min-height:40px}.band-fc-dialog-content .band-fc-branch h3{font-size:13px}
@media(min-width:1000px){.band-fc-dialog-content .band-fc-branches{grid-template-columns:repeat(4,minmax(0,1fr))}.band-fc-dialog-content .band-fc-branch:nth-child(n+3):before{height:19px;top:-19px}}
@media(max-width:420px){.band-flow-explorer{padding:16px}.band-fc-controls{gap:6px}.band-fc-controls button{padding:8px;font-size:10px}.band-fc-controls [data-flow-expand]>span{display:none}.band-fc-branches{gap:23px 9px}.band-fc-branch ul{margin-inline:6px;padding-inline-start:8px}.band-fc-branch li{font-size:9px;padding:6px 4px;gap:4px}.band-fc-branch li:before{inset-inline-start:-9px;width:8px}.band-fc-heading h2{font-size:22px}.band-fc-dialog-content{padding:18px 10px}.band-fc-dialog-content .band-fc-branch li{font-size:10px}}


/* A shared center spine connects each group to the root, not to another group. */
.band-fc-branches{border-top:0;padding-top:0;background:linear-gradient(#7398b3,#7398b3) center top/1px calc(100% - 20px) no-repeat}
.band-fc-branch:before,.band-fc-branch:nth-child(n+3):before{top:22px;height:0;width:9px;border-inline-start:0;border-top:1px solid #7398b3;inset-inline-start:auto;inset-inline-end:-9px}
.band-fc-branch:nth-child(even):before{inset-inline-start:-9px;inset-inline-end:auto}
@media(min-width:1000px){.band-fc-dialog-content .band-fc-branches{background:none;border-top:1px solid #7398b3;padding-top:18px}.band-fc-dialog-content .band-fc-branch:before,.band-fc-dialog-content .band-fc-branch:nth-child(n+3):before{top:-19px;inset-inline-start:50%;inset-inline-end:auto;width:0;height:19px;border-top:0;border-inline-start:1px solid #7398b3}}
@media(max-width:420px){.band-fc-branch:before,.band-fc-branch:nth-child(n+3):before{width:5px;inset-inline-end:-5px}.band-fc-branch:nth-child(even):before{inset-inline-start:-5px;inset-inline-end:auto}}


/* Band Intelligence: public examples are fixed sample data, never live tenant data. */
.band-ai-showcase{position:relative;z-index:1;max-width:1280px;--ai-ink:#132c49;--ai-mint:#0d817e;--ai-muted:#5c6c80;color:var(--ai-ink);width:100%;margin:0 auto 48px;text-align:start}
.band-ai-intro{max-width:940px;margin:0 auto;text-align:center;padding:38px 12px 48px}
.band-ai-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:1.8px;color:#0d817e;line-height:1.8}
.band-ai-kicker i{font-style:normal;font-size:20px}
.band-ai-intro h2{font-size:clamp(32px,4.4vw,62px);line-height:1.35;letter-spacing:-1.5px;font-weight:800;margin:18px 0 24px;color:var(--ai-ink)}
.band-ai-intro h2 em{font-style:normal;color:#0d817e;position:relative}
.band-ai-intro>p{max-width:650px;margin:0 auto;font-size:16px;line-height:1.95;color:var(--ai-muted)}
.band-ai-actions{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;margin:28px 0 18px}
.band-ai-primary{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:16px 24px;border:0;border-radius:12px;background:#153653;color:white;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px #15365320;transition:background .2s,transform .2s}
.band-ai-primary:hover{background:#0d817e;transform:translateY(-2px)}
.band-ai-link{display:inline-flex;align-items:center;gap:14px;color:var(--ai-ink);font-size:13px;font-weight:700;text-decoration:none}
.band-ai-trust{font-size:11px;color:#68788b;line-height:1.8}
.band-ai-stage{scroll-margin-top:30px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:clamp(24px,5vw,72px);padding:clamp(24px,4vw,56px);border-radius:30px;background:radial-gradient(ellipse at 80% 10%,#ddf5eb 0,transparent 55%),linear-gradient(125deg,#edf1fc,#f4f5fa 55%,#e6f5f0);border:1px solid #e1e8ee;overflow:hidden}
.band-ai-stage-copy h3{font-size:clamp(28px,3.2vw,44px);line-height:1.4;margin:14px 0 18px;letter-spacing:-.7px}
.band-ai-stage-copy>p{color:var(--ai-muted);font-size:13px;line-height:1.9;max-width:360px}
.band-ai-choices{display:flex;gap:8px;flex-direction:column;margin:24px 0 18px;max-width:340px}
.band-ai-choices button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 18px;border:1px solid transparent;border-radius:12px;background:#ffffff70;color:#5c6c80;font:inherit;font-size:13px;cursor:pointer;text-align:start;transition:background .2s,border-color .2s}
.band-ai-choices button[aria-pressed=true]{background:#fff;color:#163b53;border-color:#bedcd7;box-shadow:0 6px 18px #163b5308;font-weight:700}
.band-ai-choices button:hover{border-color:#0d817e}
.band-ai-sample-label{display:block;color:#68788b;font-size:10px;line-height:1.8;max-width:320px}
.band-ai-window{background:#fff;border:1px solid #dfe9e7;border-radius:20px;box-shadow:0 30px 65px -25px #163b5340;overflow:hidden;min-width:0;transform:rotate(-1deg)}
.band-ai-window-head{display:flex;align-items:center;gap:10px;padding:20px;border-bottom:1px solid #edf1f4;background:#ffffff}
.band-ai-avatar{display:grid;place-items:center;background:#12364b;color:#83ead3;border-radius:12px;width:38px;height:38px;font-size:24px;flex-shrink:0}
.band-ai-window-head strong{display:block;font-size:13px}
.band-ai-window-head small{display:block;font-size:9px;color:#788596;margin-top:5px}
.band-ai-demo-badge{margin-inline-start:auto;background:#edf7f2;color:#397163;padding:5px 8px;border-radius:20px;font-size:9px;white-space:nowrap}
.band-ai-panels{padding:22px}
.band-ai-panels [hidden]{display:none!important}
.band-ai-question{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#f0f3f9;border-radius:12px 12px 3px 12px;padding:14px 16px;font-size:12px;line-height:1.8}
.band-ai-question i{font-style:normal;color:#0d817e}
.band-ai-answer{padding:24px 0 12px}
.band-ai-answer strong{font-size:15px;color:#14364f}
.band-ai-answer p{font-size:11px;line-height:1.9;color:#718093;margin:8px 0}
.band-ai-chart{display:flex;align-items:flex-end;gap:12px;direction:ltr;padding:10px 0 0}
.band-ai-column{flex:1;min-width:0;text-align:center}
.band-ai-column>span{display:block;font-size:14px;font-weight:800;color:#1a435a;white-space:nowrap}
.band-ai-column>span small{font-size:8px;font-weight:400}
.band-ai-bar-track{height:125px;display:flex;align-items:flex-end;justify-content:center;margin:8px 0 10px;border-bottom:1px solid #e4eaf0;background:repeating-linear-gradient(to top,transparent 0,transparent 30px,#f0f3f6 31px,transparent 32px)}
.band-ai-bar-track i{height:var(--bar-height);width:65%;max-width:52px;display:block;background:linear-gradient(0deg,#18988c,#9ee2c9);border-radius:7px 7px 0 0}
.band-ai-column:nth-child(2) i{background:linear-gradient(0deg,#163d5a,#7eacc3)}
.band-ai-column:nth-child(3) i{background:linear-gradient(0deg,#7776b5,#c6c4ef)}
.band-ai-column>small{display:block;font-size:9px;color:#6a7b8e;line-height:1.6}
.band-ai-chart-foot{padding-top:18px;margin-top:18px;border-top:1px solid #edf1f4;color:#638175;font-size:10px}
.band-ai-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding:50px 10px}
.band-ai-feature-grid article{position:relative;padding-inline-start:46px}
.band-ai-feature-grid article>span{position:absolute;inset-inline-start:0;top:1px;color:#a2b4bd;font-size:13px;font-weight:700}
.band-ai-feature-grid h3{font-size:19px;margin:0 0 10px;color:var(--ai-ink)}
.band-ai-feature-grid p{font-size:12px;line-height:1.9;color:var(--ai-muted);margin:0}
.band-ai-provider-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;border-block:1px solid #e3e9ed;padding:24px 10px}
.band-ai-provider-strip strong{font-size:17px}
.band-ai-provider-strip p{font-size:12px;line-height:1.8;color:var(--ai-muted);margin:6px 0 0}
.band-ai-provider-names{display:flex;align-items:center;gap:22px;direction:ltr;font-size:17px;font-weight:700;color:#536479;flex-shrink:0}
.band-ai-bridge{text-align:center;padding:65px 10px 0}
.band-ai-bridge>span{font-size:10px;letter-spacing:1.4px;color:#0d817e;font-weight:700}
.band-ai-bridge h3{font-size:clamp(24px,3vw,38px);line-height:1.5;margin:14px 0 0;color:var(--ai-ink)}
.band-ai-showcase :is(button,a):focus-visible{outline:3px solid #0d817e;outline-offset:4px}
@media(max-width:850px){.band-ai-stage{grid-template-columns:1fr;gap:28px}.band-ai-stage-copy>p{max-width:none}.band-ai-stage-copy h3 br{display:none}.band-ai-choices{max-width:none;flex-direction:row}.band-ai-choices button{gap:12px;flex:1}.band-ai-sample-label{max-width:none}.band-ai-window{transform:none;max-width:620px;width:100%;margin:auto}.band-ai-feature-grid{gap:18px}.band-ai-provider-strip{flex-direction:column;align-items:flex-start}}
@media(max-width:540px){.band-ai-intro{padding:20px 0 32px}.band-ai-intro h2{font-size:32px;letter-spacing:-.6px}.band-ai-intro>p{font-size:14px}.band-ai-stage{padding:20px 14px;border-radius:20px}.band-ai-stage-copy h3{font-size:28px}.band-ai-choices{gap:5px}.band-ai-choices button{padding:11px 9px;font-size:11px}.band-ai-feature-grid{grid-template-columns:1fr;padding:32px 4px;gap:26px}.band-ai-window-head{padding:15px 12px}.band-ai-panels{padding:16px 12px}.band-ai-column>small{font-size:8px}.band-ai-chart{gap:7px}.band-ai-trust{font-size:10px}.band-ai-bridge{padding-top:42px}.band-ai-actions{gap:18px}.band-ai-provider-names{font-size:16px;gap:20px}}
@media(prefers-reduced-motion:reduce){.band-ai-showcase *{transition:none!important;scroll-behavior:auto!important}}


/* Unified business overview: aligned panels and a shared visual rhythm. */
.band-ai-bridge{padding:42px 10px 0}
.band-ai-bridge h3{font-size:clamp(25px,2.7vw,36px);line-height:1.5}
.band-ai-showcase{margin-bottom:28px}
.band-hero-layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:stretch;gap:24px;max-width:1280px;padding:24px;background:#fff;border:1px solid #e0e8ed;border-radius:30px;box-shadow:0 18px 55px -30px #16364e38;box-sizing:border-box}
.band-hero-layout>.band-story-content{margin:0;align-self:stretch;min-width:0;text-align:start}
.band-hero-layout .band-hero-copy{height:100%;display:flex;flex-direction:column;align-items:flex-start;padding:24px 18px;border:0;border-radius:18px;box-shadow:none;background:transparent;overflow:visible}
.band-hero-layout .band-hero-copy:before,.band-hero-layout .band-hero-copy:after{display:none}
.band-hero-layout .band-eyebrow{font-size:10px;margin:0 0 22px;box-shadow:none;background:#f0f7f5;color:#23645c;border-color:#dcebe6}
.band-hero-layout h1{font-size:clamp(30px,3.1vw,46px);line-height:1.4;letter-spacing:-.7px;margin:0 0 20px}
.band-hero-layout h1 em{color:#0d817e}
.band-hero-layout .band-value-pills{gap:7px;margin:0 0 22px}
.band-hero-layout .band-value-pills span{font-size:12px;padding:7px 12px}
.band-hero-layout .band-lead{font-size:15px;line-height:2;color:#52647a;margin:0 0 28px;max-width:520px}
.band-hero-layout .band-sectors-block{margin:0 0 28px;width:100%}
.band-hero-layout .band-sectors-label{font-size:12px;color:#64768a;margin-bottom:12px}
.band-hero-layout .band-sectors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0}
.band-hero-layout .band-sectors span{border-radius:10px;font-size:12px;line-height:1.6;padding:10px;background:#f6f8fa;border-color:#edf0f4;box-shadow:none;justify-content:flex-start}
.band-hero-layout .band-cta-card{margin: auto 0 0;width:100%;box-sizing:border-box;padding:22px 0 0;border:0;border-top:1px solid #e0e8ed;border-radius:0;box-shadow:none;background:transparent}
.band-hero-layout .band-cta-card-top{gap:12px;margin-bottom:18px}
.band-hero-layout .band-cta-card-icon{background:#173e53;box-shadow:none}
.band-hero-layout .band-cta-card-text strong{font-size:17px}
.band-hero-layout .band-cta-card-text p{font-size:13px}
.band-hero-layout .band-hero-actions{gap:10px;width:100%;display:grid;grid-template-columns:1fr 1fr;margin:0}
.band-hero-layout .band-team{justify-content:center;gap:10px;text-align:center;font-size:12px;line-height:1.7;padding:12px 10px;white-space:normal;margin:0;box-shadow:none;border-radius:10px}
.band-hero-layout .band-start{background:#0d817e;color:white}
.band-hero-layout .band-start:hover{background:#096967}
.band-hero-layout .band-reassurance{font-size:11px;margin:16px 0 0}
.band-hero-layout>.band-flow-explorer{box-sizing:border-box;max-width:none;margin:0;width:100%;align-self:stretch;padding:24px;border-radius:20px;box-shadow:none;display:flex;flex-direction:column}
.band-hero-layout .band-command-head{padding-bottom:16px}
.band-hero-layout .band-fc-heading{margin:16px 0 10px}
.band-hero-layout .band-fc-heading h2{font-size:25px;line-height:1.5}
.band-hero-layout .band-fc-controls{margin:12px 0 18px;flex-wrap:wrap}
.band-hero-layout .band-fc-caption{font-size:11px;margin-bottom:16px}
.band-hero-layout .band-fc-branch h3{font-size:12px}
.band-hero-layout .band-fc-branch li{font-size:11px;line-height:1.65}
.band-hero-layout .band-fc-note{font-size:11px;line-height:1.8;padding:10px}
.band-hero-layout .band-command-foot{margin-top:auto;padding-top:20px}
@media(max-width:1000px) and (min-width:851px){.band-hero-layout{gap:16px;padding:16px}.band-hero-layout .band-hero-copy{padding:18px 8px}.band-hero-layout>.band-flow-explorer{padding:18px}.band-hero-layout .band-hero-actions{grid-template-columns:1fr}.band-hero-layout .band-sectors{grid-template-columns:1fr 1fr}}
@media(max-width:850px){.band-hero-layout{grid-template-columns:1fr;gap:24px;padding:22px;max-width:700px}.band-hero-layout>.band-story-content{max-width:none;text-align:start}.band-hero-layout .band-hero-copy{height:auto;padding:8px}.band-hero-layout .band-hero-copy .band-eyebrow,.band-hero-layout .band-value-pills{margin-inline:0}.band-hero-layout .band-hero-actions{grid-template-columns:1fr 1fr}.band-hero-layout .band-cta-card{margin-top:0}.band-hero-layout>.band-flow-explorer{padding:24px}.band-hero-layout .band-sectors{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:540px){.band-hero-layout{padding:14px;gap:22px;border-radius:22px}.band-hero-layout .band-hero-copy{padding:10px 4px}.band-hero-layout h1{font-size:31px}.band-hero-layout .band-lead{font-size:14px}.band-hero-layout .band-sectors{grid-template-columns:repeat(2,minmax(0,1fr))}.band-hero-layout .band-sectors span{font-size:11px}.band-hero-layout>.band-flow-explorer{padding:16px;border-radius:16px}.band-hero-layout .band-fc-heading h2{font-size:23px}.band-hero-layout .band-hero-actions{grid-template-columns:1fr}.band-hero-layout .band-fc-branch li{font-size:10px}.band-hero-layout .band-fc-branch h3{font-size:11px}}


/* Benefit cards fill the overview column with real capabilities, not unmeasured statistics. */
.band-hero-layout .band-value-showcase{width:100%;margin:4px 0 26px;text-align:start}
.band-value-heading>span{color:#78889b;font-size:10px;font-weight:700;letter-spacing:1px}
.band-value-heading h2{font-size:clamp(21px,2vw,29px);line-height:1.55;color:#17344d;margin:8px 0 25px;letter-spacing:-.4px}
.band-value-heading h2 em{font-style:normal;color:#0d817e;text-decoration:underline;text-decoration-color:#9de6d2;text-decoration-thickness:5px;text-underline-offset:7px;text-decoration-skip-ink:none}
.band-value-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;padding-top:7px}
.band-value-card{position:relative;min-width:0;padding:17px 16px 15px;border:1px solid var(--value-border);border-radius:15px;background:linear-gradient(145deg,#fff 45%,var(--value-bg));box-shadow:0 7px 17px -12px #16364e30}
.band-value-tone-0{--value-color:#b43d58;--value-bg:#fff1f4;--value-border:#f2dce3;--value-icon:#ffd9e2}
.band-value-tone-1{--value-color:#197baf;--value-bg:#eff9ff;--value-border:#daebf7;--value-icon:#bdeaff}
.band-value-tone-2{--value-color:#7561b0;--value-bg:#f5f1ff;--value-border:#e7dff6;--value-icon:#e3d7ff}
.band-value-tone-3{--value-color:#148571;--value-bg:#edf9f4;--value-border:#d8eee5;--value-icon:#bcf1df}
.band-value-icon{position:absolute;inset-inline-end:14px;top:-14px;display:grid;place-items:center;width:38px;height:38px;font-size:26px;font-weight:800;color:#17344d;background:var(--value-icon);border:2px solid #17344d;border-radius:13px;transform:rotate(-9deg);box-shadow:3px 3px 0 var(--value-bg)}
.band-value-tag{display:inline-flex;align-items:center;font-size:10px;line-height:1.6;color:var(--value-color);border:1px solid var(--value-border);border-radius:20px;padding:3px 8px;background:#fff;margin-bottom:14px;max-width:calc(100% - 35px)}
.band-value-card h3{font-size:21px;line-height:1.5;font-weight:800;color:#17344d;margin:0 0 7px;letter-spacing:-.3px}
.band-value-card p{font-size:12px;line-height:1.85;color:#64748b;margin:0}
.band-value-invitation{font-size:12px;line-height:1.9;color:#65778a;margin:17px 0 0}
.band-hero-layout .band-cta-card{margin-top:0}
@media(max-width:540px){.band-value-card{padding:16px 12px 13px}.band-value-card h3{font-size:19px}.band-value-card p{font-size:11px}.band-value-cards{gap:22px 10px}.band-value-heading h2{font-size:23px}}
@media(max-width:360px){.band-value-cards{grid-template-columns:1fr}.band-value-tag{margin-bottom:8px}}


/* Marketing typography and focused account entry. */
.band-ai-intro{max-width:1050px;padding-top:30px;padding-bottom:42px}
.band-ai-intro h2{font-family:"Tajawal","Cairo",Tahoma,Arial,sans-serif;font-size:clamp(34px,4.3vw,60px);font-weight:700;line-height:1.6;letter-spacing:0;margin:18px 0 22px;text-wrap:balance}
.band-ai-intro h2 em{font-weight:700;color:#0b8582}
.band-ai-intro>p{max-width:820px;font-size:17px;line-height:2.05;color:#53677e;text-wrap:pretty}
.band-ai-intro>.band-ai-experience{font-size:14px;margin-top:12px;color:#718095}
.band-ai-highlight{display:flex;align-items:flex-start;gap:12px;text-align:start;max-width:750px;margin:24px auto 0;padding:18px 22px;background:linear-gradient(110deg,#e9f7f3,#edf4fb);border:1px solid #d9eae6;border-radius:16px}
.band-ai-highlight>span{font-size:26px;color:#0d817e;line-height:1.5}
.band-ai-highlight p{font-size:15px;line-height:1.95;color:#294e62;margin:0}
.band-auth-overlay{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:20px;background:#081d36ad;backdrop-filter:blur(8px);box-sizing:border-box}
body:has(.band-auth-overlay){overflow:hidden}
.band-auth-overlay .band-auth-popup{display:block;flex:0 1 640px;min-width:0;max-width:640px;box-sizing:border-box;background:#fff;width:100%;max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;padding:0;margin:0;border-radius:24px;border:1px solid #deebe9;box-shadow:0 25px 90px #0004;text-align:start}
.band-auth-popup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:26px 28px 18px;background:linear-gradient(120deg,#edf8f4,#f1f5fc);border-bottom:1px solid #e1eae9}
.band-auth-popup-head span{font-size:11px;letter-spacing:2px;color:#0d817e;font-weight:800}
.band-auth-popup-head h2{font-size:27px;margin:9px 0 5px;color:#153650;line-height:1.5}
.band-auth-popup-head p{font-size:13px;color:#677d91;margin:0;line-height:1.8}
#band-auth-close{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border:1px solid #d8e4e7;border-radius:50%;background:#fff;color:#23465f;font-size:25px;cursor:pointer}
.band-auth-popup .auth-card{width:100%;max-width:none;box-sizing:border-box;padding:24px 28px;margin:0;box-shadow:none;border:0;border-radius:0;background:#fff}
.band-auth-popup .auth-subtitle{display:none}
.band-auth-popup .auth-tabs{margin-top:0}
.band-auth-popup :is(button,input,select,a):focus-visible{outline:2px solid #0d817e;outline-offset:3px}
.band-page>.modal-overlay{z-index:200}
@media(max-width:540px){.band-ai-intro h2{font-size:34px;line-height:1.55}.band-ai-intro>p{font-size:15px}.band-ai-highlight{padding:15px;gap:9px}.band-ai-highlight p{font-size:13px}.band-auth-overlay{padding:10px}.band-auth-overlay .band-auth-popup{max-height:calc(100dvh - 20px);border-radius:18px}.band-auth-popup-head{padding:22px 20px 16px}.band-auth-popup .auth-card{padding:20px}.band-auth-popup-head h2{font-size:24px}}

.band-page{font-family:"Tajawal","Segoe UI",Tahoma,sans-serif}
.band-nav-login{border:0;background:transparent;color:#173e53;font:700 13px "Tajawal",Tahoma,sans-serif;cursor:pointer;padding:10px;white-space:nowrap}
.band-nav-login:hover{color:#0d817e}

/* Account dialog sizing must override the legacy section's flex:1. */
.band-auth-popup .form-label{font-size:14px;line-height:1.7;margin-bottom:6px}
.band-auth-popup .input,.band-auth-popup .select{font-family:inherit;font-size:16px;min-height:44px;padding:10px 12px}
.band-auth-popup .form-group{margin-bottom:13px;min-width:0}
.band-auth-popup .form-row{gap:14px}
.band-auth-popup .auth-tabs{margin-bottom:20px}
.band-auth-popup .auth-tabs button{font-family:inherit;font-size:14px;padding:10px 14px}
.band-auth-popup .auth-footer{font-size:13px;margin-top:16px}
.band-auth-popup-head{padding:20px 24px 16px}
.band-auth-popup-head h2{font-size:25px;margin:6px 0 4px}
.band-auth-popup .auth-card{padding:20px 24px}
.band-auth-popup .input:focus-visible,.band-auth-popup .select:focus-visible{outline:2px solid #0d817e;outline-offset:1px;box-shadow:none;border-color:transparent}
@media(max-width:540px){.band-auth-overlay .band-auth-popup{flex:0 1 100%;max-width:100%}.band-auth-popup .auth-card{padding:18px}.band-auth-popup-head{padding:18px}.band-auth-popup .form-row{display:grid;grid-template-columns:1fr;gap:0}.band-auth-popup .input,.band-auth-popup .select{font-size:16px}}

/* ===== UX review pass (Sep 2026) =====================================
   Additive overrides only -- nothing above was edited. */

/* Nav brand: the full logo carries a long Arabic slogan that shrank to an
   unreadable ~6px line at nav height. Mark + wordmark reads at any size and
   matches the BAND ERP wordmark already used across the page. */
.band-nav-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#142d50;flex-shrink:0}
.band-nav-mark{width:44px;height:44px;object-fit:contain}
.band-nav-wordmark{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:4px;line-height:1.1;direction:ltr}
.band-nav-wordmark>b{font-size:19px;font-weight:800;letter-spacing:1.5px;color:#142d50}
.band-nav-wordmark>span{font-size:19px;font-weight:500;letter-spacing:1px;color:#0d817e}
.band-nav-wordmark>small{grid-column:1/-1;font-size:10px;font-weight:600;color:#667085;letter-spacing:0;margin-top:3px;direction:rtl;text-align:start}
[dir=ltr] .band-nav-wordmark>small,.band-page:lang(en) .band-nav-wordmark>small{direction:ltr}
.band-nav-brand:hover .band-nav-wordmark>span{color:#1d4ed8}

/* Download (install app) button: clean line icon instead of the ⬇️ emoji. */
.band-nav-actions .band-download-btn{flex-direction:row;gap:6px;min-height:38px;padding:7px 11px;border-radius:9px}
.band-download-icon{width:17px;height:17px;flex-shrink:0}
.band-nav-actions .band-download-btn .auth-download-btn-label{font-size:12px;font-weight:600}

/* Connected-modules chart: items now open the same module-info modal as the
   grid below, so they need the same "this is clickable" affordance. */
.band-fc-branch li[data-module-key]{cursor:pointer;transition:background .15s,border-color .15s}
.band-fc-branch li[data-module-key]:hover,.band-fc-branch li[data-module-key]:focus-visible{background:#ffffff14;border-color:#8de0c866;outline:none}
.band-fc-branch li[data-module-key]:focus-visible{box-shadow:0 0 0 2px #8de0c8}

/* Footer: quick links (support / request status / terms were unreachable
   from the landing page). */
.band-footer{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr);gap:32px;padding:40px clamp(20px,5vw,88px) 32px;background:#0f2238;color:#c9d6e5}
.band-footer-brand>b{font-size:18px;font-weight:800;letter-spacing:2px;color:#fff}
.band-footer-brand>span{font-size:18px;font-weight:500;letter-spacing:1px;color:#8de0c8;margin-inline-start:4px}
.band-footer-brand p{margin:10px 0 0;font-size:13px;line-height:1.9;color:#9fb3c8;max-width:360px}
.band-footer-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.band-footer-links>div{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.band-footer-links strong{font-size:12px;font-weight:700;color:#fff;letter-spacing:.3px;margin-bottom:4px}
.band-footer-links button,.band-footer-links a{background:none;border:0;padding:2px 0;font-family:inherit;font-size:13px;font-weight:500;line-height:1.6;color:#c9d6e5;cursor:pointer;text-decoration:none;text-align:start}
.band-footer-links button:hover,.band-footer-links a:hover{color:#8de0c8}
.band-page .band-footer+.auth-copyright{background:#0b1a2c;color:#8499b0;border-top:1px solid #ffffff12}
@media(max-width:760px){.band-footer{grid-template-columns:1fr;gap:24px;padding:32px 20px 24px}.band-footer-links{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Mobile header: was three stacked rows (~180px) with a tiny logo. Now row
   one = brand + WhatsApp/install/language icons, row two = the two real
   calls to action side by side (try free / log in). */
@media(max-width:640px){
  .band-nav{flex-wrap:wrap;gap:10px 6px;min-height:0;padding:12px 16px}
  .band-nav-actions{display:contents}
  .band-nav-brand{order:1;gap:7px;margin-inline-end:auto}
  .band-nav-mark{width:34px;height:34px}
  .band-nav-wordmark>b,.band-nav-wordmark>span{font-size:15px}
  .band-nav-wordmark>small{display:none}
  .band-nav-actions .band-contact{order:2;padding:7px}
  .band-nav-actions .band-download-btn{order:3;padding:7px 9px;min-width:0}
  .band-nav-actions .band-download-btn .auth-download-btn-label{display:none}
  .band-nav-actions .lang-switch{order:4}
  .band-nav-promo{order:5;flex:1 1 55%;min-width:0;padding:0;border:0;margin:0}
  .band-nav-promo>div{display:none}
  .band-nav-trial{flex:1;justify-content:center;min-height:42px;font-size:13px}
  .band-nav-actions .band-nav-login{order:6;flex:1 1 30%;min-height:42px;border:1px solid #d5dde6;border-radius:9px;font-size:13px;padding:8px 10px}
}
@media(max-width:340px){.band-nav-wordmark>span{display:none}}

/* ===== Band brand on the other public screens ==========================
   Support request / request status / platform-admin login were still in
   the old dark-navy + orange Hala Fleet look with the system font, so the
   visitor "left" Band the moment they opened them. */
html[data-product="banderp"] .auth-page{background:radial-gradient(ellipse 700px 420px at 100% 0%,#0d817e14,transparent 60%),radial-gradient(ellipse 700px 420px at 0% 100%,#1d4ed812,transparent 60%),#f5f7fb;font-family:"Tajawal","Segoe UI",Tahoma,sans-serif}
html[data-product="banderp"] .auth-page .auth-card{border:1px solid #e0e8ed;box-shadow:0 24px 60px -30px #16364e40;border-radius:20px}
html[data-product="banderp"] .auth-page .auth-title{color:#142d50;font-weight:800}
html[data-product="banderp"] .auth-page :is(.input,.select,.btn,button,textarea){font-family:inherit}
html[data-product="banderp"] .auth-lang-switch{font-family:"Tajawal","Segoe UI",Tahoma,sans-serif}
html[data-product="banderp"] .auth-lang-switch .lang-switch{background:#fff;border:1px solid #e0e8ed}
html[data-product="banderp"] .auth-lang-switch .lang-switch button{color:#5f6d82}
html[data-product="banderp"] .auth-lang-switch .lang-switch button.active{background:#1d4ed8;color:#fff}
html[data-product="banderp"] .auth-lang-switch .auth-download-btn{background:#fff;color:#29456a;border:1px solid #e0e8ed}
html[data-product="banderp"] .auth-lang-switch .auth-download-btn:hover{background:#f3f5f9}
html[data-product="banderp"] .auth-page~.auth-copyright,html[data-product="banderp"] .auth-copyright{color:#68778d}

/* One typeface across marketing page and the app for Band. */
html[data-product="banderp"] body{font-family:"Tajawal","Segoe UI",Tahoma,"Cairo",system-ui,sans-serif}
html[data-product="banderp"] .auth-lang-switch .band-download-btn{flex-direction:row;gap:6px;padding:8px 11px;border-radius:10px}
html[data-product="banderp"] .auth-lang-switch .band-download-btn .auth-download-btn-label{font-size:12px;font-weight:600}
/* The fixed copyright line floated over form fields while scrolling on
   phones -- let it sit after the card instead. */
@media(max-width:640px){html[data-product="banderp"] .auth-page~.auth-copyright{position:static;padding:14px 16px 20px;background:#f5f7fb}html[data-product="banderp"] .auth-page{padding-bottom:24px}}


/* Public Band landing page: September 2026 editorial redesign. */
.band-page .band-nav{border-bottom:1px solid #e5ebe7;background:#fff;padding-block:18px}
.band-nav-promo .bv-nav-links{display:flex;gap:24px;align-items:center}
.bv-nav-links a{font-size:14px;font-weight:700;color:#304a50;text-decoration:none}
.bv-nav-links a:hover{color:#087e75}
.band-page .band-nav-trial{background:#123b40;border-radius:9px;box-shadow:none}
.band-story.band-v2{background:#fafbf8;padding:0;overflow:clip;color:#163c40;font-family:"Tajawal","Segoe UI",sans-serif}
.band-story.band-v2::before,.band-story.band-v2::after{display:none}
.band-v2 *, .band-v2 *::before,.band-v2 *::after{box-sizing:border-box}
.band-v2 :is(button,a){-webkit-tap-highlight-color:transparent}
.band-v2 :is(button,a,input):focus-visible,.bv-nav-links a:focus-visible{outline:3px solid #b3cd53;outline-offset:5px}
.band-v2 h1,.band-v2 h2,.band-v2 h3,.band-v2 p{margin:0}
.band-v2 h2{font-size:clamp(29px,3.1vw,43px);font-weight:800;line-height:1.35;letter-spacing:-.6px;color:#163c40}
.band-v2 h2 em{color:#098478;font-style:normal}
.bv-hero{max-width:1380px;margin:auto;padding:86px 5% 78px;display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;position:relative}
.bv-hero-copy{position:relative;z-index:1}
.bv-kicker{display:flex;align-items:center;gap:9px;color:#087a70;font-size:12px;font-weight:800;letter-spacing:.7px;margin-bottom:22px}
.bv-kicker i{width:7px;height:7px;border-radius:50%;background:#0d8d77;box-shadow:0 0 0 5px #0d8d7710}
.band-v2 .bv-hero h1{font-size:clamp(38px,4.15vw,59px);font-weight:800;line-height:1.32;letter-spacing:-1px;color:#133d40;margin:0 0 22px}
.band-v2 .bv-hero h1 em{font-style:normal;color:#0c877b}
.bv-hero-copy>p{font-size:17px;line-height:1.95;color:#597071;max-width:560px}
.bv-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px}
.bv-primary,.bv-secondary{display:inline-flex;gap:23px;align-items:center;justify-content:center;text-decoration:none;font:700 15px/1.6 "Tajawal",sans-serif;border-radius:9px;padding:14px 24px;cursor:pointer;transition:background .2s,transform .2s;border:1px solid transparent}
.bv-primary{color:white;background:#124b48;box-shadow:0 6px 16px #124b4814}
.bv-primary:hover{background:#087d70;transform:translateY(-2px)}
.bv-secondary{color:#244f4d;background:transparent;padding-inline:8px}
.bv-secondary:hover{color:#008577}
.bv-hero-note{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:#5e7373;margin-top:22px;line-height:1.8}
.bv-product{background:#fff;border:1px solid #dce7df;border-radius:18px;box-shadow:0 34px 65px -32px #183c4b4a;transform:rotate(-1.5deg);position:relative;min-width:0}
.bv-product::before{content:"";position:absolute;inset:-24px;z-index:-1;background:radial-gradient(ellipse,#dbe8b9aa,transparent 70%)}
.bv-product-top{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #e9eeea;gap:10px}
.bv-product-top>b{letter-spacing:1px;font-size:14px}.bv-product-top>b span{font-weight:400;color:#0b897b}
.bv-demo-label{color:#6d7b76;font-size:10px;background:#f2f5ef;border-radius:5px;padding:4px 7px}
.bv-product-top>i{font-style:normal;letter-spacing:3px;color:#91a49a}
.bv-product-body{display:flex}.bv-mini-nav{padding:24px 12px;border-inline-end:1px solid #edf1ec;display:flex;flex-direction:column;gap:15px;background:#fcfdfb;border-radius:0 0 14px 0}
.bv-mini-nav span{display:grid;place-items:center;width:30px;height:32px;color:#92a49b;font-size:22px}.bv-mini-nav .bv-mini-active{background:#e8f1e6;border-radius:7px;color:#27766c}
.bv-product-main{flex:1;min-width:0;padding:26px 24px}.bv-small{color:#798c81;font-size:11px}
.band-v2 .bv-product h2{font-size:28px;line-height:1.4;margin:8px 0 24px;letter-spacing:0}
.bv-process{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;padding:15px 10px;border:1px solid #e1e9df;background:#f7f9f4;border-radius:10px}
.bv-process>span{display:flex;flex-direction:column;align-items:center;gap:7px}.bv-process i{font:700 11px/1 monospace;display:grid;place-items:center;width:25px;height:25px;background:white;border:1px solid #d6e3d3;border-radius:50%;color:#458779;font-style:normal}.bv-process>b{color:#8d9b91}.band-v2[dir=ltr] .bv-process>b{transform:rotate(180deg)}
.bv-mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:15px 0}.bv-mini-grid>div{border:1px solid #e7ede4;border-radius:8px;padding:12px 8px;display:flex;flex-direction:column;gap:5px}.bv-mini-grid i{font-style:normal;color:#0b897b;font-size:20px}.bv-mini-grid strong{font-size:12px}.bv-mini-grid small{font-size:9px;color:#839085}
.bv-ai-prompt{display:flex;gap:12px;align-items:center;background:#173f43;color:white;border-radius:10px;padding:15px 12px}.bv-ai-prompt>span{color:#d6ec8a;font-size:26px}.bv-ai-prompt b{font-size:13px}.bv-ai-prompt small{display:block;font-size:9px;color:#b7d1c9;margin-top:5px;line-height:1.7}.bv-ai-prompt>a{color:#d6ec8a;font-size:21px;margin-inline-start:auto;min-width:30px;min-height:32px;text-align:center}
.bv-product-foot{display:flex;justify-content:space-between;gap:8px;font-size:9px;padding:12px 22px;color:#799087;background:#fafcf9;border-radius:0 0 18px 18px;border-top:1px solid #edf1e9}.bv-product-foot i{display:inline-block;width:5px;height:5px;background:#40a582;border-radius:50%;margin-inline-end:6px}
.bv-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 5%;max-width:1380px;margin:auto;border-block:1px solid #e0e8df;color:#657770;font-size:14px}.bv-strip p{font-size:13px;line-height:1.8}.bv-strip strong{font-size:17px;color:#1b4842}.bv-strip>span{font-weight:700;text-align:center}
.bv-section{max-width:1380px;margin:auto;padding:82px 5%}.bv-section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:34px}.bv-section-head>p{max-width:410px;color:#61736d;font-size:16px;line-height:1.9}.bv-section-head .bv-kicker{margin-bottom:13px}
.bv-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}.bv-filters button{border:1px solid #dce5da;border-radius:7px;padding:10px 17px;background:transparent;color:#617569;font-family:inherit;font-size:13px;cursor:pointer;min-height:42px}.bv-filters button[aria-pressed=true]{background:#164744;border-color:#164744;color:#fff}
.band-v2 .bv-modules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.band-v2 .bv-module{display:grid;grid-template-columns:40px 1fr 18px;align-items:center;gap:12px;position:relative;background:#fff;border:1px solid #e0e7dc;border-radius:10px;padding:23px 18px;min-height:94px;text-align:start;box-shadow:none;cursor:pointer;transition:border-color .2s,transform .2s}
.band-v2 .bv-module[hidden]{display:none}.band-v2 .bv-module:hover{transform:translateY(-3px);border-color:#469f8b;background:#fff}.band-v2 .bv-module .band-module-icon{width:40px;height:40px;display:grid;place-items:center;background:#f3f6ef;box-shadow:none;border:0;border-radius:9px;font-size:21px;margin:0}.band-v2 .bv-module strong{font:700 13px/1.7 "Tajawal",sans-serif;color:#25463e;margin:0}.bv-module-arrow{color:#6f8d7c;font-size:18px}.bv-module-number{position:absolute;top:5px;inset-inline-end:11px;font:9px monospace;color:#a0afa4}
.band-v2 .band-ai-showcase{margin:0;padding:72px 5%;background:#eef3ec;max-width:none;border-block:1px solid #e2e9df}
.band-v2 .band-ai-intro{max-width:680px;padding:0;margin:0 auto 40px;text-align:center}.band-v2 .band-ai-intro h2{font-size:clamp(30px,3.4vw,46px);line-height:1.35;margin:14px 0 16px;color:#163c40}.band-v2 .band-ai-intro h2 em{color:#087e73}.band-v2 .band-ai-intro>p{font-size:16px;line-height:1.9;color:#5e776b;margin:0}
.band-v2 .band-ai-stage{max-width:1180px;margin:auto;border:0;background:none;box-shadow:none;border-radius:0;gap:6%;padding:0;align-items:center;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.band-v2 .band-ai-stage-copy h3{font-size:31px;line-height:1.4;margin:15px 0}.band-v2 .band-ai-stage-copy>p{font-size:15px;line-height:1.9}.band-v2 .band-ai-choices{gap:8px}.band-v2 .band-ai-choices button{padding:13px 12px;border-radius:9px;font-size:13px;min-height:44px}.band-v2 .band-ai-window{border:1px solid #d4e3d7;box-shadow:0 22px 45px -25px #274f4255;border-radius:17px}.band-v2 .band-ai-window-head{padding:18px 22px}.band-v2 .band-ai-panels{padding:22px}.band-v2 .band-ai-avatar{background:#164744}.band-v2 .band-ai-question{font-size:14px;border-radius:8px;padding:14px}.band-v2 .band-ai-answer>strong{font-size:20px}.band-v2 .band-ai-answer>p{font-size:13px}.band-v2 .band-ai-bar-track{height:112px}.band-v2 .band-ai-feature-grid{max-width:1180px;margin:35px auto 0;gap:24px}.band-v2 .band-ai-feature-grid article{background:transparent;border:0;border-top:1px solid #ceddcf;padding:20px 0;border-radius:0}.band-v2 .band-ai-feature-grid h3{font-size:18px}.band-v2 .band-ai-feature-grid p{font-size:14px;line-height:1.9}
.bv-connected{display:grid;grid-template-columns:.85fr 1.15fr;gap:7%;align-items:start}.bv-connect-copy{position:sticky;top:30px;padding-top:25px}.bv-connect-copy p{color:#61766b;line-height:1.9;font-size:16px;margin:22px 0}.bv-connect-copy ul{padding-inline-start:22px;margin-bottom:24px;color:#346150;line-height:2.4;font-size:15px}.band-v2 .band-flow-explorer{width:100%;min-width:0;margin:0;border-radius:16px;box-shadow:none;padding:26px;align-self:start;background:linear-gradient(140deg,#183a41,#10282d);border-color:#234951}.band-v2 .band-fc-heading h2{font-size:25px;color:white}.band-v2 .band-command-head{padding-bottom:16px}.band-v2 .band-fc-body{font-size:12px}.band-v2 .band-fc-branch li{font-size:11px}.band-v2 .band-fc-root{padding:12px}.band-v2 .band-command-foot{margin-top:15px}
.bv-start{border-top:1px solid #e1e8dd}.bv-start-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.bv-start-grid article{padding:10px 0 0;border-top:1px solid #cfdcc9}.bv-start-grid article>span{font:400 42px/1.8 Georgia,serif;color:#b3c49f}.bv-start-grid h3{font-size:24px;margin:4px 0 12px}.bv-start-grid p{font-size:15px;line-height:1.9;color:#63766a}
.bv-final{margin:0 5% 70px;padding:50px 6%;border-radius:18px;display:flex;justify-content:space-between;align-items:center;gap:35px;background:#dfeaaf;background-image:radial-gradient(circle at 0% 100%,#bacd7955,transparent 50%)}.bv-final .bv-kicker{margin-bottom:14px;color:#507349}.bv-final h2{font-size:clamp(32px,3.5vw,48px)}.bv-final p{margin-top:17px;font-size:15px;line-height:1.9;color:#526c46}.bv-final-actions{display:flex;flex-direction:column;gap:18px;flex-shrink:0;text-align:center}.bv-final-actions>a{font-size:14px;font-weight:700;color:#325644}
@media(min-width:1450px){.bv-final{max-width:1240px;margin-inline:auto}}
@media(max-width:1100px){.bv-nav-links{display:none!important}.bv-hero{gap:4%;padding-top:65px}.band-v2 .bv-modules{grid-template-columns:repeat(3,minmax(0,1fr))}.bv-product-main{padding:22px 16px}.bv-mini-nav{padding-inline:8px}.bv-connected{gap:4%}.band-v2 .band-flow-explorer{padding:20px}}
@media(max-width:800px){.bv-hero{grid-template-columns:1fr;padding:45px 6% 45px;gap:40px}.bv-hero-copy{max-width:600px}.band-v2 .bv-hero h1{font-size:clamp(37px,6vw,54px)}.bv-product{width:100%;max-width:570px;margin:auto;transform:none}.bv-strip{flex-wrap:wrap;gap:20px;justify-content:center}.bv-strip p{width:100%;text-align:center}.bv-strip>span{font-size:12px}.bv-section{padding:55px 6%}.bv-section-head{display:block}.bv-section-head>p{margin-top:20px}.band-v2 .band-ai-showcase{padding:50px 6%}.band-v2 .band-ai-stage{grid-template-columns:1fr;gap:26px}.band-v2 .band-ai-stage-copy{max-width:600px}.band-v2 .band-ai-stage-copy h3{font-size:28px}.bv-connected{grid-template-columns:1fr;gap:30px}.bv-connect-copy{position:static;padding:0}.bv-final{margin:0 6% 45px;padding:35px 25px;flex-direction:column;align-items:start}.bv-final-actions{width:100%;align-items:stretch}.bv-start-grid{gap:20px}.band-v2 .band-ai-feature-grid{gap:15px}}
@media(max-width:540px){.band-page .band-nav{padding-block:12px}.bv-hero-copy>p{font-size:16px}.bv-kicker{font-size:11px;margin-bottom:18px}.bv-actions{gap:10px}.bv-primary{padding:13px 19px;font-size:14px}.bv-secondary{font-size:14px}.bv-hero-note{font-size:11px;gap:10px}.bv-product-main{padding:19px 12px}.bv-mini-nav{display:none}.band-v2 .bv-product h2{font-size:26px}.bv-product-top{padding:15px}.bv-mini-grid small{font-size:10px}.bv-product-foot{padding:12px 15px}.band-v2 .bv-modules{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.band-v2 .bv-module{grid-template-columns:1fr;padding:17px 13px;gap:8px;min-height:120px}.bv-module-arrow{position:absolute;inset-inline-end:12px;bottom:16px}.band-v2 .bv-module strong{padding-inline-end:15px;font-size:13px}.bv-filters{gap:6px}.bv-filters button{padding:8px 12px;font-size:12px}.band-v2 .band-ai-intro{margin-bottom:28px}.band-v2 .band-ai-stage-copy>p{font-size:14px}.band-v2 .band-ai-panels{padding:16px}.band-v2 .band-ai-window-head{padding:15px}.band-v2 .band-ai-feature-grid{grid-template-columns:1fr;gap:10px}.band-v2 .band-ai-chart{gap:8px}.band-v2 .band-ai-column>span{font-size:21px}.band-v2 .band-ai-column>small{font-size:10px}.band-v2 .band-flow-explorer{padding:17px}.band-v2 .band-fc-branch li{font-size:10px}.bv-start-grid{grid-template-columns:1fr}.bv-start-grid article{display:grid;grid-template-columns:50px 1fr;gap:0 16px}.bv-start-grid article>span{grid-row:1/3}.bv-start-grid h3{font-size:21px}.bv-final h2{font-size:33px}}
@media(prefers-reduced-motion:reduce){.band-v2 *{scroll-behavior:auto!important;transition:none!important;animation:none!important}}