/* ==========================================================================







   PassportStatusPortal.com - Disciplined Minimalist Design System







   Strict SEBT Rule: 60-30-10 Single-Accent Palette (No Multi-Color Clutter)







   Inspired by SmartAsset & iVisa: Pure White (60%) + Deep Slate (30%) + Trust Blue (10%)







   ========================================================================== */















@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');















:root {







  /* Strict 3-Color Hierarchy (Zero Multi-Color Noise) */







  --color-primary: #0284c7;        /* Single Brand Accent (Trust Sky/Navy Blue) */







  --color-primary-hover: #0369a1;  /* Darker Blue for hover states */







  --color-primary-light: #f0f9ff;  /* Ultra-light blue tint for highlights & badges */







  --color-primary-border: #bae6fd; /* Light blue border */







  







  --color-dark: #162E51;           /* Deep Slate for Headings & Structure (30%) */







  --color-text: #334155;           /* Charcoal Body Text (High Contrast) */







  --color-muted: #64748b;          /* Subdued Secondary Text */







  







  --color-bg-page: #f8fafc;        /* Clean Light Slate Canvas (60%) */







  --color-bg-white: #ffffff;       /* Pure White Cards */







  --color-border: #e2e8f0;         /* Single Subdued Border Tone */







  







  /* Compatibility Aliases for Strict 60-30-10 Palette */







  --primary: var(--color-primary);







  --brand-blue: var(--color-primary);







  --brand-navy: var(--color-dark);







  --dark-slate: var(--color-dark);







  --text-body: var(--color-text);







  --body-text: var(--color-text);







  --text-muted: var(--color-muted);







  --light-text: var(--color-muted);







  --border-color: var(--color-border);







  --border-subtle: var(--color-border);







  







  /* Geometry & Elevation */







  --radius-sm: 8px;







  --radius-md: 12px;







  --radius-lg: 20px;







  --radius-pill: 9999px;







  --shadow-subtle: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.03);







  --shadow-card: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 8px 10px -6px rgba(15, 23, 42, 0.02);







  --shadow-btn: 0 4px 12px rgba(2, 132, 199, 0.25);







}















*, *::before, *::after {







  box-sizing: border-box;







  margin: 0;







  padding: 0;







}















html {



  scroll-behavior: smooth;



  font-size: 16px;



  overflow-x: hidden;



  max-width: 100vw;



}







body {



  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;



  color: var(--color-text);



  background-color: var(--color-bg-page);



  line-height: 1.8;



  -webkit-font-smoothing: antialiased;



  overflow-x: hidden;



  max-width: 100vw;



  position: relative;



}















/* Headings (Strict Deep Slate, High Contrast) */







h1, h2, h3, h4, h5, h6 {







  font-family: 'Montserrat', sans-serif;







  color: var(--color-dark);







  font-weight: 700;







  line-height: 1.3;







  margin-bottom: 1.25rem;







}















h1 { font-size: 2.65rem; font-weight: 800; letter-spacing: -0.03em; }















/* Signature Asymmetric Heading Banners (SEBT BoatLoanCal Standard - Strictly Unified Direction Across ALL Pages) */







h2, article h2, .content-card h2, .content-area h2, .editorial-fullwidth-container h2 {







  position: relative;







  display: block;







  text-align: center;







  padding: 20px 45px;







  margin-top: 5.5rem;







  margin-bottom: 3rem;







  background-color: #ffffff;







  border-style: solid;







  border-width: 7px 7px 2px 2px !important;







  border-color: #162E51 !important; /* Deep Slate corporate navy */







  border-radius: 54px 0px 54px 0px !important; /* Strictly unified signature asymmetric curve */







  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);







  color: #0284c7; /* Trust Blue accent */







  font-family: 'Montserrat', sans-serif;







  font-size: 2.15rem;







  font-weight: 800;







  line-height: 1.35;







  letter-spacing: -0.015em;







  clear: both;







}















/* Strictly unified format - opposite direction removed across all pages per user directive */







article h2:nth-of-type(even), .content-card h2:nth-of-type(even), .content-area h2:nth-of-type(even), .editorial-fullwidth-container h2:nth-of-type(even) {







  border-width: 7px 7px 2px 2px !important;







  border-radius: 54px 0px 54px 0px !important;







}















h3 { font-size: 1.3rem; margin-top: 2rem; }







h4 { font-size: 1.05rem; }















p { margin-bottom: 1.5rem; }







a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; }







a:hover { color: var(--color-primary-hover); text-decoration: underline; }







ul, ol { margin-left: 1.75rem; margin-bottom: 1.5rem; }







li { margin-bottom: 0.65rem; }















/* Top Disclaimer Banner */







.disclaimer-top-banner {







  background-color: #ffffff !important;







  border-bottom: 1px solid #e2e8f0 !important;







  font-size: 0.8rem;







  color: #000000 !important;







  padding: 7px 16px;







  text-align: center;







}







.disclaimer-top-banner a {







  color: #162E51;







  font-weight: 700;







  text-decoration: underline;







}







.banner-badge {







  background: #f1f5f9;







  color: #162E51;







  border: 1px solid #cbd5e1;







  font-weight: 700;







  font-size: 0.725rem;







  padding: 2px 10px;







  border-radius: 9999px;







  margin-right: 8px;







}







.banner-text {







  color: #000000 !important;







  font-size: 0.825rem;







}















/* Header & Navigation (Clean SmartAsset Corporate Standard) */







/* ==========================================================================



   NAVIGATION & RESPONSIVE HEADER (Desktop, Tablet, Mobile)



   ========================================================================== */



.site-header {



  background-color: #162E51;



  border-bottom: 1px solid rgba(255, 255, 255, 0.12);



  position: sticky;



  top: 0;



  z-index: 1000;



  box-shadow: 0 4px 25px rgba(22, 46, 81, 0.18);



  width: 100%;



}







.nav-container {



  width: 94%;



  max-width: 1520px;



  margin: 0 auto;



  padding: 1.1rem 0;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 1.5rem;



  position: relative;



}







.brand-logo {



  display: flex;



  align-items: center;



  text-decoration: none !important;



  flex-shrink: 0;



}







.brand-logo img {



  height: 46px;



  width: auto;



  max-width: 100%;



  display: block;



  transition: transform 0.25s ease, filter 0.25s ease;



}







.brand-logo:hover img {



  transform: scale(1.04);



  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.45));



}







/* Desktop Nav Menu */



.nav-menu {



  display: flex;



  align-items: center;



  justify-content: center;



  flex: 1;



}







.nav-links {



  display: flex;



  align-items: center;



  gap: 2rem;



  list-style: none;



  margin: 0;



  padding: 0;



}







.nav-links li {



  margin: 0;



  position: relative;



  display: flex;



  align-items: center;



}







.nav-links a {



  font-size: 0.95rem;



  font-weight: 600;



  color: #ffffff;



  transition: color 0.2s ease;



  display: inline-flex;



  align-items: center;



  gap: 6px;



  line-height: 1.5;



  text-decoration: none;



  white-space: nowrap;



}







.nav-links a:hover {



  color: #38bdf8;



  text-decoration: none;



}







/* Dropdown Menu Desktop */



.nav-item-dropdown {



  position: relative;



  display: flex;



  align-items: center;



}







.dropdown-arrow {



  font-size: 0.65rem;



  transition: transform 0.2s ease;



  color: #94a3b8;



  display: inline-block;



  line-height: 1;



}







.nav-item-dropdown:hover .dropdown-arrow {



  transform: rotate(180deg);



  color: #38bdf8;



}







.dropdown-menu {



  display: none;



  position: absolute;



  top: calc(100% + 14px);



  left: 0;



  background-color: #ffffff;



  min-width: 240px;



  padding: 8px 0;



  border-radius: 12px;



  border: 1.5px solid #cbd5e1;



  box-shadow: 0 18px 40px -5px rgba(15, 23, 42, 0.22);



  z-index: 1000;



  list-style: none;



  margin: 0;



}







.dropdown-menu::before {



  content: '';



  position: absolute;



  top: -26px;



  left: 0;



  width: 100%;



  height: 26px;



  background: transparent;



}







.nav-item-dropdown:hover .dropdown-menu {



  display: block;



}







.dropdown-menu li {



  margin: 0;



  border-bottom: 1px solid #f1f5f9;



  width: 100%;



}







.dropdown-menu li:last-child {



  border-bottom: none;



}







.dropdown-menu a {



  display: block;



  padding: 11px 22px;



  color: #162E51 !important;



  font-size: 0.92rem;



  font-weight: 600;



  transition: all 0.18s ease;



  width: 100%;



}







.dropdown-menu a:hover {



  background-color: #f0f9ff !important;



  color: var(--color-primary) !important;



  padding-left: 26px;



}







/* Nav CTA Buttons */



.nav-btn {



  background-color: var(--color-primary);



  color: #ffffff !important;



  padding: 9px 22px;



  border-radius: var(--radius-pill);



  font-weight: 700 !important;



  font-size: 0.9rem;



  transition: all 0.2s ease;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 8px;



  box-shadow: var(--shadow-btn);



  text-decoration: none !important;



  flex-shrink: 0;



  white-space: nowrap;



  border: none;



  cursor: pointer;



}







.nav-btn:hover {



  background-color: var(--color-primary-hover);



  transform: translateY(-1px);



  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);



  text-decoration: none !important;



}







.desktop-nav-btn {



  display: inline-flex;



}







.mobile-nav-cta {



  display: none;



}







/* Mobile Hamburger Toggle Button (Hidden on Desktop) */



.mobile-menu-btn {



  display: none;



  flex-direction: column;



  justify-content: space-between;



  width: 44px;



  height: 40px;



  background: rgba(255, 255, 255, 0.08);



  border: 1.5px solid rgba(56, 189, 248, 0.4);



  border-radius: 8px;



  padding: 9px 8px;



  cursor: pointer;



  z-index: 1001;



  transition: all 0.25s ease;



}







.mobile-menu-btn:hover,



.mobile-menu-btn:focus {



  background: rgba(56, 189, 248, 0.18);



  border-color: #38bdf8;



  outline: none;



}







.mobile-menu-btn .hamburger-bar {



  display: block;



  width: 100%;



  height: 2.5px;



  background-color: #ffffff;



  border-radius: 2px;



  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);



  transform-origin: center;



}







/* Animated Hamburger to (X) Close Icon */



.mobile-menu-btn.is-active .hamburger-bar:nth-child(1) {



  transform: translateY(7.5px) rotate(45deg);



  background-color: #38bdf8;



}







.mobile-menu-btn.is-active .hamburger-bar:nth-child(2) {



  opacity: 0;



  transform: scaleX(0);



}







.mobile-menu-btn.is-active .hamburger-bar:nth-child(3) {



  transform: translateY(-7.5px) rotate(-45deg);



  background-color: #38bdf8;



}







/* ==========================================================================



   MOBILE & TABLET RESPONSIVE BREAKPOINT (<= 992px)



   ========================================================================== */



@media (max-width: 992px) {



  .desktop-nav-btn {



    display: none !important;



  }







  .mobile-menu-btn {



    display: flex !important;



  }







  .brand-logo img {



    height: 38px;



  }







  /* Mobile Dropdown Slide-Down Container */



  .nav-menu {



    position: absolute;



    top: 100%;



    left: 0;



    right: 0;



    width: 100%;



    background: #0f1f38;



    border-top: 1px solid rgba(255, 255, 255, 0.1);



    border-bottom: 3px solid #38bdf8;



    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);



    flex-direction: column;



    align-items: stretch;



    justify-content: flex-start;



    padding: 1rem 1.25rem 1.5rem 1.25rem;



    display: none;



    z-index: 999;



  }







  .nav-menu.is-open {



    display: flex !important;



    animation: mobileMenuSlideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;



  }







  @keyframes mobileMenuSlideDown {



    from {



      opacity: 0;



      transform: translateY(-10px);



    }



    to {



      opacity: 1;



      transform: translateY(0);



    }



  }







  .nav-links {



    flex-direction: column;



    align-items: stretch;



    gap: 0;



    width: 100%;



  }







  .nav-links li {



    width: 100%;



    border-bottom: 1px solid rgba(255, 255, 255, 0.08);



    display: flex;



    flex-direction: column;



    align-items: stretch;



  }







  .nav-links a {



    padding: 13px 10px;



    font-size: 1.05rem;



    font-weight: 600;



    color: #ffffff;



    width: 100%;



    display: flex;



    justify-content: space-between;



    align-items: center;



    border-radius: 6px;



    transition: all 0.2s ease;



  }







  .nav-links a:hover,



  .nav-links a:active {



    color: #38bdf8;



    background: rgba(56, 189, 248, 0.08);



    padding-left: 16px;



  }







  /* Mobile Dropdown Menu for Legal Pages */



  .nav-item-dropdown {



    width: 100%;



    flex-direction: column;



    align-items: stretch;



  }







  .dropdown-menu {



    position: static;



    display: none;



    box-shadow: none;



    border: none;



    border-left: 2px solid #38bdf8;



    background: rgba(0, 0, 0, 0.25);



    margin: 4px 0 10px 10px;



    padding: 6px 0;



    border-radius: 0 8px 8px 0;



    min-width: auto;



  }







  .dropdown-menu::before {



    display: none;



  }







  .nav-item-dropdown.mobile-submenu-open .dropdown-menu {



    display: block !important;



  }







  .dropdown-menu li {



    border-bottom: 1px solid rgba(255, 255, 255, 0.05);



  }







  .dropdown-menu a {



    color: #cbd5e1 !important;



    padding: 10px 16px !important;



    font-size: 0.94rem;



  }







  .dropdown-menu a:hover {



    color: #38bdf8 !important;



    background: rgba(56, 189, 248, 0.1) !important;



    padding-left: 20px !important;



  }







  .mobile-nav-cta {



    display: block;



    margin-top: 1.25rem;



    padding-top: 0.75rem;



    border-top: 1px solid rgba(255, 255, 255, 0.1);



  }







  .mobile-cta-btn {



    width: 100%;



    display: flex;



    justify-content: center;



    text-align: center;



    padding: 13px 20px;



    font-size: 1.02rem;



    border-radius: 10px;



  }



}







/* Extra Mobile Sizing Polish (Phones < 480px) */



@media (max-width: 480px) {



  .brand-logo img {



    height: 33px;



  }







  .nav-container {



    padding: 0.85rem 0;



  }







  .mobile-menu-btn {



    width: 40px;



    height: 36px;



    padding: 8px 7px;



  }







  .hero-section {



    padding: 3.5rem 0 4rem 0 !important;



  }







  .tool-card {



    padding: 1.5rem !important;



  }



}















/* ==========================================================================







   Spacious Hero Section (Clean 2-Column Layout)







   ========================================================================== */







.hero-section {







  position: relative;







  background: linear-gradient(135deg, rgba(22, 46, 81, 0.93) 0%, rgba(22, 46, 81, 0.88) 100%), url('../images/hero-realistic.jpg') center/cover no-repeat;







  padding: 5.5rem 0 6rem 0;







  border-bottom: 2px solid rgba(255, 255, 255, 0.1);







  color: #ffffff;







}















.hero-container {







  width: 94%;







  max-width: 1520px;







  margin: 0 auto;







  display: grid;







  grid-template-columns: 1.15fr 1fr;







  gap: 4.5rem;







  align-items: center;







}















.hero-content {







  display: flex;







  flex-direction: column;







  justify-content: space-between;







  height: 100%;







}















.hero-visual-box {







  margin-top: 1.5rem;







  border-radius: var(--radius-md);







  overflow: hidden;







  box-shadow: var(--shadow-card);







  border: 1.5px solid var(--color-border);







  flex: 1;







  min-height: 260px;







  display: flex;







  align-items: center;







  justify-content: center;







  background: #162E51;







}















.hero-visual-box img {







  width: 100%;







  height: 100%;







  object-fit: cover;







  display: block;







}















.hero-tool-col {







  display: flex;







  flex-direction: column;







  height: 100%;







}















.hero-tool-col .tool-card {







  height: 100%;







  display: flex;







  flex-direction: column;







  justify-content: space-between;







}















/* Single-Tone Pill Badge */







.hero-badge-pill {







  display: inline-flex;







  align-items: center;







  gap: 8px;







  background-color: var(--color-primary-light);







  color: var(--color-primary-hover);







  font-size: 0.8rem;







  font-weight: 700;







  padding: 6px 14px;







  border-radius: var(--radius-pill);







  margin-bottom: 1.5rem;







  border: 1px solid var(--color-primary-border);







  width: fit-content;







}















.hero-title {







  font-size: 3.1rem;







  font-weight: 800;







  line-height: 1.2;







  color: #ffffff !important;







  margin-bottom: 1.25rem;







  letter-spacing: -0.03em;







}







.hero-title span { color: #38bdf8; }















.hero-lead {







  font-size: 1.15rem;







  color: #e2e8f0 !important;







  line-height: 1.85;







  margin-bottom: 2.25rem;







}















.hero-badge-pill {







  display: inline-flex;







  align-items: center;







  gap: 8px;







  background-color: rgba(56, 189, 248, 0.15) !important;







  color: #38bdf8 !important;







  font-size: 0.825rem;







  font-weight: 700;







  padding: 6px 16px;







  border-radius: var(--radius-pill);







  margin-bottom: 1.5rem;







  border: 1px solid rgba(56, 189, 248, 0.3) !important;







  width: fit-content;







}















/* Hero Trust & Authority Feature Cards (High-Contrast Frosted Glass Stack) */







.hero-features-stack, .hero-trust-list {







  display: flex;







  flex-direction: column;







  gap: 14px;







  list-style: none;







  margin: 1.5rem 0 2rem 0;







  padding: 0;







}















.hero-feature-card, .hero-trust-list li {







  display: flex;







  align-items: center;







  gap: 16px;







  background: rgba(255, 255, 255, 0.08) !important;







  backdrop-filter: blur(10px);







  -webkit-backdrop-filter: blur(10px);







  border: 1.5px solid rgba(56, 189, 248, 0.3) !important;







  border-radius: 14px !important;







  padding: 14px 20px !important;







  color: #ffffff !important;







  font-size: 0.98rem;







  font-weight: 600;







  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);







  transition: all 0.25s ease;







}















.hero-feature-card:hover, .hero-trust-list li:hover {







  background: rgba(255, 255, 255, 0.14) !important;







  border-color: #38bdf8 !important;







  transform: translateX(6px);







  box-shadow: 0 6px 25px rgba(56, 189, 248, 0.25);







}















.hero-feature-icon, .hero-trust-list li > span:first-child {







  width: 42px;







  height: 42px;







  min-width: 42px;







  display: flex;







  align-items: center;







  justify-content: center;







  background: rgba(56, 189, 248, 0.18);







  border: 1.5px solid rgba(56, 189, 248, 0.45);







  border-radius: 10px;







  color: #38bdf8 !important;







  flex-shrink: 0;







}















.hero-feature-icon svg, .hero-trust-list li > span:first-child svg {







  width: 22px;







  height: 22px;







  stroke: #38bdf8 !important;







  stroke-width: 2.5;







  fill: none;







}















.hero-feature-text strong {







  display: block;







  font-size: 1.02rem;







  font-weight: 700;







  color: #ffffff !important;







  margin-bottom: 3px;







  letter-spacing: -0.01em;







}















.hero-feature-text span {







  display: block;







  font-size: 0.86rem;







  color: #e2e8f0 !important;







  line-height: 1.45;







  font-weight: 400;







}















.hero-trust-list li > span:last-child {







  color: #ffffff !important;







  font-size: 0.96rem;







  font-weight: 600;







  line-height: 1.4;







}















/* Floating Elevated Tool Card (Spacious, Roomy, Premium Feel) */







.tool-card {







  background: var(--color-bg-white);







  border: 1.5px solid var(--color-border);







  border-radius: var(--radius-lg);







  padding: 3rem 2.75rem;







  box-shadow: var(--shadow-card);







}















.tool-header-title {







  font-size: 1.65rem;







  font-weight: 800;







  color: var(--color-dark);







  margin-bottom: 8px;







}















.tool-header-subtitle {







  font-size: 0.95rem;







  color: var(--color-muted);







  margin-bottom: 2rem;







}















.tool-form-grid {







  display: grid;







  grid-template-columns: 1fr 1fr;







  gap: 1.35rem 1.5rem;







  margin-bottom: 1.75rem;







}







.tool-form-grid .form-group-full {







  grid-column: 1 / -1;







}















.form-group label {







  display: block;







  font-size: 0.9rem;







  font-weight: 700;







  color: var(--color-dark);







  margin-bottom: 8px;







}















.tool-card input, .tool-card select, .form-control {







  width: 100%;







  padding: 15px 18px;







  font-size: 1rem;







  font-family: inherit;







  border: 1.5px solid #cbd5e1;







  border-radius: var(--radius-md);







  background-color: #ffffff;







  color: var(--color-dark);







  transition: border-color 0.2s, box-shadow 0.2s;







}















.tool-card input:focus, .tool-card select:focus, .form-control:focus {







  outline: none;







  border-color: var(--color-primary);







  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);







}















.tool-card input::placeholder {







  color: #94a3b8;







  font-size: 0.95rem;







}















.tool-card small {







  display: block;







  color: var(--color-muted);







  font-size: 0.825rem;







  margin-top: 6px;







  line-height: 1.4;







}















.btn-decode {







  background-color: var(--color-primary);







  color: #ffffff;







  border: none;







  font-family: 'Montserrat', sans-serif;







  font-weight: 800;







  font-size: 1.05rem;







  padding: 18px 30px;







  border-radius: var(--radius-md);







  cursor: pointer;







  width: 100%;







  box-shadow: var(--shadow-btn);







  transition: all 0.2s ease;







}







.btn-decode:hover {







  background-color: var(--color-primary-hover);







  transform: translateY(-2px);







  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.35);







}















/* ==========================================================================







   Compact Collapsible Table of Contents Bar (Slim Strip / "Bareek Si Patti")







   ========================================================================== */







.toc-collapsible-wrapper {







  width: 94%;







  max-width: 1520px;







  margin: 3rem auto 1.5rem auto;







}















.toc-accordion {







  width: 100%;







}















/* Slim Strip Summary Bar with Signature Heading Styling */







.toc-summary-bar {







  position: relative;







  display: flex;







  align-items: center;







  justify-content: space-between;







  padding: 15px 36px;







  background-color: #ffffff;







  border-style: solid;







  border-width: 7px 7px 2px 2px;







  border-color: #162E51; /* Deep Slate signature border */







  border-radius: 54px 0px 54px 0px; /* Exact Signature Asymmetric Curve from boatloancal */







  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);







  color: #0284c7; /* Trust Blue accent */







  font-family: 'Montserrat', sans-serif;







  font-size: 1.55rem;







  font-weight: 700;







  cursor: pointer;







  list-style: none;







  user-select: none;







  transition: all 0.25s ease;







}















.toc-summary-bar::-webkit-details-marker {







  display: none;







}















.toc-summary-bar:hover {







  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.15);







  border-color: var(--color-primary);







}















.toc-summary-bar h2,







.toc-summary-bar .toc-heading-text {







  margin: 0 !important;







  padding: 0 !important;







  border: none !important;







  border-radius: 0 !important;







  background: transparent !important;







  box-shadow: none !important;







  color: #0284c7 !important;







  font-family: 'Montserrat', sans-serif !important;







  font-size: 1.55rem !important;







  font-weight: 700 !important;







  letter-spacing: -0.01em !important;







  display: inline-block !important;







  line-height: 1.2 !important;







}















.toc-summary-left {







  display: flex;







  align-items: center;







  gap: 14px;







}















.toc-icon-bullet {







  font-size: 1.35rem;







}















.toc-summary-right {







  display: flex;







  align-items: center;







  gap: 16px;







}















.toc-badge-pill {







  font-family: 'Plus Jakarta Sans', sans-serif;







  font-size: 0.825rem;







  font-weight: 700;







  padding: 5px 16px;







  border-radius: 9999px;







  background: var(--color-primary-light);







  color: var(--color-primary);







  border: 1px solid var(--color-primary-border);







}















.toc-chevron-icon {







  font-size: 1.15rem;







  color: #162E51;







  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);







  display: inline-block;







}















.toc-accordion[open] .toc-chevron-icon {







  transform: rotate(180deg);







  color: var(--color-primary);







}















.toc-accordion[open] .toc-summary-bar {







  border-bottom-left-radius: 0;







  border-bottom-right-radius: 0;







  border-bottom: 2px dashed #cbd5e1;







}















/* Dropdown Content Area */







.toc-dropdown-panel {







  background: #ffffff;







  border-style: solid;







  border-width: 0px 7px 2px 2px;







  border-color: #162E51;







  border-radius: 0px 0px 54px 0px;







  padding: 2.25rem 3rem;







  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);







  animation: tocSlideDown 0.3s ease;







}















@keyframes tocSlideDown {







  from { opacity: 0; transform: translateY(-8px); }







  to { opacity: 1; transform: translateY(0); }







}















.toc-dropdown-grid {







  display: grid;







  grid-template-columns: repeat(3, 1fr);







  gap: 1rem 2rem;







}















.toc-link-item {







  display: flex;







  align-items: center;







  gap: 12px;







  padding: 10px 14px;







  border-radius: 10px;







  background: #f8fafc;







  border: 1px solid var(--color-border);







  color: var(--color-dark);







  font-size: 0.925rem;







  font-weight: 600;







  text-decoration: none;







  transition: all 0.2s ease;







}















.toc-link-item:hover {







  background: var(--color-primary-light);







  border-color: var(--color-primary-border);







  color: var(--color-primary);







  transform: translateX(4px);







  text-decoration: none;







}















.toc-link-num {







  width: 26px;







  height: 26px;







  border-radius: 50%;







  background: #ffffff;







  border: 1px solid var(--color-primary-border);







  display: flex;







  align-items: center;







  justify-content: center;







  font-size: 0.75rem;







  font-weight: 800;







  color: var(--color-primary);







  flex-shrink: 0;







}















/* ==========================================================================







   Full-Width Editorial Content & Unique Section Blocks







   ========================================================================== */







.editorial-fullwidth-container {







  width: 94%;







  max-width: 1520px;







  margin: 4rem auto 6rem auto;







}















.section-card-block {







  background: var(--color-bg-white);







  border: 1.5px solid var(--color-border);







  border-radius: var(--radius-lg);







  padding: 3.5rem 4.5rem;







  margin-bottom: 3.5rem;







  box-shadow: var(--shadow-subtle);







}















/* ==========================================================================







   Tool Results Container (SmartAsset Clean Output)







   ========================================================================== */







.tool-result-container {







  margin-top: 2rem;







  padding: 2rem;







  border-radius: var(--radius-md);







  background-color: var(--color-primary-light);







  border: 1px solid var(--color-primary-border);







  display: none;







  animation: fadeIn 0.3s ease;







}















@keyframes fadeIn {







  from { opacity: 0; transform: translateY(6px); }







  to { opacity: 1; transform: translateY(0); }







}















.result-card-header {







  display: flex;







  justify-content: space-between;







  align-items: center;







  padding-bottom: 1rem;







  border-bottom: 1px solid var(--color-primary-border);







  margin-bottom: 1.5rem;







}















.result-badge {







  background-color: var(--color-primary);







  color: #ffffff;







  font-weight: 700;







  padding: 5px 14px;







  border-radius: var(--radius-pill);







  font-size: 0.85rem;







}















.result-metric-grid {







  display: grid;







  grid-template-columns: repeat(2, 1fr);







  gap: 1rem;







  margin-bottom: 1.5rem;







}















.metric-item {







  background-color: #ffffff;







  padding: 14px;







  border-radius: var(--radius-sm);







  border: 1px solid var(--color-primary-border);







}







.metric-label { font-size: 0.75rem; text-transform: uppercase; color: var(--color-muted); font-weight: 700; }







.metric-value { font-size: 1.25rem; font-weight: 800; color: var(--color-dark); margin-top: 3px; }















/* Progress Timeline (Single Brand Blue Accent) */







.tracking-steps {







  display: flex;







  justify-content: space-between;







  position: relative;







  margin: 1.75rem 0;







  padding: 0 10px;







}







.tracking-steps::before {







  content: "";







  position: absolute;







  top: 14px;







  left: 20px;







  right: 20px;







  height: 2px;







  background: var(--color-border);







  z-index: 1;







}







.step-node {







  position: relative;







  z-index: 2;







  text-align: center;







}







.step-dot {







  width: 32px;







  height: 32px;







  border-radius: 50%;







  background: #ffffff;







  border: 2px solid #cbd5e1;







  margin: 0 auto 6px auto;







  display: flex;







  align-items: center;







  justify-content: center;







  font-weight: 800;







  font-size: 0.8rem;







  color: var(--color-muted);







}







.step-node.completed .step-dot {







  background: var(--color-dark);







  border-color: var(--color-dark);







  color: #ffffff;







}







.step-node.active .step-dot {







  background: var(--color-primary);







  border-color: var(--color-primary);







  color: #ffffff;







  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.2);







}







.step-label {







  font-size: 0.8rem;







  font-weight: 700;







  color: var(--color-dark);







}















/* ==========================================================================







   Horizontal Stats Bar (Disciplined Single-Tone)







   ========================================================================== */







.stats-bar-section {







  background-color: var(--color-bg-white);







  border-bottom: 1px solid var(--color-border);







  padding: 3rem 0;







}















.stats-grid {







  width: 94%;







  max-width: 1520px;







  margin: 0 auto;







  display: grid;







  grid-template-columns: repeat(4, 1fr);







  gap: 2rem;







  text-align: center;







}















.stat-item { padding: 0 1rem; }







.stat-item:not(:last-child) {







  border-right: 1px solid var(--color-border);







}















.stat-num {







  font-family: 'Montserrat', sans-serif;







  font-size: 2.25rem;







  font-weight: 800;







  color: var(--color-dark);







  margin-bottom: 4px;







}







.stat-num span { color: var(--color-primary); }















.stat-label {







  font-size: 0.9rem;







  color: var(--color-muted);







  font-weight: 600;







}















/* ==========================================================================







   3-Column Feature Cards (Spacious & Clean)







   ========================================================================== */







.features-section {







  padding: 5.5rem 0;







  width: 94%;







  max-width: 1520px;







  margin: 0 auto;







}















.section-header-centered {







  text-align: center;







  max-width: 720px;







  margin: 0 auto 3.5rem auto;







}















.section-tag {







  color: var(--color-primary);







  font-family: 'Montserrat', sans-serif;







  font-weight: 800;







  text-transform: uppercase;







  font-size: 0.85rem;







  letter-spacing: 0.05em;







  margin-bottom: 8px;







}















.section-main-title {







  font-size: 2.25rem;







  font-weight: 800;







  color: var(--color-dark);







  margin-bottom: 1rem;







}















.section-description {







  font-size: 1.05rem;







  color: var(--color-muted);







}















.cards-grid-3 {







  display: grid;







  grid-template-columns: repeat(3, 1fr);







  gap: 2.25rem;







}















.feature-card {







  background: var(--color-bg-white);







  border: 1px solid var(--color-border);







  border-radius: var(--radius-lg);







  padding: 2.5rem;







  box-shadow: var(--shadow-card);







  transition: all 0.25s ease;







  display: flex;







  flex-direction: column;







}







.feature-card:hover {







  transform: translateY(-4px);







  border-color: var(--color-primary-border);







  box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.08);







}















.feature-icon-wrapper {







  width: 56px;







  height: 56px;







  border-radius: var(--radius-md);







  background-color: var(--color-primary-light);







  color: var(--color-primary);







  display: flex;







  align-items: center;







  justify-content: center;







  font-size: 1.5rem;







  margin-bottom: 1.5rem;







}















.feature-card-title {







  font-size: 1.3rem;







  color: var(--color-dark);







  margin-bottom: 0.75rem;







}















.feature-card-desc {







  font-size: 0.95rem;







  color: var(--color-muted);







  line-height: 1.7;







  margin-bottom: 1.5rem;







  flex-grow: 1;







}















.feature-card-link {







  font-weight: 700;







  font-size: 0.95rem;







  color: var(--color-primary);







  display: inline-flex;







  align-items: center;







  gap: 6px;







}







.feature-card-link:hover {







  color: var(--color-primary-hover);







  text-decoration: underline;







}















/* ==========================================================================







   Editorial Content & Subpage Layouts (Full-Width, Spacious & Breathable)







   ========================================================================== */







.editorial-wrapper {







  width: 94%;







  max-width: 1520px;







  margin: 0 auto;







  padding: 2rem 0 6rem 0;







  display: grid;







  grid-template-columns: minmax(0, 1fr) 380px;







  gap: 3.5rem;







}















.content-card {







  background-color: var(--color-bg-white);







  padding: 4rem 4.5rem;







  border-radius: var(--radius-lg);







  border: 1px solid var(--color-border);







  box-shadow: var(--shadow-card);







}















/* Subpage Main Wrapper - Full Width Spacious Elementor Layout */







.main-wrapper {







  width: 94%;







  max-width: 1520px;







  margin: 0 auto;







  padding: 4.5rem 0 6rem 0;







  display: flex;







  flex-direction: column;







  gap: 3.5rem;







}















.main-wrapper .content-area,







.main-wrapper article {







  width: 100%;







}















.main-wrapper .sidebar {







  width: 100%;







  display: grid;







  grid-template-columns: 1fr 1fr;







  gap: 2rem;







}















/* Subpage Full-Width Wrapper (Legal & Standalone Pages) */







.full-width-wrapper {







  width: 94%;







  max-width: 1520px;







  margin: 0 auto;







  padding: 4.5rem 0 6rem 0;







}















/* Subpage Content Card */







.content-area {







  background-color: var(--color-bg-white);







  padding: 4rem 4.5rem;







  border-radius: var(--radius-lg);







  border: 1px solid var(--color-border);







  box-shadow: var(--shadow-card);







}















/* Breadcrumbs Bar */







.breadcrumbs {







  display: flex;







  align-items: center;







  flex-wrap: wrap;







  gap: 8px;







  font-size: 0.875rem;







  color: var(--color-muted);







  margin-bottom: 2.25rem;







  padding-bottom: 1.25rem;







  border-bottom: 1px solid var(--color-border);







}















.breadcrumbs a {







  color: var(--color-text);







  font-weight: 500;







  text-decoration: none;







}















.breadcrumbs a:hover {







  color: var(--color-primary);







  text-decoration: underline;







}















.breadcrumbs .sep {







  color: #94a3b8;







  font-size: 0.8rem;







}















.breadcrumbs .current {







  color: var(--color-primary);







  font-weight: 600;







}















.sidebar-sticky {







  display: flex;







  flex-direction: column;







  gap: 2rem;







  position: sticky;







  top: 90px;







}















/* Quick Answer Highlight Box (Clean Single-Tone Definition) */







.quick-answer-box {







  background-color: var(--color-primary-light);







  border-left: 4px solid var(--color-primary);







  padding: 1.75rem 2rem;







  border-radius: 0 var(--radius-md) var(--radius-md) 0;







  margin: 2.25rem 0;







}















.quick-answer-tag {







  font-family: 'Montserrat', sans-serif;







  font-size: 0.8rem;







  font-weight: 800;







  color: var(--color-primary);







  text-transform: uppercase;







  letter-spacing: 0.05em;







  margin-bottom: 8px;







}















.quick-answer-text {







  font-size: 1.05rem;







  color: var(--color-dark);







  font-weight: 500;







  margin: 0;







}















/* Alert Boxes (Single Purpose) */







.callout-alert {







  padding: 1.5rem 1.75rem;







  border-radius: var(--radius-md);







  margin: 2rem 0;







  font-size: 0.95rem;







  background-color: #f8fafc;







  border: 1px solid var(--color-border);







  color: var(--color-dark);







}















/* Clean Data Tables (SmartAsset Minimalist Grid) */







.table-responsive {







  overflow-x: auto;







  margin: 2rem 0;







  border-radius: var(--radius-md);







  border: 1px solid var(--color-border);







  background-color: #ffffff;







}















table {







  width: 100%;







  border-collapse: collapse;







  text-align: left;







  font-size: 0.95rem;







}















th {







  background-color: #f8fafc;







  font-family: 'Montserrat', sans-serif;







  font-weight: 700;







  color: var(--color-dark);







  padding: 14px 18px;







  border-bottom: 2px solid var(--color-border);







}















td {







  padding: 14px 18px;







  border-bottom: 1px solid var(--color-border);







  color: var(--color-text);







}















tr:last-child td { border-bottom: none; }







tr:nth-child(even) td { background-color: #fafbfc; }







tr:hover td { background-color: #f1f8fd; }















/* Sticky Table of Contents */







.toc-box {







  background-color: var(--color-bg-white);







  border: 1px solid var(--color-border);







  border-radius: var(--radius-md);







  padding: 1.75rem;







  box-shadow: var(--shadow-subtle);







}







.toc-box h3 {







  font-size: 1.15rem;







  margin-top: 0;







  padding-bottom: 10px;







  border-bottom: 1px solid var(--color-border);







  color: var(--color-dark);







}







.toc-list {







  list-style: none;







  margin: 0;







  font-size: 0.95rem;







}







.toc-list li { margin-bottom: 10px; }







.toc-list a { color: var(--color-text); display: block; font-weight: 500; }







.toc-list a:hover { color: var(--color-primary); }















/* Clean Service CTA Card */







.service-cta-card {







  background-color: var(--color-dark);







  color: #ffffff;







  padding: 2.25rem;







  border-radius: var(--radius-md);







  box-shadow: var(--shadow-subtle);







}







.service-cta-card h4 {







  color: #ffffff;







  font-size: 1.25rem;







  margin-bottom: 0.75rem;







}







.service-cta-card p {







  color: #94a3b8;







  font-size: 0.9rem;







  margin-bottom: 1.5rem;







}







.service-cta-btn {







  display: block;







  text-align: center;







  background-color: var(--color-primary);







  color: #ffffff !important;







  font-weight: 700;







  font-size: 0.95rem;







  padding: 13px;







  border-radius: var(--radius-pill);







  text-decoration: none !important;







  transition: all 0.2s ease;







}







.service-cta-btn:hover {







  background-color: var(--color-primary-hover);







}















/* FAQ Accordion */







.faq-section { margin-top: 3.5rem; }







.faq-item {







  border: 1px solid var(--color-border);







  border-radius: var(--radius-sm);







  margin-bottom: 12px;







  background-color: #ffffff;







  transition: border-color 0.2s ease;







}







.faq-item:hover { border-color: #cbd5e1; }







.faq-question {







  padding: 18px 22px;







  font-weight: 700;







  font-size: 1rem;







  color: var(--color-dark);







  cursor: pointer;







  display: flex;







  justify-content: space-between;







  align-items: center;







}







.faq-question::after {







  content: '+';







  font-size: 1.35rem;







  color: var(--color-primary);







  font-weight: 700;







}







.faq-item.active { border-color: var(--color-primary); }







.faq-item.active .faq-question::after {







  content: '−';







  color: var(--color-dark);







}







.faq-answer {







  display: none;







  padding: 0 22px 18px 22px;







  font-size: 0.95rem;







  color: var(--color-text);







  border-top: 1px solid #f1f5f9;







}







.faq-item.active .faq-answer {







  display: block;







  padding-top: 14px;







}















/* Footer (SmartAsset Institutional Dark) */







.site-footer {







  background-color: var(--color-dark);







  color: #94a3b8;







  padding: 5rem 0 2.5rem 0;







  margin-top: 6rem;







  font-size: 0.9rem;







}







.footer-container {







  width: 94%;







  max-width: 1520px;







  margin: 0 auto;







  display: grid;







  grid-template-columns: 2fr 1fr 1fr 1fr;







  gap: 3.5rem;







  padding-bottom: 3.5rem;







  border-bottom: 1px solid #1e293b;







}







.footer-brand h3 { color: #ffffff; margin-bottom: 1rem; font-size: 1.35rem; }







.footer-brand p { font-size: 0.9rem; line-height: 1.7; }







.footer-col h4 { color: #ffffff; font-size: 1.05rem; margin-bottom: 1.25rem; }







.footer-col ul { list-style: none; margin: 0; }







.footer-col li { margin-bottom: 10px; }







.footer-col a { color: #94a3b8; font-size: 0.9rem; }







.footer-col a:hover { color: #ffffff; text-decoration: underline; }















.footer-bottom {







  width: 94%;







  max-width: 1520px;







  margin: 2rem auto 0 auto;







  text-align: center;







  font-size: 0.85rem;







  color: #64748b;







}















/* ==========================================================================







   Component 1: Bento Dashboard Grid (textinvisible / Modern SaaS Style)







   ========================================================================== */







.bento-grid {







  display: grid;







  grid-template-columns: 1.25fr 1fr;







  gap: 2rem;







  margin: 2rem 0;







}







.bento-card {







  background: #ffffff;







  border: 1.5px solid var(--color-border);







  border-radius: 20px;







  padding: 2.5rem;







  position: relative;







  transition: transform 0.3s ease, box-shadow 0.3s ease;







  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.04);







}







.bento-card:hover {







  transform: translateY(-4px);







  box-shadow: 0 18px 35px -5px rgba(15, 23, 42, 0.08);







}







.bento-card.card-highlight {







  background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%);







  border-color: #bae6fd;







}







.bento-icon-large {







  width: 54px;







  height: 54px;







  border-radius: 14px;







  background: var(--color-primary-light);







  border: 1.5px solid var(--color-primary-border);







  color: var(--color-primary);







  display: flex;







  align-items: center;







  justify-content: center;







  font-size: 1.5rem;







  margin-bottom: 1.5rem;







}







.bento-stack {







  display: flex;







  flex-direction: column;







  gap: 1.5rem;







}















/* ==========================================================================







   Component 2: Premium Scrollable Table Container (textinvisible Standard)







   ========================================================================== */







.itxt-table-wrapper {







  max-width: 100%;







  margin: 2rem 0;







  background: #ffffff;







  border: 2px solid #162E51;







  border-radius: 16px;







  max-height: 580px;







  overflow-y: auto;







  overflow-x: auto;







  box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08);







}







.itxt-table-wrapper::-webkit-scrollbar {







  width: 8px;







  height: 8px;







}







.itxt-table-wrapper::-webkit-scrollbar-track {







  background: #f1f5f9;







  border-radius: 0 16px 16px 0;







}







.itxt-table-wrapper::-webkit-scrollbar-thumb {







  background: var(--color-primary);







  border-radius: 8px;







}







.itxt-table-wrapper::-webkit-scrollbar-thumb:hover {







  background: var(--color-primary-hover);







}







.itxt-table {







  width: 100%;







  border-collapse: separate;







  border-spacing: 0;







  font-size: 0.95rem;







}







.itxt-table thead th {







  position: sticky;







  top: 0;







  background: #162E51;







  color: #ffffff;







  font-family: 'Montserrat', sans-serif;







  font-weight: 700;







  padding: 16px 20px;







  text-align: left;







  z-index: 10;







  border-bottom: 2px solid var(--color-primary);







}







.itxt-table tbody td {







  padding: 16px 20px;







  border-bottom: 1px solid #e2e8f0;







  color: var(--color-text);







}







.itxt-table tbody tr:nth-child(even) td {







  background-color: #f8fafc;







}







.itxt-table tbody tr:hover td {







  background-color: #f0f9ff;







}







.status-pill {







  display: inline-block;







  padding: 4px 12px;







  border-radius: 9999px;







  font-size: 0.825rem;







  font-weight: 700;







  text-align: center;







  white-space: nowrap;







}







.pill-slate { background: #e2e8f0; color: #334155; }







.pill-blue { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }







.pill-navy { background: #162E51; color: #ffffff; }







.pill-cyan { background: #0284c7; color: #ffffff; }







.pill-alert { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }















/* ==========================================================================







   Component 3: Dual-Column Comparison Board (textinvisible Standard)







   ========================================================================== */







.comparison-board-container {







  background: #162E51;







  border-radius: 20px;







  padding: 3.5rem 3rem;







  color: #ffffff;







  margin: 2.5rem 0;







  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.15);







}







.comparison-cards-row {







  display: grid;







  grid-template-columns: 1fr 1fr;







  gap: 2rem;







  margin-top: 2rem;







}







.compare-card {







  background: rgba(255, 255, 255, 0.05);







  border: 1px solid rgba(255, 255, 255, 0.12);







  border-radius: 16px;







  padding: 2.25rem 2rem;







  backdrop-filter: blur(10px);







}







.compare-card.compare-active {







  background: rgba(2, 132, 199, 0.15);







  border: 2px solid var(--color-primary);







}







.compare-title {







  font-size: 1.25rem;







  font-weight: 800;







  margin-bottom: 1rem;







  display: flex;







  align-items: center;







  gap: 10px;







}







.compare-card ul {







  margin: 0;







  padding-left: 1.25rem;







  color: #cbd5e1;







  font-size: 0.95rem;







}







.compare-card li { margin-bottom: 0.75rem; }















/* ==========================================================================







   Component 4: Tiered Fee Comparison Cards







   ========================================================================== */







.fee-tier-grid {







  display: grid;







  grid-template-columns: repeat(3, 1fr);







  gap: 2rem;







  margin: 2.5rem 0;







}







.fee-tier-card {







  background: #ffffff;







  border: 2px solid var(--color-border);







  border-radius: 18px;







  padding: 2.75rem 2rem;







  text-align: center;







  position: relative;







  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;







}







.fee-tier-card:hover {







  transform: translateY(-5px);







  box-shadow: 0 20px 35px -5px rgba(15, 23, 42, 0.08);







}







.fee-tier-card.tier-popular {







  border-color: var(--color-primary);







  box-shadow: 0 12px 30px rgba(2, 132, 199, 0.12);







}







.tier-badge {







  position: absolute;







  top: -14px;







  left: 50%;







  transform: translateX(-50%);







  background: var(--color-primary);







  color: #ffffff;







  font-size: 0.75rem;







  font-weight: 800;







  text-transform: uppercase;







  letter-spacing: 0.08em;







  padding: 4px 16px;







  border-radius: 9999px;







}







.tier-price {







  font-size: 2.75rem;







  font-weight: 900;







  color: var(--color-dark);







  margin: 1rem 0 0.5rem 0;







  font-family: 'Montserrat', sans-serif;







}







.tier-time {







  display: inline-block;







  background: var(--color-primary-light);







  color: var(--color-primary);







  font-weight: 700;







  font-size: 0.85rem;







  padding: 4px 14px;







  border-radius: 9999px;







  margin-bottom: 1.5rem;







}















/* ==========================================================================







   Component 5: Numbered Workflow Stepper Cards







   ========================================================================== */







.workflow-stepper-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1.5rem;

  margin: 2.5rem 0;

}







.workflow-step-card {







  background: #ffffff;







  border: 1.5px solid var(--color-border);







  border-radius: 16px;







  padding: 2.25rem 2rem;







  position: relative;







}







.step-number-circle {







  width: 48px;







  height: 48px;







  border-radius: 50%;







  background: #162E51;







  color: #ffffff;







  font-family: 'Montserrat', sans-serif;







  font-weight: 900;







  font-size: 1.25rem;







  display: flex;







  align-items: center;







  justify-content: center;







  margin-bottom: 1.25rem;







}







.workflow-step-card:nth-child(2) .step-number-circle {







  background: var(--color-primary);







}















/* ==========================================================================







   Component 6: Suspension Causes Progress Matrix







   ========================================================================== */







.suspension-causes-grid {







  display: grid;







  grid-template-columns: repeat(5, 1fr);







  gap: 1.25rem;







  margin: 2.5rem 0;







}







.suspension-box {







  background: #ffffff;







  border: 1.5px solid var(--color-border);







  border-radius: 14px;







  padding: 1.75rem 1.25rem;







  text-align: center;







  display: flex;







  flex-direction: column;







  justify-content: space-between;







  align-items: center;







}







.suspension-pct {







  font-family: 'Montserrat', sans-serif;







  font-size: 2rem;







  font-weight: 900;







  color: var(--color-primary);







  margin-bottom: 0.5rem;







}







.suspension-title {







  font-size: 0.875rem;







  font-weight: 700;







  color: var(--color-dark);







  margin-bottom: 0.5rem;







  line-height: 1.35;







}















/* ==========================================================================







   Component 7: Interactive Checklist Grid







   ========================================================================== */







.checklist-grid {







  display: grid;







  grid-template-columns: 1fr 1fr;







  gap: 1.25rem;







  margin: 2rem 0;







}







.checklist-item {







  background: #ffffff;







  border: 1.5px solid var(--color-border);







  border-left: 5px solid var(--color-primary);







  border-radius: 10px;







  padding: 1.25rem 1.5rem;







  display: flex;







  align-items: flex-start;







  gap: 14px;







}







.checklist-check-icon {







  width: 24px;







  height: 24px;







  border-radius: 6px;







  background: var(--color-primary-light);







  color: var(--color-primary);







  display: flex;







  align-items: center;







  justify-content: center;







  font-weight: 900;







  flex-shrink: 0;







  font-size: 0.85rem;







  margin-top: 2px;







}















/* ==========================================================================







   Component 8: USPS Shipping Status Milestone Tracker







   ========================================================================== */







.shipping-milestones-track {







  display: grid;







  grid-template-columns: repeat(3, 1fr);







  gap: 1.5rem;







  margin: 2.5rem 0;







  position: relative;







}







.shipping-milestone-card {







  background: #f8fafc;







  border: 1.5px solid var(--color-border);







  border-radius: 14px;







  padding: 2rem 1.5rem;







  text-align: center;







}







.shipping-milestone-icon {







  font-size: 2rem;







  margin-bottom: 0.75rem;







}















/* ==========================================================================







   Component 9: Dual Envelope Roadmap (Separate Mailing Windows)







   ========================================================================== */







.envelope-roadmap-grid {







  display: grid;







  grid-template-columns: 1fr 1fr;







  gap: 2rem;







  margin: 2.5rem 0;







}







.envelope-card {







  border-radius: 16px;







  padding: 2.5rem 2rem;







  border: 2px solid var(--color-border);







  background: #ffffff;







}







.envelope-card.card-first {







  border-color: #162E51;







  background: #ffffff;







}







.envelope-card.card-second {







  border-color: var(--color-primary);







  background: var(--color-primary-light);







}















/* ==========================================================================







   Component 10: 4-Column Applicant Scenarios Grid







   ========================================================================== */







.scenarios-grid {







  display: grid;







  grid-template-columns: repeat(4, 1fr);







  gap: 1.5rem;







  margin: 2.5rem 0;







}







.scenario-card {







  background: #ffffff;







  border: 1.5px solid var(--color-border);







  border-radius: 14px;







  padding: 2rem 1.5rem;







  display: flex;







  flex-direction: column;







  justify-content: space-between;







  transition: transform 0.2s, border-color 0.2s;







}







.scenario-card:hover {







  transform: translateY(-4px);







  border-color: var(--color-primary);







}







.scenario-tag {







  font-size: 0.75rem;







  font-weight: 800;







  text-transform: uppercase;







  padding: 3px 10px;







  border-radius: 9999px;







  background: #f1f5f9;







  color: var(--color-dark);







  width: fit-content;







  margin-bottom: 1rem;







}























/* ==========================================================================







   Universal Elementor Box Styling & Hover Effects







   ========================================================================== */







.bento-card,







.scenario-card,







.workflow-step-card,







.suspension-box,







.checklist-item,







.shipping-milestone-card,







.envelope-card,







.fee-tier-card,







.compare-card,







.feature-card,







.service-cta-card,







.toc-box,







.credential-card,







.exec-feature-card {







  border: 1.5px solid #e2e8f0;







  transition: all 0.28s cubic-bezier(0.25, 1, 0.5, 1);







}















.bento-card:hover,







.scenario-card:hover,







.workflow-step-card:hover,







.suspension-box:hover,







.checklist-item:hover,







.shipping-milestone-card:hover,







.envelope-card:hover,







.feature-card:hover,







.credential-card:hover,







.exec-feature-card:hover {







  border-color: #0284c7 !important;







  transform: translateY(-5px);







  box-shadow: 0 16px 35px rgba(2, 132, 199, 0.12) !important;







}















/* ==========================================================================







   Section 1: Executive Authority Showcase (Elementor Master Block)







   ========================================================================== */







.exec-showcase-container {







  display: flex;







  flex-direction: column;







  gap: 2rem;







}















.exec-hero-banner {







  background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);







  border: 2px solid #bae6fd;







  border-left: 6px solid #0284c7;







  border-radius: 18px;







  padding: 2.75rem 3rem;







  box-shadow: 0 10px 25px rgba(2, 132, 199, 0.06);







}















.exec-hero-badge {







  display: inline-flex;







  align-items: center;







  gap: 8px;







  background: #e0f2fe;







  color: #0284c7;







  font-family: 'Montserrat', sans-serif;







  font-size: 0.8rem;







  font-weight: 800;







  text-transform: uppercase;







  letter-spacing: 0.06em;







  padding: 6px 16px;







  border-radius: 9999px;







  border: 1px solid #bae6fd;







  margin-bottom: 1.25rem;







}















.exec-features-grid {







  display: grid;







  grid-template-columns: repeat(3, 1fr);







  gap: 1.75rem;







}















.exec-feature-card {







  background: #ffffff;







  border: 1.5px solid #e2e8f0;







  border-radius: 16px;







  padding: 2.25rem 2rem;







  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);







}















.exec-icon-badge {







  width: 56px;







  height: 56px;







  border-radius: 14px;







  background: #f0f9ff;







  border: 1.5px solid #bae6fd;







  color: #0284c7;







  display: flex;







  align-items: center;







  justify-content: center;







  margin-bottom: 1.25rem;







  transition: all 0.25s ease;







}















.exec-feature-card:hover .exec-icon-badge {







  background: #0284c7;







  color: #ffffff;







  transform: scale(1.08);







}















.exec-pipeline-strip {







  background: #ffffff;







  border: 2px solid #e2e8f0;







  border-radius: 16px;







  padding: 2rem 2.5rem;







  display: grid;







  grid-template-columns: repeat(4, 1fr);







  gap: 1.5rem;







  text-align: center;







  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);







}















.pipeline-stage {







  position: relative;







}















.pipeline-num {







  display: inline-flex;







  align-items: center;







  justify-content: center;







  width: 32px;







  height: 32px;







  border-radius: 50%;







  background: #f0f9ff;







  color: #0284c7;







  border: 1.5px solid #bae6fd;







  font-weight: 800;







  font-size: 0.85rem;







  margin-bottom: 8px;







}















/* ==========================================================================







   Section 2: Credential Cards (Top Blue Elementor Border)







   ========================================================================== */







.credentials-grid {







  display: grid;







  grid-template-columns: repeat(4, 1fr);







  gap: 1.5rem;







  margin: 2.5rem 0;







}















.credential-card {







  background: #ffffff;







  border: 2px solid #e2e8f0;







  border-top: 5px solid #0284c7 !important;







  border-radius: 16px;







  padding: 2.25rem 1.75rem;







  display: flex;







  flex-direction: column;







  justify-content: space-between;







  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);







  position: relative;







}















.credential-badge {







  font-size: 0.75rem;







  font-weight: 800;







  text-transform: uppercase;







  letter-spacing: 0.05em;







  padding: 4px 12px;







  border-radius: 9999px;







  background: #e0f2fe;







  color: #0284c7;







  width: fit-content;







  margin-bottom: 1.25rem;







}















.credential-icon-box {







  width: 48px;







  height: 48px;







  border-radius: 12px;







  background: #f0f9ff;







  border: 1.5px solid #bae6fd;







  color: #0284c7;







  display: flex;







  align-items: center;







  justify-content: center;







  margin-bottom: 1rem;







  transition: all 0.25s ease;







}















.credential-card:hover .credential-icon-box {







  background: #0284c7;







  color: #ffffff;







}















/* ==========================================================================







   Section 3: Status Matrix Table (Clean, Light, Elementor Standard)







   ========================================================================== */







/* Elementor Clean Matrix Table (With High-Contrast Dark Blue Header #162E51 & Smooth Horizontal Slider) */

.status-matrix-table-wrapper {

  max-width: 100%;

  width: 100%;

  margin: 2rem 0;

  background: #ffffff;

  border: 2.5px solid #162E51 !important;

  border-radius: 16px;

  overflow-x: auto !important;

  -webkit-overflow-scrolling: touch;

  box-shadow: 0 6px 24px rgba(22, 46, 81, 0.08);

  position: relative;

}



/* Custom Horizontal Scrollbar / Slider */

.status-matrix-table-wrapper::-webkit-scrollbar {

  width: 8px;

  height: 8px;

}



.status-matrix-table-wrapper::-webkit-scrollbar-track {

  background: #f1f5f9;

  border-radius: 8px;

}



.status-matrix-table-wrapper::-webkit-scrollbar-thumb {

  background: var(--color-primary);

  border-radius: 8px;

}



.status-matrix-table-wrapper::-webkit-scrollbar-thumb:hover {

  background: #0369a1;

}



.status-matrix-table {

  width: 100%;

  min-width: 860px; /* Guarantees complete column visibility without text truncation */

  border-collapse: collapse;

  text-align: left;

}















.status-matrix-table thead th {







  background: #162E51 !important;







  color: #ffffff !important;







  font-family: 'Montserrat', sans-serif;







  font-weight: 800;







  font-size: 0.95rem;







  padding: 18px 24px;







  border-bottom: 2.5px solid #162E51 !important;







  border-right: 1.5px solid rgba(255, 255, 255, 0.2);







  letter-spacing: 0.03em;







}







.status-matrix-table thead th:last-child {







  border-right: none;







}















.status-matrix-table tbody td {







  padding: 18px 24px;







  border-bottom: 1.5px solid #162E51 !important;







  border-right: 1.5px solid rgba(22, 46, 81, 0.2) !important;







  font-size: 0.935rem;







  color: #162E51;







  vertical-align: middle;







}







.status-matrix-table tbody td:last-child {







  border-right: none !important;







}















.status-matrix-table tbody tr:last-child td {







  border-bottom: none !important;







}















.status-matrix-table tbody tr:nth-child(even) td {







  background-color: #fbfcfe;







}















.status-matrix-table tbody tr:hover td {







  background-color: #f0f9ff;







}















/* ==========================================================================







   Section 4: Comparison Board (Light Background Redesign)







   ========================================================================== */







.comparison-board-container {







  background: #ffffff !important;







  border: 2px solid #e2e8f0 !important;







  border-top: 6px solid #0284c7 !important;







  border-radius: 20px !important;







  padding: 3.5rem 3rem !important;







  color: #162E51 !important;







  margin: 2.5rem 0 !important;







  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;







}















.comparison-board-title {







  color: #162E51 !important;







  margin-top: 0;







  text-align: center;







  font-size: 1.75rem;







  font-weight: 800;







}















.comparison-board-subtitle {







  color: #64748b !important;







  text-align: center;







  max-width: 720px;







  margin: 0 auto 2.5rem auto;







  font-size: 1rem;







}















.compare-card {







  border-radius: 16px;







  padding: 2.5rem 2rem;







}















.compare-card.card-anxiety {







  background: #fff5f5 !important;







  border: 2px solid #fecaca !important;







}















.compare-card.card-anxiety .compare-title {







  color: #b91c1c !important;







  font-size: 1.25rem;







  font-weight: 800;







  margin-bottom: 1rem;







  display: flex;







  align-items: center;







  gap: 10px;







}















.compare-card.card-anxiety ul {







  color: #334155 !important;







  margin: 0;







  padding-left: 1.25rem;







  font-size: 0.95rem;







}















.compare-card.card-reality {







  background: #f0f9ff !important;







  border: 2px solid #bae6fd !important;







}















.compare-card.card-reality .compare-title {







  color: #0284c7 !important;







  font-size: 1.25rem;







  font-weight: 800;







  margin-bottom: 1rem;







  display: flex;







  align-items: center;







  gap: 10px;







}















.compare-card.card-reality ul {







  color: #334155 !important;







  margin: 0;







  padding-left: 1.25rem;







  font-size: 0.95rem;







}















.bank-check-indicator-box {







  margin-top: 2.5rem;







  background: #f8fafc;







  border-radius: 14px;







  padding: 1.5rem 2rem;







  border: 1.5px solid #e2e8f0;







  border-left: 6px solid #0284c7;







}















.bank-check-indicator-box strong {







  color: #0284c7;







}















.bank-check-indicator-box span {







  color: #334155;







  font-size: 0.95rem;







  line-height: 1.7;







}















/* ==========================================================================







   Section 7: Tiered Fee Cards (Hover Color Transforms Like Popular Card)







   ========================================================================== */







.fee-tier-card {







  background: #ffffff;







  border: 2px solid #e2e8f0;







  border-radius: 18px;







  padding: 2.75rem 2rem;







  text-align: center;







  position: relative;







  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);







  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);







}















.fee-tier-card:hover,







.fee-tier-card.tier-popular {







  border-color: #0284c7 !important;







  transform: translateY(-8px);







  box-shadow: 0 20px 40px rgba(2, 132, 199, 0.16) !important;







  background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%) !important;







}















.fee-tier-card:hover .tier-price,







.fee-tier-card.tier-popular .tier-price {







  color: #0284c7 !important;







}















.fee-tier-card:hover .tier-time,







.fee-tier-card.tier-popular .tier-time {







  background: #0284c7 !important;







  color: #ffffff !important;







}















/* ==========================================================================







   Section 8: Suspension Causes (Border & Color Accent)







   ========================================================================== */







.suspension-box {







  background: #ffffff;







  border: 2px solid #e2e8f0;







  border-top: 4px solid #0284c7 !important;







  border-radius: 16px;







  padding: 2rem 1.25rem;







  text-align: center;







  display: flex;







  flex-direction: column;







  justify-content: space-between;







  align-items: center;







  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);







}















.suspension-box:hover {







  border-color: #0284c7 !important;







  border-top-color: #0284c7 !important;







  transform: translateY(-5px);







  box-shadow: 0 16px 30px rgba(2, 132, 199, 0.12) !important;







}















/* ==========================================================================







   Section 11: USPS Shipping Milestones (Animations & Elementor Icons)







   ========================================================================== */







.shipping-milestones-track {







  display: grid;







  grid-template-columns: repeat(3, 1fr);







  gap: 1.75rem;







  margin: 2.5rem 0;







}















.shipping-milestone-card {







  background: #ffffff;







  border: 2px solid #e2e8f0;







  border-radius: 18px;







  padding: 2.75rem 2rem;







  text-align: center;







  position: relative;







  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);







  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);







}















.shipping-milestone-card:hover {







  border-color: #0284c7 !important;







  transform: translateY(-8px);







  box-shadow: 0 20px 40px rgba(2, 132, 199, 0.15) !important;







}















.shipping-milestone-badge {







  display: inline-block;







  padding: 4px 14px;







  border-radius: 9999px;







  background: #e0f2fe;







  color: #0284c7;







  font-size: 0.75rem;







  font-weight: 800;







  text-transform: uppercase;







  letter-spacing: 0.06em;







  margin-bottom: 1.25rem;







}















.shipping-icon-container {







  width: 70px;







  height: 70px;







  border-radius: 20px;







  background: #f0f9ff;







  border: 2px solid #bae6fd;







  color: #0284c7; /* Unified Trust Blue */







  display: flex;







  align-items: center;







  justify-content: center;







  margin: 0 auto 1.5rem auto;







  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);







  animation: iconPulse 4s infinite ease-in-out;







}















@keyframes iconPulse {







  0%, 100% { transform: translateY(0); }







  50% { transform: translateY(-4px); }







}















.shipping-milestone-card:hover .shipping-icon-container {







  background: #0284c7;







  color: #ffffff;







  transform: scale(1.12);







  box-shadow: 0 10px 25px rgba(2, 132, 199, 0.3);







}















/* ==========================================================================







   Section 12: Dual Envelope Roadmap (Both Envelopes Same Design)







   ========================================================================== */







.envelope-roadmap-grid {







  display: grid;







  grid-template-columns: 1fr 1fr;







  gap: 2rem;







  margin: 2.5rem 0;







}















.envelope-card {







  background: #ffffff !important; /* EXACT SAME BACKGROUND */







  border: 2px solid #e2e8f0;







  border-top: 6px solid #0284c7 !important;







  border-radius: 18px;







  padding: 2.75rem 2.25rem;







  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);







  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);







}















.envelope-card:hover {







  border-color: #0284c7 !important;







  border-top-color: #0284c7 !important;







  transform: translateY(-6px);







  box-shadow: 0 18px 38px rgba(2, 132, 199, 0.12) !important;







}















.envelope-card.card-first,







.envelope-card.card-second {







  background: #ffffff !important;







  border-top: 6px solid #0284c7 !important;







}















/* Elementor Unified SVG Icon Utility */







.elementor-svg-icon {







  width: 24px;







  height: 24px;







  fill: currentColor;







  display: inline-block;







  vertical-align: middle;







}















.elementor-svg-icon-lg {







  width: 32px;







  height: 32px;







  fill: currentColor;







  display: inline-block;







  vertical-align: middle;







}















/* Responsive */







@media (max-width: 1024px) {







  .hero-container { grid-template-columns: 1fr; gap: 3rem; }







  .editorial-wrapper { grid-template-columns: 1fr; padding: 2rem 0 4rem 0; }







  .main-wrapper { grid-template-columns: 1fr; padding: 3rem 0 4rem 0; }







  .full-width-wrapper { padding: 3rem 0 4rem 0; }







  .cards-grid-3 { grid-template-columns: 1fr; }







  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }







  .stat-item:nth-child(2) { border-right: none; }







  .toc-hub-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }







  .toc-dropdown-grid { grid-template-columns: repeat(2, 1fr); gap: 0.85rem 1.25rem; }







  .section-card-block { padding: 2.5rem 2rem; }







  .bento-grid { grid-template-columns: 1fr; }







  .comparison-cards-row { grid-template-columns: 1fr; }







  .fee-tier-grid { grid-template-columns: 1fr; }







  .workflow-stepper-grid { grid-template-columns: 1fr; }







  .suspension-causes-grid { grid-template-columns: repeat(2, 1fr); }







  .checklist-grid { grid-template-columns: 1fr; }







  .shipping-milestones-track { grid-template-columns: 1fr; }







  .envelope-roadmap-grid { grid-template-columns: 1fr; }







  .scenarios-grid { grid-template-columns: repeat(2, 1fr); }







}















@media (max-width: 640px) {







  h1 { font-size: 2.15rem; }







  h2, article h2, .content-card h2, .content-area h2, .editorial-fullwidth-container h2 {







    font-size: 1.55rem;







    padding: 14px 24px;







    border-radius: 36px 0px 36px 0px !important;







    border-width: 5px 5px 2px 2px !important;







    margin-top: 3.5rem;







    margin-bottom: 2rem;







  }







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







  .exec-pipeline-strip { grid-template-columns: 1fr; gap: 1rem; }







  .credentials-grid { grid-template-columns: 1fr; }







  .main-wrapper .sidebar { grid-template-columns: 1fr; }







  .hero-title { font-size: 2.25rem; }







  .tool-card { padding: 2rem 1.5rem; }







  .tool-form-grid { grid-template-columns: 1fr; }







  .stats-grid { grid-template-columns: 1fr; }







  .stat-item { border-right: none !important; border-bottom: 1px solid var(--color-border); padding-bottom: 1rem; }







  .footer-container { grid-template-columns: 1fr; gap: 2rem; }







  .tracking-steps { flex-direction: column; gap: 12px; }







  .tracking-steps::before { display: none; }







  .content-card, .content-area { padding: 2rem 1.5rem; }







  .toc-hub-section { padding: 2rem 1.5rem; }







  .toc-hub-grid { grid-template-columns: 1fr; }







  .toc-dropdown-grid { grid-template-columns: 1fr; gap: 0.75rem; }







  .toc-summary-bar { font-size: 1.15rem; padding: 12px 18px; border-radius: 36px 0px 36px 0px; border-width: 5px 5px 2px 2px; }







  .toc-summary-bar h2, .toc-summary-bar .toc-heading-text { font-size: 1.15rem !important; }







  .toc-dropdown-panel { padding: 1.5rem 1.25rem; border-radius: 0px 0px 36px 0px; border-width: 0px 5px 2px 2px; }







  .section-card-block { padding: 2rem 1.25rem; }







  .suspension-causes-grid { grid-template-columns: 1fr; }







  .scenarios-grid { grid-template-columns: 1fr; }







}























/* Automatic Global Upgrade for Subpage Tables & Boxes */







.content-area table, article table {







  width: 100%;







  border-collapse: separate;







  border-spacing: 0;







  margin: 1.5rem 0;







  border: 1.5px solid var(--color-border);







  border-radius: 14px;







  overflow: hidden;







  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);







}







.content-area thead th, article thead th {







  background: #162E51;







  color: #ffffff;







  font-family: 'Montserrat', sans-serif;







  font-weight: 700;







  padding: 16px 20px;







  text-align: left;







  border-bottom: 2px solid var(--color-primary);







}







.content-area tbody td, article tbody td {







  padding: 15px 20px;







  border-bottom: 1px solid #e2e8f0;







  color: var(--color-text);







  font-size: 0.95rem;







}







.content-area tbody tr:nth-child(even) td, article tbody tr:nth-child(even) td {







  background-color: #f8fafc;







}







.content-area tbody tr:hover td, article tbody tr:hover td {







  background-color: #f0f9ff;







}















/* Subpage Callout & Info Boxes */







.callout-alert, .quick-answer-box {







  background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%);







  border: 1.5px solid #bae6fd;







  border-left: 6px solid var(--color-primary);







  border-radius: 14px;







  padding: 2rem 2.25rem;







  margin: 2rem 0;







  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.06);







}







.quick-answer-tag {







  color: var(--color-primary);







  font-family: 'Montserrat', sans-serif;







  font-weight: 800;







  font-size: 0.825rem;







  text-transform: uppercase;







  letter-spacing: 0.06em;







  margin-bottom: 8px;







}







.quick-answer-text {







  font-size: 1.05rem;







  line-height: 1.8;







  color: var(--color-dark);







  margin: 0;







}























/* Custom Elementor Dropdown Select with Roomy Trust Blue Chevron */







.tool-card select, select.form-control, select.fee-calc-trigger {







  appearance: none !important;







  -webkit-appearance: none !important;







  -moz-appearance: none !important;







  background-color: #ffffff !important;







  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;







  background-repeat: no-repeat !important;







  background-position: right 20px center !important;







  background-size: 16px 16px !important;







  padding-right: 52px !important;







  cursor: pointer;







}















/* 4-Column Payment Mistakes Matrix */







.payment-mistakes-grid {







  display: grid;







  grid-template-columns: repeat(4, 1fr);







  gap: 1.75rem;







  margin: 2.5rem 0;







}















.payment-mistake-card {







  background: #ffffff;







  border: 2px solid #e2e8f0;







  border-top: 5px solid #0284c7;







  border-radius: 18px;







  padding: 2.25rem 1.75rem;







  display: flex;







  flex-direction: column;







  justify-content: space-between;







  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.03);







  transition: all 0.28s cubic-bezier(0.25, 1, 0.5, 1);







}















.payment-mistake-card:hover {







  border-color: #0284c7;







  transform: translateY(-6px);







  box-shadow: 0 18px 36px rgba(2, 132, 199, 0.12);







}















@media (max-width: 1024px) {







  .payment-mistakes-grid { grid-template-columns: repeat(2, 1fr); }







}







@media (max-width: 640px) {







  .payment-mistakes-grid { grid-template-columns: 1fr; }







}























/* Strictly Unified Status Badges (Exact Same Size, Same Color, Same Alignment) */







.status-badge-unified {







  display: inline-flex;







  align-items: center;







  justify-content: center;







  width: 140px;







  height: 38px;







  background: #f0f9ff !important;







  color: #0284c7 !important;







  border: 1.5px solid #bae6fd !important;







  border-radius: 8px !important;







  font-family: 'Montserrat', sans-serif !important;







  font-size: 0.825rem !important;







  font-weight: 800 !important;







  text-transform: uppercase !important;







  letter-spacing: 0.04em !important;







  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.08) !important;







  text-align: center !important;







  white-space: nowrap !important;







}















/* Neutral Harmonious Comparison Card (Zero Red Multi-Color) */







.compare-card.card-anxiety {







  background: #ffffff !important;







  border: 2px solid #e2e8f0 !important;







  border-top: 5px solid #162E51 !important;







}















.compare-card.card-reality {







  background: #ffffff !important;







  border: 2px solid #e2e8f0 !important;







  border-top: 5px solid #0284c7 !important;







}















.compare-card.card-anxiety .compare-title {







  color: #162E51 !important;







  font-size: 1.25rem !important;







  font-weight: 800 !important;







  margin-bottom: 1rem !important;







  display: flex !important;







  align-items: center !important;







  gap: 10px !important;







}















.compare-card.card-anxiety ul {







  color: #334155 !important;







  margin: 0 !important;







  padding-left: 1.25rem !important;







  font-size: 0.95rem !important;







}















.compare-card.card-reality {







  background: #f0f9ff !important;







  border: 2px solid #bae6fd !important;







  border-top: 5px solid #0284c7 !important;







}















.compare-card.card-reality .compare-title {







  color: #0284c7 !important;







  font-size: 1.25rem !important;







  font-weight: 800 !important;







  margin-bottom: 1rem !important;







  display: flex !important;







  align-items: center !important;







  gap: 10px !important;







}















.compare-card.card-reality ul {







  color: #334155 !important;







  margin: 0 !important;







  padding-left: 1.25rem !important;







  font-size: 0.95rem !important;







}























/* Hero Dual Matching Info Cards (Identical Structure, 100% Pure White Text) */







.hero-dual-cards {







  display: flex;







  flex-direction: column;







  gap: 16px;







  margin-top: 1.75rem;







}















.hero-info-card {







  background: rgba(255, 255, 255, 0.08);







  backdrop-filter: blur(12px);







  -webkit-backdrop-filter: blur(12px);







  border: 1.5px solid rgba(56, 189, 248, 0.28);







  border-radius: 14px;







  padding: 18px 22px;







  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);







  transition: all 0.25s ease;







}















.hero-info-card:hover {







  background: rgba(255, 255, 255, 0.14);







  border-color: #38bdf8;







  transform: translateX(4px);







  box-shadow: 0 6px 25px rgba(56, 189, 248, 0.2);







}















.hero-card-header {







  display: flex;







  align-items: center;







  gap: 12px;







  margin-bottom: 8px;







}















.hero-card-icon {







  width: 22px;







  height: 22px;







  stroke: #38bdf8;







  stroke-width: 2.2;







  fill: none;







  flex-shrink: 0;







}















.hero-card-header h4 {







  margin: 0;







  font-size: 1.05rem;







  font-weight: 700;







  color: #ffffff !important;







  letter-spacing: -0.01em;







}















.hero-info-card p {







  margin: 0;







  font-size: 0.95rem;







  line-height: 1.65;







  color: #ffffff !important;







  font-weight: 400;







}























/* Hero Large High-Contrast Editorial Paragraphs - 100% Unified Styling */







.hero-lead-paragraph,







.hero-sublead-paragraph {







  font-size: 1.14rem !important;







  color: #ffffff !important;







  font-weight: 500 !important;







  line-height: 1.85 !important;







  margin-top: 1.15rem;







  margin-bottom: 1.15rem;







  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);







}









/* Mobile Table Scroll Helper Hint Badge */

.mobile-table-scroll-hint {

  display: none;

  font-size: 0.85rem;

  font-weight: 700;

  color: #0284c7;

  background: #f0f9ff;

  border: 1px solid #bae6fd;

  border-radius: 8px;

  padding: 10px 16px;

  margin: 1.25rem 0 0.75rem 0;

  text-align: center;

  align-items: center;

  justify-content: center;

  gap: 8px;

}



/* Blog Articles Responsive Grid */

.blog-articles-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 2.25rem;

}



@media (max-width: 992px) {

  .mobile-table-scroll-hint {

    display: flex;

  }

}



@media (max-width: 768px) {

  .blog-articles-grid {

    grid-template-columns: 1fr !important;

    gap: 1.5rem !important;

  }

  

  /* Emergency Protocol Stepper: Stack Vertically (One on top of another) */

  .workflow-stepper-grid {

    grid-template-columns: 1fr !important;

    gap: 1.25rem !important;

  }

  

  .workflow-step-card {

    padding: 1.75rem 1.5rem !important;

    width: 100% !important;

  }

}



/* Tablet Stepper Adjustment */

@media (min-width: 769px) and (max-width: 1024px) {

  .workflow-stepper-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 1.5rem !important;

  }

}



/* Responsive Table Wrapper Global Scrollbar */

.table-responsive {

  overflow-x: auto !important;

  -webkit-overflow-scrolling: touch;

}



.table-responsive::-webkit-scrollbar {

  height: 8px;

  width: 8px;

}



.table-responsive::-webkit-scrollbar-track {

  background: #f1f5f9;

  border-radius: 8px;

}



.table-responsive::-webkit-scrollbar-thumb {

  background: var(--color-primary);

  border-radius: 8px;

}



.table-responsive table {

  min-width: 650px;

}