/* =========================================================
   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;

  /* 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 */

  /* --- 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);

  /* legacy tokens kept for specific components (spinner card) */
  --cepi-shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --cepi-shadow-md: 0 8px 24px rgba(0,0,0,.12);
}

/* ---------- 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', Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

h1,h2,h3,h4,h5,h6{ color: var(--cepi-title) !important; margin-bottom: 1em !important; }
h1{ font-weight:700 !important; font-size:36px !important; text-align:center !important; } /* Page title */
h2{ font-weight:600 !important; font-size:18px !important; } /* Section title */
h3{ font-weight:600 !important; font-size:16px !important; } /* Subsection */
body, p, li, td, th, input, select, textarea{ font-size:14px !important; } /* Body size */

a{ color: var(--cepi-primary) !important; text-decoration:none !important; }
a:hover{ text-decoration:underline !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: 14px 12px !important;
  height: var(--cepi-ctrl-height) !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 .2rem rgba(255,75,51,.16) !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;
}

/* ---------- 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 18px !important;
}
.btn-primary, .btn-success{
  background: var(--cepi-primary) !important;
  border-color: var(--cepi-primary) !important;
  color:#fff !important;
}
.btn-primary:hover, .btn-success:hover{
  background:#ff6a4d !important;
  border-color:#ff6a4d !important;
}
.btn-dark{
  background: var(--cepi-slate) !important;
  border-color: var(--cepi-slate) !important;
  color:#fff !important;
}
.btn-outline-primary{
  color: var(--cepi-primary) !important;
  border-color: var(--cepi-primary) !important;
  background: transparent !important;
}
.btn-outline-primary:hover{
  background: var(--cepi-primary) !important;
  color:#fff !important;
}
/* Link-style secondary action */
.cepi-subbtn{ font-size: var(--cepi-ctrl-font) !important; text-decoration: underline !important; }

/* ---------- Tables ---------- */
.table{ color: var(--cepi-body) !important; }
.table thead th{
  background:#fff5f2 !important;
  color: var(--cepi-title) !important;
  border-bottom:1px solid var(--cepi-border) !important;
}
.table td, .table th{ border-color: var(--cepi-border) !important; }

/* ---------- Alerts / badges ---------- */
.alert-danger{ background:#FFECEC !important; color:#7A0E0E !important; border-color:#F7C6C6 !important; }
.badge.text-bg-warning{ background:#FFF1D6 !important; color:#7A4E00 !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; }



/* =========================================================
   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; }

/* Change hamburger (navbar-toggler) lines to orange */
.navbar-toggler {
  border-color: var(--cepi-primary, #ff4b33); /* optional: border color */
}

.navbar-toggler-icon {
  background-image: none !important;
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
}

/* create 3 custom orange lines */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon div {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--cepi-primary, #ff4b33);
  transition: all 0.3s ease;
}

.navbar-toggler-icon::before {
  top: 0.3rem;
}

.navbar-toggler-icon div {
  top: 0.7rem;
}

.navbar-toggler-icon::after {
  bottom: 0.3rem;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: rotate(45deg);
  top: 0.7rem;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(-45deg);
  bottom: 0.7rem;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon div {
  opacity: 0;
}


/*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:72vh;
  display:flex;
  align-items:center;
  padding-left:clamp(1rem,7vw,6rem);
}
.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: clamp(2.5rem, 9vw, 8rem);  /* 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: grid;
  place-items: center;                          /* center grid in viewport */
  padding: clamp(16px, 3vw, 36px);
}

.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: center;
}

/* 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;
}

.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; }

/* === Crisp, non-faint signup text — hero scope only === */
:root{
  --cepi-white: #ffffff;
  --cepi-smoke-white: #f6f6f7;
  --cepi-black: #0f0f14;
}

/* 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{
    padding: 20px;
    min-height: auto;
  }
  .included-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ===== Landing page ===== */


/* =========================================================
   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;
}


/* ---------------- 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); }

/* ---------------- 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(.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);
}

/* 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; }
}

/* PRICING PAGES */

/* ===== CEPI Pricing — SCOPED + HARDENED ===== */
#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
}
#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 }

/* 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 — 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}
#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}

/* 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:520px;margin-left:auto;margin-right:auto}}
@media (max-width:768px){#cepi-pricing :where(.hero-subtitle){font-size:16px}}






/* =========================================================
   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; }