/* =========================================================
   CEPiML — Global Brand
   ========================================================= */

/* ---------- Brand fonts ---------- */
@font-face{
  font-family:'SUIT';
  font-style:normal;
  font-weight:100 900;
  src: url('/static/vendor/fonts/suit/SUIT-Variable.woff2') format('woff2');
  font-display:swap;
}

/* static/vendor/fonts/montserrat/montserrat.css */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/vendor/fonts/montserrat/Montserrat-VariableFont_wght.woff2") format("woff2");
}

/* ---------- Design tokens ---------- */
:root{
  /* Color system */
  --cepi-primary:   #FF4B33;  /* Primary / action */
  --cepi-danger:    #FF1414;  /* Alerts */
  --cepi-slate:     #1F2937;  /* Dark backgrounds / secondary button */
  --cepi-title:     #0F0F14;  /* Headings */
  --cepi-body:      #4A5462;  /* Body text */
  --cepi-muted:     #81808C;  /* Secondary text / hints */
  --cepi-border:    #E7E7E9;  /* Soft card border (closer to spec) */
  --cepi-input-bg:  #F4F4F4;  /* Input fill */
  --cepi-bg:        #F6F3F0;  /* Page background (warm) */
  --cepi-bg-soft:   #F8F8F8;  /* Light surface */
  --cepi-white:     #fff;
  --cepi-black:     #000;
  --cepi-success:   #10B981;
  --cepi-warning:   #F59E0B;
  --cepi-info:      #0EA5E9;

  /* Container sizing (from guide) */
  --cepi-box-radius: 24px;  /* Card/section corner radius */
  --cepi-box-pad:    30px;  /* Card/section padding */
  --cepi-gap:        20px;  /* Vertical section spacing */

  /* Controls (from guide) */
  --cepi-ctrl-radius: 12px; /* Input/button radius */
  --cepi-ctrl-height: 48px; /* Input/button height */
  --cepi-ctrl-font:   16px; /* Input/button font-size */

  /* Consistent spacing scale (8px base) */
  --cepi-space-xs:   4px;   /* Extra small spacing */
  --cepi-space-sm:   8px;   /* Small spacing */
  --cepi-space-md:   16px;  /* Medium spacing */
  --cepi-space-lg:   24px;  /* Large spacing */
  --cepi-space-xl:   32px;  /* Extra large spacing */
  --cepi-space-2xl:  48px;  /* 2X large spacing */

  /* --- Shadows (guide: X=4, Y=8, BLUR=8, OPACITY≈25%) --- */
  --cepi-shadow-x:    4px;
  --cepi-shadow-y:    8px;
  --cepi-shadow-blur: 8px;
  --cepi-shadow-col:  rgba(15,15,20,.10); /* visually close to 25% look */
  --cepi-shadow:      var(--cepi-shadow-x) var(--cepi-shadow-y) var(--cepi-shadow-blur) var(--cepi-shadow-col);

  /* Multi-level shadows for depth */
  --cepi-shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --cepi-shadow-md: 0 8px 24px rgba(0,0,0,.12);
  --cepi-shadow-lg: 0 12px 32px rgba(0,0,0,.16);

  /* Typography scale */
  --cepi-font-xs:    12px;
  --cepi-font-sm:    14px;
  --cepi-font-base:  16px;
  --cepi-font-lg:    18px;
  --cepi-font-xl:    24px;
  --cepi-font-2xl:   32px;
  --cepi-font-3xl:   36px;
}

/* ---------- Base & typography ---------- */
html, body{
  background: var(--cepi-bg) !important;
  color: var(--cepi-body) !important;
  font-family: Montserrat, 'SUIT', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  line-height: 1.5 !important;
}
:lang(ko){
  font-family:'SUIT', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* ----------------------------------------------------------
   FIX: force icon fonts (Bootstrap Icons, FontAwesome, etc.)
   even when Korean font override is active
----------------------------------------------------------- */
.bi,
[class^="bi-"],
[class*=" bi-"] {
  font-family: "bootstrap-icons" !important;
  font-weight: normal !important;
  font-style: normal !important;
  speak: none !important;
}

/* Stronger override for Korean locale (beats :lang(ko)) */
html:lang(ko) .bi,
html:lang(ko) [class^="bi-"],
html:lang(ko) [class*=" bi-"] {
  font-family: "bootstrap-icons" !important;
}

/* SOLID (fa-solid, fas) → weight 900 */
html:lang(ko) .fa-solid,
html:lang(ko) .fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* REGULAR (fa-regular, far) → weight 400 */
html:lang(ko) .fa-regular,
html:lang(ko) .far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

/* BRANDS (fab) → their own icon font */
html:lang(ko) .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: normal !important;
}

/* Catch-all fallback — DOES NOT set weight */
html:lang(ko) [class*="fa-"] {
    font-family: "Font Awesome 6 Free" !important;
}

/* FIX Bootstrap close button broken by font overrides */
.btn-close {
  font-family: inherit !important; /* prevents icon font override */
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M.293 1.293a1 1 0 0 1 1.414 0L8 7.586l6.293-6.293a1 1 0 1 1 1.414 1.414L9.414 9l6.293 6.293a1 1 0 0 1-1.414 1.414L8 10.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 9 .293 2.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat !important;
  opacity: 1 !important; /* ensure visibility */
}


h1,h2,h3,h4,h5,h6{ 
  color: var(--cepi-title) !important; 
  margin-bottom: var(--cepi-space-md) !important; 
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
h1{ 
  font-weight:700 !important; 
  font-size: var(--cepi-font-3xl) !important; 
  text-align:center !important; 
  margin-bottom: var(--cepi-space-lg) !important;
}
h2{ 
  font-weight:600 !important; 
  font-size: var(--cepi-font-lg) !important; 
  margin-bottom: var(--cepi-space-md) !important;
}
h3{ 
  font-weight:600 !important; 
  font-size: var(--cepi-font-base) !important; 
  margin-bottom: var(--cepi-space-sm) !important;
}
body, p, li, td, th, input, select, textarea{ 
  font-size: var(--cepi-font-sm) !important; 
  line-height: 1.6 !important;
}

a{ 
  color: var(--cepi-primary) !important; 
  text-decoration:none !important; 
  transition: all 0.2s ease !important;
}
a:hover{ 
  text-decoration:underline !important; 
  opacity: 0.9 !important;
}

/* ---------------------------------------------------------
   Page shell + gutters (applies across pages)
   --------------------------------------------------------- */
.header-bleed{ background:#2c3e50; color:#ecf0f1; }
.header-bleed-inner{
  max-width: 1320px;                 /* aligns with Bootstrap container-xxl */
  margin-inline: auto;
  padding: 24px clamp(16px, 3vw, 48px);
  text-align: center;
}
.page-shell{
  padding-inline: clamp(16px, 3vw, 48px);
  margin-top: 16px;
}
/* If markup still uses .container-fluid.px-0, restore gutters */
.container-fluid.px-0{
  padding-left: clamp(16px, 3vw, 48px) !important;
  padding-right: clamp(16px, 3vw, 48px) !important;
}

/* ---------- Containers (cards/sections) ---------- */
/* Elevate common surfaces to the spec look */
.container, .card, .modal-content, .offcanvas, .dropdown-menu{
  background: var(--cepi-white) !important;
  border: 1px solid var(--cepi-border) !important;
  border-radius: var(--cepi-box-radius) !important;
  box-shadow: var(--cepi-shadow) !important;
}

/* Ready-to-use “section” wrapper */
.cepi-section{
  background: var(--cepi-white);
  border: 1px solid var(--cepi-border);
  border-radius: var(--cepi-box-radius);
  padding: var(--cepi-box-pad);
  margin-bottom: var(--cepi-gap);
  box-shadow: var(--cepi-shadow);
}

/* Auto-upgrade frequent blocks */
#chat-container,
.fancy-chat-container,
.left-sidebar,
.accordion-content{
  background: var(--cepi-white) !important;
  border: 1px solid var(--cepi-border) !important;
  border-radius: var(--cepi-box-radius) !important;
  box-shadow: var(--cepi-shadow) !important;
  padding: var(--cepi-box-pad) !important;
}

/* Stack utility: 20px vertical rhythm */
.cepi-stack > * + *{ margin-top: var(--cepi-gap) !important; }

/* ---------- Forms & inputs ---------- */
.form-control, .form-select, input, select, textarea{
  background: var(--cepi-input-bg) !important;
  border: 1px solid var(--cepi-border) !important;
  border-radius: var(--cepi-ctrl-radius) !important;
  font-size: var(--cepi-ctrl-font) !important;
  padding: var(--cepi-space-sm) var(--cepi-space-md) !important;
  height: var(--cepi-ctrl-height) !important;
  transition: all 0.2s ease !important;
}

textarea.form-control {
  height: auto !important;
  min-height: 120px !important;
  padding: var(--cepi-space-md) !important;
}

.form-control::placeholder, .form-text, .text-muted{ 
  color: var(--cepi-muted) !important; 
}

.form-control:focus, .form-select:focus, input:focus, textarea:focus{
  outline: none !important;
  border-color: var(--cepi-primary) !important;
  box-shadow: 0 0 0 3px rgba(255,75,51,.12) !important;
  background: var(--cepi-white) !important;
}

/* Disabled look */
:where(input,select,textarea).disabled,
:where(input,select,textarea)[disabled]{
  background: var(--cepi-input-bg) !important;
  color: var(--cepi-muted) !important;
  border-color: var(--cepi-border) !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
}

/* Form labels */
label {
  display: block;
  margin-bottom: var(--cepi-space-xs) !important;
  font-weight: 500 !important;
  color: var(--cepi-title) !important;
  font-size: var(--cepi-font-sm) !important;
}

/* Form groups */
.form-group, .mb-3 {
  margin-bottom: var(--cepi-space-md) !important;
}

/* ---------- Buttons ---------- */
.btn, button{
  border-radius: var(--cepi-ctrl-radius) !important;
  font-size: var(--cepi-ctrl-font) !important;
  height: var(--cepi-ctrl-height) !important;
  padding: 0 var(--cepi-space-lg) !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--cepi-space-xs) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  border: none !important;
  line-height: 1 !important;
}

.btn-primary, .btn-success{
  background: var(--cepi-primary) !important;
  border-color: var(--cepi-primary) !important;
  color:#fff !important;
  box-shadow: var(--cepi-shadow-sm) !important;
}
.btn-primary:hover, .btn-success:hover{
  background:#ff6a4d !important;
  border-color:#ff6a4d !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--cepi-shadow-md) !important;
}

.btn-dark, .btn-secondary{
  background: var(--cepi-slate) !important;
  border-color: var(--cepi-slate) !important;
  color:#fff !important;
  box-shadow: var(--cepi-shadow-sm) !important;
}
.btn-dark:hover, .btn-secondary:hover{
  background:#374151 !important;
  border-color:#374151 !important;
  transform: translateY(-1px) !important;
}

.btn-outline-primary{
  color: var(--cepi-primary) !important;
  border: 2px solid var(--cepi-primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover{
  background: var(--cepi-primary) !important;
  color:#fff !important;
  transform: translateY(-1px) !important;
}

.btn-outline-secondary{
  color: var(--cepi-slate) !important;
  border: 2px solid var(--cepi-slate) !important;
  background: transparent !important;
}
.btn-outline-secondary:hover{
  background: var(--cepi-slate) !important;
  color:#fff !important;
}

/* Button sizes */
.btn-sm {
  height: 36px !important;
  padding: 0 var(--cepi-space-md) !important;
  font-size: var(--cepi-font-sm) !important;
}

.btn-lg {
  height: 56px !important;
  padding: 0 var(--cepi-space-xl) !important;
  font-size: var(--cepi-font-lg) !important;
}

/* Button disabled state */
.btn:disabled, .btn.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Link-style secondary action */
.cepi-subbtn{ 
  font-size: var(--cepi-ctrl-font) !important; 
  text-decoration: underline !important; 
  background: none !important;
  border: none !important;
  color: var(--cepi-primary) !important;
  padding: 0 !important;
  height: auto !important;
}

/* ---------- Tables ---------- */
.table{ 
  color: var(--cepi-body) !important; 
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.table thead th{
  background: #fff5f2 !important;
  color: var(--cepi-title) !important;
  border-bottom: 2px solid var(--cepi-border) !important;
  padding: var(--cepi-space-md) var(--cepi-space-md) !important;
  font-weight: 600 !important;
  font-size: var(--cepi-font-sm) !important;
  text-align: left !important;
  white-space: nowrap !important;
}

.table td, .table th{ 
  border-color: var(--cepi-border) !important; 
  padding: var(--cepi-space-md) var(--cepi-space-md) !important;
  vertical-align: middle !important;
}

.table tbody tr {
  transition: background-color 0.2s ease !important;
}

.table tbody tr:hover {
  background-color: var(--cepi-bg-soft) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 251, 250, 0.5) !important;
}

/* Table responsive wrapper */
.table-responsive {
  border-radius: var(--cepi-box-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--cepi-shadow-sm) !important;
}

/* ---------- Alerts / badges ---------- */
.alert {
  border-radius: var(--cepi-ctrl-radius) !important;
  padding: var(--cepi-space-md) var(--cepi-space-lg) !important;
  margin-bottom: var(--cepi-space-md) !important;
  border: 1px solid !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--cepi-space-sm) !important;
}

.alert-danger{ 
  background:#FFECEC !important; 
  color:#7A0E0E !important; 
  border-color:#F7C6C6 !important; 
}

.alert-success {
  background: #D1FAE5 !important;
  color: #065F46 !important;
  border-color: #6EE7B7 !important;
}

.alert-warning {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border-color: #FCD34D !important;
}

.alert-info {
  background: #DBEAFE !important;
  color: #1E40AF !important;
  border-color: #93C5FD !important;
}

.badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: var(--cepi-space-xs) var(--cepi-space-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  line-height: 1 !important;
}

.badge.text-bg-warning{ 
  background:#FFF1D6 !important; 
  color:#7A4E00 !important; 
}

.badge.text-bg-success {
  background: var(--cepi-success) !important;
  color: white !important;
}

.badge.text-bg-primary {
  background: var(--cepi-primary) !important;
  color: white !important;
}

.badge.text-bg-secondary {
  background: var(--cepi-slate) !important;
  color: white !important;
}

/* ---------- Scrollbar (WebKit) ---------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--cepi-bg-soft); }
::-webkit-scrollbar-thumb{ background:#d7d7d7; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#c7c7c7; }

/* =========================================================
   Utility Classes for Consistent Spacing & Layout
   ========================================================= */

/* Margin utilities */
.mt-xs { margin-top: var(--cepi-space-xs) !important; }
.mt-sm { margin-top: var(--cepi-space-sm) !important; }
.mt-md { margin-top: var(--cepi-space-md) !important; }
.mt-lg { margin-top: var(--cepi-space-lg) !important; }
.mt-xl { margin-top: var(--cepi-space-xl) !important; }

.mb-xs { margin-bottom: var(--cepi-space-xs) !important; }
.mb-sm { margin-bottom: var(--cepi-space-sm) !important; }
.mb-md { margin-bottom: var(--cepi-space-md) !important; }
.mb-lg { margin-bottom: var(--cepi-space-lg) !important; }
.mb-xl { margin-bottom: var(--cepi-space-xl) !important; }

/* Padding utilities */
.p-xs { padding: var(--cepi-space-xs) !important; }
.p-sm { padding: var(--cepi-space-sm) !important; }
.p-md { padding: var(--cepi-space-md) !important; }
.p-lg { padding: var(--cepi-space-lg) !important; }
.p-xl { padding: var(--cepi-space-xl) !important; }

/* Gap utilities for flex/grid */
.gap-xs { gap: var(--cepi-space-xs) !important; }
.gap-sm { gap: var(--cepi-space-sm) !important; }
.gap-md { gap: var(--cepi-space-md) !important; }
.gap-lg { gap: var(--cepi-space-lg) !important; }
.gap-xl { gap: var(--cepi-space-xl) !important; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Display utilities */
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

/* Flex utilities */
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }

/* Width utilities */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

/* Border radius utilities */
.rounded { border-radius: var(--cepi-ctrl-radius) !important; }
.rounded-lg { border-radius: var(--cepi-box-radius) !important; }
.rounded-full { border-radius: 9999px !important; }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--cepi-shadow-sm) !important; }
.shadow { box-shadow: var(--cepi-shadow) !important; }
.shadow-md { box-shadow: var(--cepi-shadow-md) !important; }
.shadow-lg { box-shadow: var(--cepi-shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

/* Text color utilities */
.text-primary { color: var(--cepi-primary) !important; }
.text-muted { color: var(--cepi-muted) !important; }
.text-body { color: var(--cepi-body) !important; }
.text-title { color: var(--cepi-title) !important; }
.text-white { color: var(--cepi-white) !important; }
.text-success { color: var(--cepi-success) !important; }
.text-warning { color: var(--cepi-warning) !important; }
.text-danger { color: var(--cepi-danger) !important; }

/* Background color utilities */
.bg-white { background-color: var(--cepi-white) !important; }
.bg-soft { background-color: var(--cepi-bg-soft) !important; }
.bg-primary { background-color: var(--cepi-primary) !important; }
.bg-slate { background-color: var(--cepi-slate) !important; }

/* Font weight utilities */
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }



/* =========================================================
   Optional dark section helper (e.g., footer blocks)
   ========================================================= */
.cepi-dark{
  background: var(--cepi-slate) !important; color:#fff !important;
  border-radius: var(--cepi-box-radius) !important;
  padding: var(--cepi-box-pad) !important;
}
.cepi-dark a{ color:#FFD5CC !important; }

/* =========================================================
   Navigation Bar Enhancements
   ========================================================= */

/* Modern navbar styling */
.navbar {
  padding: var(--cepi-space-md) 0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.04) !important;
  background: var(--cepi-white) !important;
}

/* Always show navbar items */
.navbar-collapse {
  display: flex !important;
  flex-basis: auto;
  flex-wrap: wrap;
  justify-content: space-between;
}

.navbar-nav {
  flex-wrap: wrap;
}

.navbar-brand {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.navbar-brand img {
  height: 38px !important;
  width: auto !important;
  transition: transform 0.2s ease !important;
}

.navbar-brand:hover img {
  transform: scale(1.05) !important;
}

.nav-link {
  padding: var(--cepi-space-sm) var(--cepi-space-md) !important;
  font-size: var(--cepi-font-sm) !important;
  font-weight: 500 !important;
  color: var(--cepi-body) !important;
  transition: all 0.2s ease !important;
  border-radius: 8px !important;
  margin: 0 4px !important;
}

.nav-link:hover {
  color: var(--cepi-primary) !important;
  background: rgba(255, 75, 51, 0.08) !important;
}

.nav-link.active {
  color: var(--cepi-primary) !important;
  font-weight: 600 !important;
}

/* Button-style nav links */
.navbar .btn-link {
  padding: var(--cepi-space-sm) var(--cepi-space-md) !important;
  font-size: var(--cepi-font-sm) !important;
  font-weight: 500 !important;
  color: var(--cepi-body) !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border-radius: 8px !important;
  height: auto !important;
}

.navbar .btn-link:hover {
  color: var(--cepi-primary) !important;
  background: rgba(255, 75, 51, 0.08) !important;
}

/* Show hamburger menu on mobile only */
.navbar-toggler {
  display: none;
}

/* Language selector visibility */
.lang-selector-mobile {
  display: none; /* Hidden on desktop */
}

@media (max-width: 991px) {
  .navbar-toggler {
    display: block !important;
  }
  
  .lang-selector-mobile {
    display: block !important; /* Show on mobile */
    font-size: 0.8rem !important;
    padding: 0 !important;
  }
}

/* Hide navbar-toggler on desktop */
@media (min-width: 992px) {
  .navbar-toggler {
    display: none !important;
  }
  
  .lang-selector-mobile {
    display: none !important;
  }
  
  /* Ensure navbar-collapse is visible on desktop */
  .navbar-collapse {
    display: flex !important;
    visibility: visible !important;
  }
  
  /* Show desktop language selectors */
  #lang-select-desktop,
  #lang-select-desktop-guest {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure nav items with language selectors are visible */
  li.nav-item.d-none.d-lg-block {
    display: list-item !important;
  }
}

/* Hide desktop language selector on mobile */
@media (max-width: 991px) {
  #lang-select-desktop,
  #lang-select-desktop-guest {
    display: none !important;
  }
}

/* =========================================================
   Modal & Dropdown Enhancements
   ========================================================= */

/* Modal improvements */
.modal-content {
  border-radius: var(--cepi-box-radius) !important;
  border: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.2) !important;
}

.modal-header {
  padding: var(--cepi-space-lg) var(--cepi-space-xl) !important;
  border-bottom: 1px solid var(--cepi-border) !important;
  background: var(--cepi-bg-soft) !important;
}

.modal-title {
  font-size: var(--cepi-font-xl) !important;
  font-weight: 600 !important;
  color: var(--cepi-title) !important;
}

.modal-body {
  padding: var(--cepi-space-xl) !important;
}

.modal-footer {
  padding: var(--cepi-space-lg) var(--cepi-space-xl) !important;
  border-top: 1px solid var(--cepi-border) !important;
  background: var(--cepi-bg-soft) !important;
  gap: var(--cepi-space-sm) !important;
}

/* Dropdown improvements */
.dropdown-menu {
  border: 1px solid var(--cepi-border) !important;
  border-radius: var(--cepi-ctrl-radius) !important;
  box-shadow: var(--cepi-shadow-md) !important;
  padding: var(--cepi-space-xs) 0 !important;
  margin-top: var(--cepi-space-xs) !important;
}

.dropdown-item {
  padding: var(--cepi-space-sm) var(--cepi-space-md) !important;
  font-size: var(--cepi-font-sm) !important;
  color: var(--cepi-body) !important;
  transition: all 0.2s ease !important;
}

.dropdown-item:hover {
  background: var(--cepi-bg-soft) !important;
  color: var(--cepi-primary) !important;
}

.dropdown-item:active {
  background: var(--cepi-primary) !important;
  color: white !important;
}

.dropdown-divider {
  margin: var(--cepi-space-xs) 0 !important;
  border-color: var(--cepi-border) !important;
}

/* Offcanvas improvements */
.offcanvas {
  box-shadow: -4px 0 20px rgba(0,0,0,.15) !important;
}

.offcanvas-header {
  padding: var(--cepi-space-lg) var(--cepi-space-xl) !important;
  border-bottom: 1px solid var(--cepi-border) !important;
}

.offcanvas-body {
  padding: var(--cepi-space-xl) !important;
}

/* =========================================================
   Modern Unified Footer Design
   ========================================================= */

.footer-modern-unified {
  background: transparent;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.footer-modern-unified .text-center.mb-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem !important;
}

.footer-logo {
  height: 40px;
  width: auto;
  opacity: 0.95;
}

.footer-info-card {
  display: flex;
  align-items: flex-start;
  padding: 0.3rem 0.45rem;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid #e9ecef;
  height: 100%;
}

.footer-icon {
  font-size: 0.9rem;
  color: var(--cepi-primary, #0d6efd);
  margin-right: 0.3rem;
  flex-shrink: 0;
  opacity: 0.8;
}

.footer-info-content {
  flex: 1;
}

.footer-info-content strong {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  color: #495057;
  margin-bottom: 0.08rem;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.footer-info-content p {
  margin: 0;
  font-size: 0.75rem;
  color: #212529;
  line-height: 1.3;
}

/* Footer info row - 5 cards in one row on large screens */
@media (min-width: 992px) {
  .footer-info-row .footer-info-card {
    padding: 0.25rem 0.35rem;
  }
  
  .footer-info-row .footer-icon {
    font-size: 0.75rem;
    margin-right: 0.25rem;
  }
  
  .footer-info-row .footer-info-content strong {
    font-size: 0.6rem;
    margin-bottom: 0.05rem;
  }
  
  .footer-info-row .footer-info-content p {
    font-size: 0.65rem;
    line-height: 1.2;
  }
}

.footer-contact-box,
.footer-location-box {
  padding: 0.35rem 0.45rem;
  background: rgba(13, 110, 253, 0.03);
  border-radius: 6px;
  border-left: 2px solid var(--cepi-primary, #0d6efd);
  height: 100%;
}

.footer-box-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: #212529;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
}

.footer-box-title i {
  color: var(--cepi-primary, #0d6efd);
  font-size: 0.8rem;
}

.footer-link {
  color: #495057;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
}

.footer-link i {
  color: var(--cepi-primary, #0d6efd);
  opacity: 0.7;
}

.footer-location-box p {
  color: #495057;
  line-height: 1.5;
  font-size: 0.75rem;
}

/* Override Bootstrap small class in footer */
.footer-location-box .small,
.footer-location-box small {
  font-size: 0.75rem !important;
}

.footer-copyright-area {
  border-top: 1px solid #e9ecef;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
}

.footer-copyright-area p {
  font-size: 0.75rem;
}

.footer-copyright-area small {
  font-size: 0.75rem !important;
}

/* =========================================================
   Responsive Breakpoints & Mobile Enhancements
   ========================================================= */

/* Tablet and below (992px) */
@media (max-width: 992px) {
  :root {
    --cepi-box-pad: 20px;
    --cepi-space-2xl: 32px;
  }

  h1 {
    font-size: 28px !important;
  }

  h2 {
    font-size: 16px !important;
  }

  .navbar-nav {
    padding: var(--cepi-space-md) 0;
  }

  .nav-link {
    padding: var(--cepi-space-sm) var(--cepi-space-md) !important;
    margin: var(--cepi-space-xs) 0 !important;
  }

  .btn, button {
    height: 44px !important;
  }

  .container, .card, .modal-content {
    padding: var(--cepi-space-lg) !important;
  }

  .table-responsive {
    border-radius: var(--cepi-ctrl-radius) !important;
  }
}

/* Mobile (576px and below) */
@media (max-width: 576px) {
  :root {
    --cepi-box-pad: 16px;
    --cepi-space-2xl: 24px;
    --cepi-ctrl-height: 44px;
  }

  h1 {
    font-size: 24px !important;
    margin-bottom: var(--cepi-space-md) !important;
  }

  h2 {
    font-size: var(--cepi-font-base) !important;
  }

  body, p, li, td, th, input, select, textarea {
    font-size: 13px !important;
  }

  .btn, button {
    padding: 0 var(--cepi-space-md) !important;
    font-size: var(--cepi-font-sm) !important;
    height: 42px !important;
  }

  .btn-sm {
    height: 34px !important;
    padding: 0 var(--cepi-space-sm) !important;
    font-size: 12px !important;
  }

  .container, .card, .modal-content {
    padding: var(--cepi-space-md) !important;
  }

  .navbar {
    padding: var(--cepi-space-sm) 0 !important;
  }

  .navbar-brand img {
    height: 32px !important;
  }

  .table {
    font-size: 12px !important;
  }

  .table td, .table th {
    padding: var(--cepi-space-sm) var(--cepi-space-xs) !important;
  }

  .modal-header, .modal-footer {
    padding: var(--cepi-space-md) !important;
  }

  .modal-body {
    padding: var(--cepi-space-md) !important;
  }

  /* Footer Mobile Responsive */
  .footer-info-card {
    margin-bottom: 0.75rem;
  }

  .footer-contact-box,
  .footer-location-box {
    margin-bottom: 1rem;
  }

  .footer-quick-links {
    flex-direction: column;
    gap: 0.5rem;
  }

  .footer-quick-links .separator {
    display: none;
  }

  /* Stack button groups vertically */
  .btn-group {
    flex-direction: column !important;
  }

  .btn-group .btn {
    border-radius: var(--cepi-ctrl-radius) !important;
    margin-bottom: var(--cepi-space-xs) !important;
  }

  /* Full width buttons on mobile */
  .btn-primary, .btn-secondary, .btn-success {
    width: 100% !important;
  }

  /* Stats grid - single column on mobile */
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* Improve form spacing on mobile */
  .form-group, .mb-3 {
    margin-bottom: var(--cepi-space-sm) !important;
  }

  label {
    font-size: 12px !important;
  }
}

/* Desktop and larger (1200px+) - Enhanced layouts */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }

  /* Better spacing for large screens */
  .navbar {
    padding: var(--cepi-space-lg) 0 !important;
  }
}

/* =========================================================
   Pagination Styles
   ========================================================= */

.pagination {
  display: flex;
  align-items: center;
  gap: var(--cepi-space-xs);
  padding: 0;
  margin: var(--cepi-space-lg) 0;
  list-style: none;
}

.page-item {
  display: inline-block;
}

.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: var(--cepi-space-sm) var(--cepi-space-md);
  font-size: var(--cepi-font-sm);
  font-weight: 500;
  color: var(--cepi-body);
  text-decoration: none;
  background: var(--cepi-white);
  border: 1px solid var(--cepi-border);
  border-radius: var(--cepi-ctrl-radius);
  transition: all 0.2s ease;
}

.page-link:hover {
  color: var(--cepi-primary);
  background: rgba(255, 75, 51, 0.08);
  border-color: var(--cepi-primary);
  transform: translateY(-1px);
  box-shadow: var(--cepi-shadow-sm);
}

.page-item.active .page-link {
  background: var(--cepi-primary);
  color: white;
  border-color: var(--cepi-primary);
  font-weight: 600;
}

.page-item.disabled .page-link {
  color: var(--cepi-muted);
  background: var(--cepi-bg-soft);
  border-color: var(--cepi-border);
  cursor: not-allowed;
  opacity: 0.6;
}

.page-item.disabled .page-link:hover {
  transform: none;
  box-shadow: none;
}


/*Login page*/

/* Make the login view full-bleed and stop the base container from becoming a card */
.auth-root .container{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.auth-root .auth-grid{
  column-gap: clamp(0.25rem, 1vw, 0.75rem); /* was: clamp(1rem, 4vw, 3rem) */
}

.auth-root .hero{
  margin-right: clamp(0rem, 0.5vw, 0.5rem); /* was: clamp(1rem, 4vw, 3rem) */
}


/* Layout uses brand background */
.auth-grid{
  min-height:100vh;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:center;
  gap:clamp(1rem,4vw,3rem);
  background: var(--cepi-bg);
}
@media (max-width: 960px){
  .auth-grid{ grid-template-columns:1fr; padding:1.25rem 0 2.5rem; }
}



@media (max-width: 960px){
  .auth-root .auth-grid{
    row-gap: clamp(1rem, 4vw, 2rem); /* vertical spacing only */
  }
}

/* LEFT: animated stage */
.brand-stage{
  position:relative;
  min-height:85vh;
  display:flex;
  align-items:center;
  padding-left:clamp(1rem,7vw,6rem);
  padding-top:2rem;
  padding-bottom:2rem;
}
.stage{
  position:absolute; inset:0 auto 0 0;
  width:100%;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.stage.active{ opacity:1; visibility:visible; transform:none; }
.stage-wrap{ max-width:680px; }

/* Logo slide — use brand type colors */
.brand-tag{ color: var(--cepi-muted); font-weight:700; font-size:1.05rem; text-align:center; }
.brand-logo{ display:block; margin:2.5rem auto 0; width:min(420px,70%); max-width:90vw; }
.brand-slogan{ text-align:center; margin-top:.5rem; font-weight:800; font-size:1.15rem; color: var(--cepi-title); }

/* Chat slide */
.chat-stack{ display:flex; flex-direction:column; gap:1.2rem; }
.ask-bubble{
  align-self:center;
  background: var(--cepi-primary);
  color: var(--cepi-white);
  font-weight:800;
  padding:.95rem 1.25rem;
  border-radius:16px;
  width:fit-content; max-width:min(620px,88%);
  box-shadow: var(--cepi-shadow-md);
  position:relative;
}
.ask-bubble::after{
  content:""; position:absolute; right:18px; top:100%;
  border:10px solid transparent; border-top-color: var(--cepi-primary); transform:translateY(-2px);
}
.note{ text-align:center; color: var(--cepi-muted); font-weight:800; }

.card-chat{
  background: var(--cepi-white);
  border-radius:18px;
  padding:1.25rem 1.25rem 1rem;
  width:min(560px,92%);
  box-shadow: var(--cepi-shadow);
  border:1px solid var(--cepi-border);
}
.card-title{ font-weight:800; color: var(--cepi-title); margin-bottom:.9rem; }

.mini-chart{ width:100%; height:180px; background: var(--cepi-white); border-radius:12px; }
.chart-band{ fill:#fff5f2; /* fallback */ fill: color-mix(in srgb, var(--cepi-primary) 12%, white); }
.chart-line{ fill:none; stroke: var(--cepi-primary); stroke-width:3; }

.answer{
  background: var(--cepi-white);
  border:1px solid var(--cepi-border);
  border-radius:18px;
  padding:1.1rem 1.25rem;
  width:min(640px,92%);
  box-shadow: var(--cepi-shadow);
  color: var(--cepi-body);
  line-height:1.65;
}

/* Sequenced reveal items */
.reveal{ opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease; }
.reveal.show{ opacity:1; transform:none; }

/* RIGHT: hero strictly uses primary color */
.hero{
  position:relative;
  background: linear-gradient(
    180deg,
    var(--cepi-primary) 0%,
    color-mix(in srgb, var(--cepi-primary) 85%, white 15%) 100%
  );
  border-radius:30px;
  padding:clamp(2rem,5vw,3.25rem);
  margin-right:clamp(1rem,4vw,3rem);
  color: var(--cepi-white);
  box-shadow: 0 22px 70px rgba(255,75,51,.30); /* shadow tinted from primary */
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.18) 0 28px, transparent 30px),
    radial-gradient(circle at 36% 32%, rgba(255,255,255,.14) 0 22px, transparent 24px),
    radial-gradient(circle at 64% 12%, rgba(255,255,255,.10) 0 16px, transparent 18px),
    radial-gradient(circle at 82% 38%, rgba(255,255,255,.12) 0 20px, transparent 22px),
    radial-gradient(circle at 22% 62%, rgba(255,255,255,.10) 0 16px, transparent 18px),
    radial-gradient(circle at 56% 64%, rgba(255,255,255,.14) 0 22px, transparent 24px),
    radial-gradient(circle at 88% 74%, rgba(255,255,255,.18) 0 28px, transparent 30px);
}
.overline{ font-size:.95rem; font-weight:800; }
.headline{ margin-top:.35rem; line-height:1.25; font-weight:900; font-size:clamp(1.35rem,2.2vw,1.8rem); }

/* Form */
.form-wrap{ position:relative; z-index:1; margin-top:clamp(1.25rem,3vw,1.6rem); }
/* Inputs already themed globally; keep pill silhouette only */
.input-pill{
  width:100%;
  height: var(--cepi-ctrl-height);
  border-radius:14px;
  border:1px solid var(--cepi-border);
  background: var(--cepi-input-bg);
  color: var(--cepi-title);
  font-size: var(--cepi-ctrl-font);
  padding:0 1.1rem;
  box-shadow: inset 0 4px 16px rgba(0,0,0,.04);
}

/* Use the brand slate for the primary login action (spec) */
.btn-dark{
  background: var(--cepi-slate) !important;
  border-color: var(--cepi-slate) !important;
  color: var(--cepi-white) !important;
  box-shadow: var(--cepi-shadow-md) !important;
}

.helper-links{ display:flex; gap:2rem; justify-content:center; margin-top:1rem; }
.helper-links a{ color: var(--cepi-title) !important; font-weight:800; text-decoration:none; }
.helper-links a:hover{ text-decoration:underline !important; }

.error-box{
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: var(--cepi-white);
  border-radius:12px;
  padding:.75rem 1rem;
  margin-bottom:1rem;
}

.input-group{ position:relative; }
.eye{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; width:32px; height:32px; cursor:pointer; color: var(--cepi-muted);
}

/* === Logo corner animation === */
.logo-frame{ position:relative; display:inline-block; }
.ml-core{
  position:absolute; top:-8%; right:-6%;
  width:clamp(84px,14vw,140px); height:clamp(84px,14vw,140px);
  pointer-events:none; z-index:2;
}
@media (max-width:560px){ .ml-core{ width:84px; height:84px; top:-10%; right:-10%; } }
.ml-core__core{
  position:absolute; width:20px; height:20px; top:50%; left:50%;
  transform:translate(-50%,-50%);
  background: var(--cepi-primary);
  border-radius:50%;
  animation: coreMorph 6s ease-in-out infinite alternate, coreWobble 5s ease-in-out infinite;
}
.ml-core__dot{
  --angle:0deg; --duration:2.5s; --spread:45px; --wobble:0px; --delay:0s;
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0);
  background: var(--cepi-primary);
  border-radius:50%;
  animation: disperse var(--duration) cubic-bezier(0.77,0,0.175,1) infinite alternate;
  animation-delay: var(--delay);
}
.ml-core__dot:nth-of-type(2)  { --angle:0deg;   --duration:2.2s; --delay:0s;   --wobble:-3px; width:10px; height:10px; }
.ml-core__dot:nth-of-type(3)  { --angle:30deg;  --duration:2.4s; --delay:.1s;  --wobble: 2px; width:13px; height:13px; }
.ml-core__dot:nth-of-type(4)  { --angle:60deg;  --duration:2.6s; --delay:.2s;  --wobble:-1px; width:11px; height:11px; }
.ml-core__dot:nth-of-type(5)  { --angle:90deg;  --duration:2.3s; --delay:.3s;  --wobble: 3px; width:14px; height:14px; }
.ml-core__dot:nth-of-type(6)  { --angle:120deg; --duration:2.8s; --delay:.4s;  --wobble:-2px; width:12px; height:12px; }
.ml-core__dot:nth-of-type(7)  { --angle:150deg; --duration:2.7s; --delay:.5s;  --wobble: 1px; width:10px; height:10px; }
.ml-core__dot:nth-of-type(8)  { --angle:180deg; --duration:2.3s; --delay:.6s;  --wobble:-3px; width:13px; height:13px; }
.ml-core__dot:nth-of-type(9)  { --angle:210deg; --duration:2.9s; --delay:.7s;  --wobble: 2px; width:11px; height:11px; }
.ml-core__dot:nth-of-type(10) { --angle:240deg; --duration:2.5s; --delay:.8s;  --wobble:-1px; width:12px; height:12px; }
.ml-core__dot:nth-of-type(11) { --angle:270deg; --duration:2.4s; --delay:.9s;  --wobble: 2px; width:13px; height:13px; }
.ml-core__dot:nth-of-type(12) { --angle:300deg; --duration:2.6s; --delay:1.0s; --wobble:-2px; width:10px; height:10px; }
.ml-core__dot:nth-of-type(13) { --angle:330deg; --duration:2.2s; --delay:1.1s; --wobble: 1px; width:14px; height:14px; }

/* Make base container plain whenever the login auth-root is present */
body:has(.auth-root) .container.my-4{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* 1) Center the logo perfectly inside the left panel */
.stage--logo .stage-wrap{
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;      /* horizontal center */
  justify-content: center;  /* vertical center */
  text-align: center;
}
.stage--logo .brand-logo{ margin: 0 auto; }         /* remove top offset */
.stage--logo .brand-tag{  margin-top: 0; }
.stage--logo .brand-slogan{ margin-top: .75rem; }

/* 2) Increase left gap for the chat/graph slide */
.stage--chat .stage-wrap{
  padding-left: 0;  /* was ~6rem max */
}
.stage--chat .ask-bubble{ align-self: flex-start; }  /* keep bubble aligned with card */
@media (min-width: 1440px){
  .brand-stage{ padding-left: clamp(3rem, 10vw, 10rem); } /* extra breathing room on very wide */
}

/* 3) Make the right panel a little narrower (more vertical) on desktop */
@media (min-width: 1100px){
  .auth-grid{
    grid-template-columns: 1.4fr 0.6fr; /* shift width from right to left */
  }
  .hero{
    max-width: 520px;                         /* slimmer card -> taller look */
    padding-block: clamp(2.25rem, 6vh, 4rem); /* a touch more vertical padding */
  }
}

/* keyframes + reduced motion */
@keyframes coreMorph{
  0%{ border-radius:50%; } 25%{ border-radius:40% 60% 60% 40%/50% 40% 60% 50%; }
  50%{ border-radius:30% 70% 50% 50%/60% 50% 40% 50%; }
  75%{ border-radius:60% 40% 40% 60%/40% 60% 60% 40%; } 100%{ border-radius:50%; }
}
@keyframes coreWobble{
  0%,100%{ transform:translate(-50%,-50%) translateX(0) translateY(0); }
  50%{    transform:translate(-50%,-50%) translateX(2px) translateY(-2px); }
}
@keyframes disperse{
  0%{   transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0); }
  50%{  transform:translate(-50%,-50%) rotate(var(--angle)) translateX(calc(var(--spread) + var(--wobble))); }
  100%{ transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .ml-core__core, .ml-core__dot{ animation:none !important; }
}


/* SIGN UP PAGE*/

/* 1) Center the whole page and control max width + big column gap */
.auth-root{
  min-height: 100vh;
  display: flex;
  align-items: flex-start;                      /* flex-start for sticky to work properly */
  justify-content: center;
  padding: clamp(16px, 3vw, 36px);
}

/* Add top spacing for signup page to avoid touching navbar */
.auth-root.signup-page {
  padding-top: 2rem; /* Reduced padding since sticky position now handles the gap */
}

.auth-root .auth-grid{
  /* Centered container with responsive gutters and bigger inter-column gap */
  width: min(1200px, 100% - clamp(40px, 7vw, 120px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.1fr 1.15fr;         /* left smaller, right larger */
  column-gap: clamp(32px, 6vw, 200px);         /* <<< bigger left/right gap */
  row-gap: clamp(20px, 4vw, 32px);
  align-items: start;                          /* start alignment for sticky */
  margin-top: 0;
  margin-bottom: 0;
  min-height: 100vh;
}

/* keep children from overflowing */
.auth-root .auth-grid > *{ min-width: 0; }

/* 2) Your original left panel (compact/elegant) */
.trial-benefits{
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: auto;
  justify-content: center;
  border-radius: 18px;
  text-align: left;
}

/* Make left panel sticky only on signup page for larger screens */
.auth-root.signup-page .trial-benefits {
  position: sticky;
  top: 100px; 
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* --- slide-up + fade animation for left panel --- */
@keyframes riseAndFade {
  0% {
    transform: translateY(35px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

/* Animate left panel on laptop-ish screens too */
@media (max-width: 1280px) {
  .trial-benefits{
    animation: riseAndFade 0.7s ease-out both;
  }
}

.trial-header{ text-align: center; }

.trial-title{
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 800;
  color: var(--cepi-title);
  margin-bottom: 8px;
  line-height: 1.2;
}

.trial-subtitle{
  font-size: 16px;
  color: var(--cepi-body);
  margin-bottom: 20px;
}

.benefits-section{
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.benefits-title{
  font-size: 16px;
  font-weight: 700;
  color: var(--cepi-title);
  margin-bottom: 16px;
}
.benefits-list{
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 12px;
}
.benefits-list li{ display: flex; align-items: center; gap: 12px; }
.benefit-icon{
  width: 36px; height: 36px;
  background: rgba(255,75,51,.1);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.benefit-icon i{ color: var(--cepi-primary); font-size: 16px; }
.benefit-text{ font-size: 13px; line-height: 1.4;   text-align: left;}
.benefit-text strong{ color: var(--cepi-title); font-weight: 700; }

.included-section{
  background: rgba(255,75,51,.02);
  border-radius: 10px;
  padding: 18px;
  border: 1px solid rgba(255,75,51,.1);
}
.included-title{
  font-size: 15px;
  font-weight: 700;
  color: var(--cepi-title);
  margin-bottom: 14px;
}
.included-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.included-item{
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--cepi-body);
}
.included-item i{ color: var(--cepi-primary); font-size: 13px; }

.security-badges{
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.badge-item{
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--cepi-muted); font-weight: 500;
}
.badge-item i{ color: var(--success, #10B981); font-size: 14px; }

/* 3) Right side (hero) enhancements */
.trial-promise{
  font-size: 14px; color: rgba(255,255,255,.8); text-align: center; margin-bottom: 24px;
}
.trial-cta{
  display: flex; align-items: center; justify-content: center;
  gap: 8px; font-weight: 700; height: 52px;
}
.trial-terms{
  text-align: center; font-size: 12px; color: rgba(255,255,255,.7); margin-top: 12px;
}
.trial-terms a{ color: rgba(255,255,255,.9); text-decoration: underline; }

.alternative-options{ margin-top: 24px; }
.divider{ text-align: center; position: relative; margin: 20px 0; }
.divider::before{
  content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px;
  background: rgba(255,255,255,.2);
}
.divider span{
  background: var(--cepi-primary);
  padding: 0 16px; font-size: 14px; color: rgba(255,255,255,.8); position: relative;
}
.btn-demo{
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 24px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  color: rgba(255,255,255,.5);
  text-decoration: none; font-size: 15px; font-weight: 500;
  transition: all .3s ease;
}
.btn-demo:hover{
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.3);
  color: #fff;
}
.login-link{
  text-align: center; margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.5);
}
.login-link a{ color: #fff; font-weight: 600; }

/* Unify all password field spacing */
.password-field {
  margin-bottom: 0.75rem !important; /* consistent between p1 and p2 */
}

/* Place eye INSIDE the input */
.input-wrapper {
  position: relative;
}
.input-wrapper input {
  padding-right: 3rem !important;
}

.eye {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  width: 24px;
  z-index: 10;
  background: transparent;
  border: transparent;
  cursor: pointer;
}

/* Strength meter compact */
#password-strength-wrapper {
  margin-top: 4px;
  margin-bottom: 0;
}
#password-strength-bar {
  height: 4px;
  border-radius: 3px;
}
#password-strength-text {
  font-size: 0.75rem;
  margin-top: 2px;
  opacity: 0.9;
}

/* Compact help text */
.password-help {
  margin-top: 4px !important;
  margin-bottom: 0 !important;
}

/* Terms line + links: solid white */
.hero .trial-terms{
  color: var(--cepi-white) !important;
  opacity: 1 !important;
}
.hero .trial-terms a{
  color: var(--cepi-white) !important;
  text-decoration: underline;
}

.form-text,
.helptext {
  color: var(--cepi-smoke-white) !important; /* Smoke white */
  font-size: 0.9rem;
  opacity: 0.9;
}
/* Divider: solid white line and text (no orange chip) */
.hero .divider::before{
  background: var(--cepi-white) !important;
  opacity: 1 !important;
}
.hero .divider span{
  background: transparent !important;
  color: var(--cepi-white) !important;
}

/* Demo button: solid white pill with black text/icon */
.hero .btn-demo{
  background: var(--cepi-white) !important;
  color: var(--cepi-black) !important;
  border: 1px solid var(--cepi-white) !important;
  border-radius: 10px; /* preserve your radius */
}
.hero .btn-demo i{ color: inherit !important; }
.hero .btn-demo:hover{
  filter: brightness(0.95);
}

/* Bottom login line + link: solid white */
.hero .login-link{
  color: var(--cepi-white) !important;
  opacity: 1 !important;
}
.hero .login-link a{
  color: var(--cepi-white) !important;
  text-decoration: underline;
}

/* Focus ring (keeps to the palette) */
.hero :is(a,button):focus{
  outline: 3px solid var(--cepi-white);
  outline-offset: 2px;
}

/* 4) Responsive tweaks (keeps center, nice side gutters) */
@media (max-width: 992px){
  .auth-root{ padding: clamp(12px, 4vw, 28px); }
  .auth-root .auth-grid{
    grid-template-columns: 1fr;
    width: min(920px, 100% - clamp(32px, 8vw, 80px));
    column-gap: 0;                 /* no columns in single-column mode */
    row-gap: clamp(20px, 6vw, 40px);
    align-items: start;
  }
  .trial-benefits {
    margin-top: -20px;         /* raises the left panel */
    order: -1;                 /* ensures it appears first */
    text-align: center;
    animation: riseAndFade 0.7s ease-out both;
    position: static;
    min-height: auto;
    transform: none;
  }
  .included-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .trial-benefits{
    margin-top: -35px;
    padding: 16px;
    text-align: center;
    animation: riseAndFade 0.75s ease-out both;
    position: static;
    min-height: auto;
    transform: none;
  }

  .modal-dialog {
    margin: 1rem;
    max-width: calc(100vw - 2rem);
  }
  .modal-body {
    padding: 1.5rem !important;
  }
}

.list-styled li {
  margin-bottom: 0.5rem;
}
.list-styled li::marker {
  color: var(--cepi-primary);
}

/* ================================
   LOGIN PAGE LAYOUT FIX
   Align Left (brand-stage) + Right (hero)
   ================================ */
   /* Ensure left side centers vertically */
   .auth-root.login-page .brand-stage {
     display: flex;
     align-items: center;
     justify-content: center;
   }

   /* Chat content should center itself vertically */
   .auth-root.login-page .stage-wrap {
     display: flex;
     flex-direction: column;
     justify-content: center;
     width: 100%;
   }

   /* Optional: prevent upward shrink */
   .auth-root.login-page .chat-stack {
     margin-top: auto;
     margin-bottom: auto;
   }
   .auth-root.login-page .brand-stage {
       padding-top: 10rem; /* tweak until perfect */
   }
   /* Keep the brand-stage full height with no collapse */
   .auth-root.login-page .brand-stage {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0;
     position: relative;
     overflow: visible;       /* allow content to show fully without clipping */
     align-self: center;
   }

   /* All stages are absolutely positioned, but retain full-size layout */
   .auth-root.login-page .brand-stage .stage {
     position: absolute;
     top: 0; left: 0;
     width: 100%;
     height: 100%;            /* key fix: preserve full stage area */
     display: none;
   }

   .auth-root.login-page .brand-stage .stage.active {
     display: flex;                /* only active slide visible */
     flex-direction: column;
     justify-content: center;      /* THIS centers only the active slide */
     align-items: center;          /* perfect centering */
   }

   /* Stage-wrap should NOT be shrunk */
   .auth-root.login-page .brand-stage .stage-wrap {
     width: 100%;
     max-width: 540px;
   }

   /* Chat stack specific: remove previous forcing of auto margins */
   .auth-root.login-page .chat-stack {
     margin: 0;   /* remove the squeeze */
   }

   /* Ensure chat card always contains the chart cleanly */
   .card-chat {
       background: var(--cepi-white);
       border-radius: 18px;
       padding: 1.25rem 1.25rem 1rem;
       width: min(560px, 92%);
       box-shadow: var(--cepi-shadow);
       border: 1px solid var(--cepi-border);
       overflow: hidden; /* <<< critical fix */
   }

   /* Increase available space for the chart image */
   .card-chat picture,
   .card-chat img {
       width: 100%;
       height: auto;
       max-width: 100%;
       object-fit: contain;
   }

   /* ENLARGE ONLY THE CHART CONTAINER */
   .card-chat {
       padding: 1.25rem 1.25rem 1rem;
       width: min(600px, 92%);   /* slightly wider to fit bigger chart */
   }

   .card-chat .img-fluid {
       height: auto;
       max-height: 1040px;        /* increase this value to make image bigger */
   }

   .auth-grid {
       display: grid;
       grid-template-columns: 1.2fr 1fr;  /* enlarge left side */
       gap: 2rem;
       align-items: center;
   }

   /* Ensure hero is vertically centered */
   .auth-root.login-page .hero {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-self: center;
     height: auto;
     margin-top: -25vh;
   }

   /* Scale down animation content to fit without cutoff */
   .auth-root.login-page .chat-stack {
     gap: 0.7rem;
     transform: scale(0.85);
     transform-origin: center;
   }

   .auth-root.login-page .ask-bubble {
     padding: 0.75rem 1rem;
     font-size: 0.95rem;
   }

   .auth-root.login-page .card-chat {
     padding: 1rem 1rem 0.8rem;
     width: min(480px, 92%);
   }

   .auth-root.login-page .answer {
     padding: 0.85rem 1rem;
     font-size: 0.9rem;
     line-height: 1.5;
   }

   .auth-root.login-page .note {
     font-size: 0.85rem;
   }

   /* Reduce brand-stage height for login page to prevent cutoff */
   .auth-root.login-page .brand-stage {
     min-height: auto;
     max-height: 90vh;
     margin-top: -25vh;
   }


/* PASSWORD RESET PAGES*/
.auth-root.password-reset-page .auth-grid {
    width: 100% !important;
    max-width: 480px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
}

.auth-root.password-reset-page {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 85vh !important;
    padding: 0 !important;
}

/* NEW: Move the title upward */
.password-reset-page .hero {
    padding-top: 1.2rem !important;
    padding-bottom: 2.8rem !important;
}

/* =========================================================
   CEPI Landing
   ========================================================= */

#cepi-landing {
  /* Local tokens (kept inside the scope) */
  --primary: #FF4B33;
  --primary-dark: #E63319;
  --secondary: #1F2937;
  --accent: #0EA5E9;
  --success: #10B981;
  --warning: #F59E0B;
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Local base */
  font-family:'SUIT', Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  line-height: 1.6;
  color: var(--gray-800);
  background: var(--gray-50);
}

/* Reset INSIDE the landing only */
#cepi-landing :where(*) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Page container for consistent content width */
#cepi-landing :where(.page-container) {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}


/* ---------------- HERO ---------------- */
#cepi-landing :where(.hero-section) {
  background: linear-gradient(135deg, #0f1419 0%, #1a202c 50%, #2d3748 100%);
  color: #fff;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}
#cepi-landing :where(.hero-section)::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,75,51,0.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(14,165,233,0.08) 0%, transparent 50%);
}
#cepi-landing :where(.hero-content) { position: relative; z-index: 2; }
#cepi-landing :where(.hero-badge) {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px); border-radius: 50px; padding: 8px 20px;
  font-size: 14px; font-weight: 500;
}
#cepi-landing :where(.hero-title) {
  font-size: clamp(42px, 6vw, 72px); font-weight: 800; line-height: 1.1; margin-bottom: 24px;
  background: linear-gradient(135deg, #fff 0%, #e2e8f0 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
#cepi-landing :where(.hero-subtitle) {
  font-size: 22px; font-weight: 400; color: rgba(255,255,255,.8);
  margin-bottom: 40px; max-width: 600px; margin-inline: auto;
}

/* ---------------- STATS ---------------- */
#cepi-landing :where(.stats-grid) {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin: 60px 0;
}
#cepi-landing :where(.stat-item) { text-align: center; }
#cepi-landing :where(.stat-number) {
  font-size: 48px; font-weight: 800; color: var(--primary); display: block;
}
#cepi-landing :where(.stat-label) { font-size: 16px; color: rgba(255,255,255,.7); margin-top: 8px; }

/* ---------------- BUTTONS ---------------- */
#cepi-landing :where(.btn-primary-custom) {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none; border-radius: 12px; padding: 16px 32px; font-size: 18px; font-weight: 600; color: #fff;
  text-decoration: none; display: inline-flex; align-items: center; gap: 12px; transition: all .3s ease;
  box-shadow: 0 10px 25px rgba(255,75,51,.3);
}
#cepi-landing :where(.btn-primary-custom:hover) {
  transform: translateY(-2px); box-shadow: 0 15px 35px rgba(255,75,51,.4); color: #fff;
}
#cepi-landing :where(.btn-secondary-custom) {
  background: transparent; border: 2px solid rgba(255,255,255,.3); border-radius: 12px; padding: 14px 32px;
  font-size: 18px; font-weight: 600; color: #fff; text-decoration: none;
  display: inline-flex; align-items: center; gap: 12px; transition: all .3s ease;
}
#cepi-landing :where(.btn-secondary-custom:hover) {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: #fff;
}

/* ---------------- SOCIAL PROOF ---------------- */
#cepi-landing :where(.social-proof) {
  background: #fff; padding: 60px 0; border-bottom: 1px solid var(--gray-200);
}
#cepi-landing :where(.logo-grid) {
  display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap;
  opacity: .6; filter: grayscale(1);
}
#cepi-landing :where(.logo-grid img) {
  height: 40px; transition: all .3s ease; border: 0;
}
#cepi-landing :where(.logo-grid img:hover) { opacity: 1; filter: grayscale(0); }

/* ---------------- VIDEO SHOWCASE ---------------- */
#cepi-landing :where(.video-showcase-section) { 
  padding: 100px 0; 
  background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
}

#cepi-landing :where(.video-showcase-wrapper) {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  margin-top: 40px;
  align-items: start;
}

#cepi-landing :where(.video-playlist) {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  position: relative;
  width: 100%;
  height: 474.75px;
  overflow: hidden;
}

#cepi-landing :where(.video-playlist) > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  padding-right: 14px;
  overflow-y: auto;
  overflow-x: hidden;
}

#cepi-landing :where(.video-playlist) > *::-webkit-scrollbar {
  width: 6px;
}

#cepi-landing :where(.video-playlist) > *::-webkit-scrollbar-track {
  background: #f1f3f5;
  border-radius: 10px;
}

#cepi-landing :where(.video-playlist) > *::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 10px;
}

#cepi-landing :where(.video-playlist) > *::-webkit-scrollbar-thumb:hover {
  background: #e84a30;
}

#cepi-landing :where(.playlist-item) {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-bottom: 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #f8f9fa;
  border: 2px solid transparent;
}

#cepi-landing :where(.playlist-item:last-child) {
  margin-bottom: 0;
}

#cepi-landing :where(.playlist-item:hover) {
  background: #fff;
  border-color: var(--primary);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(255,75,51,.15);
}

#cepi-landing :where(.playlist-item.active) {
  background: var(--primary);
  color: #fff !important;
  border-color: var(--primary);
  box-shadow: 0 6px 16px rgba(255,75,51,.25);
}

#cepi-landing :where(.playlist-item-number) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  background: rgba(0,0,0,.05);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
}

#cepi-landing :where(.playlist-item.active .playlist-item-number) {
  background: rgba(255,255,255,.2);
  color: #fff !important;
}

#cepi-landing :where(.playlist-item-content) {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#cepi-landing :where(.playlist-item-title) {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
  line-height: 1.4;
}

#cepi-landing :where(.playlist-item.active .playlist-item-title) {
  color: #fff !important;
}

#cepi-landing :where(.playlist-item-icon) {
  font-size: 20px;
  color: var(--primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#cepi-landing :where(.playlist-item:hover .playlist-item-icon) {
  opacity: 0.6;
}

#cepi-landing :where(.playlist-item.active .playlist-item-icon) {
  opacity: 1;
  color: #fff !important;
}

#cepi-landing :where(.video-showcase-container) {
  position: relative;
}

#cepi-landing :where(.video-showcase-item) {
  display: none;
  grid-template-columns: 1fr;
  gap: 30px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

#cepi-landing :where(.video-showcase-item.active) {
  display: grid;
  opacity: 1;
  animation: videoFadeIn 0.6s ease-out;
}

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

#cepi-landing :where(.video-player-wrapper) {
  width: 100%;
}

#cepi-landing :where(.video-player-container) {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  background: #000;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}

#cepi-landing :where(.video-player-container iframe),
#cepi-landing :where(.youtube-iframe) {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

#cepi-landing :where(.video-content-wrapper) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#cepi-landing :where(.video-content) {
  padding: 20px 0;
}

#cepi-landing :where(.video-title) {
  font-size: 32px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 20px;
  line-height: 1.3;
}

#cepi-landing :where(.video-description) {
  font-size: 18px;
  color: var(--gray-600);
  line-height: 1.7;
}

#cepi-landing :where(.video-description p) {
  margin-bottom: 16px;
}

#cepi-landing :where(.video-description p:last-child) {
  margin-bottom: 0;
}

@media (max-width: 968px) {
  #cepi-landing :where(.video-showcase-wrapper) {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  #cepi-landing :where(.video-playlist) {
    order: -1;
    height: auto;
    padding-bottom: 0;
    max-height: 300px;
    padding: 20px;
    overflow-y: auto;
  }

  #cepi-landing :where(.video-playlist)::before {
    display: none;
  }

  #cepi-landing :where(.video-playlist) > * {
    position: static;
    overflow: visible;
  }

  #cepi-landing :where(.video-playlist::-webkit-scrollbar) {
    width: 6px;
  }

  #cepi-landing :where(.video-playlist::-webkit-scrollbar-track) {
    background: #f1f3f5;
    border-radius: 10px;
  }

  #cepi-landing :where(.video-playlist::-webkit-scrollbar-thumb) {
    background: var(--primary);
    border-radius: 10px;
  }

  #cepi-landing :where(.video-playlist::-webkit-scrollbar-thumb:hover) {
    background: #e84a30;
  }

  #cepi-landing :where(.video-showcase-item) {
    gap: 20px;
  }

  #cepi-landing :where(.video-title) {
    font-size: 28px;
  }

  #cepi-landing :where(.video-description) {
    font-size: 16px;
  }
}

@media (max-width: 576px) {
  #cepi-landing :where(.video-showcase-section) {
    padding: 60px 0;
  }

  #cepi-landing :where(.video-playlist) {
    max-height: 250px;
    padding: 12px;
  }

  #cepi-landing :where(.playlist-item) {
    padding: 12px;
    gap: 10px;
  }

  #cepi-landing :where(.playlist-item-number) {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
  }

  #cepi-landing :where(.playlist-item-title) {
    font-size: 13px;
  }

  #cepi-landing :where(.playlist-item-icon) {
    font-size: 18px;
  }

  #cepi-landing :where(.video-title) {
    font-size: 24px;
  }

  #cepi-landing :where(.video-description) {
    font-size: 15px;
  }

  #cepi-landing :where(.video-player-container) {
    border-radius: 12px;
  }
}

/* ---------------- FEATURES ---------------- */
#cepi-landing :where(.feature-section) { padding: 100px 0; background: #fff; }
#cepi-landing :where(.section-header) { text-align: center; margin-bottom: 80px; }
#cepi-landing :where(.section-title) { font-size: 48px; font-weight: 800; color: var(--gray-900); margin-bottom: 16px; }
#cepi-landing :where(.section-subtitle) { font-size: 20px; color: var(--gray-600); max-width: 600px; margin: 0 auto; }
#cepi-landing :where(.feature-grid) {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 40px;
}
#cepi-landing :where(.feature-card) {
  background: #fff; border-radius: 20px; padding: 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,.08); border: 1px solid var(--gray-100);
  transition: all .3s ease; position: relative;
}
#cepi-landing :where(.feature-card:hover) {
  transform: translateY(-8px); box-shadow: 0 20px 60px rgba(0,0,0,.12);
}
#cepi-landing :where(.feature-icon) {
  width: 64px; height: 64px; border-radius: 16px; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
#cepi-landing :where(.feature-icon i) { font-size: 28px; color: #fff; }
#cepi-landing :where(.feature-title) { font-size: 24px; font-weight: 700; color: var(--gray-900); margin-bottom: 16px; }
#cepi-landing :where(.feature-description) { font-size: 16px; color: var(--gray-600); line-height: 1.6; }

/* ---------------- RESULTS ---------------- */
#cepi-landing :where(.results-section) { background: var(--gray-50); padding: 100px 0; }
#cepi-landing :where(.results-grid) {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
#cepi-landing :where(.results-content h2) { font-size: 42px; font-weight: 800; color: var(--gray-900); margin-bottom: 24px; }
#cepi-landing :where(.results-content p) { font-size: 18px; color: var(--gray-600); margin-bottom: 32px; }
#cepi-landing :where(.metric-list) { list-style: none; padding: 0; }
#cepi-landing :where(.metric-list li) {
  display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--gray-200);
}
#cepi-landing :where(.metric-list li:last-child) { border-bottom: none; }
#cepi-landing :where(.metric-icon) {
  width: 48px; height: 48px; background: rgba(255,75,51,.1); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
#cepi-landing :where(.metric-icon i) { color: var(--primary); font-size: 20px; }
#cepi-landing :where(.metric-text) { flex: 1; }
#cepi-landing :where(.metric-title) { font-weight: 600; color: var(--gray-900); margin-bottom: 4px; }
#cepi-landing :where(.metric-value) { font-size: 14px; color: var(--gray-600); }

/* Chart card + images */
#cepi-landing :where(.chart-container) {
  background: #fff; border-radius: 20px; padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,.08);
}
#cepi-landing :where(.chart-container img) {
  display: block; width: 100%; height: auto; border-radius: 12px; border: 0;
}
#cepi-landing :where(.chart-caption) { font-size: 14px; color: var(--gray-600); }

/* ---------------- PRICING (optional; safe to keep) ---------------- */
#cepi-landing :where(.pricing-section) { background: #fff; padding: 100px 0; }
#cepi-landing :where(.pricing-grid) {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 60px;
}
#cepi-landing :where(.pricing-card) {
  background: #fff; border: 2px solid var(--gray-200); border-radius: 20px; padding: 40px; text-align: center;
  position: relative; transition: all .3s ease;
}
#cepi-landing :where(.pricing-card.featured) {
  border-color: var(--primary); transform: scale(1.05); box-shadow: 0 20px 60px rgba(255,75,51,.15);
}
#cepi-landing :where(.pricing-card:hover) { transform: translateY(-4px); box-shadow: 0 15px 50px rgba(0,0,0,.1); }
#cepi-landing :where(.pricing-card.featured:hover) { transform: scale(1.05) translateY(-4px); }
#cepi-landing :where(.pricing-badge) {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: #fff; padding: 8px 24px; border-radius: 20px; font-size: 14px; font-weight: 600;
}
#cepi-landing :where(.pricing-title) { font-size: 24px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
#cepi-landing :where(.pricing-description) { color: var(--gray-600); margin-bottom: 24px; }
#cepi-landing :where(.pricing-price) { font-size: 48px; font-weight: 800; color: var(--gray-900); margin-bottom: 8px; }
#cepi-landing :where(.pricing-price span) { font-size: 16px; color: var(--gray-500); font-weight: 400; }
#cepi-landing :where(.pricing-features) { list-style: none; padding: 0; margin: 32px 0; text-align: left; }
#cepi-landing :where(.pricing-features li) {
  display: flex; align-items: center; gap: 12px; padding: 8px 0; color: var(--gray-600);
}
#cepi-landing :where(.pricing-features i) { color: var(--success); font-size: 16px; }

/* ---------------- CTA ---------------- */
#cepi-landing :where(.cta-section) {
  background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 100%);
  color: #fff; padding: 100px 0; text-align: center;
}
#cepi-landing :where(.cta-section h2) { font-size: 48px; font-weight: 800; margin-bottom: 24px; }
#cepi-landing :where(.cta-section p) {
  font-size: 20px; color: rgba(255,255,255,.8); margin-bottom: 40px; max-width: 600px; margin-left: auto; margin-right: auto;
}

/* ---------------- ANIMATIONS ---------------- */
@keyframes cepi-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
#cepi-landing :where(.animate-fade-up) { animation: cepi-fadeInUp .6s ease-out; }
#cepi-landing :where(.animate-delay-1) { animation-delay: .1s; animation-fill-mode: both; }
#cepi-landing :where(.animate-delay-2) { animation-delay: .2s; animation-fill-mode: both; }
#cepi-landing :where(.animate-delay-3) { animation-delay: .3s; animation-fill-mode: both; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 768px) {
  #cepi-landing :where(.hero-section) { padding: 80px 0 60px; }
  #cepi-landing :where(.hero-title) { font-size: 36px; }
  #cepi-landing :where(.hero-subtitle) { font-size: 18px; }
  #cepi-landing :where(.stats-grid, .feature-grid, .pricing-grid) { grid-template-columns: 1fr; }
  #cepi-landing :where(.results-grid) { grid-template-columns: 1fr; text-align: center; }
  #cepi-landing :where(.pricing-card.featured) { transform: none; }
}

/* Neutralize global "container as card" patterns inside landing */
#cepi-landing > section > .container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ensure our big titles win against global h1/h2 rules */
#cepi-landing .hero-title { font-size: clamp(42px, 6vw, 72px) !important; text-align: inherit !important; }
#cepi-landing .section-title { font-size: 48px !important; }
#cepi-landing .section-subtitle { font-size: 20px !important; }

/* Prevent link styling from leaking into button-like anchors */
#cepi-landing .btn-primary-custom,
#cepi-landing .btn-secondary-custom {
  color: #fff !important;
  text-decoration: none !important;
}
#cepi-landing .btn-primary-custom:hover,
#cepi-landing .btn-secondary-custom:hover {
  text-decoration: none !important;
}

/* Keep white icons in gradient squares even if globals force colors */
#cepi-landing .feature-icon i { color: #fff !important; }

/* Logos & chart images stay clean (no borders/underlines) */
#cepi-landing .logo-grid img,
#cepi-landing .chart-container img {
  border: 0 !important;
  text-decoration: none !important;
}

/* Hero container must not turn into a card */
/* Optional: prefer Inter even for :lang(ko) inside landing */
#cepi-landing :where(*:lang(ko)) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SUIT', Segoe UI, Roboto, Arial, sans-serif !important;
}

/* ===== CEPI Landing — CTA + Contacts ===== */
#cepi-landing :where(.cta-contacts){
  padding: 80px 0 20px;
}

#cepi-landing :where(.cta-card){
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;

  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 86%, white) 0%, var(--primary-dark) 100%);
  color: #fff;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(255,75,51,.25);
  overflow: hidden;
}
#cepi-landing :where(.cta-title){
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.2;
  font-weight: 800;
  margin-bottom: 6px;
  color: #fff;
}
#cepi-landing :where(.cta-subtitle){
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(255,255,255,.9);
  margin: 0;
}

#cepi-landing :where(.cta-actions){
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end;
}

/* buttons on dark card */
#cepi-landing :where(.btn-white){
  background:#fff;
  color: var(--primary-dark) !important;
  border-radius: 12px;
  padding: 12px 20px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(255,255,255,.25);
  text-decoration: none !important;
}
#cepi-landing :where(.btn-white:hover){ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(255,255,255,.35); }

#cepi-landing :where(.btn-ghost){
  background: transparent;
  color:#fff !important;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 700;
  text-decoration: none !important;
}
#cepi-landing :where(.btn-ghost:hover){ background: rgba(255,255,255,.12); border-color:#fff; }

/* decorative glow */
#cepi-landing :where(.cta-glow){
  position:absolute; inset:auto -20% -60% auto;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.35), transparent 70%);
  filter: blur(24px);
  transform: rotate(8deg);
  pointer-events:none;
}

/* contacts card */
#cepi-landing :where(.contacts-card){
  margin-top: 22px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(0,0,0,.06);
  padding: clamp(18px, 3vw, 28px);
}

#cepi-landing :where(.announcements-section) {
  background: var(--gray-50) !important;
  padding: 100px 0 !important;
}

#cepi-landing :where(.announcements-container) {
  position: relative !important;
  transition: all 0.3s ease !important;
}

#cepi-landing :where(.announcements-container.scrollable) {
  max-height: 220px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 8px !important;
  border-radius: 20px !important;
}

/* Custom scrollbar for announcements container */
#cepi-landing :where(.announcements-container.scrollable::-webkit-scrollbar) {
  width: 8px !important;
}

#cepi-landing :where(.announcements-container.scrollable::-webkit-scrollbar-track) {
  background: var(--gray-100) !important;
  border-radius: 10px !important;
}

#cepi-landing :where(.announcements-container.scrollable::-webkit-scrollbar-thumb) {
  background: var(--gray-300) !important;
  border-radius: 10px !important;
}

#cepi-landing :where(.announcements-container.scrollable::-webkit-scrollbar-thumb:hover) {
  background: var(--gray-400) !important;
}

#cepi-landing :where(.announcements-grid) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px !important;
}

#cepi-landing :where(.announcement-card) {
  background: #fff !important;
  border-radius: 20px !important;
  padding: 24px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid var(--gray-100) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: 100% !important;
}

#cepi-landing :where(.announcement-card:hover) {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
}

#cepi-landing :where(.announcement-icon) {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-bottom: 12px !important;
}

#cepi-landing :where(.announcement-card.hidden) {
  display: none !important;
}

#cepi-landing :where(.announcement-card[data-notice-type="warning"] .announcement-icon) {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
}

#cepi-landing :where(.announcement-card[data-notice-type="success"] .announcement-icon) {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

#cepi-landing :where(.announcement-card[data-notice-type="info"] .announcement-icon) {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
}

#cepi-landing :where(.announcement-icon i) {
  font-size: 16px !important;
  color: #fff !important;
}

#cepi-landing :where(.announcement-content) {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

#cepi-landing :where(.announcement-title) {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--gray-900) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.4 !important;
}

#cepi-landing :where(.announcement-date) {
  font-size: 13px !important;
  color: var(--gray-500) !important;
  margin: 0 0 12px 0 !important;
  font-weight: 500 !important;
}

#cepi-landing :where(.announcement-description) {
  font-size: 15px !important;
  color: var(--gray-600) !important;
  line-height: 1.6 !important;
  margin: 0 0 16px 0 !important;
  flex: 1 !important;
}

#cepi-landing :where(.announcement-see-more) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  background: var(--primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-top: auto !important;
  width: 100% !important;
  justify-content: center !important;
}

#cepi-landing :where(.announcement-see-more:hover) {
  background: var(--primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

#cepi-landing :where(.announcement-see-more i) {
  font-size: 14px !important;
}

/* Rich text formatting inside announcement description */
#cepi-landing :where(.announcement-description strong),
#cepi-landing :where(.announcement-full-content strong) {
  font-weight: 700 !important;
  color: var(--gray-800) !important;
}

#cepi-landing :where(.announcement-description em),
#cepi-landing :where(.announcement-full-content em) {
  font-style: italic !important;
}

#cepi-landing :where(.announcement-description u),
#cepi-landing :where(.announcement-full-content u) {
  text-decoration: underline !important;
}

#cepi-landing :where(.announcement-description p),
#cepi-landing :where(.announcement-full-content p) {
  margin: 0 0 8px 0 !important;
}

#cepi-landing :where(.announcement-description p:last-child),
#cepi-landing :where(.announcement-full-content p:last-child) {
  margin-bottom: 0 !important;
}

#cepi-landing :where(.announcement-description ul),
#cepi-landing :where(.announcement-description ol),
#cepi-landing :where(.announcement-full-content ul),
#cepi-landing :where(.announcement-full-content ol) {
  margin: 8px 0 !important;
  padding-left: 20px !important;
}

#cepi-landing :where(.announcement-description li),
#cepi-landing :where(.announcement-full-content li) {
  margin-bottom: 4px !important;
}

#cepi-landing :where(.announcement-description a),
#cepi-landing :where(.announcement-full-content a) {
  color: var(--primary) !important;
  text-decoration: none !important;
}

#cepi-landing :where(.announcement-description a:hover),
#cepi-landing :where(.announcement-full-content a:hover) {
  text-decoration: underline !important;
}

#cepi-landing :where(.announcement-dismiss) {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  border: none !important;
  background: var(--gray-100) !important;
  color: var(--gray-500) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  opacity: 0 !important;
}

#cepi-landing :where(.announcement-card:hover .announcement-dismiss) {
  opacity: 1 !important;
}

#cepi-landing :where(.announcement-dismiss:hover) {
  background: var(--gray-200) !important;
  color: var(--gray-700) !important;
}

/* ========================================
   Announcement Overlay (Full Page)
   ======================================== */

.announcement-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
  padding: 20px !important;
  overflow-y: auto !important;
}

.announcement-overlay.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.announcement-overlay.expanded {
  padding: 0 !important;
  transition: none !important;
}

.announcement-overlay.expanded .announcement-popup {
  max-width: 100% !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  padding: 40px 40px 40px 40px !important;
  margin: 0 !important;
  overflow-y: auto !important;
  animation: expandToFullPage 0.3s ease !important;
  box-sizing: border-box !important;
}

.announcement-overlay.expanded .announcement-popup-text {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  margin-bottom: 32px !important;
}

.announcement-overlay.expanded .announcement-popup-text table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 16px 0 !important;
  border: 1px solid #D1D5DB !important;
}

.announcement-overlay.expanded .announcement-popup-text table th,
.announcement-overlay.expanded .announcement-popup-text table td {
  border: 1px solid #D1D5DB !important;
  padding: 10px 12px !important;
  text-align: left !important;
}

.announcement-overlay.expanded .announcement-popup-text table th {
  background-color: #F3F4F6 !important;
  font-weight: 600 !important;
  color: #1F2937 !important;
}

.announcement-overlay.expanded .announcement-popup-text table tr:nth-child(even) {
  background-color: #F9FAFB !important;
}

.announcement-overlay.expanded .announcement-popup-buttons {
  margin-top: 32px !important;
  margin-bottom: 0 !important;
  padding-bottom: 40px !important;
}

.announcement-popup {
  background: white !important;
  border-radius: 20px !important;
  padding: 32px !important;
  max-width: 500px !important;
  width: 100% !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  position: relative !important;
  animation: popupSlideIn 0.3s ease !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

@keyframes popupSlideIn {
  from {
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.announcement-popup-icon {
  width: 64px !important;
  height: 64px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
  flex-shrink: 0 !important;
}

.announcement-popup-icon-info {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
}

.announcement-popup-icon-warning {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
}

.announcement-popup-icon-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.announcement-popup-icon i {
  font-size: 28px !important;
  color: white !important;
}

.announcement-popup-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--gray-900) !important;
  margin: 0 0 16px 0 !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

.announcement-popup-content-wrapper {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.announcement-popup-text {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--gray-700) !important;
  margin-bottom: 24px !important;
  flex: 1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.announcement-popup-text p {
  margin: 0 0 12px 0 !important;
}

.announcement-popup-text p:last-child {
  margin-bottom: 0 !important;
}

.announcement-popup-text strong {
  font-weight: 700 !important;
  color: var(--gray-900) !important;
}

.announcement-popup-text ul,
.announcement-popup-text ol {
  margin: 12px 0 !important;
  padding-left: 24px !important;
}

.announcement-popup-text li {
  margin-bottom: 8px !important;
}

.announcement-popup-text a {
  color: var(--primary) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

.announcement-popup-text a:hover {
  text-decoration: underline !important;
}

.announcement-popup-buttons {
  display: flex !important;
  gap: 12px !important;
  margin-top: 24px !important;
  flex-shrink: 0 !important;
}

.announcement-popup-btn {
  flex: 1 !important;
  padding: 12px 20px !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.announcement-popup-btn-primary {
  background: var(--primary) !important;
  color: white !important;
}

.announcement-popup-btn-primary:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.announcement-popup-btn-secondary {
  background: var(--gray-200) !important;
  color: var(--gray-700) !important;
}

.announcement-popup-btn-secondary:hover {
  background: var(--gray-300) !important;
}

.announcement-popup-btn-tertiary {
  background: var(--gray-100) !important;
  color: var(--gray-600) !important;
}

.announcement-popup-btn-tertiary:hover {
  background: var(--gray-200) !important;
  color: var(--gray-700) !important;
}

#cepi-landing :where(.announcements-empty) {
  text-align: center !important;
  padding: 60px 20px !important;
  background: #fff !important;
  border-radius: 20px !important;
  border: 2px dashed var(--gray-200) !important;
}

#cepi-landing :where(.announcements-empty-icon) {
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: var(--gray-100) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
}

#cepi-landing :where(.announcements-empty-icon i) {
  font-size: 32px !important;
  color: var(--gray-400) !important;
}

#cepi-landing :where(.announcements-empty p) {
  color: var(--gray-500) !important;
  font-size: 16px !important;
  margin: 0 !important;
}

#cepi-landing :where(.announcements-footer) {
  margin-top: 32px !important;
  text-align: center !important;
}

#cepi-landing :where(.toggle-older-notices) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  border: 2px solid var(--primary) !important;
  background-color: transparent !important;
  color: var(--primary) !important;
}

#cepi-landing :where(.toggle-older-notices:hover) {
  background-color: var(--primary) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3) !important;
}

#cepi-landing :where(.toggle-older-notices i) {
  font-size: 18px !important;
  transition: transform 0.3s ease !important;
}

#cepi-landing :where(.announcements-view-all) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-size: 16px !important;
  transition: all 0.2s ease !important;
}

#cepi-landing :where(.announcements-view-all:hover) {
  color: var(--primary-dark) !important;
  gap: 12px !important;
}

#cepi-landing :where(.announcements-view-all.d-none) {
  display: none !important;
}

/* Responsive styles for announcements */
@media (max-width: 1024px) {
  #cepi-landing :where(.announcements-grid) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  #cepi-landing :where(.announcements-section) {
    padding: 60px 0 !important;
  }

  #cepi-landing :where(.announcements-grid) {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  #cepi-landing :where(.announcement-card) {
    padding: 24px !important;
  }

  #cepi-landing :where(.announcement-dismiss) {
    opacity: 1 !important;
  }
}

/* ========================================
   Popup Notice Modal
   ======================================== */

/* Prevent body scroll when popup is visible */
body.popup-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

.notice-popup-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
  padding: 20px !important;
  overflow-y: auto !important;
}

.notice-popup-overlay.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Expanded full-page state */
.notice-popup-overlay.expanded {
  padding: 0 !important;
}

.notice-popup-overlay.expanded .notice-popup {
  max-width: 100% !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  padding: 40px 40px 40px 40px !important;
  margin: 0 !important;
  overflow-y: auto !important;
  animation: expandToFullPage 0.3s ease !important;
  box-sizing: border-box !important;
}

.notice-popup-overlay.expanded .notice-popup-text {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  margin-bottom: 32px !important;
}

/* Table styling in expanded state */
.notice-popup-overlay.expanded .notice-popup-text table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 16px 0 !important;
  border: 1px solid #D1D5DB !important;
}

.notice-popup-overlay.expanded .notice-popup-text table th,
.notice-popup-overlay.expanded .notice-popup-text table td {
  border: 1px solid #D1D5DB !important;
  padding: 10px 12px !important;
  text-align: left !important;
}

.notice-popup-overlay.expanded .notice-popup-text table th {
  background-color: #F3F4F6 !important;
  font-weight: 600 !important;
  color: #1F2937 !important;
}

.notice-popup-overlay.expanded .notice-popup-text table tr:nth-child(even) {
  background-color: #F9FAFB !important;
}

.notice-popup-overlay.expanded .notice-popup-buttons {
  margin-top: 32px !important;
  margin-bottom: 0 !important;
  padding-bottom: 40px !important;
}

@keyframes expandToFullPage {
  from {
    max-width: 500px;
    height: auto;
    border-radius: 20px;
  }
  to {
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
  }
}

.notice-popup {
  background: white !important;
  border-radius: 20px !important;
  padding: 28px !important;
  max-width: 500px !important;
  width: 100% !important;
  max-height: 80vh !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
  text-align: left !important;
  position: relative !important;
  animation: popupSlideIn 0.3s ease !important;
  margin: auto !important;
  display: flex !important;
  gap: 16px !important;
}

@keyframes popupSlideIn {
  from {
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.notice-popup-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
}

.notice-popup-icon-info {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%) !important;
}

.notice-popup-icon-warning {
  background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
}

.notice-popup-icon-success {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
}

.notice-popup-icon i {
  font-size: 16px !important;
  color: white !important;
}

.notice-popup-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0F0F14 !important;
  margin: 0 0 12px !important;
  line-height: 1.4 !important;
  text-align: left !important;
}

.notice-popup-content-wrapper {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding-right: 12px !important;
}

.notice-popup p {
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #4A5462 !important;
  margin: 0 0 24px !important;
  text-align: justify !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.notice-popup p:last-of-type {
  margin-bottom: 24px !important;
}

.notice-popup-text {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #4A5462 !important;
  margin-bottom: 28px !important;
  text-align: left !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.notice-popup-text p,
.notice-popup-text div,
.notice-popup-text span,
.notice-popup-text strong,
.notice-popup-text em,
.notice-popup-text ul,
.notice-popup-text ol,
.notice-popup-text li {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.notice-popup-text p {
  margin: 0 0 14px !important;
  text-align: left !important;
}

.notice-popup-text p:last-child {
  margin-bottom: 0 !important;
}

/* Rich text formatting in popup */
.notice-popup-text strong,
.notice-popup-text b {
  font-weight: 700 !important;
  color: #0F0F14 !important;
}

.notice-popup-text em,
.notice-popup-text i {
  font-style: italic !important;
}

.notice-popup-text u {
  text-decoration: underline !important;
}

.notice-popup-text ul,
.notice-popup-text ol {
  margin: 12px auto !important;
  padding-left: 24px !important;
  text-align: left !important;
  display: inline-block !important;
}

.notice-popup-text li {
  margin-bottom: 6px !important;
  text-align: left !important;
}

.notice-popup-text a {
  color: #3B82F6 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.notice-popup-text a:hover {
  text-decoration: underline !important;
}

.notice-popup-text h1,
.notice-popup-text h2,
.notice-popup-text h3,
.notice-popup-text h4 {
  font-weight: 700 !important;
  color: #0F0F14 !important;
  margin: 18px 0 10px 0 !important;
  text-align: left !important;
}

.notice-popup-text h1 { font-size: 20px !important; }
.notice-popup-text h2 { font-size: 18px !important; }
.notice-popup-text h3 { font-size: 16px !important; }
.notice-popup-text h4 { font-size: 15px !important; }

.notice-popup-buttons {
  display: flex !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  margin-top: 20px !important;
  padding-right: 12px !important;
}

.notice-popup-btn {
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
  white-space: nowrap !important;
}

.notice-popup-btn-primary {
  background: #1F2937 !important;
  color: white !important;
}

.notice-popup-btn-primary:hover {
  background: #374151 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(31, 41, 55, 0.3) !important;
}

.notice-popup-btn-secondary {
  background: #F3F4F6 !important;
  color: #4A5462 !important;
}

.notice-popup-btn-secondary:hover {
  background: #E5E7EB !important;
  transform: translateY(-1px) !important;
}

.notice-popup-btn-tertiary {
  background: #3B82F6 !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.notice-popup-btn-tertiary:hover {
  background: #2563EB !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.notice-popup-btn-tertiary i {
  font-size: 14px !important;
}

@media (max-width: 768px) {
  .notice-popup {
    padding: 28px 24px !important;
    margin: 16px !important;
  }

  .notice-popup-icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 16px !important;
  }

  .notice-popup-icon i {
    font-size: 20px !important;
  }

  .notice-popup-title {
    font-size: 18px !important;
  }

  .notice-popup-text {
    font-size: 14px !important;
  }

  .notice-popup-buttons {
    flex-direction: column-reverse !important;
  }

  .notice-popup-btn {
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
  }

  /* Announcement overlay responsive styles */
  .announcement-popup {
    padding: 28px 24px !important;
    margin: 16px !important;
  }

  .announcement-popup-icon {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 16px !important;
  }

  .announcement-popup-icon i {
    font-size: 20px !important;
  }

  .announcement-popup-title {
    font-size: 18px !important;
  }

  .announcement-popup-text {
    font-size: 14px !important;
  }

  .announcement-popup-buttons {
    flex-direction: column-reverse !important;
  }

  .announcement-popup-btn {
    width: 100% !important;
    font-size: 14px !important;
    padding: 10px 16px !important;
  }
}

/* contacts card */
#cepi-landing :where(.contacts-card){
  margin-top: 22px;
  background:#fff;
  border:1px solid var(--gray-200);
  border-radius: 20px;
  box-shadow: 0 12px 36px rgba(0,0,0,.06);
  padding: clamp(18px, 3vw, 28px);
}

#cepi-landing :where(.brand-block){
  margin-bottom: clamp(12px, 2.2vw, 20px);
  border-bottom: 1px dashed var(--gray-200);
  padding-bottom: clamp(10px, 1.8vw, 14px);
}
#cepi-landing :where(.brand-name){
  margin: 0 0 4px 0;
  font-weight: 900;
  color: var(--gray-900);
  font-size: clamp(22px, 2.6vw, 28px);
}
#cepi-landing :where(.brand-tagline){
  margin: 0;
  color: var(--gray-600);
  font-weight: 600;
  letter-spacing: .2px;
}

#cepi-landing :where(.office-grid){
  display: grid;
  grid-template-columns: repeat(2, minmax(240px,1fr));
  gap: clamp(16px, 3vw, 28px);
}
#cepi-landing :where(.office){
  background: linear-gradient(180deg, #fff 0%, #fdfdfd 100%);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: clamp(14px, 2.2vw, 18px);
}
#cepi-landing :where(.office-country){
  margin: 0 0 8px 0;
  font-weight: 800;
  color: var(--gray-900);
  font-size: 16px;
}
#cepi-landing :where(.office-addr){
  margin: 0; line-height: 1.6; color: var(--gray-700);
}
#cepi-landing :where(.office-tel){
  display:inline-block; margin-top: 6px;
  color: var(--primary) !important;
  font-weight: 700; text-decoration: none !important;
}
#cepi-landing :where(.office-tel:hover){ text-decoration: underline !important; }

/* ============ CEPI Landing — Notice Board (Redesigned) ============ */
#cepi-landing .notice-board-section {
  background: var(--gray-50) !important;
  padding: 100px 0;
}

#cepi-landing .notice-controls {
  margin-bottom: 40px;
}

#cepi-landing .btn-toggle-hidden {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

#cepi-landing .btn-toggle-hidden:hover {
  background: #fff;
  color: var(--gray-900);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  border-color: var(--gray-300);
}

#cepi-landing .btn-toggle-hidden i {
  font-size: 16px;
}

#cepi-landing .notice-board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

#cepi-landing .hidden-notices-grid {
  margin-top: 60px;
  opacity: 0.9;
}

/* Apply EXACT same styling as feature cards */
#cepi-landing .notice-card {
  background: #fff !important;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
  border: 1px solid var(--gray-100);
  transition: all .3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#cepi-landing .notice-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}

#cepi-landing .notice-card-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}

#cepi-landing .notice-badge {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cepi-landing .notice-badge i {
  font-size: 28px;
  color: #fff;
}

#cepi-landing .notice-badge-info {
  background: linear-gradient(135deg, var(--accent) 0%, #0284C7 100%);
}

#cepi-landing .notice-badge-warning {
  background: linear-gradient(135deg, var(--warning) 0%, #D97706 100%);
}

#cepi-landing .notice-badge-success {
  background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
}

#cepi-landing .notice-header-content {
  flex: 1;
  min-width: 0;
}

#cepi-landing .notice-card-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
  line-height: 1.3;
}

#cepi-landing .notice-meta {
  font-size: 14px;
  color: var(--gray-500);
  font-weight: 500;
}

#cepi-landing .notice-card-content {
  font-size: 16px;
  line-height: 1.6;
  color: var(--gray-600);
  margin-bottom: 24px;
  flex: 1;
}

#cepi-landing .notice-card-content p:last-child {
  margin-bottom: 0;
}

#cepi-landing .notice-card-content p {
  margin-bottom: 12px;
}

#cepi-landing .notice-card-footer {
  display: flex;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-100);
  margin-top: auto;
}

#cepi-landing .notice-action-btn {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#cepi-landing .notice-action-btn:hover {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--gray-900);
  transform: translateY(-1px);
}

#cepi-landing .notice-action-btn i {
  font-size: 14px;
}

#cepi-landing .notice-action-show {
  background: rgba(14,165,233,.08);
  border-color: rgba(14,165,233,.2);
  color: var(--accent);
}

#cepi-landing .notice-action-show:hover {
  background: rgba(14,165,233,.15);
  border-color: var(--accent);
  color: #0284C7;
}

#cepi-landing .notice-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 20px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
  border: 1px solid var(--gray-100);
}

#cepi-landing .empty-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
}

#cepi-landing .empty-icon i {
  font-size: 40px;
  color: var(--gray-400);
}

#cepi-landing .notice-empty-state h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 12px;
}

#cepi-landing .notice-empty-state p {
  font-size: 16px;
  color: var(--gray-500);
  margin: 0;
}

/* Responsive breakpoints for notice board */
@media (max-width: 1024px) {
  #cepi-landing .notice-board-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width: 768px) {
  #cepi-landing .notice-board-section {
    padding: 60px 0;
  }

  #cepi-landing .notice-board-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #cepi-landing .notice-card {
    padding: 32px;
  }

  #cepi-landing .notice-badge {
    width: 56px;
    height: 56px;
  }

  #cepi-landing .notice-badge i {
    font-size: 24px;
  }

  #cepi-landing .notice-card-title {
    font-size: 20px;
  }
}

/* ============ CEPI Landing — Popup Notices (OLD - Commented Out) ============ */
/* 
.notice-popup-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.notice-popup-modal.active {
  opacity: 1;
  pointer-events: all;
}

.notice-popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}
*/

/*
.notice-popup-content {
  position: relative;
  background: #fff;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  transform: scale(0.95) translateY(20px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
  padding: 48px 40px 40px;
  text-align: center;
}

.notice-popup-modal.active .notice-popup-content {
  transform: scale(1) translateY(0);
}

.notice-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: var(--gray-400);
  transition: all 0.2s ease;
  z-index: 2;
}

.notice-popup-close:hover {
  background: var(--gray-100);
  color: var(--gray-700);
}

.notice-popup-header {
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.notice-popup-icon {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 36px;
  margin: 0;
}

.notice-popup-info .notice-popup-icon {
  background: linear-gradient(135deg, rgba(14,165,233,.15) 0%, rgba(14,165,233,.25) 100%);
  color: var(--accent);
}

.notice-popup-warning .notice-popup-icon {
  background: linear-gradient(135deg, rgba(245,158,11,.15) 0%, rgba(245,158,11,.25) 100%);
  color: var(--warning);
}

.notice-popup-success .notice-popup-icon {
  background: linear-gradient(135deg, rgba(16,185,129,.15) 0%, rgba(16,185,129,.25) 100%);
  color: var(--success);
}

.notice-popup-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

.notice-popup-body {
  padding: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--gray-600);
  margin-bottom: 32px;
  text-align: center;
}

.notice-popup-body p:last-child {
  margin-bottom: 0;
}

.notice-popup-body p {
  margin-bottom: 12px;
}

.notice-popup-footer {
  padding: 0;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-popup-primary,
.btn-popup-secondary {
  padding: 13px 28px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  justify-content: center;
}

.btn-popup-primary {
  background: #5A6573;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.btn-popup-primary:hover {
  background: #4A5563;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.btn-popup-secondary {
  background: #9CA3AF;
  color: #fff;
}

.btn-popup-secondary:hover {
  background: #6B7280;
  transform: translateY(-1px);
}
*/

/* responsive */
@media (max-width: 1200px){
  #cepi-landing :where(.notice-board-grid) {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 900px){
  #cepi-landing :where(.cta-card){ grid-template-columns: 1fr; }
  #cepi-landing :where(.cta-actions){ justify-content: flex-start; }

  #cepi-landing :where(.notice-board-grid) {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /*
  .notice-popup-content {
    max-width: 90%;
    padding: 40px 32px 32px;
  }

  .notice-popup-icon {
    width: 64px;
    height: 64px;
    font-size: 32px;
  }

  .notice-popup-title {
    font-size: 24px;
  }

  .notice-popup-body {
    font-size: 14px;
    margin-bottom: 28px;
  }
  */
}

@media (max-width: 640px){
  #cepi-landing :where(.office-grid){ grid-template-columns: 1fr; }

  #cepi-landing :where(.notice-board-grid) {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #cepi-landing :where(.notice-card) {
    padding: 24px;
  }

  #cepi-landing :where(.notice-badge) {
    width: 48px;
    height: 48px;
  }

  #cepi-landing :where(.notice-badge i) {
    font-size: 20px;
  }

  #cepi-landing :where(.notice-card-title) {
    font-size: 16px;
  }

  #cepi-landing :where(.notice-card-content) {
    font-size: 13px;
  }

  /*
  .notice-popup-content {
    max-width: 90%;
    padding: 36px 24px 28px;
  }

  .notice-popup-icon {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }

  .notice-popup-title {
    font-size: 22px;
  }

  .notice-popup-body {
    font-size: 14px;
    margin-bottom: 24px;
  }

  .notice-popup-footer {
    flex-direction: column;
    gap: 10px;
  }

  .btn-popup-primary,
  .btn-popup-secondary {
    width: 100%;
  }
  */
}

#cepi-landing :where(.brand-block){
  margin-bottom: clamp(12px, 2.2vw, 20px);
  border-bottom: 1px dashed var(--gray-200);
  padding-bottom: clamp(10px, 1.8vw, 14px);
}
#cepi-landing :where(.brand-name){
  margin: 0 0 4px 0;
  font-weight: 900;
  color: var(--gray-900);
  font-size: clamp(22px, 2.6vw, 28px);
}
#cepi-landing :where(.brand-tagline){
  margin: 0;
  color: var(--gray-600);
  font-weight: 600;
  letter-spacing: .2px;
}

#cepi-landing :where(.office-grid){
  display: grid;
  grid-template-columns: repeat(2, minmax(240px,1fr));
  gap: clamp(16px, 3vw, 28px);
}
#cepi-landing :where(.office){
  background: linear-gradient(180deg, #fff 0%, #fdfdfd 100%);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: clamp(14px, 2.2vw, 18px);
}
#cepi-landing :where(.office-country){
  margin: 0 0 8px 0;
  font-weight: 800;
  color: var(--gray-900);
  font-size: 16px;
}
#cepi-landing :where(.office-addr){
  margin: 0; line-height: 1.6; color: var(--gray-700);
}
#cepi-landing :where(.office-tel){
  display:inline-block; margin-top: 6px;
  color: var(--primary) !important;
  font-weight: 700; text-decoration: none !important;
}
#cepi-landing :where(.office-tel:hover){ text-decoration: underline !important; }

/* responsive */
@media (max-width: 900px){
  #cepi-landing :where(.cta-card){ grid-template-columns: 1fr; }
  #cepi-landing :where(.cta-actions){ justify-content: flex-start; }
}
@media (max-width: 640px){
  #cepi-landing :where(.office-grid){ grid-template-columns: 1fr; }
}
/* ============ CEPI Landing — Accordion ============ */
#cepi-landing :where(.cepi-accordion){
  --acc-radius: 16px;
  --acc-border: var(--gray-200);
  --acc-bg: #fff;
  --acc-ease: cubic-bezier(.22,.8,.2,1);
  --acc-duration: 480ms;
  --acc-shadow: 0 8px 28px rgba(0,0,0,.08);
  display: grid;
  gap: 12px;
  perspective: 1200px;
}

#cepi-landing :where(.cepi-accordion .acc-item){
  background: var(--acc-bg);
  border: 1px solid var(--acc-border);
  border-radius: var(--acc-radius);
  box-shadow: var(--cepi-shadow);
  overflow: clip; /* prevents border bleed while animating */
  transform: translateZ(0); /* new stacking context for smoother animation */
}

#cepi-landing :where(.acc-header){
  appearance: none;
  width: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
  border: 0;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}

#cepi-landing :where(.acc-header:hover){
  background: linear-gradient(180deg, #fff 0%, #f6f6f6 100%);
}

#cepi-landing :where(.acc-header:focus-visible){
  outline: 2px solid color-mix(in srgb, var(--primary) 40%, white);
  outline-offset: 3px;
  border-radius: calc(var(--acc-radius) - 2px);
}

#cepi-landing :where(.acc-title){
  font-weight: 700;
  color: var(--gray-900);
  font-size: 18px;
  line-height: 1.35;
}

#cepi-landing :where(.acc-icon){
  transition: transform var(--acc-duration) var(--acc-ease), opacity 200ms ease;
  font-size: 1.2rem;
  opacity: .8;
}

#cepi-landing :where(.acc-item.is-open .acc-icon){
  transform: rotate(-180deg);
  opacity: 1;
}

/* Panel: height animation + subtle content reveal */
#cepi-landing :where(.acc-panel){
  height: 0;
  overflow: hidden;
  will-change: height;
  transition: height var(--acc-duration) var(--acc-ease);
  border-top: 1px solid var(--acc-border);
  background: #fff;
}

#cepi-landing :where(.acc-panel-inner){
  padding: 16px 20px 22px;
  color: var(--gray-700);
  transform-origin: top;
  animation: cepi-acc-reveal var(--acc-duration) var(--acc-ease) both;
}

/* === Content gutters (background stays edge-to-edge) === */
#cepi-landing{
  --page-gutter: clamp(16px, 4vw, 48px);   /* left/right gap for content */
  --page-maxw:   1320px;                   /* content cap (optional) */
}

/* Give every landing section side padding (gutters) */
#cepi-landing > section{
  padding-inline: var(--page-gutter);
}

/* Center/cap inner wrappers; keep them neutral (no card look) */
#cepi-landing > section > .container,
#cepi-landing > section > .inner,
#cepi-landing > section > .wrap{
  max-width: var(--page-maxw);
  margin-inline: auto;
  padding: 0;  /* gutters live on the section, not here */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Opt-out: make a specific section truly edge-to-edge content */
#cepi-landing > section.full-bleed{
  padding-inline: 0;
}

#cepi-landing :where(.acc-item:not(.is-animating):not(.is-open) .acc-panel-inner){
  /* When fully collapsed, avoid unnecessary animations */
  animation: none;
}

@keyframes cepi-acc-reveal{
  from{
    opacity: 0;
    transform: translateY(-6px) scaleY(.98);
    filter: blur(.4px);
  }
  to{
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Subtle elevation change on open */
#cepi-landing :where(.acc-item.is-open){
  box-shadow: var(--acc-shadow);
}

/* Premium pulsating heading with brand glow */
.pulse-heading {
  display: inline-block;
  animation: cepipulse 3.2s ease-in-out infinite,
             cepiglow 3.2s ease-in-out infinite;
  transform-origin: center;
}

/* Visible but professional breathing effect */
@keyframes cepipulse {
  0%   { transform: scale(1);     }
  45%  { transform: scale(1.05);  }
  100% { transform: scale(1);     }
}

/* Glow uses your brand color */
@keyframes cepiglow {
  0%   { text-shadow: 0 0 0px rgba(255, 75, 51, 0); }
  45%  { text-shadow: 0 0 14px rgba(255, 75, 51, 0.45); }
  100% { text-shadow: 0 0 0px rgba(255, 75, 51, 0); }
}


/* Reduced motion: no transforms, just show/hide instantly */
@media (prefers-reduced-motion: reduce){
  #cepi-landing :where(.acc-icon){ transition: none; }
  #cepi-landing :where(.acc-panel){ transition: none; }
  #cepi-landing :where(.acc-panel-inner){ animation: none !important; }
}

#lang-select {
    text-align: center !important;
    text-align-last: center !important;
    padding: 0.375rem 2rem 0.375rem 0.75rem !important;
    height: 38px !important;
    line-height: 1.5 !important;
    background-position: right 0.5rem center !important;
    background-size: 10px !important;
    font-weight: 500;
    font-size: 0.875rem !important;
    min-width: 110px !important;
    cursor: pointer !important;
    display: inline-block !important;
}

/* ===== CEPI Pricing  ===== */
#cepi-pricing{
  /* local tokens so globals can't touch them */
  --primary:#FF4B33;
  --primary-dark:#E63319;
  --secondary:#1F2937;
  --accent:#0EA5E9;
  --success:#10B981;
  --warning:#F59E0B;
  --gray-50:#F9FAFB;
  --gray-100:#F3F4F6;
  --gray-200:#E5E7EB;
  --gray-300:#D1D5DB;
  --gray-400:#9CA3AF;
  --gray-500:#6B7280;
  --gray-600:#4B5563;
  --gray-700:#374151;
  --gray-800:#1F2937;
  --gray-900:#111827;

  /* layout tokens (consistent gutters + cap) */
  --page-gutter: clamp(16px, 4vw, 48px); /* left/right gap for content */
  --page-maxw:   1200px;                 /* content max width */

  font-family:'SUIT', Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  line-height:1.6;
  color:var(--gray-800);
  background:var(--gray-50);
}

/* local reset */
#cepi-pricing :where(*){ box-sizing:border-box; margin:0; padding:0; }

/* Center/cap section contents (background stays full-bleed) */
#cepi-pricing > section{
  padding-inline: var(--page-gutter);
}
#cepi-pricing > section > .container,
#cepi-pricing > section > .inner,
#cepi-pricing > section > .wrap{
  max-width: var(--page-maxw);
  margin-inline: auto;
  padding: 0; /* gutters live on section */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* keep containers from becoming "cards" via mother theme (extra hardening) */
#cepi-pricing > section > .container{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ---------- HERO ---------- */
/* === Make pricing hero match landing hero === */
#cepi-pricing :where(.pricing-hero){
  background: linear-gradient(135deg,#0f1419 0%,#1a202c 50%,#2d3748 100%) !important;
  color:#fff !important;
  padding:120px 0 80px;            /* same vertical rhythm as landing */
  position:relative; overflow:hidden;
  border-radius:0 !important;      /* no rounded corners on hero */
  text-align:center;               /* center contents */
}

/* decorative radial glows (same as landing) */
#cepi-pricing :where(.pricing-hero)::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,75,51,.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(14,165,233,.08) 0%, transparent 50%);
}

/* container inside hero: keep it centered with breathable edges, never a "card" */
#cepi-pricing :where(.pricing-hero > .container){
  background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important;
  margin:0 auto; padding-left:clamp(16px,4vw,48px); padding-right:clamp(16px,4vw,48px);
  max-width:1200px;                /* tweak if you use a different site-wide max */
}

/* title/subtitle styling to mirror landing hero */
#cepi-pricing :where(.hero-title){
  font-size:clamp(42px,6vw,72px) !important; font-weight:800; line-height:1.1; margin-bottom:24px;
  background:linear-gradient(135deg,#fff 0%,#e2e8f0 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; color:transparent !important;
}
#cepi-pricing :where(.hero-subtitle){
  font-size:22px; font-weight:400; color:rgba(255,255,255,.8) !important;
  margin-bottom:40px; max-width:600px; margin-inline:auto;
}

/* toggle */
#cepi-pricing :where(.pricing-toggle){
  display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px
}
#cepi-pricing :where(.toggle-switch){
  position:relative;width:60px;height:32px;background:rgba(255,255,255,.2);
  border-radius:16px;cursor:pointer;transition:.3s;
  outline:1px solid rgba(255,255,255,.15);
}
#cepi-pricing :where(.toggle-switch.active){ background:var(--primary) }
#cepi-pricing :where(.toggle-slider){
  position:absolute;top:4px;left:4px;width:24px;height:24px;background:#fff;border-radius:50%;
  transition:transform .3s
}
#cepi-pricing :where(.toggle-switch.active .toggle-slider){ transform:translateX(28px) }
#cepi-pricing :where(.toggle-label){ font-size:16px;font-weight:600;color:rgba(255,255,255,.8) }
#cepi-pricing :where(.toggle-label.active){ color:#fff }

/* ---------- PRICING GRID ---------- */
#cepi-pricing :where(.pricing-section){ padding:60px 0; background:#fff; }
#cepi-pricing :where(.pricing-grid){
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px
}
#cepi-pricing :where(.pricing-card){
  background:#fff;border:2px solid var(--gray-200);border-radius:24px;padding:40px 32px;text-align:center;
  position:relative;transition:.4s;
}
#cepi-pricing :where(.pricing-card:hover){
  transform:translateY(-8px);box-shadow:0 25px 60px rgba(0,0,0,.15);border-color:var(--primary) !important;
}
#cepi-pricing :where(.pricing-card.popular){
  border-color:var(--primary) !important;box-shadow:0 20px 60px rgba(255,75,51,.2)
}
#cepi-pricing :where(.popular-badge){
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;padding:8px 24px;border-radius:20px;font-size:14px;font-weight:700;
  box-shadow:0 4px 12px rgba(255,75,51,.4);z-index:3
}
#cepi-pricing :where(.plan-name){ font-size:24px;font-weight:800;color:var(--gray-900);margin-bottom:8px }
#cepi-pricing :where(.plan-description){ color:var(--gray-600);margin-bottom:24px;font-size:16px }
#cepi-pricing :where(.price-container){ margin-bottom:16px }
#cepi-pricing :where(.price-main){ font-size:56px;font-weight:900;color:var(--gray-900);line-height:1 }
#cepi-pricing :where(.price-period){ font-size:16px;color:var(--gray-500);font-weight:500 }
#cepi-pricing :where(.price-annual){ display:none }
#cepi-pricing :where(.annual-active .price-monthly){ display:none }
#cepi-pricing :where(.annual-active .price-annual){ display:block }

/* features */
#cepi-pricing :where(.features-list){
  list-style:none;padding:0;margin:0 0 16px 0;text-align:left
}
#cepi-pricing :where(.features-list li){
  display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--gray-100)
}
#cepi-pricing :where(.features-list li:last-child){ border-bottom:none }
#cepi-pricing :where(.feature-icon){ color:var(--success);font-size:18px;margin-top:2px }
#cepi-pricing :where(.feature-text){ flex:1 }
#cepi-pricing :where(.feature-highlight){ font-weight:600;color:var(--gray-900) }
#cepi-pricing :where(.feature-detail){ font-size:14px;color:var(--gray-600);margin-top:4px }

/* CTAs */
#cepi-pricing :where(.cta-button){
  width:100%;padding:16px 32px;border:none;border-radius:12px;font-size:16px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.3s;cursor:pointer;text-decoration:none !important;
}
#cepi-pricing :where(.cta-primary){
  background:linear-gradient(135deg,var(--primary),var(--primary-dark)) !important;color:#fff !important
}
#cepi-pricing :where(.cta-secondary){
  background:#fff !important;color:var(--gray-900) !important;border:2px solid var(--gray-300) !important
}
#cepi-pricing :where(.cta-button:hover){ transform:translateY(-1px) }

/* pay buttons & guarantee */
#cepi-pricing :where(.guarantee-text){
  font-size:14px;color:var(--gray-600);margin-top:12px;text-align:center
}
#cepi-pricing :where(.pay-buttons){
  display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px
}

/* ---------- FAQ ---------- */
#cepi-pricing :where(.faq-section){ padding:80px 0; background:#fff; }
#cepi-pricing :where(.faq-grid){
  display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:40px
}
#cepi-pricing :where(.faq-item){
  border:1px solid var(--gray-200);border-radius:12px;overflow:hidden;background:#fff;
  align-self: start
}
#cepi-pricing :where(.faq-question){
  padding:24px;background:var(--gray-50);font-weight:600;color:var(--gray-900);
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
}
#cepi-pricing :where(.faq-answer){
  padding:0 24px;max-height:0;overflow:hidden;transition:max-height .35s ease, padding .25s ease
}
#cepi-pricing :where(.faq-item.active .faq-answer){ padding:24px; max-height:240px }

/* ---------- Policy Section ---------- */
#cepi-pricing :where(.policy-section){
  padding:80px 0;background:var(--gray-50)
}
#cepi-pricing :where(.policy-section h2){
  color:var(--gray-900);font-size:32px;font-weight:700;margin-bottom:48px
}
#cepi-pricing :where(.policy-content){
  max-width:900px;margin:0 auto;background:#fff;padding:48px;
  border-radius:16px;border:1px solid var(--gray-200);
  box-shadow:0 2px 8px rgba(0,0,0,0.05)
}
#cepi-pricing :where(.policy-content h4){
  color:var(--gray-900);font-size:18px;font-weight:600;
  margin-top:32px;margin-bottom:16px
}
#cepi-pricing :where(.policy-content h4:first-child){ margin-top:0 }
#cepi-pricing :where(.policy-content p){
  color:var(--gray-700);line-height:1.8;margin-bottom:16px;font-size:15px
}
#cepi-pricing :where(.policy-content ul){ margin:16px 0;padding-left:24px }
#cepi-pricing :where(.policy-content li){
  color:var(--gray-700);line-height:1.8;margin-bottom:12px;font-size:15px
}
#cepi-pricing :where(.policy-content strong){
  color:var(--gray-900);font-weight:600
}
#cepi-pricing :where(.policy-content a){ color:var(--primary);text-decoration:none }
#cepi-pricing :where(.policy-content a:hover){ text-decoration:underline }

/* Refund Policy Section 3 Enhanced Styling */
#cepi-pricing :where(.refund-policy-list){
  list-style:none;padding:0;margin:24px 0
}
#cepi-pricing :where(.refund-policy-item){
  display:flex;gap:16px;align-items:flex-start;
  background:var(--gray-50);border:1px solid var(--gray-200);
  border-radius:12px;padding:24px;margin-bottom:16px;
  transition:all 0.3s ease
}
#cepi-pricing :where(.refund-policy-item:hover){
  background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.08);
  border-color:var(--primary);transform:translateY(-2px)
}
#cepi-pricing :where(.refund-icon){
  min-width:40px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;border-radius:10px;font-size:20px;
  box-shadow:0 4px 10px rgba(255,75,51,0.25)
}
#cepi-pricing :where(.refund-content){
  flex:1
}
#cepi-pricing :where(.refund-title){
  display:block;color:var(--gray-900);
  font-size:16px;font-weight:700;margin-bottom:8px
}
#cepi-pricing :where(.refund-description){
  color:var(--gray-700);line-height:1.8;
  margin-bottom:0;font-size:15px
}

/* savings badge (used with toggle labels) */
#cepi-pricing :where(.savings-badge){
  background:var(--success);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;margin-left:8px
}

/* images/links hardening */
#cepi-pricing :where(img){ border:0 !important }
#cepi-pricing :where(a){ text-decoration:none }
#cepi-pricing :where(a:hover){ text-decoration:underline }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  #cepi-pricing :where(.pricing-card:hover){ transform:none;box-shadow:none }
  #cepi-pricing :where(.faq-answer){ transition:none }
}

/* responsive */
@media (max-width:1024px){
  #cepi-pricing :where(.pricing-grid){
    grid-template-columns:1fr;
    max-width:420px;
    margin:0 auto;
  }
  #cepi-pricing :where(.faq-grid){
    grid-template-columns:1fr;
  }
}
@media (max-width:768px){
  #cepi-pricing :where(.policy-content){
    padding:32px 24px;
  }
  #cepi-pricing :where(.policy-section h2){
    font-size:28px;
  }
}

/* ===== CEPI Pricing — FULL SCOPED + HARDENED (one-line rules) ===== */
#cepi-pricing{--primary:#FF4B33;--primary-dark:#E63319;--secondary:#1F2937;--accent:#0EA5E9;--success:#10B981;--warning:#F59E0B;--gray-50:#F9FAFB;--gray-100:#F3F4F6;--gray-200:#E5E7EB;--gray-300:#D1D5DB;--gray-400:#9CA3AF;--gray-500:#6B7280;--gray-600:#4B5563;--gray-700:#374151;--gray-800:#1F2937;--gray-900:#111827;--ink:#0D1117;--amber:#FFB78E;--coral:#FF6E55;--sky:#59C7F3;--edge:clamp(16px,4vw,48px);--content-max:1200px;--grad-hero:linear-gradient(135deg,color-mix(in srgb,var(--primary) 92%,white) 0%,var(--coral) 38%,color-mix(in srgb,var(--sky) 22%,var(--ink)) 100%);--grad-hero-bloom:radial-gradient(60% 50% at 20% 30%,color-mix(in srgb,var(--primary) 18%,transparent) 0%,transparent 60%),radial-gradient(50% 40% at 80% 70%,color-mix(in srgb,var(--sky) 12%,transparent) 0%,transparent 60%);font-family:'SUIT',Montserrat,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important;line-height:1.6;color:var(--gray-800);background:var(--gray-50)}
#cepi-pricing :where(*){box-sizing:border-box;margin:0;padding:0}
#cepi-pricing > section{padding-left:var(--edge);padding-right:var(--edge)}
#cepi-pricing > section > .container{max-width:var(--content-max);margin:0 auto;background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;padding-left:0 !important;padding-right:0 !important}
#cepi-pricing :where(img){border:0 !important}
#cepi-pricing :where(a){text-decoration:none}
#cepi-pricing :where(a:hover){text-decoration:underline}

/* ---------- HERO ---------- */
#cepi-pricing :where(.pricing-hero){background:var(--grad-hero) !important;color:#fff !important;padding:84px 0 64px;position:relative;overflow:hidden;text-align:center;border-radius:0}
#cepi-pricing :where(.pricing-hero)::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grad-hero-bloom)}
#cepi-pricing :where(.hero-title){font-size:clamp(36px,5vw,56px) !important;font-weight:800;line-height:1.1;margin-bottom:16px;color:#fff !important}
#cepi-pricing :where(.hero-subtitle){font-size:18px;color:rgba(255,255,255,.85) !important;max-width:760px;margin:0 auto}

/* Toggle */
#cepi-pricing :where(.pricing-toggle){display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px}
#cepi-pricing :where(.toggle-label){font-size:16px;font-weight:600;color:rgba(255,255,255,.8)}
#cepi-pricing :where(.toggle-label.active){color:#fff}
#cepi-pricing :where(.toggle-switch){position:relative;width:60px;height:32px;background:rgba(255,255,255,.2);border-radius:16px;cursor:pointer;transition:.3s;outline:1px solid rgba(255,255,255,.15)}
#cepi-pricing :where(.toggle-switch.active){background:var(--primary)}
#cepi-pricing :where(.toggle-slider){position:absolute;top:4px;left:4px;width:24px;height:24px;background:#fff;border-radius:50%;transition:transform .3s}
#cepi-pricing :where(.toggle-switch.active .toggle-slider){transform:translateX(28px)}
#cepi-pricing :where(.savings-badge){background:var(--success);color:#fff;padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;margin-left:8px}

/* ---------- PRICING GRID ---------- */
#cepi-pricing :where(.pricing-section){padding:60px 0;background:#fff}
#cepi-pricing :where(.pricing-grid){display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px;max-width:var(--content-max);margin-left:auto;margin-right:auto}
#cepi-pricing :where(.pricing-card){background:#fff;border:2px solid var(--gray-200);border-radius:24px;padding:40px 32px;text-align:center;position:relative;transition:.4s}
#cepi-pricing :where(.pricing-card:hover){transform:translateY(-8px);box-shadow:0 25px 60px rgba(0,0,0,.15);border-color:var(--primary) !important}
#cepi-pricing :where(.pricing-card.popular){border-color:var(--primary) !important;box-shadow:0 20px 60px rgba(255,75,51,.2)}
#cepi-pricing :where(.popular-badge){position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;padding:8px 24px;border-radius:20px;font-size:14px;font-weight:700;box-shadow:0 4px 12px rgba(255,75,51,.4);z-index:3}
#cepi-pricing :where(.plan-name){font-size:24px;font-weight:800;color:var(--gray-900);margin-bottom:8px}
#cepi-pricing :where(.plan-description){color:var(--gray-600);margin-bottom:24px;font-size:16px}
#cepi-pricing :where(.price-container){margin-bottom:16px}
#cepi-pricing :where(.price-main){font-size:56px;font-weight:900;color:var(--gray-900);line-height:1}
#cepi-pricing :where(.price-period){font-size:16px;color:var(--gray-500);font-weight:500;margin-left:6px}
#cepi-pricing :where(.price-annual){display:none}
#cepi-pricing :where(.annual-active .price-monthly){display:none}
#cepi-pricing :where(.annual-active .price-annual){display:block}

/* Features list (with fixed green check icons) */
#cepi-pricing :where(.features-list){list-style:none;padding:0;margin:0 0 16px 0;text-align:left}
#cepi-pricing :where(.features-list li){display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--gray-100)}
#cepi-pricing :where(.features-list li:last-child){border-bottom:none}
#cepi-pricing :where(.feature-icon){width:22px;height:22px;min-width:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(16,185,129,.12);color:var(--success)}
#cepi-pricing :where(.feature-icon i){font-size:14px;line-height:1;display:inline-block}
#cepi-pricing :where(.feature-text){flex:1}
#cepi-pricing :where(.feature-highlight){font-weight:600;color:var(--gray-900)}
#cepi-pricing :where(.feature-detail){font-size:14px;color:var(--gray-600);margin-top:4px}

/* CTAs */
#cepi-pricing :where(.cta-button){width:100%;padding:16px 32px;border:none;border-radius:12px;font-size:16px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.3s;cursor:pointer;text-decoration:none !important}
#cepi-pricing :where(.cta-primary){background:linear-gradient(135deg,var(--primary),var(--primary-dark)) !important;color:#fff !important}
#cepi-pricing :where(.cta-secondary){background:#fff !important;color:var(--gray-900) !important;border:2px solid var(--gray-300) !important}
#cepi-pricing :where(.cta-button:hover){transform:translateY(-1px)}
#cepi-pricing :where(.pay-buttons){display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
#cepi-pricing :where(.guarantee-text){font-size:14px;color:var(--gray-600);margin-top:12px;text-align:center}

/* ---------- FAQ ---------- */
#cepi-pricing :where(.faq-section){padding:80px 0;background:#fff}
#cepi-pricing :where(.faq-grid){display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:40px;max-width:var(--content-max);margin-left:auto;margin-right:auto}
#cepi-pricing :where(.faq-item){border:1px solid var(--gray-200);border-radius:12px;overflow:hidden;background:#fff; align-self: start}
#cepi-pricing :where(.faq-question){padding:24px;background:var(--gray-50);font-weight:600;color:var(--gray-900);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
#cepi-pricing :where(.faq-answer){padding:0 24px;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .25s ease}
#cepi-pricing :where(.faq-item.active .faq-answer){padding:24px;max-height:240px}

/* ---------- Policy Section ---------- */
#cepi-pricing :where(.policy-section){padding:80px 0;background:var(--gray-50)}
#cepi-pricing :where(.policy-section h2){color:var(--gray-900);font-size:32px;font-weight:700;margin-bottom:48px}
#cepi-pricing :where(.policy-content){max-width:900px;margin:0 auto;background:#fff;padding:48px;border-radius:16px;border:1px solid var(--gray-200);box-shadow:0 2px 8px rgba(0,0,0,0.05)}
#cepi-pricing :where(.policy-content h4){color:var(--gray-900);font-size:18px;font-weight:600;margin-top:32px;margin-bottom:16px}
#cepi-pricing :where(.policy-content h4:first-child){margin-top:0}
#cepi-pricing :where(.policy-content p){color:var(--gray-700);line-height:1.8;margin-bottom:16px;font-size:15px}
#cepi-pricing :where(.policy-content ul){margin:16px 0;padding-left:24px}
#cepi-pricing :where(.policy-content li){color:var(--gray-700);line-height:1.8;margin-bottom:12px;font-size:15px}
#cepi-pricing :where(.policy-content strong){color:var(--gray-900);font-weight:600}
#cepi-pricing :where(.policy-content a){color:var(--primary);text-decoration:none}
#cepi-pricing :where(.policy-content a:hover){text-decoration:underline}
/* Refund Policy Section 3 Enhanced Styling */
#cepi-pricing :where(.refund-policy-list){list-style:none;padding:0;margin:24px 0}
#cepi-pricing :where(.refund-policy-item){display:flex;gap:16px;align-items:flex-start;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:12px;padding:24px;margin-bottom:16px;transition:all 0.3s ease}
#cepi-pricing :where(.refund-policy-item:hover){background:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.08);border-color:var(--primary);transform:translateY(-2px)}
#cepi-pricing :where(.refund-icon){min-width:40px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:10px;font-size:20px;box-shadow:0 4px 10px rgba(255,75,51,0.25)}
#cepi-pricing :where(.refund-content){flex:1}
#cepi-pricing :where(.refund-title){display:block;color:var(--gray-900);font-size:16px;font-weight:700;margin-bottom:8px}
#cepi-pricing :where(.refund-description){color:var(--gray-700);line-height:1.8;margin-bottom:0;font-size:15px}
#cepi-pricing :where(.policy-content .policy-faq-item){border:1px solid var(--gray-200);border-radius:8px;overflow:hidden;background:var(--gray-50);margin-top:16px}
#cepi-pricing :where(.policy-content .policy-faq-question){padding:16px 20px;background:var(--gray-100);font-weight:600;font-size:15px;color:var(--gray-900);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
#cepi-pricing :where(.policy-content .policy-faq-answer){padding:0 20px;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .25s ease;background:#fff}
#cepi-pricing :where(.policy-content .policy-faq-item.active .policy-faq-answer){padding:16px 20px;max-height:300px}
#cepi-pricing :where(.policy-content .policy-faq-answer p){font-size:14px;line-height:1.7;color:var(--gray-700);margin-bottom:0}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){#cepi-pricing :where(.pricing-card:hover){transform:none;box-shadow:none}#cepi-pricing :where(.faq-answer){transition:none}#cepi-pricing :where(.policy-content .policy-faq-answer){transition:none}#cepi-pricing :where(.refund-policy-item:hover){transform:none}}

/* Responsive */
@media (max-width:1024px){#cepi-pricing :where(.pricing-grid){grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}#cepi-pricing :where(.faq-grid){grid-template-columns:1fr}}
@media (max-width:768px){#cepi-pricing :where(.hero-subtitle){font-size:16px}#cepi-pricing :where(.policy-content){padding:32px 24px}#cepi-pricing :where(.policy-section h2){font-size:28px}#cepi-pricing :where(.refund-policy-item){flex-direction:column;padding:20px}#cepi-pricing :where(.refund-icon){margin-bottom:12px}#cepi-pricing :where(.refund-title){font-size:15px}#cepi-pricing :where(.refund-description){font-size:14px}}

/* =========================================================
   CEPiML Dashboard — view-specific styles
   ========================================================= */

   /* ================================================
      #dashboard styling  (scoped under .dashboard)
      ================================================= */

   /* Page background & base color */
   .dashboard { background: var(--cepi-bg); color: var(--cepi-body); }

   /* ---------- Top bar ---------- */
   .dashboard .db-topbar{
     position: sticky; top: 0; z-index: 20;
     background: var(--cepi-bg);
     border-bottom: 1px solid var(--cepi-border);
     padding: 12px clamp(16px, 3vw, 48px);
   }
   .dashboard .db-topbar-grid{
     display: grid;
     grid-template-columns: 1fr auto 1fr; /* left | centered toggle | right */
     align-items: center;
     gap: 12px;
   }
   .dashboard .db-brand{
     display: flex; align-items: center; gap: 12px;
     font-weight: 700; color: var(--cepi-title);
   }
   .dashboard .db-brand img{ height: 28px; }
   .dashboard .db-actions{ display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
   .dashboard .db-chip{ background: var(--cepi-slate); color: #fff; border-radius: 12px; padding: 10px 14px; font-weight: 600; }

   /* Centered mode toggle */
   .dashboard .db-mode-toggle{
     display: inline-flex; background: #fff; border: 1px solid var(--cepi-border);
     border-radius: 999px; padding: 6px; gap: 8px; box-shadow: var(--cepi-shadow);
   }
   .dashboard .db-mode-pill{
     display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
     border-radius: 999px; color: var(--cepi-body); text-decoration: none;
     transition: transform .08s ease;
   }
   .dashboard .db-mode-pill:hover{ transform: translateY(-1px); }
   .dashboard .db-mode-pill.active{ background: var(--cepi-primary); color: #fff; }

   /* ---------- Landing chooser (perfect centering) ---------- */
   .dashboard .db-chooser-viewport{
     min-height: calc(100vh - 76px);
     display: grid; place-items: center; padding: 24px;
   }
   .dashboard .db-chooser-stack{ width: 100%; max-width: 1100px; }
   .dashboard .db-chooser-grid{
     display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr));
     gap: 28px; align-items: stretch; justify-items: stretch;
   }
   .dashboard .db-chooser-card{
     display: flex; flex-direction: column; align-items: center; text-align: center;
     background: #fff; border: 1px solid var(--cepi-border);
     border-radius: 28px; padding: 40px 32px; box-shadow: var(--cepi-shadow);
     transition: transform .15s ease, box-shadow .15s ease;
   }
   .dashboard .db-chooser-card:hover{ transform: translateY(-2px); box-shadow: var(--cepi-shadow-md); text-decoration: none; }
   .dashboard .db-chooser-emoji{ font-size: 54px; line-height: 1; margin-bottom: 8px; }
   .dashboard .db-chooser-card h3{ font-size: 36px; margin: 10px 0 12px; }
   .dashboard .db-chooser-badges{ display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
   .dashboard .db-chooser-help{ text-align: center; margin-top: 24px; }
   .dashboard .db-muted{ color: var(--cepi-muted); }
   @media (max-width: 768px){
     .dashboard .db-chooser-grid{ grid-template-columns: 1fr; }
   }

   /* ---------- Page shell & columns ---------- */
   .dashboard .db-shell{ padding-inline: clamp(16px, 3vw, 48px); margin-top: 16px; }
   .dashboard .db-left-sidebar{
     background: #fff; border: 1px solid var(--cepi-border);
     border-radius: var(--cepi-box-radius); box-shadow: var(--cepi-shadow);
     padding: 18px 14px; position: sticky; top: 90px;
   }
   .dashboard .db-left-item{
     display: flex; align-items: center; gap: 12px;
     padding: 12px; border-radius: 12px; color: var(--cepi-body); text-decoration: none; font-weight: 600;
   }
   .dashboard .db-left-item:hover{ background: #fff5f2; color: var(--cepi-title); }
   .dashboard .db-left-item.active{ background: var(--cepi-primary); color: #fff; }
   .dashboard .db-left-item i{ width: 20px; text-align: center; }
   .dashboard .db-danger-link{ color: var(--cepi-danger) !important; }
   .dashboard .db-spacer-24{ height: 24px; }

   /* ---------- Center card & content ---------- */
   .dashboard .db-center-card{
     background: #fff; border: 1px solid var(--cepi-border);
     border-radius: var(--cepi-box-radius); padding: var(--cepi-box-pad);
     box-shadow: var(--cepi-shadow);
   }
   .dashboard .db-center-card h1{ text-align: left; font-size: 44px; color: var(--cepi-title); margin-bottom: 18px; }

   /* One-click search bar */
   .dashboard .db-oc-search{
     display: flex; align-items: center; gap: 12px;
     background: var(--cepi-input-bg); border: 1px solid var(--cepi-border);
     border-radius: var(--cepi-ctrl-radius); padding: 10px 14px; height: var(--cepi-ctrl-height);
     margin-bottom: 16px;
   }
   .dashboard .db-oc-search input{
     all: unset; width: 100%; color: var(--cepi-title); font-size: var(--cepi-ctrl-font);
   }
   .dashboard .db-oc-icon{
     width: 40px; height: 40px; border-radius: 50%;
     display: inline-flex; align-items: center; justify-content: center;
     background: #fff; border: 1px solid var(--cepi-border); color: var(--cepi-primary);
   }

   /* iFrame container + step nav */
   .dashboard .db-embed{ width: 100%; min-height: 640px; border: 0; }
   .dashboard .db-step-nav{ display: flex; justify-content: space-between; margin-top: 12px; }
   .dashboard .db-stack > * + *{ margin-top: 20px; }
   .dashboard .db-align-right{ text-align: right; }

   /* ---------- Right projects panel ---------- */
   .dashboard .projects-sidebar{ position: sticky; top: 90px; }

   /* ---------- Sidebar table controls (partial) ---------- */
   .dashboard .table-container{ max-height: 400px; overflow-y: auto; }
   .dashboard .table-item.hidden{ display: none; }
   .dashboard .show-more-btn,
   .dashboard .show-less-btn{ color: #4a4a4a; border-color: #4a4a4a; background: transparent; margin-top: 10px; }


   /* ===== FINAL INICIS POPUP FIX*/
   body,
   html,
   #INIStdPay_iframe,
   iframe[name^="iframe"],
   div[class*="inipay"],
   div[class*="modal"],
   .fade,
   .fade:not(.show),
   .inipay_modal .fade,
   .inipay_modal.fade,
   div.fade.inipay_modal,
   div.fade.inipay_modal.fade {
       opacity: 1 !important;
       transition: none !important;
       visibility: visible !important;
   }

/*accunt withdrawal, edit profile*/
.round-check {
  appearance: none;
  -webkit-appearance: none;

  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;

  border: 2px solid #dc3545;
  border-radius: 50%;
  background-color: #fff;

  display: inline-block;
  position: relative;
  vertical-align: middle;

  cursor: pointer;
  flex-shrink: 0;
}

.round-check:checked::after {
  content: "";
  position: absolute;

  width: 8px;
  height: 8px;

  background-color: #dc3545;
  border-radius: 50%;

  /* PERFECT CENTERING */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* ===================================================================
   MOBILE RESPONSIVE IMPROVEMENTS
   Comprehensive mobile enhancements for all screen sizes
   =================================================================== */

/* --- Global Mobile Margins & Padding --- */
@media (max-width: 991px) {
  /* Ensure all content has proper margins */
  body {
    padding: 0;
    margin: 0;
  }
  
  /* =======================================
     LOGIN PAGE MOBILE FIXES (991px)
     ======================================= */
  
  /* Remove min-height for login page to match content */
  .auth-root.login-page {
    min-height: auto !important;
  }
  
  /* Auth grid becomes single column */
  .auth-root .auth-grid {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 80px; /* Push down below navbar */
  }
  
  /* Remove top padding for login page since brand-stage is hidden */
  .auth-root.login-page .auth-grid {
    padding-top: 0 !important;
  }
  
  /* Form section first, animation second */
  .auth-root.login-page .hero {
    order: 1 !important;
    width: 100% !important;
    padding: 2.5rem 2rem !important;
    margin: 1rem !important;
    margin-top: 20px !important;
  }
  
  .auth-root.login-page .brand-stage {
    display: none !important; /* Hide on mobile */
  }
  
  /* Fix animation positioning - push down from top instead of centering */
  .auth-root.login-page .brand-stage .stage.active {
    justify-content: flex-start !important;
    padding-top: 80px !important;
  }
  
  /* Add extra top margin to chat-stack animation content on mobile */
  .auth-root.login-page .stage-wrap.chat-stack {
    margin-top: 50px !important;
  }
  
  /* Form inputs with proper spacing */
  .auth-root .input-pill,
  .auth-root .form-control {
    margin-bottom: 1rem !important;
    padding: 1rem 1.2rem !important;
  }
  
  /* Submit buttons full width */
  .auth-root .btn[type="submit"],
  .auth-root .btn-dark {
    width: 100% !important;
    padding: 1rem !important;
  }
  
  /* SIGNUP PAGE: Remove sticky positioning on mobile */
  .auth-root.signup-page .trial-benefits {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    margin-bottom: 2rem !important;
    margin-top: 60px !important; /* Push down below navbar */
  }
  
  /* SIGNUP PAGE: Hero box with padding */
  .auth-root.signup-page .hero {
    padding: 2.5rem 2rem !important;
  }
  
  /* reCAPTCHA fix - keep inside red box */
  .auth-root .g-recaptcha,
  .auth-root iframe[src*="recaptcha"],
  .auth-root div[class*="recaptcha"] {
    transform: scale(0.9);
    transform-origin: 0 0;
    margin-bottom: 1rem !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  
  /* Navbar improvements - FIXED COLLAPSE */
  .navbar {
    padding: 0.75rem 1rem;
  }
  
  /* CRITICAL: Force hamburger button to show on mobile */
  .navbar-toggler {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 0.5rem 0.75rem;
    position: relative;
    z-index: 1050;
  }
  
  .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.1);
  }
  
  /* CRITICAL: Override desktop flex display for mobile */
  .navbar-collapse {
    display: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }
  
  .navbar-collapse.show {
    display: block !important;
  }
  
  /* CRITICAL: Hide navbar by default on mobile until toggled */
  .navbar-collapse:not(.show) {
    display: none !important;
  }
  
  /* Style the collapsed menu when it opens */
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    display: block !important;
    background: white;
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.05);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
  }
  
  /* Navbar items styling - VERTICAL LAYOUT */
  .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem;
    width: 100%;
    flex-wrap: nowrap !important;
  }
  
  /* Handle multiple navbar-nav lists */
  .navbar-collapse > .navbar-nav,
  .navbar-collapse .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    margin: 0 !important;
  }
  
  .navbar-nav .nav-item {
    margin: 0.25rem 0;
    width: 100%;
    display: block;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem !important;
    border-radius: 6px;
    transition: background-color 0.2s;
    display: block;
    width: 100%;
    text-align: left;
  }
  
  .navbar-nav .nav-link:hover {
    background-color: rgba(0,0,0,0.05);
  }
  
  /* Language selector in mobile menu */
  .navbar-nav .nav-item form {
    width: 100%;
  }
  
  .navbar-nav .form-select {
    width: 100% !important;
  }
  
  /* Ensure d-flex elements inside navbar don't break vertical layout */
  .navbar-collapse .d-flex {
    flex-direction: column !important;
  }
  
  .navbar-collapse ul.d-flex.align-items-center {
    align-items: stretch !important;
  }
  
  /* LOGIN PAGE: Add animation top margin on mobile */
  .auth-root.login-page .ml-core {
    top: -8% !important;
    right: -6% !important;
  }
  
  /* Button positioning in navbar */
  .navbar-nav .btn {
    width: 100%;
    margin: 0.5rem 0 !important;
    display: block;
    text-align: center;
  }
  
  .navbar-nav .btn-primary {
    margin-top: 0.75rem !important;
  }
  
  /* Ensure navbar container is relative for absolute dropdown */
  .navbar {
    position: relative;
  }
  
  .navbar .container {
    position: relative;
  }
  
  /* Language selector - show on mobile next to hamburger */
  .lang-selector-mobile {
    display: block !important;
    max-width: 100px !important;
    min-width: 85px !important;
    margin: 0;
    font-size: 0.8rem !important;
    padding: 0 !important;
  }
  
  /* Navbar container flex adjustments */
  .navbar .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  
  .navbar .ms-auto {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
  }
  
  /* Hero section mobile */
  .hero-section {
    padding: 2rem 0 !important;
  }
  
  .hero-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }
  
  .hero-subtitle {
    font-size: 1rem !important;
    line-height: 1.5;
  }
  
  /* Footer mobile optimizations */
  .footer-modern-unified {
    padding: 1rem 0;
  }
  
  .footer-modern-unified .py-2 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  
  .footer-info-card {
    padding: 0.5rem;
    font-size: 0.8rem;
  }
  
  .footer-contact-box,
  .footer-location-box {
    padding: 0.6rem;
    margin-bottom: 0.75rem;
  }
  
  /* Stats grid mobile */
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Feature grid mobile */
  .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .feature-card {
    padding: 1.5rem !important;
  }
  
  /* Video showcase mobile */
  .video-showcase-wrapper {
    flex-direction: column !important;
  }
  
  .video-playlist {
    width: 100% !important;
    margin-bottom: 1.5rem;
  }
  
  .video-showcase-container {
    width: 100% !important;
  }
}

/* --- Tablet & Mobile Specific (max-width: 768px) --- */
@media (max-width: 768px) {
  /* Extra margin control for smaller screens */
  body {
    overflow-x: hidden;
  }
  
  /* =======================================
     LOGIN PAGE MOBILE FIXES (768px)
     ======================================= */
  
  /* Fix auth-root on tablets */
  .auth-root .auth-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    padding-top: 80px; /* Push down below navbar */
  }
  
  /* Brand stage below form on mobile */
  .auth-root.login-page .brand-stage {
    order: 2 !important;
    min-height: 400px !important;
    padding: 2rem 1.5rem !important;
    margin-top: 60px !important; /* Increased to prevent overlap */
  }
  
  /* Fix animation positioning - push down from top instead of centering */
  .auth-root.login-page .brand-stage .stage.active {
    justify-content: flex-start !important;
    padding-top: 80px !important;
  }
  
  /* Add extra top margin to chat-stack animation content on mobile */
  .auth-root.login-page .stage-wrap.chat-stack {
    margin-top: 50px !important;
  }
  
  /* Hero form box with padding */
  .auth-root.login-page .hero {
    order: 1 !important;
    padding: 2rem 1.5rem !important;
    border-radius: 24px !important;
    margin-top: 20px !important;
  }
  
  /* Form wrap with spacing */
  .auth-root .form-wrap {
    margin-top: 1rem !important;
    padding: 0 !important;
  }
  
  /* Input fields */
  .auth-root .input-pill {
    margin-bottom: 1rem !important;
    width: 100% !important;
    padding: 0.9rem 1.1rem !important;
    font-size: 16px !important;
  }
  
  /* Buttons */
  .auth-root .btn-dark,
  .auth-root button[type="submit"] {
    width: 100% !important;
    padding: 1rem !important;
    margin: 0 0 1rem 0 !important;
  }
  
  /* Helper links */
  .auth-root .helper-links {
    gap: 1.25rem !important;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  /* Headlines */
  .auth-root .headline {
    font-size: 1.5rem !important;
    margin-bottom: 1.25rem !important;
  }
  
  /* Chat bubbles */
  .auth-root .ask-bubble,
  .auth-root .answer {
    max-width: 95% !important;
    padding: 1rem 1.25rem !important;
  }
  
  /* LOGIN PAGE: Add animation top margin on mobile */
  .auth-root.login-page .ml-core {
    top: -8% !important;
    right: -6% !important;
  }
  
  /* SIGNUP PAGE FIXES (768px) */
  
  /* Trial benefits - remove sticky */
  .auth-root.signup-page .trial-benefits {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    padding: 2rem 1.5rem !important;
    margin-bottom: 2rem !important;
    margin-top: 60px !important; /* Push down below navbar */
    order: 1 !important;
  }
  
  /* Signup hero with proper padding */
  .auth-root.signup-page .hero {
    padding: 2rem 1.5rem !important;
    order: 2 !important;
  }
  
  /* reCAPTCHA responsive */
  .auth-root .g-recaptcha,
  .auth-root iframe[title="reCAPTCHA"],
  .auth-root div[class*="recaptcha"] {
    transform: scale(0.95);
    transform-origin: 0 0;
    margin: 1rem 0 !important;
    max-width: 100% !important;
  }
  
  /* Password field with eye button */
  .auth-root .input-wrapper {
    position: relative;
  }
  
  .auth-root .password-field input {
    padding-right: 3rem !important;
  }
  
  /* Typography scaling */
  h1 {
    font-size: 1.75rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  h3 {
    font-size: 1.25rem !important;
  }
  
  /* Section spacing */
  section {
    padding: 2rem 0 !important;
  }
  
  /* Button groups */
  .d-flex.gap-3 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .btn-primary-custom,
  .btn-secondary-custom {
    width: 100%;
    justify-content: center;
  }
  
  /* Cards and panels */
  .card {
    margin-bottom: 1rem;
  }
  
  .card-body {
    padding: 1rem !important;
  }
  
  /* Inner content spacing - CRITICAL FIX */
  .card-body > *,
  .section > *,
  .hero-content > * {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }
  
  /* Forms mobile */
  .form-label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }
  
  .form-control,
  .form-select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 0.75rem !important;
  }
  
  /* Tables mobile - make scrollable */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  table {
    font-size: 0.85rem;
  }
  
  th, td {
    padding: 0.5rem !important;
    white-space: nowrap;
  }
  
  /* Footer mobile - compact redesign */
  .footer-modern-unified {
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  
  .footer-modern-unified .container {
    padding: 1rem 0.75rem !important;
  }
  
  /* Logo smaller on mobile */
  .footer-logo {
    height: 32px !important;
    margin-bottom: 1rem;
  }
  
  /* Compact info cards - 2 columns */
  .footer-info-card {
    margin-bottom: 0.75rem;
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
  }
  
  .footer-icon {
    font-size: 0.8rem !important;
    margin-right: 0.4rem !important;
  }
  
  .footer-info-content strong {
    font-size: 0.65rem !important;
    margin-bottom: 0.1rem !important;
  }
  
  .footer-info-content p {
    font-size: 0.7rem !important;
    line-height: 1.2 !important;
  }
  
  /* Single column for contact and location */
  .footer-contact-box,
  .footer-location-box {
    margin-bottom: 0.75rem;
    padding: 0.6rem !important;
  }
  
  .footer-box-title {
    font-size: 0.7rem !important;
    margin-bottom: 0.3rem !important;
  }
  
  .footer-link {
    font-size: 0.7rem !important;
    line-height: 1.4;
  }
  
  .footer-location-box p,
  .footer-location-box .small {
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
  }
  
  /* Reduce row gaps */
  .footer-modern-unified .row {
    margin: 0 !important;
    row-gap: 0.5rem !important;
  }
  
  .footer-modern-unified .mb-2 {
    margin-bottom: 0.75rem !important;
  }
  
  /* Copyright smaller */
  .footer-copyright-area {
    padding-top: 1rem !important;
    margin-top: 0.75rem !important;
  }
  
  .footer-copyright-area small {
    font-size: 0.65rem !important;
  }
  
  /* Modal improvements */
  .modal-dialog {
    margin: 0.5rem;
  }
  
  .modal-content {
    border-radius: 12px;
  }
  
  .modal-body {
    padding: 1rem;
  }
}

/* --- Small Mobile (max-width: 576px) --- */
@media (max-width: 576px) {
  /* CRITICAL: Minimum setup for smallest screens */
  * {
    box-sizing: border-box;
  }
  
  body {
    font-size: 0.9rem;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
  }
  
  /* =======================================
     LOGIN PAGE MOBILE FIXES - CRITICAL
     ======================================= */
  
  /* Fix auth-root layout on mobile */
  .auth-root {
    padding: 0 !important;
  }
  
  .auth-root .auth-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 80px 0 0 0 !important; /* Top padding to clear navbar */
  }
  
  /* MOVE animation/brand-stage BELOW the form on mobile */
  .auth-root.login-page .brand-stage {
    order: 2 !important; /* Moves to bottom */
    min-height: auto !important;
    padding: 2rem 1rem !important;
    margin-top: 3rem; /* Increased to prevent overlap */
  }
  
  /* Fix animation positioning - push down from top instead of centering */
  .auth-root.login-page .brand-stage .stage.active {
    justify-content: flex-start !important;
    padding-top: 80px !important;
  }
  
  /* Add extra top margin to chat-stack animation content on mobile */
  .auth-root.login-page .stage-wrap.chat-stack {
    margin-top: 50px !important;
  }
  
  .auth-root.login-page .hero {
    order: 1 !important; /* Keeps login form at top */
    padding: 1.5rem !important; /* CRITICAL: Add padding inside red box */
    border-radius: 20px !important;
    margin-top: 20px !important;
  }
  
  /* Form wrap with proper padding */
  .auth-root .form-wrap {
    margin-top: 1rem !important;
    padding: 0 !important; /* Remove extra padding since hero has padding */
  }
  
  /* Input fields with margins */
  .auth-root .input-pill {
    margin-bottom: 1rem !important;
    width: 100% !important;
    padding: 0.85rem 1rem !important;
    font-size: 16px !important; /* Prevent iOS zoom */
  }
  
  .auth-root .input-group {
    margin-bottom: 1rem !important;
  }
  
  /* Buttons with proper spacing */
  .auth-root .btn-dark,
  .auth-root button[type="submit"] {
    width: 100% !important;
    padding: 0.85rem 1rem !important;
    margin: 0 0 1rem 0 !important;
  }
  
  /* Helper links with spacing */
  .auth-root .helper-links {
    gap: 1rem !important;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0.5rem 0;
  }
  
  /* Headline and overline text */
  .auth-root .overline {
    font-size: 0.8rem !important;
    margin-bottom: 0.5rem;
    padding: 0 !important;
  }
  
  .auth-root .headline {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
    padding: 0 !important;
  }
  
  /* Error box spacing */
  .auth-root .error-box {
    margin-bottom: 1rem !important;
    padding: 0.75rem !important;
  }
  
  /* Chat bubble on mobile - smaller */
  .auth-root .ask-bubble {
    max-width: 90% !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  .auth-root .card-chat {
    max-width: 95% !important;
    padding: 1rem !important;
  }
  
  .auth-root .answer {
    max-width: 95% !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Hide brand stage animation on very small screens to save space */
  .auth-root.login-page .brand-stage .ml-core {
    display: block !important; /* Keep animation visible */
    top: -8% !important;
    right: -6% !important;
  }
  
  /* SIGNUP PAGE FIXES (576px) */
  
  /* Trial benefits - completely static, normal flow */
  .auth-root.signup-page .trial-benefits {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    padding: 1.5rem 1rem !important;
    margin-top: 60px !important; /* Push down below navbar */
    order: 1 !important;
  }
  
  /* Signup hero - extra padding inside */
  .auth-root.signup-page .hero {
    padding: 1.5rem !important;
    order: 2 !important;
  }
  
  /* Form wrap in signup */
  .auth-root.signup-page .form-wrap {
    margin-top: 1rem !important;
    padding: 0 !important;
  }
  
  /* Trial title smaller on mobile */
  .trial-title {
    font-size: 1.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .trial-subtitle {
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Included grid single column on smallest screens */
  .included-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  .included-item {
    font-size: 0.9rem !important;
  }
  
  /* reCAPTCHA smaller on mobile */
  .auth-root .g-recaptcha,
  .auth-root iframe[title="reCAPTCHA"],
  .auth-root div[class*="recaptcha"] {
    transform: scale(0.85) !important;
    transform-origin: 0 0;
    margin: 0.75rem 0 !important;
    max-width: 100% !important;
    overflow: hidden;
  }
  
  /* Password strength bar */
  #password-strength-wrapper {
    margin: 0.5rem 0 !important;
  }
  
  /* Password help text */
  .password-help {
    font-size: 0.75rem !important;
    margin-top: 0.25rem !important;
  }
  
  /* Trial CTA button */
  .trial-cta {
    padding: 0.85rem 1rem !important;
    width: 100% !important;
    margin: 0.75rem 0 !important;
  }
  
  /* Trial terms */
  .trial-terms {
    font-size: 0.75rem !important;
    text-align: center;
    margin-top: 1rem !important;
  }
  
  /* Login link */
  .login-link {
    text-align: center;
    font-size: 0.9rem !important;
    margin-top: 1rem !important;
  }
  
  /* Hero optimizations */
  .hero-badge {
    font-size: 0.75rem;
    padding: 0.5rem 1rem;
  }
  
  .hero-title {
    font-size: 1.5rem !important;
    margin-bottom: 1rem;
  }
  
  .hero-subtitle {
    font-size: 0.9rem !important;
  }
  
  /* Stat items */
  .stat-item {
    padding: 1rem;
  }
  
  .stat-number {
    font-size: 1.5rem !important;
  }
  
  .stat-label {
    font-size: 0.8rem;
  }
  
  /* Feature cards */
  .feature-icon {
    font-size: 2rem !important;
    width: 50px !important;
    height: 50px !important;
  }
  
  .feature-title {
    font-size: 1.1rem !important;
  }
  
  .feature-description {
    font-size: 0.85rem !important;
  }
  
  /* Buttons */
  .btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
  }
  
  .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
  
  /* Navbar brand logo */
  .navbar-brand img {
    height: 32px !important;
  }
  
  /* Footer */
  .footer-logo {
    max-width: 120px;
  }
  
  .footer-info-card {
    font-size: 0.85rem;
  }
}

/* --- Touch-Friendly Improvements --- */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .btn,
  .nav-link,
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  
  /* Remove hover effects on touch devices */
  .btn:hover,
  .nav-link:hover {
    transform: none;
  }
  
  /* Better form controls */
  input,
  select,
  textarea {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  /* =======================================
     FOOTER ULTRA-COMPACT (576px)
     ======================================= */
  
  .footer-modern-unified {
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Even smaller logo */
  .footer-logo {
    height: 28px !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Stack info cards 1 column on smallest screens */
  .footer-modern-unified .col-md-6,
  .footer-modern-unified .col-lg-3,
  .footer-modern-unified .col-lg-4 {
    width: 100% !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  /* Ultra-compact cards */
  .footer-info-card {
    padding: 0.4rem 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .footer-icon {
    font-size: 0.7rem !important;
    margin-right: 0.3rem !important;
  }
  
  .footer-info-content strong {
    font-size: 0.6rem !important;
  }
  
  .footer-info-content p {
    font-size: 0.65rem !important;
  }
  
  /* Compact contact/location boxes */
  .footer-contact-box,
  .footer-location-box {
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .footer-box-title {
    font-size: 0.65rem !important;
    margin-bottom: 0.25rem !important;
  }
  
  .footer-link,
  .footer-location-box p,
  .footer-location-box .small {
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
  }
  
  /* Minimal spacing */
  .footer-modern-unified .row {
    row-gap: 0.35rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .footer-modern-unified .mb-2 {
    margin-bottom: 0.5rem !important;
  }
  
  .footer-modern-unified .g-2 {
    --bs-gutter-y: 0.35rem !important;
  }
  
  /* Copyright ultra-small */
  .footer-copyright-area {
    padding-top: 0.75rem !important;
    margin-top: 0.5rem !important;
  }
  
  .footer-copyright-area small {
    font-size: 0.6rem !important;
  }
  
  /* Reduce container padding */
  .footer-modern-unified .container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  
  .footer-modern-unified .py-2 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

/* --- Landing Page Mobile Overrides --- */
@media (max-width: 991px) {
  #cepi-landing :where(.page-container) {
    padding: 0 1rem !important;
  }
  
  #cepi-landing :where(.hero-section) {
    padding: 3rem 1rem 2rem !important;
  }
  
  #cepi-landing :where(.hero-content) {
    padding: 0 1rem;
  }
  
  #cepi-landing :where(.feature-section),
  #cepi-landing :where(.video-showcase-section),
  #cepi-landing :where(.social-proof) {
    padding: 2rem 1rem !important;
  }
  
  #cepi-landing :where(.feature-grid),
  #cepi-landing :where(.stats-grid) {
    padding: 0 0.5rem;
  }
}

@media (max-width: 576px) {
  #cepi-landing :where(.page-container) {
    padding: 0 0.75rem !important;
  }
}

/* --- Landscape Mobile Optimization --- */
@media (max-width: 896px) and (orientation: landscape) {
  .hero-section {
    padding: 1.5rem 0 !important;
  }
  
  .modal-dialog {
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .navbar-collapse {
    max-height: 70vh;
    overflow-y: auto;
  }
}

/* --- High DPI / Retina Display Optimizations --- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .navbar-brand img,
  .footer-logo {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* --- Dark Mode Support (if enabled by user) --- */
@media (prefers-color-scheme: dark) {
  /* Optional: Add dark mode overrides here if needed */
}

/* --- Reduced Motion Support --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}