/* ══════════════════════════════════════════════════
   AfricanLaw — New UI Design System (Milestone 1)
   Shared header/footer/button/dropdown styling.
   Scoped under .site-nav / .site-footer / .site-* classes
   so it does not affect pages/components outside Milestone 1
   (the existing site reuses bare <nav>/<footer> tags elsewhere
   for unrelated dropdowns, so bare-tag selectors are avoided).
   Theme: reuses the existing html.dark-mode / html.light-mode
   toggle already wired in front/blocks/header.blade.php.
══════════════════════════════════════════════════ */

:root{
  --al-navy:#081420;--al-navy2:#0d1f30;--al-navy3:#112436;
  --al-orange:#E24412;--al-orange2:#c93c0f;
  --al-white:#fff;--al-w80:rgba(255,255,255,.80);--al-w55:rgba(255,255,255,.55);
  --al-w30:rgba(255,255,255,.30);--al-w12:rgba(255,255,255,.12);--al-w07:rgba(255,255,255,.07);
  --al-card-bg:rgba(255,255,255,.05);--al-card-border:rgba(255,255,255,.10);
  --al-green:#3dd68c;--al-blue:#7eb8f7;--al-amber:#E2A012;
}

html.light-mode{
  --al-navy:#f4f6f8;--al-navy2:#ffffff;--al-navy3:#eef1f4;
  --al-white:#0f1c28;--al-w80:rgba(15,28,40,.80);--al-w55:rgba(15,28,40,.55);
  --al-w30:rgba(15,28,40,.30);--al-w12:rgba(15,28,40,.10);--al-w07:rgba(15,28,40,.05);
  --al-card-bg:rgba(0,0,0,.03);--al-card-border:rgba(0,0,0,.08);
}

/* Base typography only (not background/color — those stay page-defined to avoid
   a wholesale reskin of pages outside Milestone 1). webflow.css sets body to Arial;
   this brings the new design's Montserrat in as the sitewide default typeface, which
   already-styled elements on other pages override locally as before. */
body{font-family:'Montserrat',sans-serif;}

/* ── Buttons: one shared base + two color modifiers, composed by every
   button variant in the design (nav pills and page-body CTAs alike).
   Values matched exactly to `.btn-ghost`/`.btn-primary` (nav) and
   `.cta-demo`/`.cta-main` (page body) in the reference HTML — both use the
   same 4px radius / uppercase-on-primary / letter-spacing system, differing
   only in padding, which stays per-context. `.ui-btn`/`.ui-btn-primary`/
   `.ui-btn-ghost` are the reusable names for markup written from here on. ─── */
.ui-btn,.site-btn-primary,.site-btn-ghost,.cta-main,.cta-demo,.pricing-cta{
  font-family:'Montserrat',sans-serif;font-weight:600;
  border-radius:4px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;
  text-decoration:none;transition:background .2s,border-color .2s,color .2s;
}
.ui-btn,.site-btn-primary,.site-btn-ghost{font-size:12px;letter-spacing:.08em;padding:9px 18px;}
.ui-btn-primary,.site-btn-primary,.cta-main,.pricing-cta-main{
  background:var(--al-orange);color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
}
.ui-btn-primary:hover,.site-btn-primary:hover,.cta-main:hover,.pricing-cta-main:hover{background:var(--al-orange2);color:#fff;}
.ui-btn-ghost,.site-btn-ghost,.cta-demo,.pricing-cta-ghost{background:transparent;color:var(--al-w80);border-color:var(--al-w30);}
html.light-mode .site-btn-ghost,html.light-mode .ui-btn-ghost{color:#0f1c28;border-color:rgba(15,28,40,.25);}
.ui-btn-ghost:hover,.site-btn-ghost:hover,.cta-demo:hover,.pricing-cta-ghost:hover{border-color:var(--al-w55);color:var(--al-white);}
html.light-mode .site-btn-ghost:hover,html.light-mode .ui-btn-ghost:hover{border-color:rgba(15,28,40,.5);color:#0f1c28;}

/* ── Nav ─────────────────────────────────────────── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:0 56px;height:66px;background:rgba(8,20,32,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--al-w12);font-family:'Montserrat',sans-serif;
}
html.light-mode .site-nav{background:rgba(244,246,248,.94);border-bottom-color:rgba(15,28,40,.10);}
/* nav is fixed (removed from flow) — reserve the same space at the top of the page */
.wrapper{padding-top:66px;}

.site-nav-logo{display:flex;align-items:center;flex-shrink:0;}
.site-nav-logo-img{height:115px;width:auto;display:block;}
.site-nav-logo.dark-mode-main-icon{display:none;}
html:not(.light-mode) .site-nav-logo.dark-mode-main-icon{display:flex;}
html:not(.light-mode) .site-nav-logo.light-mode-main-icon{display:none;}
html.light-mode .site-nav-logo.light-mode-main-icon{display:flex;}

.site-nav-links{display:flex;align-items:center;gap:30px;flex:1;justify-content:center;}
.site-nav-links a,.site-nav-dropdown-label{
  font-size:13px;font-weight:500;color:var(--al-w55);letter-spacing:.02em;cursor:pointer;background:none;border:none;
  font-family:inherit;text-decoration:none;padding:0;display:inline-flex;align-items:center;gap:5px;
}
.site-nav-links a:hover,.site-nav-dropdown-label:hover{color:var(--al-white);}
.site-nav-links a.site-nav-active{color:var(--al-orange);}
.site-nav-dropdown-label::after{content:'▾';font-size:10px;}
html.light-mode .site-nav-links a,html.light-mode .site-nav-dropdown-label{color:rgba(15,28,40,.55);}
html.light-mode .site-nav-links a:hover,html.light-mode .site-nav-dropdown-label:hover{color:#0f1c28;}
html.light-mode .site-nav-links a.site-nav-active{color:var(--al-orange);}

.site-nav-dropdown{position:relative;}
.site-nav-dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  background:var(--al-navy2);border:1px solid var(--al-card-border);border-radius:10px;
  min-width:190px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .15s,transform .15s,visibility .15s;
}
.site-nav-dropdown:hover .site-nav-dropdown-menu,
.site-nav-dropdown.site-open .site-nav-dropdown-menu{
  opacity:1;visibility:visible;transform:translate(-50%,0);
}
.site-nav-dropdown-menu a{
  display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:6px;font-size:13px;color:var(--al-w80);
}
.site-nav-dropdown-menu a svg{flex-shrink:0;}
.site-nav-dropdown-menu a:hover{background:var(--al-w07);color:var(--al-white);}

.site-nav-ctas{display:flex;align-items:center;gap:12px;flex-shrink:0;}

/* Audience segmented control — matches .audience-toggle/.aud-btn exactly */
.site-audience-toggle{display:flex;background:var(--al-w07);border:1px solid var(--al-w12);border-radius:4px;overflow:hidden;}
html.light-mode .site-audience-toggle{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.10);}
.site-aud-btn{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:8px 14px;
  cursor:pointer;color:var(--al-w55);text-decoration:none;transition:all .2s;
}
html.light-mode .site-aud-btn{color:rgba(15,28,40,.50);}
.site-aud-btn.site-active{background:var(--al-orange);color:#fff;}

.site-theme-toggle{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--al-w12);background:transparent;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.site-theme-toggle img{width:18px;height:18px;}
/* The icons' visibility is normally set by JS in header.blade.php, but that
   script sits in @push('js') and only runs once everything else at the bottom
   of the page has loaded — so on first paint (and especially on a full page
   reload like a filter/search submit) both icons render at once until the
   script finally executes. html.dark-mode/light-mode is set synchronously in
   <head> before the body ever paints (see main.blade.php), so driving
   visibility from that class here removes the flash entirely; the JS's own
   style.display toggle still runs afterwards and is harmless/redundant. */
html.dark-mode #light_mode_icon,html.light-mode #dark_mode_icon{display:none;}

/* Cart (existing functional markup — visuals only) */
.cart-wrapper{position:relative;display:flex;align-items:center;}
.cart-icon-section{position:relative;width:36px;height:36px;border-radius:50%;border:1px solid var(--al-w12);
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.cart-icon-section .cart-icon{width:16px;height:16px;}
.cart-count{position:absolute;top:-6px;right:-6px;background:var(--al-orange);color:#fff;font-size:10px;
  font-weight:700;min-width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 3px;}
.cart-dropdown-menu{display:none;position:absolute;top:calc(100% + 12px);right:0;width:280px;max-height:360px;
  overflow-y:auto;background:var(--al-navy2);border:1px solid var(--al-card-border);border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:130;}
.cart-dropdown-menu.show-cart-dropdown-menu{display:block;}
.cart-dropdown-data{list-style:none;margin:0;padding:8px;font-size:12.5px;color:var(--al-w80);}
.cart-dropdown-data .empty{padding:14px;text-align:center;color:var(--al-w55);}
.cart-view-all-button{display:block;text-align:center;padding:10px;font-size:12px;font-weight:600;
  color:var(--al-orange);border-top:1px solid var(--al-card-border);}

/* Burger (custom toggle, replaces removed Webflow interaction) */
.site-burger{display:none;width:36px;height:36px;border:none;background:transparent;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;flex-shrink:0;}
.site-burger span{display:block;width:20px;height:2px;background:var(--al-white);transition:transform .2s,opacity .2s;}
.site-mobile-menu.site-open ~ .site-nav .site-burger span:nth-child(1),
.site-nav .site-burger.site-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-nav .site-burger.site-active span:nth-child(2){opacity:0;}
.site-nav .site-burger.site-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Ask-a-lawyer / Request for Proposal overlay (.find-a-lawyer, existing real
   functionality) previously opened only via a Webflow IX2 interaction bound to
   one specific Home-page button — unusable from the nav, which renders on every
   page. `.site-open` (toggled by openRequestProposal()/closeRequestProposal()
   in header.blade.php) drives the same visible state directly, independent of
   Webflow, so the nav's "Request a Proposal" button works on every page and the
   Home hero's trigger stays consistent with it. */
.find-a-lawyer.site-open{opacity:1 !important;transform:none !important;-webkit-transform:none !important;}
.find-a-lawyer.site-open .find-a-lawyer-container{opacity:1 !important;transform:none !important;-webkit-transform:none !important;}
.find-a-lawyer.site-open .close-find-a-lawyer{opacity:1 !important;}

/* ── Mobile nav panel ────────────────────────────── */
.site-mobile-menu{
  display:none;position:fixed;inset:0;z-index:150;background:var(--al-navy);
  overflow-y:auto;padding:24px;
}
.site-mobile-menu.site-open{display:block;}
.site-mobile-menu-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;}
.site-mobile-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--al-w12);background:transparent;
  color:var(--al-white);font-size:16px;cursor:pointer;}
.site-mobile-links{list-style:none;margin:0 0 20px;padding:0;}
.site-mobile-links li{border-bottom:1px solid var(--al-w07);}
.site-mobile-links a{display:block;padding:14px 4px;font-size:15px;color:var(--al-w80);text-decoration:none;}
.site-mobile-links a.site-nav-active{color:var(--al-orange);}
.site-mobile-ctas{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.site-mobile-ctas .site-btn-primary,.site-mobile-ctas .site-btn-ghost{justify-content:center;width:100%;}
.site-mobile-socials{display:flex;gap:12px;margin-top:28px;}
.site-mobile-socials a{width:34px;height:34px;border-radius:50%;background:var(--al-w07);
  display:flex;align-items:center;justify-content:center;}
.site-mobile-socials img{width:16px;height:16px;}

@media (max-width:960px){
  .site-nav{padding:0 20px;}
  .site-nav-links{display:none;}
  .site-nav-ctas .site-btn-ghost,.site-nav-ctas .site-btn-primary,.site-nav-ctas .site-audience-toggle{display:none;}
  .site-burger{display:flex;}
}

/* ── Footer ──────────────────────────────────────── */
.site-footer{
  /* !important: the legacy `.footer-main` class (kept alongside `.site-footer`
     for out-of-scope pages' scroll JS — see comment on the element) carries its
     own theme-flipping `background-color:var(--rich-black)` rule from an inline
     <style> block later in <head> than this file, which otherwise wins the tie. */
  background:rgba(0,0,0,.28) !important;border-top:1px solid var(--al-w07);
  font-family:'Montserrat',sans-serif;padding:64px 80px 40px;
}
/* Reference sets a much lighter footer overlay in light mode
   (html[data-theme="light"] footer{background:rgba(0,0,0,.04)}) — this was
   missing, so the footer stayed at the dark-mode .28 alpha value in light
   mode too, reading as a noticeably darker band than the reference. */
html.light-mode .site-footer{background:rgba(0,0,0,.04) !important;border-top-color:rgba(0,0,0,.08);}
.site-footer-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;
  padding-bottom:0;border-bottom:none;margin-bottom:52px;
}
.site-footer-logo{font-size:24px;font-weight:800;color:var(--al-white);margin-bottom:16px;}
.site-footer-logo span:first-child{color:rgba(200,213,224,.85);}
.site-footer-logo span:last-child{color:var(--al-orange);}
html.light-mode .site-footer-logo span:first-child{color:#0f1c28;}
.site-footer-tagline{font-size:12px;color:var(--al-w55);line-height:1.75;max-width:260px;margin-bottom:24px;}
html.light-mode .site-footer-tagline{color:rgba(15,28,40,.45);}
.site-footer-socials{display:flex;gap:10px;}
.site-footer-socials a{width:34px;height:34px;border-radius:50%;background:transparent;border:1px solid var(--al-w12);
  display:flex;align-items:center;justify-content:center;transition:border-color .2s;}
.site-footer-socials a:hover{border-color:var(--al-orange);}
html.light-mode .site-footer-socials a{border-color:rgba(0,0,0,.15);}
.site-footer-socials img{width:15px;height:15px;}

/* Social icon glyphs are two-tone (dark navy on white); swap to the
   pre-existing white "-w" variant in dark mode so they stay visible
   against the dark circle backdrop. */
html.light-mode .icon-for-dark{display:none;}
html:not(.light-mode) .icon-for-light{display:none;}
.site-footer-col-title{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--al-white);margin-bottom:20px;}
html.light-mode .site-footer-col-title{color:#0f1c28;}
.site-footer-links{list-style:none;margin:0;padding:0;}
.site-footer-links li{margin-bottom:10px;}
.site-footer-links a{font-size:12px;color:var(--al-w55);text-decoration:none;transition:color .2s;}
.site-footer-links a:hover{color:var(--al-white);}
.site-footer-contact-block{margin-top:24px;font-size:11px;}
.site-footer-contact-line{font-size:11px;color:var(--al-w55);margin-top:4px;}
.site-footer-contact-line:first-child{margin-top:0;}
.site-footer-contact-icon{display:flex;align-items:center;gap:5px;}
.site-footer-contact-icon svg{flex-shrink:0;}
.site-footer-contact-location{color:var(--al-w30);margin-top:8px;}
.site-footer-bottom{
  padding-top:32px;border-top:1px solid var(--al-w07);display:flex;align-items:center;
  justify-content:space-between;flex-wrap:wrap;gap:12px;
}
html.light-mode .site-footer-bottom{border-top-color:rgba(0,0,0,.08);}
.site-footer-copy{font-size:11px;color:var(--al-w30);}
.site-footer-legal{display:flex;gap:20px;list-style:none;margin:0;padding:0;}
.site-footer-legal a{font-size:11px;color:var(--al-w30);text-decoration:none;transition:color .2s;}
.site-footer-legal a:hover{color:var(--al-w55);}

@media (max-width:900px){
  .site-footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .site-footer{padding:44px 20px 30px;}
  .site-footer-top{grid-template-columns:1fr;}
  .site-footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* ══════════════════════════════════════════════════
   Home page — shared marketing components
   (used by both the Client and Lawyer Home variants;
   class names match the new design 1:1, none collide
   with existing front-end markup — verified by grep.)
══════════════════════════════════════════════════ */

.wrap{max-width:none;margin:0;padding:0 80px;}
.pad{padding:84px 0;}
.sect-alt{background:rgba(255,255,255,.02);border-top:1px solid var(--al-w07);border-bottom:1px solid var(--al-w07);}
html.light-mode .sect-alt{background:rgba(0,0,0,.015);}
.section-header{margin-bottom:48px;}
.section-label{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--al-orange);margin-bottom:12px;}
.section-h2{font-family:'EB Garamond',Georgia,serif;font-size:clamp(28px,4vw,40px);font-weight:600;color:var(--al-white);line-height:1.2;margin-bottom:14px;}
.section-sub{font-size:14px;color:var(--al-w55);max-width:560px;line-height:1.75;}
.section-header-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;}

/* Base + hover declarations for .cta-main/.cta-demo/.pricing-cta live in the
   shared .ui-btn rule above; this just sets their larger page-body padding/gap. */
.cta-main,.cta-demo,.pricing-cta{padding:13px 24px;gap:8px;}

/* Hero — reference has no max-width cap on .hero-inner (it's edge-to-edge,
   just padded), so the section fills the viewport width like every other
   section rather than floating in a fixed-width centered column. */
.hero{position:relative;padding:64px 0 60px;overflow:hidden;}
.hero-network{position:absolute;inset:0;width:100%;height:100%;opacity:.5;pointer-events:none;}
.hero-glow{position:absolute;top:-20%;right:-10%;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(226,68,18,.18),transparent 70%);pointer-events:none;}
.hero-inner{position:relative;padding:0 80px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
/* Lawyer hero has no dashboard mockup — reference uses a single left-anchored
   column (max-width:780px), not the two-column centered grid the Client hero
   uses, so it needs its own layout rather than sharing .hero-inner's grid. */
.hero-inner.hero-inner--lawyer{display:block;max-width:780px;margin:0;text-align:left;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;
  color:var(--al-orange);text-transform:uppercase;letter-spacing:.2em;margin-bottom:28px;white-space:nowrap;
  background:rgba(226,68,18,.10);border:1px solid rgba(226,68,18,.25);padding:6px 14px;border-radius:3px;}
.hero-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--al-orange);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
/* Client reference uses a fixed 52px .hero-h1 with no responsive scaling at all;
   clamp() reproduces that exact value at desktop widths while staying safe on
   narrow viewports the static reference was never tested against. */
.hero-h1{font-family:'EB Garamond',Georgia,serif;font-size:clamp(32px,4.5vw,52px);font-weight:600;
  line-height:1.15;color:var(--al-white);margin-bottom:22px;}
.hero-h1 em{color:var(--al-orange);font-style:italic;}
/* Lawyer reference specifies its own clamp() formula for .hero-h1 (different
   font-size/line-height/margin from Client) — kept as a page-specific override
   rather than forcing one shared value across both hero variants. */
.hero-inner--lawyer .hero-h1{font-size:clamp(36px,5.6vw,56px);line-height:1.12;margin-bottom:20px;}
.hero-sub{font-size:15px;color:var(--al-w55);line-height:1.75;max-width:520px;margin-bottom:30px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px;}
.hero-social-proof{display:flex;align-items:center;gap:18px;padding-top:26px;border-top:1px solid var(--al-w12);flex-wrap:wrap;}
.sp-stat{display:flex;flex-direction:column;}
.sp-val{font-size:22px;font-weight:800;color:var(--al-orange);}
.sp-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w55);margin-top:3px;}
.sp-div{width:1px;height:28px;background:var(--al-w12);}

/* Platform Showcase mockup (illustrative product snapshot — static, not live data).
   Follows the page's own light/dark theme like every other card (same pattern as
   the hero dashboard-frame), so every layer here uses theme-flip tokens, not
   fixed colors. */
.platform-screens{position:relative;height:420px;}
.screen-main{position:absolute;top:0;left:0;right:60px;background:var(--al-navy2);border:1px solid var(--al-w12);
  border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);}
/* bottom:-50px (vs. the reference's literal -20px) keeps the layered second-screen
   effect while landing the overlap on the table's empty margin instead of across
   the Status column/last row — the reference's own smaller admin-stats content
   made -20px work there, but ours renders slightly taller. */
.screen-overlay{position:absolute;bottom:-100px;right:0;width:65%;background:var(--al-navy3);border:1px solid var(--al-w12);
  border-radius:10px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3);}
.screen-topbar{background:var(--al-navy);border-bottom:1px solid var(--al-w07);padding:8px 14px;
  display:flex;align-items:center;justify-content:space-between;}
.screen-dots{display:flex;gap:5px;}
.screen-dot{width:8px;height:8px;border-radius:50%;}
.screen-title-bar{font-size:10px;font-weight:600;color:var(--al-w55);}
.screen-content{padding:14px;}
.mini-table{width:100%;border-collapse:collapse;}
.mini-table th{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w30);
  padding:4px 8px;text-align:left;border-bottom:1px solid var(--al-w07);}
.mini-table td{font-size:10px;color:var(--al-w80);padding:6px 8px;border-bottom:1px solid var(--al-w07);}
.mini-table tr:last-child td{border-bottom:none;}
.mini-badge{display:inline-block;font-size:8px;font-weight:700;padding:2px 7px;border-radius:10px;}
.badge-orange{background:rgba(226,68,18,.15);color:var(--al-orange);}
.badge-green{background:rgba(61,214,140,.15);color:var(--al-green);}
.badge-blue{background:rgba(126,184,247,.15);color:var(--al-blue);}
.badge-amber{background:rgba(226,160,18,.15);color:var(--al-amber);}
.admin-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px;}
.admin-stat{background:var(--al-w07);border-radius:5px;padding:8px;text-align:center;}
.admin-val{font-size:16px;font-weight:800;color:var(--al-orange);}
.admin-lbl{font-size:8px;color:var(--al-w30);margin-top:2px;}

/* Hero dashboard mockup (illustrative product snapshot — static, not live data) */
.hero-right{position:relative;}
.hero-badge2{position:absolute;top:30px;right:-20px;background:var(--al-orange);border-radius:8px;
  padding:12px 16px;box-shadow:0 8px 24px rgba(226,68,18,.3);z-index:2;}
.badge2-val{font-size:20px;font-weight:800;color:#fff;}
.badge2-label{font-size:10px;color:rgba(255,255,255,.75);margin-top:2px;}
/* Dashboard mockup follows the page's own light/dark theme, same as every
   other card on this page (.preview-panel, .aud-feature-card, etc.) — not a
   fixed-color screenshot. */
.dashboard-frame{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;
  overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,.25),0 0 0 1px var(--al-w07);}
.db-topbar{background:var(--al-navy);border-bottom:1px solid var(--al-w12);padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;}
.db-logo{font-size:16px;font-weight:800;}
.db-logo span:first-child{color:rgba(200,213,224,.85);}
html.light-mode .db-logo span:first-child{color:#0f1c28;}
.db-logo span:last-child{color:var(--al-orange);}
.db-search{flex:1;max-width:260px;margin:0 20px;background:var(--al-w07);border:1px solid var(--al-w12);
  border-radius:4px;padding:6px 12px;font-size:11px;color:var(--al-w55);font-family:'Montserrat',sans-serif;outline:none;}
.db-topbar-right{display:flex;align-items:center;gap:10px;}
.db-icon{width:28px;height:28px;border-radius:50%;background:var(--al-w07);border:1px solid var(--al-w12);
  display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--al-w80);}
.db-layout{display:flex;height:480px;}
.db-sidebar{width:180px;background:var(--al-navy);border-right:1px solid var(--al-w07);padding:10px 0;flex-shrink:0;}
.db-nav-item{display:flex;align-items:center;gap:10px;padding:8px 16px;font-size:11px;font-weight:500;color:var(--al-w55);cursor:default;}
.db-nav-item.active{background:var(--al-orange);color:#fff;margin:0 8px;border-radius:4px;padding:8px 10px;}
.db-content{flex:1;padding:20px;overflow:hidden;}
.db-content-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.db-page-title{font-size:15px;font-weight:700;color:var(--al-white);}
.db-date-btn{display:flex;align-items:center;gap:6px;background:var(--al-w07);border:1px solid var(--al-w12);
  border-radius:4px;padding:5px 10px;font-size:10px;color:var(--al-w55);}
.db-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.db-stat-card{background:var(--al-card-bg);border:1px solid var(--al-card-border);border-radius:8px;
  padding:12px 14px;position:relative;overflow:hidden;}
.db-stat-card.accent{background:rgba(226,68,18,.10);border-color:rgba(226,68,18,.20);}
.db-stat-label{font-size:10px;font-weight:500;color:var(--al-w55);margin-bottom:6px;}
.db-stat-val{font-size:18px;font-weight:800;color:var(--al-orange);}
.db-stat-change{font-size:9px;color:var(--al-w30);margin-top:3px;}
.db-stat-icon{position:absolute;right:12px;top:12px;font-size:18px;opacity:.25;}
.db-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.db-widget{background:var(--al-card-bg);border:1px solid var(--al-card-border);border-radius:8px;padding:14px;}
.db-widget-title{font-size:11px;font-weight:700;color:var(--al-white);margin-bottom:10px;}
.db-matter-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.db-matter-name{font-size:10px;color:var(--al-w80);}
.db-matter-status{font-size:9px;font-weight:600;padding:2px 8px;border-radius:20px;}
.db-status-pending{background:rgba(226,68,18,.15);color:var(--al-orange);}
.db-status-active{background:rgba(61,214,140,.15);color:var(--al-green);}
.db-status-done{background:rgba(126,184,247,.15);color:var(--al-blue);}
.db-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:9px;}
.db-cal-day{text-align:center;padding:3px;color:var(--al-w30);}
.db-cal-date{text-align:center;padding:3px 1px;border-radius:3px;color:var(--al-w55);font-size:9px;}
.db-cal-date.today{background:var(--al-orange);color:#fff;}
.db-cal-date.has-event{background:rgba(226,68,18,.15);color:var(--al-orange);}
.hero-badge{position:absolute;bottom:-18px;left:-24px;display:flex;align-items:center;gap:10px;
  background:var(--al-navy2);border:1px solid var(--al-card-border);border-radius:10px;padding:10px 16px;
  box-shadow:0 14px 30px rgba(0,0,0,.3);z-index:2;}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--al-green);flex-shrink:0;}
.badge-text{font-size:12px;font-weight:700;color:var(--al-white);}
.badge-sub{font-size:10.5px;color:var(--al-w55);}

/* Partner strip */
.partner-strip{padding:24px 80px;border-top:1px solid var(--al-w07);border-bottom:1px solid var(--al-w07);
  background:rgba(255,255,255,.02);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
html.light-mode .partner-strip{background:rgba(0,0,0,.02);}
.partner-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--al-w55);flex-shrink:0;}
.partner-logos{display:flex;gap:28px;flex-wrap:wrap;}
.partner-logo{font-size:13px;font-weight:700;color:var(--al-w55);}
.partner-logo-img{height:24px;width:auto;max-width:140px;object-fit:contain;
  filter:grayscale(100%) opacity(.6);transition:filter .2s;}
.partner-logo-img:hover{filter:grayscale(0%) opacity(1);}

/* Audience / Why-Join feature cards (shared shape) */
.audience-section{padding:100px 80px;position:relative;}
.audience-section-bg{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 20% 50%,rgba(226,68,18,.04),transparent);}
html.light-mode .audience-section-bg{background:radial-gradient(ellipse 60% 50% at 20% 50%,rgba(226,68,18,.03),transparent);}
.audience-tabs{display:flex;gap:8px;background:var(--al-w07);border:1px solid var(--al-card-border);border-radius:10px;padding:4px;}
.aud-tab{padding:9px 18px;border-radius:7px;font-size:12.5px;font-weight:600;color:var(--al-w55);cursor:pointer;}
.aud-tab.active{background:var(--al-orange);color:#fff;}
.audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px;}
/* ── Cards: one shared base (background/border/radius), composed by every
   card variant. `.ui-card` is the reusable name for markup written from
   here on; the existing card classes now share these declarations instead
   of each repeating them. ─── */
.ui-card,.aud-feature-card,.feature-card,.testimonial-card,.pricing-card,.excl-card{
  background:var(--al-card-bg);border:1px solid var(--al-card-border);border-radius:12px;
}
.aud-feature-card{padding:28px;}
.aud-card-icon{width:48px;height:48px;border-radius:8px;background:rgba(226,68,18,.10);color:var(--al-orange);
  border:1px solid rgba(226,68,18,.20);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
.aud-card-icon svg{width:28px;height:28px;}
.aud-card-title{font-size:14px;font-weight:700;color:var(--al-white);margin-bottom:6px;}
.aud-card-body{font-size:12.5px;color:var(--al-w55);line-height:1.65;}

/* Platform section */
.platform-section{padding:100px 80px;background:rgba(255,255,255,.02);border-top:1px solid var(--al-w07);border-bottom:1px solid var(--al-w07);}
html.light-mode .platform-section{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.07);}
.platform-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.pia-tabs{display:flex;gap:8px;margin-bottom:28px;}
.pia-tab{
  background:var(--al-w07);border:1px solid var(--al-w12);color:var(--al-w55);
  padding:9px 18px;border-radius:5px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;font-family:'Montserrat',sans-serif;
}
.pia-tab.active{background:var(--al-orange);border-color:var(--al-orange);color:#fff;}
.pia-feature-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px;}
.pia-feature{display:flex;gap:14px;align-items:flex-start;}
.pia-feature-icon{
  width:34px;height:34px;flex-shrink:0;border-radius:6px;background:rgba(226,68,18,.10);
  border:1px solid rgba(226,68,18,.20);display:flex;align-items:center;justify-content:center;color:var(--al-orange);
}
.pia-feature b{display:block;font-size:13px;font-weight:700;color:var(--al-white);margin-bottom:3px;}
.pia-feature p{font-size:12px;color:var(--al-w55);line-height:1.6;}

/* Features grid */
.features-strip{padding:100px 80px;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;align-items:stretch;}
/* Fixed-dimension card: reference has no explicit height (its own copy happens to
   fit uniformly), but real/edited copy can vary in length — a fixed height +
   line-clamped body keeps all six cards visually identical regardless of content,
   per the "content fits the UI, not the other way around" rule. */
.feature-card{background:var(--al-w07);border:1px solid var(--al-w12);border-radius:12px;
  padding:32px 28px;position:relative;overflow:hidden;height:300px;display:flex;flex-direction:column;}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--al-orange);}
.feature-num{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--al-orange);opacity:.6;margin-bottom:20px;}
.feature-title{font-size:17px;font-weight:700;color:var(--al-white);margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.feature-body{font-size:13px;color:var(--al-w55);line-height:1.75;flex:1;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;}
.feature-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--al-orange);margin-top:20px;}

/* Stats bar */
/* Fixed orange band, not theme-dependent — matches both reference files exactly
   (`.stats-section{background:var(--orange)}` in both). Text stays fixed white
   since it always sits on orange, regardless of light/dark mode. */
.stats-section{background:var(--al-orange);padding:64px 0;}
.stats-grid{padding:0 80px;display:grid;grid-template-columns:repeat(4,1fr);text-align:center;}
.stats-grid-5{grid-template-columns:repeat(5,1fr);}
.stat-item{padding:0 24px;position:relative;}
.stat-item+.stat-item::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  height:40px;width:1px;background:rgba(255,255,255,.25);
}
.stat-val-lg{font-family:'Montserrat',sans-serif;font-size:36px;font-weight:900;color:#fff;line-height:1;}
.stat-lbl-lg{font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:8px;}
@media (max-width:600px){
  .stats-grid,.stats-grid-5{grid-template-columns:repeat(2,1fr);gap:28px 0;padding:0 22px;}
  .stat-item+.stat-item::before{display:none;}
}

/* Testimonials — plain 3-card grid matching the reference exactly (no carousel;
   real data is capped to 3 items server-side, same pattern as Pricing). Section
   gets the same tinted alternating background as Platform/Pricing so the page's
   background rhythm is consistent section-to-section. */
.testimonials-section{padding:100px 80px;background:rgba(255,255,255,.02);border-top:1px solid var(--al-w07);position:relative;}
html.light-mode .testimonials-section{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.07);}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;}
.testimonial-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;
  padding:32px;display:flex;flex-direction:column;position:relative;height:340px;overflow:hidden;}
.t-quote-mark{font-family:'EB Garamond',Georgia,serif;font-size:56px;color:var(--al-orange);line-height:1;
  opacity:.3;position:absolute;top:16px;left:24px;}
.t-quote{font-family:'EB Garamond',Georgia,serif;font-size:16px;font-style:italic;color:var(--al-w80);
  line-height:1.7;padding-top:28px;flex:1;margin-bottom:24px;overflow:hidden;max-height:164px;
  display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;}
.t-quote *{font-family:'EB Garamond',Georgia,serif;font-size:16px;font-style:italic;color:var(--al-w80);line-height:1.7;}
.t-attr{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:1px solid var(--al-w07);flex-shrink:0;}
/* Client reference: solid orange-gradient avatar chip with white initials. */
.testimonials-section-client .t-avatar{width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--al-orange),#b83510);color:#fff;font-size:15px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
/* Lawyer reference: outlined badge avatar, orange initials on a tinted background. */
.testimonials-section-lawyer .t-avatar{width:40px;height:40px;border-radius:50%;
  background:rgba(226,68,18,.14);border:1px solid rgba(226,68,18,.3);color:var(--al-orange);
  font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.t-name{font-size:13px;font-weight:700;color:var(--al-white);}
.t-role{font-size:11px;color:var(--al-w55);margin-top:2px;}

/* How it works steps */
.how-section{padding:100px 80px;}
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;position:relative;}
.how-steps::before{content:'';position:absolute;top:28px;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,var(--al-orange),var(--al-orange),transparent);opacity:.25;}
.how-step{text-align:center;padding:0 16px;position:relative;}
.how-step-num{width:56px;height:56px;border-radius:50%;background:rgba(226,68,18,.10);
  border:1px solid rgba(226,68,18,.30);display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-size:18px;font-weight:800;color:var(--al-orange);
  margin:0 auto 22px;position:relative;z-index:1;}
.how-step-title{font-size:14px;font-weight:700;color:var(--al-white);margin-bottom:10px;}
.how-step-body{font-size:12px;color:var(--al-w55);line-height:1.7;}

/* Pricing */
.pricing-section{padding:100px 80px;text-align:center;background:rgba(255,255,255,.02);border-top:1px solid var(--al-w07);}
html.light-mode .pricing-section{background:rgba(0,0,0,.02);border-color:rgba(0,0,0,.07);}
.pricing-section .section-sub{margin-left:auto;margin-right:auto;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;text-align:left;}
/* Fixed height: real packages vary in description length and feature count (the
   blade template caps the feature list at 7 items), so height is fixed and the
   description/feature list are clamped — content fits the card, not vice versa. */
.pricing-card{position:relative;border-radius:12px;padding:36px 28px;display:flex;flex-direction:column;
  background:var(--al-navy2);border:1px solid var(--al-w12);height:560px;}
.pricing-card.featured{border-color:var(--al-orange);background:rgba(226,68,18,.06);}
.pricing-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--al-orange);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 14px;border-radius:20px;}
.pricing-plan{font-size:11px;font-weight:700;color:var(--al-orange);text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;}
.pricing-price{display:flex;align-items:baseline;gap:6px;margin-bottom:8px;}
.pricing-amount{font-family:'Montserrat',sans-serif;font-size:38px;font-weight:900;color:var(--al-white);}
.pricing-period{font-size:13px;color:var(--al-w55);}
.pricing-desc{font-size:12px;color:var(--al-w55);line-height:1.6;margin-bottom:28px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;}
.pricing-features{list-style:none;margin:0 0 32px;padding:0;flex:1;overflow:hidden;}
.pricing-features li{display:flex;align-items:flex-start;gap:10px;font-size:12px;color:var(--al-w80);margin-bottom:10px;line-height:1.5;}
.pricing-features li::before{content:'✓';color:var(--al-orange);font-weight:700;flex-shrink:0;margin-top:1px;}
.pricing-features li span{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;}
.pricing-card .pricing-cta{justify-content:center;width:100%;flex-shrink:0;}

/* CTA banner / strip */
/* Client CTA banner is framed as an inset card with page background showing
   around it on all sides (per explicit request) — the surrounding space is
   just the page's own base background, so it's white in light mode and dark
   navy in dark mode without hardcoding either. */
.cta-banner-outer{padding:60px 80px;}
.cta-banner,.cta-strip{padding:80px 40px;text-align:center;background:var(--al-navy2);
  border-top:1px solid var(--al-w12);position:relative;overflow:hidden;}
.cta-banner{max-width:1160px;margin:0 auto;border-radius:16px;border:1px solid var(--al-w12);}
.cta-banner::before,.cta-strip::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 100% at 50% 50%,rgba(226,68,18,.06),transparent);}
.cta-banner h2,.cta-strip h2{font-family:'EB Garamond',Georgia,serif;font-size:clamp(24px,3vw,34px);
  font-weight:600;color:var(--al-white);margin-bottom:14px;position:relative;}
.cta-banner p,.cta-strip p{font-size:14px;color:var(--al-w55);max-width:560px;margin:0 auto 26px;line-height:1.7;position:relative;}
.cta-banner-btns,.cta-strip-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;}
.cta-banner .section-label,.cta-strip .section-label{position:relative;}

/* Exclusive membership card (Lawyer home) */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.split-list{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:16px;}
.split-list li{display:flex;gap:12px;}
.split-list .ci{color:var(--al-orange);font-weight:700;flex-shrink:0;}
.split-list b{display:block;font-size:13.5px;color:var(--al-white);margin-bottom:3px;}
.split-list p{font-size:12.5px;color:var(--al-w55);line-height:1.6;}
.excl-card{border-radius:14px;padding:32px;}
.excl-badge{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--al-orange);background:rgba(226,68,18,.10);border:1px solid rgba(226,68,18,.25);
  padding:6px 12px;border-radius:100px;margin-bottom:18px;}
.excl-card h3{font-family:'EB Garamond',Georgia,serif;font-size:24px;font-weight:600;color:var(--al-white);margin-bottom:10px;}
.excl-card p{font-size:12.5px;color:var(--al-w55);line-height:1.65;margin-bottom:20px;}
.excl-meter .row{display:flex;justify-content:space-between;font-size:12px;color:var(--al-w80);margin-bottom:8px;}
.excl-bar{height:6px;border-radius:4px;background:var(--al-w12);overflow:hidden;}
.excl-bar span{display:block;height:100%;width:72%;background:var(--al-orange);}
.excl-note{font-size:11px;color:var(--al-w30);margin-top:10px;line-height:1.5;}

/* ── Shared form controls ────────────────────────────
   Not yet applied to any existing markup (Home's inputs already work via
   inherited legacy styling — see audit). Available for the next page that
   needs real form fields, so every page draws from one input style instead
   of each re-deriving its own. ─── */
.ui-field{margin-bottom:16px;}
.ui-label{display:block;font-size:12px;font-weight:600;color:var(--al-w55);margin-bottom:6px;}
.ui-input,.ui-select,.ui-textarea{
  width:100%;padding:11px 14px;border-radius:8px;border:1px solid var(--al-w12);
  background:var(--al-w07);color:var(--al-white);font-size:13px;font-family:'Montserrat',sans-serif;
  transition:border-color .15s;
}
.ui-textarea{min-height:110px;resize:vertical;}
.ui-input::placeholder,.ui-textarea::placeholder{color:var(--al-w30);}
.ui-input:focus,.ui-select:focus,.ui-textarea:focus{outline:none;border-color:var(--al-orange);}
.ui-checkbox{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--al-w55);cursor:pointer;}
.ui-checkbox input{accent-color:var(--al-orange);}

/* ── Toast ────────────────────────────────────────────
   Visual component + tiny helper only — not wired into any existing form.
   Available for a future page that needs a lightweight confirmation
   without introducing new business behavior. Call window.alToast(msg). ─── */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);z-index:400;
  background:var(--al-navy2);border:1px solid var(--al-card-border);border-left:3px solid var(--al-green);
  border-radius:6px;padding:13px 20px;font:600 12.5px 'Montserrat',sans-serif;color:var(--al-white);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;display:flex;align-items:center;gap:10px;max-width:calc(100% - 40px);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .ti{color:var(--al-green);flex-shrink:0;}

/* FAQ accordion (Lawyer home) */
.faq-list{margin-top:30px;max-width:820px;}
.faq-item{border:1px solid var(--al-w12);border-radius:8px;margin-bottom:12px;background:var(--al-w07);overflow:hidden;}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--al-white);
  font-family:'Montserrat',sans-serif;font-size:14px;font-weight:600;padding:18px 20px;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-q .pm{color:var(--al-orange);font-size:18px;transition:transform .2s;flex-shrink:0;}
.faq-item.open .faq-q .pm{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.faq-a p{padding:0 20px 18px;font-size:13px;color:var(--al-w55);line-height:1.7;}

@media (max-width:960px){
  .hero-inner,.platform-grid,.split{grid-template-columns:minmax(0,1fr);}
  .audience-grid,.grid3,.features-grid,.testimonials-grid,.pricing-grid{grid-template-columns:1fr 1fr;}
  .how-steps{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .hero{padding:44px 20px 40px;}
  .wrap,.audience-section,.features-strip,.testimonials-section,.how-section,.pricing-section,.platform-section,.partner-strip,.cta-banner,.cta-strip,.cta-banner-outer{padding-left:20px;padding-right:20px;}
  .audience-grid,.grid3,.features-grid,.testimonials-grid,.pricing-grid,.how-steps{grid-template-columns:1fr;}
  .how-steps::before{display:none;}
  .how-step{margin-bottom:26px;}
  /* The reference dashboard-frame mockup has no mobile spec of its own (the
     static reference file only defines breakpoints for its subpages) — this
     scales the same structure down so it doesn't overflow small viewports. */
  .hero-badge2{position:static;display:inline-flex;flex-direction:column;margin-bottom:10px;}
  .db-layout{height:auto;flex-direction:column;}
  .db-sidebar{width:100%;display:flex;overflow-x:auto;padding:8px;gap:4px;}
  .db-nav-item{flex-shrink:0;white-space:nowrap;}
  .db-search{display:none;}
  .db-stats-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .db-bottom-grid{grid-template-columns:minmax(0,1fr);}
  .db-content{padding:14px;min-width:0;}
  .db-stat-val{font-size:15px;}
  .hero-badge{position:static;margin-top:14px;}
}

/* ══════════════════════════════════════════════════
   Re-skin of existing shared partials (real backend
   data/carousels/checkout — structure & JS untouched).
   Every rule below is scoped under its .nui-* wrapper
   class so it cannot leak onto unrelated markup that
   happens to reuse the same old Webflow class names
   elsewhere in the app.
══════════════════════════════════════════════════ */

/* NOTE: atipa.webflow.css carries many 3-4-class selectors targeting these same
   old class names (e.g. `.africa-ip-guide-tm .guide-card .guide-text-block .header-p`)
   with hardcoded colors. Those out-specificity a 2-class `.nui-guide .header-p`
   selector regardless of stylesheet order, so color/background/border declarations
   below are marked !important to reliably win — this is a deliberate, scoped
   override of legacy rules, not a global !important habit. */

.nui-partners,.nui-reviews,.nui-benefits,.nui-pricing,.nui-guide,.nui-cta-banner{
  padding:100px 80px;
}
/* The legacy `.reviews` class (kept alongside `.nui-reviews` on the same element)
   sets `display:flex;flex-direction:column;align-items:center`. In a column flex
   container, a width:auto child sizes to its own content instead of filling the
   container — and Slick's variableWidth track is ~10000px wide by design (it lays
   every slide out side by side), so that child sizes to ~10000px and then gets
   horizontally centered by align-items:center, landing thousands of pixels off
   the left edge of the viewport. This was the actual cause of the "empty"
   testimonials section. Overriding back to block layout removes the flex sizing
   behavior entirely; nothing in this section's own styling depends on it. */
.nui-reviews{display:block !important;}
.nui-partners .sub-heading-parent,.nui-reviews .sub-heading-parent,
.nui-benefits .sub-heading-parent,.nui-pricing .sub-heading-parent{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;opacity:1 !important;
}
.nui-partners .sub-heading-parent .line,.nui-reviews .sub-heading-parent .line,
.nui-benefits .sub-heading-parent .line,.nui-pricing .sub-heading-parent .line{
  width:20px;height:2px;background:var(--al-orange) !important;
}
.nui-partners .sub-heading,.nui-reviews .sub-heading,.nui-benefits .sub-heading,.nui-pricing .sub-heading{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--al-orange) !important;
}
.nui-partners .heading-section,.nui-reviews .heading-section,.nui-benefits .heading-section,
.nui-pricing .heading-section,.nui-guide .heading-section,.nui-cta-banner .heading-section{
  font-family:'EB Garamond',Georgia,serif;font-size:clamp(24px,3vw,34px);font-weight:600;
  color:var(--al-white) !important;line-height:1.25;opacity:1 !important;
}
.nui-partners .header-p,.nui-reviews .header-p,.nui-benefits .header-p,
.nui-guide .header-p,.nui-cta-banner .header-p{
  font-size:14px;color:var(--al-w55) !important;line-height:1.7;margin-top:10px;opacity:1 !important;
}
/* Force-show content that previously relied on Webflow's IX2 scroll interactions
   to animate opacity 0→1 — not something this restyle can safely depend on. */
.nui-benefits [style*="opacity"],.nui-guide [style*="opacity"],
.nui-cta-banner [style*="opacity"],.nui-partners [style*="opacity"],
.nui-reviews [style*="opacity"],.nui-pricing [style*="opacity"],
.hero [style*="opacity"],.audience-section [style*="opacity"]{
  opacity:1 !important;transform:none !important;
}

/* Partners strip */
.nui-partners{text-align:center;}
.nui-partners .partners-section{background:transparent;padding:1.5rem 0;}

/* Benefits ("Why AfricanLaw") */
.nui-benefits{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;}
.nui-benefits .benefits-text-block{flex:1;min-width:260px;}
.nui-benefits .benefits-content{display:flex;flex-wrap:wrap;gap:32px;flex:1.4;min-width:280px;}
.nui-benefits .benefits-itself{display:flex;flex-direction:column;gap:20px;flex:1;min-width:220px;opacity:1 !important;}
.nui-benefits .benefits-listing{display:flex;gap:14px;align-items:flex-start;opacity:1 !important;}
.nui-benefits .icon-benefit{width:32px;height:32px;border-radius:8px;background:rgba(226,68,18,.1) !important;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.nui-benefits .icon-benefit img{width:16px;height:16px;}
.nui-benefits .benefit-header{font-size:13.5px;font-weight:700;color:var(--al-white) !important;margin-bottom:4px;}
.nui-benefits .benefit-p{font-size:12.5px;color:var(--al-w55) !important;line-height:1.6;}
.nui-benefits .benifits-right-column-sec{flex:1;min-width:220px;}
.nui-benefits .benifits-right-column-sec img{max-width:100%;border-radius:12px;}
.nui-benefits .benefits-button .button{
  display:inline-flex;margin-top:16px;padding:11px 22px;border-radius:8px;font-size:12.5px;font-weight:600;
  color:var(--al-w80) !important;background:transparent !important;border:1px solid var(--al-w12) !important;text-decoration:none;
}
.nui-benefits .benefits-button .button:hover{border-color:var(--al-orange) !important;color:var(--al-white) !important;}

/* Pricing / package checkout (real functionality — visual only, real $packages
   data). Values matched to the reference's `.pricing-card`/`.pricing-cta` rules.
   `.package-featured`/`.package-badge` exist for a "most popular" treatment but
   are intentionally not applied to any specific package below — the Packages
   model has no field indicating which one is "most popular", and picking one
   would be an invented marketing claim, not a UI-only decision. */
.nui-pricing{text-align:center;}
.nui-pricing .payemnt-card-section{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:32px;text-align:left;
}
.nui-pricing .payement-cards{
  background:var(--al-navy2) !important;border:1px solid var(--al-card-border) !important;border-radius:12px;padding:36px 28px;
  display:flex;flex-direction:column;position:relative;
}
.nui-pricing .payement-cards.package-featured{border-color:var(--al-orange) !important;background:rgba(226,68,18,.06) !important;}
.nui-pricing .package-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--al-orange);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 14px;border-radius:20px;
}
.nui-pricing .package-name{font-size:11px;font-weight:700;color:var(--al-orange) !important;text-transform:uppercase;letter-spacing:.14em;margin-bottom:14px;}
.nui-pricing .package-price{font-family:'Montserrat',sans-serif;font-size:38px;font-weight:900;color:var(--al-white) !important;margin:0 0 8px;}
.nui-pricing .package-interval{font-size:13px;color:var(--al-w55) !important;font-family:'Montserrat',sans-serif;}
.nui-pricing .features-heading{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--al-w55) !important;margin-bottom:10px;}
.nui-pricing .payment-check-list{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:12px;color:var(--al-w80) !important;line-height:1.5;}
.nui-pricing .payment-check-list img{width:14px;height:14px;margin-top:2px;}
.nui-pricing .package-submit-button{
  margin-top:20px;background:var(--al-orange) !important;color:#fff !important;border:none;border-radius:4px;padding:13px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;width:100%;
}
.nui-pricing .package-submit-button:hover{background:var(--al-orange2) !important;}
.nui-pricing .package-submit-button:disabled{opacity:.5;cursor:not-allowed;}

/* Africa IP Guide teaser */
.nui-guide .guide-card{display:flex;align-items:center;gap:48px;flex-wrap:wrap;
  background:var(--al-navy2) !important;border:1px solid var(--al-card-border) !important;border-radius:16px;padding:44px;}
.nui-guide .guide-text-block{flex:1;min-width:260px;}
.nui-guide .guide-img-wrap{flex:1;min-width:220px;text-align:center;}
.nui-guide .guide-img-wrap img{max-width:100%;max-height:220px;}
.nui-guide .guide-button-block{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
.nui-guide .guide-button-block .button{
  padding:12px 22px;border-radius:8px;font-size:12.5px;font-weight:600;text-decoration:none;
  background:transparent !important;border:1px solid var(--al-w12) !important;color:var(--al-w80) !important;
}
.nui-guide .guide-button-block .button.filled{background:var(--al-orange) !important;border-color:var(--al-orange) !important;color:#fff !important;}
.nui-guide .guide-button-block .button:not(.filled):hover{border-color:var(--al-orange) !important;color:var(--al-white) !important;}

/* CTA banner (ask-a-lawyer quote request) */
.nui-cta-banner{
  display:flex;align-items:center;gap:48px;flex-wrap:wrap;text-align:left;
  background:var(--al-navy2) !important;border:1px solid var(--al-card-border);border-radius:16px;
  padding:56px !important;max-width:1240px;margin:0 auto 60px !important;
}
.nui-cta-banner .quote-img-left-sec{flex:1;min-width:200px;text-align:center;}
.nui-cta-banner .quote-img-left-sec img{max-width:100%;max-height:200px;}
.nui-cta-banner .quote-text-block{flex:1.4;min-width:280px;}
.nui-cta-banner .quote-button-block{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;}
.nui-cta-banner .quote-button-block .button{
  padding:12px 22px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;text-decoration:none;
  background:transparent !important;border:1px solid var(--al-w12) !important;color:var(--al-w80) !important;
}
.nui-cta-banner .quote-button-block .button.filled{background:var(--al-orange) !important;border-color:var(--al-orange) !important;color:#fff !important;}
.nui-cta-banner .quote-button-block .button:not(.filled):hover{border-color:var(--al-orange) !important;color:var(--al-white) !important;}

@media (max-width:600px){
  .nui-partners,.nui-reviews,.nui-benefits,.nui-pricing,.nui-guide,.nui-cta-banner{padding:50px 20px;}
}

/* Newsletter + secondary CTA (footer-cta, shown above the footer on every page) */
.nui-subscribe-cta{
  display:flex;gap:24px;flex-wrap:wrap;max-width:1240px;margin:0 auto;padding:50px 40px 0;
}
.nui-subscribe-cta .newsletter-card,.nui-subscribe-cta .client-cta{flex:1;min-width:280px;}
.nui-subscribe-cta .card-child{
  height:auto !important;min-height:220px;align-items:flex-start !important;justify-content:center !important;
  background:var(--al-navy2) !important;border:1px solid var(--al-card-border) !important;
  border-radius:14px !important;padding:30px !important;
}
.nui-subscribe-cta .card-child.gray{background:var(--al-navy2) !important;}
.nui-subscribe-cta .heading-section{
  font-family:'EB Garamond',Georgia,serif;font-size:20px;font-weight:600;color:var(--al-white) !important;
  margin-bottom:8px;opacity:1 !important;
}
.nui-subscribe-cta .header-p,.nui-subscribe-cta .header-p.ctas{
  font-size:13px;color:var(--al-w55) !important;line-height:1.6;margin-bottom:18px;
}
.nui-subscribe-cta [style*="opacity"]{opacity:1 !important;transform:none !important;}
.nui-subscribe-cta .ask-a-lawyer-header-form .text-field{
  width:100%;padding:12px 44px 12px 14px;border-radius:8px;border:1px solid var(--al-w12) !important;
  background:var(--al-w07) !important;color:var(--al-white) !important;font-size:13px;
}
.nui-subscribe-cta .search-input-parent{position:relative;}
.nui-subscribe-cta .submit-button{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);background:var(--al-orange) !important;
  border:none;border-radius:6px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.nui-subscribe-cta .submit-button img{width:14px;height:14px;filter:brightness(0) invert(1);}
.nui-subscribe-cta .w-form-done,.nui-subscribe-cta .w-form-fail{display:none;margin-top:10px;font-size:12px;}
.nui-subscribe-cta .client-cta .button{
  margin-top:4px;padding:12px 22px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;
  background:var(--al-orange) !important;border:1px solid var(--al-orange) !important;color:#fff !important;
}
.nui-subscribe-cta .client-cta .button:hover{background:var(--al-orange2) !important;}

/* ══════════════════════════════════════════════════
   Find a Lawyer page (front/lawyers.blade.php)
══════════════════════════════════════════════════ */
.page-hero{background:var(--al-navy2);padding:130px 80px 80px;position:relative;overflow:hidden;
  border-bottom:1px solid var(--al-w12);}
.ph-network{position:absolute;inset:0;pointer-events:none;opacity:.15;}
.ph-glow{position:absolute;top:-10%;right:-5%;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(226,68,18,.07) 0%,transparent 70%);pointer-events:none;}
.ph-inner{position:relative;z-index:2;}
.ph-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--al-orange);background:rgba(226,68,18,.10);border:1px solid rgba(226,68,18,.25);
  padding:5px 13px;border-radius:3px;margin-bottom:24px;}
.ph-headline{font-family:'EB Garamond',Georgia,serif;font-size:clamp(32px,4.5vw,50px);font-weight:600;
  line-height:1.15;color:var(--al-white);margin-bottom:18px;}
.ph-headline em{color:var(--al-orange);font-style:italic;}
.ph-sub{font-size:15px;color:var(--al-w55);line-height:1.75;max-width:560px;margin-bottom:0;}

.fal-results-section{padding:52px 80px 90px;}
.fal-network-section{padding:60px 80px;}

.filter-bar{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:10px;padding:20px 24px;
  display:flex;align-items:center;gap:14px;margin-bottom:32px;flex-wrap:wrap;}
.search-input{flex:1;min-width:200px;background:var(--al-w07);border:1px solid var(--al-w12);border-radius:6px;
  padding:10px 14px;font-size:13px;color:var(--al-white);font-family:'Montserrat',sans-serif;outline:none;}
.filter-select{background:var(--al-w07);border:1px solid var(--al-w12);border-radius:6px;padding:10px 14px;
  font-size:12px;color:var(--al-w55);font-family:'Montserrat',sans-serif;outline:none;cursor:pointer;
  width:170px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.filter-select:disabled{cursor:not-allowed;opacity:.55;}
/* The native <option> popup ignores the select's own background/color and
   falls back to OS/browser defaults (usually a plain white list) unless the
   options are styled directly — without this it stayed white regardless of
   site theme. */
.filter-select option,.sort-select option{background:var(--al-navy2);color:var(--al-white);}
.search-btn{background:var(--al-orange);color:#fff;border:none;border-radius:6px;padding:10px 22px;font-size:12px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .2s;
  font-family:'Montserrat',sans-serif;flex-shrink:0;}
.search-btn:hover{background:var(--al-orange2);}

.results-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
.results-count{font-size:12px;color:var(--al-w55);}
.results-count strong{color:var(--al-white);}
.sort-select{background:var(--al-w07);border:1px solid var(--al-w12);border-radius:4px;padding:6px 12px;
  font-size:11px;color:var(--al-w55);font-family:'Montserrat',sans-serif;outline:none;cursor:pointer;}
.sort-select:disabled{cursor:not-allowed;opacity:.55;}

.lawyers-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.lawyer-card-slot.lc-hidden{display:none;}
.lawyer-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:24px;
  transition:border-color .2s;height:340px;display:flex;flex-direction:column;overflow:hidden;}
.lawyer-card:hover{border-color:var(--al-w30);}
.lc-top{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.lc-name-block{flex:1;min-width:0;}
.lc-avatar{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;color:#fff;flex-shrink:0;}
.av1{background:linear-gradient(135deg,var(--al-orange),#b83510);}
.av2{background:linear-gradient(135deg,#1d6fa4,#0d4a7a);}
.av3{background:linear-gradient(135deg,#1a7a4a,#0d4a2e);}
.av4{background:linear-gradient(135deg,#7a3a9a,#4a1a6a);}
.av5{background:linear-gradient(135deg,#8a6a00,#5a4400);}
.av6{background:linear-gradient(135deg,#7a1a1a,#4a0a0a);}
.av7{background:linear-gradient(135deg,#1a6a7a,#0a3a4a);}
.av8{background:linear-gradient(135deg,#3a7a2a,#1a4a10);}
.av9{background:linear-gradient(135deg,#4a4a8a,#2a2a5a);}
.lawyer-name{font-size:14px;font-weight:700;color:var(--al-white);margin-bottom:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lawyer-spec{font-size:11px;font-weight:600;color:var(--al-orange);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lawyer-firm{font-size:11px;color:var(--al-w55);margin-top:2px;display:flex;align-items:center;gap:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lawyer-firm-count{font-size:9px;color:var(--al-orange);background:rgba(226,68,18,.10);
  border:1px solid rgba(226,68,18,.20);border-radius:3px;padding:1px 6px;font-weight:700;flex-shrink:0;}
.verified-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;color:var(--al-green);
  background:rgba(61,214,140,.10);border:1px solid rgba(61,214,140,.20);border-radius:3px;padding:3px 7px;
  margin-left:auto;margin-top:4px;white-space:nowrap;flex-shrink:0;}
.stars{color:var(--al-orange);font-size:11px;margin-bottom:2px;}
.lawyer-loc{font-size:11px;color:var(--al-w55);margin-bottom:10px;display:flex;align-items:center;gap:5px;}
.jur-tags-label{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w30);
  margin:8px 0 5px;}
.jur-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;overflow:hidden;max-height:24px;}
.jur-tag{font-size:9px;font-weight:600;background:var(--al-w07);border:1px solid var(--al-w12);border-radius:3px;
  padding:3px 8px;color:var(--al-w55);white-space:nowrap;}
.lc-divider{height:1px;background:var(--al-w07);margin:14px 0;margin-top:auto;}
.lc-actions{display:flex;gap:6px;}
.lc-btn-main{flex:1;background:var(--al-orange);color:#fff;border:none;border-radius:5px;padding:9px 4px;font-size:10.5px;
  font-weight:700;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;transition:background .2s;
  font-family:'Montserrat',sans-serif;text-align:center;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lc-btn-main:hover{background:var(--al-orange2);color:#fff;}
.lc-btn-ghost{flex:1;background:transparent;color:var(--al-w55);border:1px solid var(--al-w12);border-radius:5px;
  padding:9px 4px;font-size:10.5px;font-weight:600;cursor:pointer;transition:all .2s;font-family:'Montserrat',sans-serif;
  text-align:center;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lc-btn-ghost:hover{border-color:var(--al-w30);color:var(--al-white);}

.cta-ghost-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--al-w30);color:var(--al-w80);
  font-size:12px;font-weight:600;letter-spacing:.08em;padding:13px 24px;border-radius:4px;transition:all .2s;
  background:transparent;cursor:pointer;text-decoration:none;}
.cta-ghost-btn:hover{border-color:var(--al-w55);color:var(--al-white);}

.network-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.network-grid-2col{grid-template-columns:repeat(2,minmax(0,1fr));}
.network-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:28px;text-align:center;}
.network-val{font-family:'Montserrat',sans-serif;font-size:36px;font-weight:900;color:var(--al-orange);
  line-height:1;margin-bottom:6px;}
.network-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w55);
  margin-bottom:12px;}
.network-body{font-size:12px;color:var(--al-w30);line-height:1.6;}

@media (max-width:960px){
  .page-hero{padding:110px 40px 60px;}
  .fal-results-section,.fal-network-section{padding-left:40px;padding-right:40px;}
  .lawyers-grid{grid-template-columns:1fr 1fr;}
  .network-grid{grid-template-columns:1fr;}
  .filter-bar{flex-direction:column;align-items:stretch;}
  .search-input,.filter-select{width:100%;}
}
@media (max-width:600px){
  .page-hero{padding:100px 20px 50px;}
  .fal-results-section,.fal-network-section{padding-left:20px;padding-right:20px;}
  .lawyers-grid{grid-template-columns:1fr;}
  .lawyer-card{height:auto;min-height:320px;}
}

/* ══════════════════════════════════════════════════
   Features page (front/network.blade.php)
══════════════════════════════════════════════════ */
.feat-section-pad{padding:90px 80px;}

/* Overview grid — fixed-height cards so real/edited copy can't grow them */
.feat-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.feat-ov-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:30px;
  position:relative;overflow:hidden;transition:border-color .2s;height:270px;display:flex;flex-direction:column;}
.feat-ov-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--al-orange);}
.feat-ov-card:hover{border-color:var(--al-w30);}
.fov-icon{width:48px;height:48px;border-radius:8px;background:rgba(226,68,18,.10);border:1px solid rgba(226,68,18,.20);
  display:flex;align-items:center;justify-content:center;color:var(--al-orange);margin-bottom:18px;flex-shrink:0;}
.fov-num{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--al-orange);opacity:.6;margin-bottom:14px;}
.fov-title{font-size:16px;font-weight:700;color:var(--al-white);margin-bottom:10px;}
.fov-body{font-size:13px;color:var(--al-w55);line-height:1.7;flex:1;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;}
.fov-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--al-orange);
  margin-top:18px;text-decoration:none;}
.fov-link-disabled{color:var(--al-w30);cursor:not-allowed;}

/* Deep-dive sections */
.feat-deep{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.feat-deep-reverse{direction:rtl;}
.feat-deep-reverse>*{direction:ltr;}
.feat-deep-title{font-family:'EB Garamond',Georgia,serif;font-size:28px;font-weight:600;color:var(--al-white);margin-bottom:14px;}
.feat-deep-body{font-size:14px;color:var(--al-w55);line-height:1.8;margin-bottom:28px;}
.feat-list{list-style:none;margin:0 0 28px;padding:0;}
.feat-list li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--al-w80);margin-bottom:10px;line-height:1.5;}
.feat-list li::before{content:'✓';color:var(--al-orange);font-weight:700;flex-shrink:0;margin-top:1px;}
.cta-main-disabled{opacity:.5;cursor:not-allowed;}
.cta-main-disabled:hover{background:var(--al-orange);}

/* Mini dashboard mockups (illustrative, theme-flip like every other mockup on the site) */
.db-frame{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.45);}
.db-frame-tall{min-height:460px;}
.db-topbar-mini{background:var(--al-navy);border-bottom:1px solid var(--al-w07);padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;}
.db-logo-mini{font-size:14px;font-weight:800;}
.db-logo-mini span:first-child{color:rgba(200,213,224,.85);}
html.light-mode .db-logo-mini span:first-child{color:#0f1c28;}
.db-logo-mini span:last-child{color:var(--al-orange);}
.db-topbar-mini-label{font-size:10px;color:var(--al-w55);}
.db-layout-mini{display:flex;height:340px;}
.db-sidebar-mini{width:140px;background:var(--al-navy);border-right:1px solid var(--al-w07);padding:8px 0;flex-shrink:0;}
.db-sidebar-mini-wide{width:120px;}
.db-ni{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:10px;font-weight:500;color:var(--al-w55);}
.db-ni.on{background:var(--al-orange);color:#fff;margin:0 6px;border-radius:3px;padding:7px 8px;}
.db-ni-block{border-radius:4px;}
.db-body-mini{flex:1;padding:16px;overflow:hidden;}
.db-body-mini-flex{display:flex;flex-direction:column;gap:8px;}
.db-body-mini-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.db-row-title{font-size:12px;font-weight:700;color:var(--al-white);}
.db-new-matter{font-size:9px;color:var(--al-orange);font-weight:700;}
.db-date-btn-mini{font-size:8px;background:var(--al-w07);border:1px solid var(--al-w12);border-radius:4px;
  padding:4px 8px;color:var(--al-w55);}
.db-mini-table{width:100%;font-size:10px;border-collapse:collapse;}
.db-mini-table th{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w30);
  padding:4px 6px;text-align:left;border-bottom:1px solid var(--al-w07);}
.db-mini-table td{padding:6px 6px;color:var(--al-w80);border-bottom:1px solid var(--al-w07);}
.db-mini-table tr:last-child td{border:none;}
.mini-b{display:inline-block;font-size:8px;font-weight:700;padding:2px 6px;border-radius:10px;}
.mb-o{background:rgba(226,68,18,.15);color:var(--al-orange);}
.mb-g{background:rgba(61,214,140,.15);color:var(--al-green);}
.mb-b{background:rgba(126,184,247,.15);color:var(--al-blue);}

/* AI copilot mockup */
.db-ai-body{padding:16px;height:340px;overflow:hidden;}
.db-ai-bubble{border-radius:8px;padding:12px;margin-bottom:10px;}
.db-ai-q{background:var(--al-w07);}
.db-ai-a{background:rgba(226,68,18,.08);border:1px solid rgba(226,68,18,.15);}
.db-ai-related{background:var(--al-w07);margin-bottom:0;}
.db-ai-tag{font-size:9px;font-weight:700;color:var(--al-orange);margin-bottom:6px;}
.db-ai-text{font-size:11px;color:var(--al-w80);line-height:1.5;}
.db-ai-a .db-ai-text{font-size:10px;line-height:1.6;}
.db-ai-text-muted{font-size:10px;color:var(--al-w55);}
.db-ai-highlight{color:var(--al-orange);font-weight:600;}

/* Lawyer dashboard mockup stat/cal widgets */
.db-stats-mini-3{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px;}
.db-stats-mini-2{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px;}
.db-stat-mini{background:var(--al-w07);border:1px solid var(--al-w12);border-radius:5px;padding:8px;}
.db-stat-mini-accent{background:rgba(226,68,18,.15);border-color:rgba(226,68,18,.3);}
.db-stat-mini-lbl{font-size:8px;color:var(--al-w55);margin-bottom:2px;}
.db-stat-mini-val{font-size:14px;font-weight:800;color:var(--al-orange);}
.db-stat-mini-val2{font-size:12px;font-weight:800;color:var(--al-orange);}
.db-stat-mini-val-white{color:var(--al-white);}
.db-stat-mini-sub{font-size:7px;color:var(--al-w30);}
.db-stat-mini-title{font-size:8px;font-weight:700;color:var(--al-w55);margin-bottom:6px;}
.db-cal-mini{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;}
.db-cal-mini-day{font-size:6px;color:var(--al-w30);}
.db-cal-mini-today{background:var(--al-orange);color:#fff;border-radius:50%;width:12px;height:12px;
  display:flex;align-items:center;justify-content:center;font-size:6px;}
.db-cal-mini-date{font-size:7px;color:var(--al-w55);}
.db-cal-mini-date-today{font-size:7px;font-weight:700;color:var(--al-orange);}
.db-mini-field{background:var(--al-w12);border-radius:3px;padding:4px 6px;font-size:8px;color:var(--al-w30);margin-bottom:4px;}

/* Platform comparison table */
.feat-compare-header{text-align:center;margin-bottom:44px;}
.feat-compare-sub{margin:0 auto;}
.comp-table-wrap{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;overflow:hidden;overflow-x:auto;}
.comp-table{width:100%;border-collapse:collapse;font-size:13px;}
.comp-table th{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w30);
  padding:12px 20px;text-align:left;border-bottom:1px solid var(--al-w12);white-space:nowrap;}
.comp-table th.featured{color:var(--al-orange);}
.table-row td{padding:14px 20px;border-bottom:1px solid var(--al-w07);}
.table-label{font-size:13px;color:var(--al-w55);}
.comp-row-alt{background:rgba(255,255,255,.02);}
html.light-mode .comp-row-alt{background:rgba(0,0,0,.02);}
.check-y{color:var(--al-green);font-size:16px;}
.check-n{color:var(--al-w30);font-size:16px;}
.check-p{font-size:12px;font-weight:600;color:var(--al-orange);}

/* Platform history / timeline / stats */
.feat-history-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.feat-history-h2{margin-bottom:36px;}
.feat-stats-col{display:flex;flex-direction:column;gap:18px;}
.timeline{position:relative;padding-left:40px;}
.timeline-line{position:absolute;left:15px;top:8px;bottom:8px;width:2px;background:var(--al-w12);}
.tl-item{position:relative;margin-bottom:32px;}
.tl-item:last-child{margin-bottom:0;}
.tl-dot{position:absolute;left:-33px;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--al-orange);border:3px solid var(--al-navy);z-index:1;}
.tl-year{font-size:10px;font-weight:700;color:var(--al-orange);letter-spacing:.12em;margin-bottom:4px;}
.tl-title{font-size:14px;font-weight:700;color:var(--al-white);margin-bottom:4px;}
.tl-body{font-size:12px;color:var(--al-w55);line-height:1.6;}
.feat-euipo-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:28px;}
.feat-euipo-label{margin-bottom:8px;}
.feat-euipo-title{font-size:15px;font-weight:700;color:var(--al-white);margin-bottom:8px;}
.feat-euipo-body{font-size:13px;color:var(--al-w55);line-height:1.7;}

@media (max-width:960px){
  .feat-section-pad{padding:70px 40px;}
  .feat-overview-grid{grid-template-columns:1fr 1fr;}
  .feat-deep,.feat-deep-reverse{grid-template-columns:1fr;direction:ltr;gap:36px;}
  .feat-history-grid{grid-template-columns:1fr;gap:44px;}
}
@media (max-width:600px){
  .feat-section-pad{padding:56px 20px;}
  .feat-overview-grid{grid-template-columns:1fr;}
  .feat-ov-card{height:auto;min-height:230px;}
  .db-layout-mini{flex-direction:column;height:auto;}
  .db-sidebar-mini,.db-sidebar-mini-wide{width:100%;display:flex;overflow-x:auto;}
}

/* ══════════════════════════════════════════════════
   About page (front/about-page.blade.php)
══════════════════════════════════════════════════ */
.about-section-pad{padding:90px 80px;}

.about-mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;margin-bottom:80px;}
.about-mission-h2{margin-bottom:18px;}
.about-mission-p{font-size:14px;color:var(--al-w55);line-height:1.8;margin-bottom:20px;}
.about-mission-p-last{margin-bottom:28px;}

.about-value-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.about-value-card{background:var(--al-w07);border:1px solid var(--al-w12);border-radius:12px;padding:24px;
  border-top:3px solid var(--al-orange);}
.about-value-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:var(--al-orange);margin-bottom:12px;}
.about-value-title{font-size:14px;font-weight:700;color:var(--al-white);margin-bottom:8px;}
.about-value-body{font-size:12px;color:var(--al-w55);line-height:1.65;}

.about-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:48px 0;}
.about-stat{text-align:center;padding:28px;background:var(--al-w07);border:1px solid var(--al-w12);border-radius:12px;}
.about-stat-val{font-family:'Montserrat',sans-serif;font-size:36px;font-weight:900;color:var(--al-orange);
  line-height:1;margin-bottom:6px;}
.about-stat-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--al-w55);}

.about-block{margin-bottom:60px;}
.about-block-last{margin-bottom:0;}
.about-block-h2{margin-bottom:28px;}

.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
.team-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:28px;text-align:center;}
.team-avatar{width:72px;height:72px;border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;
  justify-content:center;font-size:24px;font-weight:800;color:#fff;}
.team-name{font-size:15px;font-weight:700;color:var(--al-white);margin-bottom:4px;}
.team-role{font-size:12px;font-weight:600;color:var(--al-orange);margin-bottom:8px;}
.team-bio{font-size:12px;color:var(--al-w55);line-height:1.65;}

.about-cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.about-cred-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:28px;}
.about-cred-label{margin-bottom:8px;}
.about-cred-body{font-size:13px;color:var(--al-w55);line-height:1.75;margin:0;}

.about-advisor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.about-advisor-card{background:var(--al-navy2);border:1px solid var(--al-w12);border-radius:12px;padding:28px;
  display:flex;gap:16px;align-items:flex-start;}
.about-advisor-avatar{width:46px;height:46px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:800;color:#fff;}
.about-advisor-name{font-size:13px;font-weight:700;color:var(--al-white);margin-bottom:4px;}
.about-advisor-role{font-size:11px;color:var(--al-orange);margin-bottom:6px;}
.about-advisor-body{font-size:12px;color:var(--al-w55);line-height:1.6;}

@media (max-width:960px){
  .about-section-pad{padding:70px 40px;}
  .about-mission-grid{grid-template-columns:1fr;gap:36px;margin-bottom:44px;}
  .about-stats{grid-template-columns:1fr 1fr;}
  .team-grid,.about-cred-grid,.about-advisor-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .about-section-pad{padding:56px 20px;}
  .about-value-grid{grid-template-columns:1fr;}
  .about-stats{grid-template-columns:1fr;}
  .team-grid,.about-cred-grid,.about-advisor-grid{grid-template-columns:1fr;}
}