/* Connects design layer — makes the Laravel pages match the landing page.
   Loaded last in layouts/main.blade.php, so it overrides the vendor theme.
   Colour, type and surface only: no layout is changed. */
:root{
  --c-bg:#03040c; --c-ink:#f5f7ff; --c-mute:#99a1c6; --c-dim:#5e6590;
  --c-mail:#6d7cff; --c-sms:#00d9a6; --c-wa:#25d366;
  --c-line:rgba(255,255,255,.10); --c-card:rgba(255,255,255,.045);
  --c-grad:linear-gradient(135deg,#5a68d8,#7c52cf);
}
html,body{background:var(--c-bg) !important;color:var(--c-ink) !important;}
body{font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
     -webkit-font-smoothing:antialiased;position:relative;}
/* the same aurora the landing page uses */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58vw 58vw at 12% 18%, rgba(109,124,255,.16), transparent 62%),
    radial-gradient(52vw 52vw at 88% 26%, rgba(0,217,166,.11), transparent 62%),
    radial-gradient(60vw 60vw at 72% 88%, rgba(37,211,102,.09), transparent 64%),
    radial-gradient(46vw 46vw at 26% 82%, rgba(139,92,246,.12), transparent 62%);
}
main,section,.container,.container-fluid{position:relative;z-index:1;}

h1,h2,h3,h4,h5,h6{color:var(--c-ink) !important;letter-spacing:-.02em;font-weight:800;}
p,li,label,small,span.text-muted,.text-muted{color:var(--c-mute) !important;}
a{color:var(--c-mail);}
a:hover{color:#9aa6ff;}
hr{border-color:var(--c-line) !important;opacity:1;}

.text-gradient{
  background:linear-gradient(90deg,#a9b3ff,#00d9a6) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}

/* ---------- auth pages ---------- */
.auth,.auth-wrapper,.auth-left,.auth-right{background:transparent !important;}
.auth-left{border-right:1px solid var(--c-line);}
.auth-left h3,.auth-left h6{color:var(--c-ink) !important;}
.auth-feature-item{
  background:var(--c-card);border:1px solid var(--c-line);border-radius:16px;
  padding:16px 18px;margin-bottom:14px;backdrop-filter:blur(10px);
}
.auth-feature-icon{color:var(--c-sms) !important;}
.auth-form-wrapper{
  background:rgba(255,255,255,.045);border:1px solid var(--c-line);
  border-radius:22px;padding:34px 30px;backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.auth-form-wrapper h3{font-size:1.7rem;margin-bottom:22px;}
.forget-password{font-size:12.5px;color:var(--c-mute) !important;}
.forget-password:hover{color:var(--c-ink) !important;}
.divider{position:relative;text-align:center;margin:22px 0 16px;}
.divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--c-line);}
.divider span{position:relative;background:transparent;padding:0 14px;font-size:12.5px;color:var(--c-dim) !important;}
.logo-lg{max-height:44px;width:auto;}

/* ---------- form controls ---------- */
.form-control,.form-select,textarea.form-control,input.form-control{
  background:rgba(255,255,255,.055) !important;
  border:1px solid var(--c-line) !important;
  color:var(--c-ink) !important;border-radius:13px !important;
  padding:13px 15px !important;font-size:14.5px !important;box-shadow:none !important;
}
.form-control::placeholder{color:var(--c-dim) !important;}
.form-control:focus,.form-select:focus{
  border-color:var(--c-mail) !important;
  background:rgba(255,255,255,.075) !important;
  box-shadow:0 0 0 3px rgba(109,124,255,.20) !important;
}
.form-label{color:var(--c-mute) !important;font-weight:600 !important;font-size:12.8px !important;
  letter-spacing:.02em;margin-bottom:7px !important;}
.form-element{margin-bottom:17px;}
.input-group-text{background:rgba(255,255,255,.05) !important;border-color:var(--c-line) !important;color:var(--c-mute) !important;}

/* ---------- buttons ---------- */
.i-btn.btn--primary,.bg--gradient,.btn-primary{
  background:var(--c-grad) !important;border:0 !important;color:#fff !important;
  border-radius:14px !important;font-weight:700 !important;letter-spacing:.01em;
  box-shadow:0 12px 30px rgba(109,124,255,.28) !important;
  transition:transform .18s ease, filter .18s ease;
}
.i-btn.btn--primary:hover,.bg--gradient:hover,.btn-primary:hover{
  filter:brightness(1.08);transform:translateY(-1px);color:#fff !important;
}
.i-btn.btn--secondary,.btn-outline-primary,.btn-light,.btn-secondary{
  background:rgba(255,255,255,.06) !important;border:1px solid var(--c-line) !important;
  color:var(--c-ink) !important;border-radius:14px !important;font-weight:600 !important;
}
.i-btn.btn--secondary:hover,.btn-outline-primary:hover{background:rgba(255,255,255,.11) !important;color:#fff !important;}

/* ---------- surfaces used across the rest of the site ---------- */
.card,.pricing-item,.feature-card,.service-card,.box,.single-box{
  background:var(--c-card) !important;border:1px solid var(--c-line) !important;
  border-radius:20px !important;color:var(--c-ink) !important;box-shadow:none !important;
}
.table{color:var(--c-ink) !important;}
.table td,.table th{border-color:var(--c-line) !important;}
header,.header,.topbar,nav.navbar{background:rgba(3,4,12,.72) !important;
  backdrop-filter:blur(14px);border-bottom:1px solid var(--c-line);}
footer,.footer{background:transparent !important;border-top:1px solid var(--c-line);}
.badge{border-radius:99px !important;}

/* keep the notification toasts readable on the dark ground */
#toast-container>div{border-radius:14px !important;}

/* ---------- pass 2: beat the vendor theme where it still shows through ---------- */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,
.auth-form-wrapper h3,.auth-left h3,.section-title,.title,.card-title{
  font-family:Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}
.divider span,.divider>span{background:var(--c-bg) !important;color:var(--c-dim) !important;}
.sign-option-btn{
  background:rgba(255,255,255,.06) !important;border:1px solid var(--c-line) !important;
  color:var(--c-ink) !important;border-radius:14px !important;font-weight:600 !important;
}
.sign-option-btn:hover{background:rgba(255,255,255,.12) !important;color:#fff !important;}
.sign-option-btn i,.sign-option-logo{color:var(--c-ink) !important;}
.auth-feature-item h5,.auth-feature-item h6,.auth-feature-item strong{color:var(--c-ink) !important;font-weight:700 !important;}
.auth-feature-item p{color:var(--c-mute) !important;}
.resend-code,.resend-code a,.auth-form-wrapper a{color:var(--c-mail) !important;}
.form-check-label,.form-check-input+label{color:var(--c-mute) !important;}
.form-check-input{background-color:rgba(255,255,255,.08) !important;border-color:var(--c-line) !important;}
.form-check-input:checked{background-color:var(--c-mail) !important;border-color:var(--c-mail) !important;}
.text-dark,.text-black{color:var(--c-ink) !important;}
.bg-white,.bg-light{background:var(--c-card) !important;}
select.form-control option,.form-select option{background:#0a0d1c !important;color:var(--c-ink) !important;}
.nav-link{color:var(--c-mute) !important;}
.nav-link:hover,.nav-link.active{color:var(--c-ink) !important;}
/* the theme ships FA5 but the markup uses FA6 class names */
.fa-brands,.fab{font-family:"Font Awesome 5 Brands" !important;font-weight:400 !important;}
.fa-solid,.fas{font-family:"Font Awesome 5 Free" !important;font-weight:900 !important;}
.fa-regular,.far{font-family:"Font Awesome 5 Free" !important;font-weight:400 !important;}
.fa-google::before{content:"\f1a0";}
.fa-facebook-f::before,.fa-facebook::before{content:"\f39e";}
.fa-linkedin-in::before{content:"\f0e1";}
.fa-x-twitter::before,.fa-twitter::before{content:"\f099";}
.fa-whatsapp::before{content:"\f232";}

/* ---------- pass 3: pricing / plan cards + page banners ---------- */
.i-btn,.i-btn.btn--primary,.i-btn.btn--primary.outline,.i-btn.outline{
  -webkit-text-fill-color:#fff !important;
}
.i-btn.btn--primary.outline,.i-btn.outline{
  background:var(--c-grad) !important;border:0 !important;color:#fff !important;
}
.i-btn.btn--secondary,.i-btn.btn--secondary.outline{-webkit-text-fill-color:var(--c-ink) !important;}

.plan-card{
  background:var(--c-card) !important;border:1px solid var(--c-line) !important;
  border-radius:22px !important;padding:28px 24px !important;backdrop-filter:blur(12px);
}
.plan-card.recommend{
  background:rgba(109,124,255,.09) !important;
  border:1px solid rgba(109,124,255,.45) !important;
  box-shadow:0 24px 70px rgba(109,124,255,.20) !important;
}
.plan-card *{color:inherit;}
.plan-title{color:var(--c-ink) !important;font-weight:800 !important;font-size:1.15rem !important;
  letter-spacing:.01em;text-transform:none;}
.plan-card .price,.plan-card .price h5,.plan-card .price span,.plan-card .price p{color:var(--c-ink) !important;}
.plan-card .price p{color:var(--c-mute) !important;}
.plan-desc{color:var(--c-mute) !important;}
.plan-card h6{color:var(--c-dim) !important;font-size:11.5px !important;letter-spacing:.08em;
  text-transform:uppercase;font-weight:700 !important;}
.pricing-list li{color:var(--c-ink) !important;border-bottom:1px solid var(--c-line) !important;}
.recommend-tag{background:var(--c-grad) !important;color:#fff !important;-webkit-text-fill-color:#fff !important;
  border-radius:99px 99px 0 0 !important;font-weight:700 !important;letter-spacing:.02em;text-decoration:none !important;}
.recommend-tag a,.recommend-tag u{text-decoration:none !important;color:#fff !important;}
/* the credits box is inline-styled for a light theme */
.plan-card div[style*="#e2e8f0"]{border-color:var(--c-line) !important;background:rgba(255,255,255,.035) !important;}
.plan-card [style*="#111827"]{color:var(--c-ink) !important;}
.plan-card [style*="#6b7280"]{color:var(--c-dim) !important;}
.plan-card [style*="#374151"]{color:var(--c-mute) !important;}
.plan-card [style*="#9ca3af"]{color:var(--c-dim) !important;}
.plan-info-trigger{color:var(--c-mail) !important;}

/* page banners: dim the stock photo so the type reads */
.breadcrumb-banner .banner-wrapper{position:relative;border-radius:26px;overflow:hidden;}
.breadcrumb-banner .banner-wrapper::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,4,12,.55),rgba(3,4,12,.86));
}
.breadcrumb-banner .breadcrumb-content,.breadcrumb-banner .breadcrumb-bottom,
.breadcrumb-banner .breadcrumb-actions,.breadcrumb-banner .breadcrumb{position:relative;z-index:2;}
.breadcrumb-content h1,.breadcrumb-content h2,.breadcrumb-content h3{
  background:transparent !important;color:#fff !important;padding-left:0 !important;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.breadcrumb-content p,.breadcrumb-bottom p{color:#dfe4ff !important;}
.breadcrumb .breadcrumb-item,.breadcrumb a,.breadcrumb-item.active{color:#c9d0f5 !important;}

/* ---------- pass 4 ---------- */
.i-btn.btn--light{background:rgba(255,255,255,.09) !important;border:1px solid var(--c-line) !important;
  color:var(--c-ink) !important;-webkit-text-fill-color:var(--c-ink) !important;}
.i-btn.btn--light:hover{background:rgba(255,255,255,.17) !important;}
.i-btn.btn--light.outline{background:var(--c-grad) !important;border:0 !important;
  color:#fff !important;-webkit-text-fill-color:#fff !important;}
.breadcrumb-img{opacity:.42 !important;filter:saturate(.55) contrast(.95) !important;}
.breadcrumb-banner .banner-wrapper::after{
  background:linear-gradient(180deg,rgba(3,4,12,.60),rgba(3,4,12,.90)),
             radial-gradient(70% 120% at 12% 10%,rgba(109,124,255,.30),transparent 62%),
             radial-gradient(60% 120% at 92% 30%,rgba(0,217,166,.16),transparent 62%) !important;
}
/* USD-first pricing on the plan cards */
.plan-bdt{display:none;font-size:13px;color:var(--c-mute) !important;margin:-8px 0 12px;font-weight:500;}
body.is-bd .plan-bdt{display:block;}

/* ---------- pay-first checkout ---------- */
.gc-section{padding:110px 0 90px;}
.gc-head{max-width:720px;margin:0 auto 38px;text-align:center;}
.gc-eyebrow{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-sms) !important;font-weight:700;margin-bottom:10px;}
.gc-head h2{font-size:clamp(28px,4vw,42px);margin-bottom:12px;}
.gc-head p{color:var(--c-mute) !important;font-size:15px;line-height:1.65;}
.gc-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:22px;
  padding:30px 28px;backdrop-filter:blur(14px);height:100%;}
.gc-narrow{max-width:520px;margin:0 auto;}
.gc-summary{background:rgba(109,124,255,.08);border-color:rgba(109,124,255,.34);}
.gc-plan-name{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-mute) !important;font-weight:700;margin-bottom:6px;}
.gc-price{font-size:44px;font-weight:800;color:var(--c-ink) !important;line-height:1;letter-spacing:-.03em;}
.gc-price .gc-cur{font-size:22px;font-weight:700;vertical-align:super;margin-right:2px;}
.gc-price small{font-size:14px;font-weight:500;color:var(--c-mute) !important;letter-spacing:0;margin-left:6px;}
.gc-credits{list-style:none;padding:0;margin:22px 0 18px;border-top:1px solid var(--c-line);}
.gc-credits li{display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;border-bottom:1px solid var(--c-line);}
.gc-credits li span{color:var(--c-mute) !important;font-size:13.5px;}
.gc-credits li b{color:var(--c-ink) !important;font-size:16px;font-weight:700;}
.gc-fine{font-size:12.5px;color:var(--c-dim) !important;line-height:1.6;margin:10px 0 0;}
.gc-fine a{color:var(--c-mail) !important;}
.gc-secure{border-top:1px solid var(--c-line);padding-top:14px;margin-top:18px;}
.gc-form-title{font-size:1.55rem;margin-bottom:6px;}
.gc-form-sub{color:var(--c-mute) !important;font-size:14px;margin-bottom:22px;}
.gc-more{margin:2px 0 18px;}
.gc-more summary{cursor:pointer;font-size:13px;color:var(--c-mute);list-style:none;
  padding:9px 0;border-bottom:1px dashed var(--c-line);}
.gc-more summary::-webkit-details-marker{display:none;}
.gc-more summary::before{content:"+ ";color:var(--c-sms);font-weight:700;}
.gc-more[open] summary::before{content:"\2212 ";}
.gc-more summary:hover{color:var(--c-ink);}
.gc-error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#ffb4b4 !important;
  border-radius:12px;padding:11px 14px;font-size:13px;margin-bottom:14px;}
.gc-spinner{width:38px;height:38px;margin:0 auto 18px;border-radius:50%;
  border:3px solid rgba(255,255,255,.14);border-top-color:var(--c-mail);animation:gcspin .9s linear infinite;}
@keyframes gcspin{to{transform:rotate(360deg);}}
.gc-tick{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  background:rgba(0,217,166,.14);border:1px solid rgba(0,217,166,.45);
  color:var(--c-sms);font-size:28px;line-height:54px;text-align:center;}
.gc-onboard .gc-eyebrow{color:var(--c-sms) !important;}
@media (max-width:575px){
  .gc-section{padding:80px 0 60px;}
  .gc-card{padding:24px 20px;border-radius:18px;}
  .gc-price{font-size:36px;}
}

/* ---------- pay-first: method chooser, bKash, verification ---------- */
.gc-methods{margin:6px 0 18px;}
.gc-methods-label{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-dim) !important;font-weight:700;margin-bottom:9px;}
.gc-method{display:block;position:relative;border:1px solid var(--c-line);border-radius:14px;
  padding:12px 14px 12px 40px;margin-bottom:9px;cursor:pointer;transition:border-color .15s,background .15s;}
.gc-method input{position:absolute;left:14px;top:50%;transform:translateY(-50%);accent-color:#6d7cff;}
.gc-method-name{display:block;color:var(--c-ink);font-weight:650;font-size:14.5px;}
.gc-method-note{display:block;color:var(--c-dim);font-size:12.5px;margin-top:1px;}
.gc-method--on{border-color:rgba(109,124,255,.55);background:rgba(109,124,255,.10);}
.gc-info{margin-top:16px;padding-top:14px;border-top:1px solid var(--c-line);
  font-size:13px;line-height:1.7;color:var(--c-mute) !important;white-space:normal;}
.gc-divider{position:relative;text-align:center;margin:24px 0 18px;}
.gc-divider::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--c-line);}
.gc-divider span{position:relative;background:#0a0c18;padding:0 12px;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-dim);font-weight:700;}
.gc-clock{width:56px;height:56px;margin:0 auto 18px;border-radius:50%;
  background:rgba(109,124,255,.14);border:1px solid rgba(109,124,255,.45);
  color:var(--c-mail);font-size:26px;line-height:50px;text-align:center;letter-spacing:2px;}

.gc-verify-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;}
.gc-pill{flex:none;border-radius:99px;padding:5px 13px;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;}
.gc-pill--ok{background:rgba(0,217,166,.14);border:1px solid rgba(0,217,166,.45);color:#4ee9c2 !important;}
.gc-pill--wait{background:rgba(255,176,32,.13);border:1px solid rgba(255,176,32,.42);color:#ffca6b !important;}
.gc-verify-body{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;}
.gc-verify-send,.gc-verify-code{display:flex;gap:9px;align-items:center;flex:1 1 260px;}
.gc-verify-send .form-control,.gc-verify-code .form-control{max-width:200px;}
.gc-verify-send .i-btn,.gc-verify-code .i-btn{flex:none;white-space:nowrap;}

.gc-banner{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:rgba(255,176,32,.10);border:1px solid rgba(255,176,32,.38);
  border-radius:16px;padding:14px 18px;margin-bottom:22px;}
.gc-banner-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#ffb020;
  box-shadow:0 0 0 4px rgba(255,176,32,.18);}
.gc-banner-text{flex:1 1 260px;font-size:13.5px;color:var(--c-mute) !important;line-height:1.55;}
.gc-banner-text b{color:var(--c-ink) !important;}
.gc-banner .i-btn{flex:none;}
@media (max-width:575px){
  .gc-verify-send .form-control,.gc-verify-code .form-control{max-width:none;}
  .gc-verify-send,.gc-verify-code{flex:1 1 100%;}
}

/* ---------- pass 3: the top navigation ---------- */
/* The vendor theme ships a light header. On the dark bar its menu links compute
   to #232426 and the mega menu sits on a cream panel, so the links were
   invisible and the dropdown was near-white text on cream. */
.menu-link,
.header .menu-link i,
.header .menu-link .fa,
.header .menu-link .far,
.header .menu-link .fas{ color:var(--c-mute) !important; }

.menu-link:hover,
.menu-link:focus-visible,
.header .menu-link:hover i{ color:var(--c-ink) !important; }

.menu-link.active,
a.active.menu-link,
.header .menu-link.active i{ color:var(--c-ink) !important; }

.header .menu-link{ position:relative; }
.header .menu-link.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;
  background:var(--c-grad);
}

/* The uploaded site logo is a dark wordmark drawn for a light header. The brand
   pack already carries a light-on-dark version, so the header uses that one. */
.header .logo-wrapper img,
header .logo-wrapper img{
  content:url("/brand/besends-logo.png");
  max-height:34px;width:auto;
}

/* mega menu panel */
.mega-menu-inner{
  background:rgba(9,11,22,.98) !important;
  border:1px solid var(--c-line) !important;
  border-radius:22px !important;
  box-shadow:0 34px 100px rgba(0,0,0,.6) !important;
}
.mega-menu-inner .menu-feature-item{ border-radius:14px; }
.mega-menu-inner .menu-feature-item:hover{ background:rgba(255,255,255,.05); }
.menu-feature-item .menu-feature-content h6{ color:var(--c-ink) !important; }
.menu-feature-item .menu-feature-content p{ color:var(--c-mute) !important; }
.menu-feature-icon,.menu-feature-item .menu-feature-icon i{ color:var(--c-mail) !important; }
.menu-feature-item.active .menu-feature-icon,
.menu-feature-item.active .menu-feature-icon i{ color:var(--c-sms) !important; }
.maga-menu-left,.maga-menu-right{ background:transparent !important; }

/* ---------- placeholder images ---------- */
/* Where a frontend section has no image set, showImage() falls back to
   /default/image/WxH — a grey box with the dimensions printed on it. These map
   the two sizes the public pages actually hit onto real Connects artwork. The
   rules stop matching by themselves the moment a real image is uploaded, since
   the src changes. */
img[src*="/default/image/1136x866"]{
  content:url("/brand/art/service-sms.webp");
}
img[src*="/default/image/1920x1080"]{
  content:url("/brand/art/breadcrumb-contact.webp");
}

/* ---------- the US$1 try line ---------- */
.cn-try{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  max-width:900px;margin:34px auto 0;padding:16px 20px;
  border:1px dashed rgba(109,124,255,.40);border-radius:18px;
  background:rgba(109,124,255,.07);
}
.cn-try-tag{
  flex:none;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:#fff !important;background:var(--c-grad);padding:5px 11px;border-radius:99px;
}
.cn-try-text{margin:0 !important;flex:1 1 320px;font-size:13.5px;line-height:1.6;color:var(--c-mute) !important;}
.cn-try-text strong{color:var(--c-ink) !important;font-weight:700;}
.cn-try-link{
  flex:none;color:var(--c-mail) !important;font-weight:650;font-size:13.5px;
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap;
}
@media (max-width:575.98px){ .cn-try{padding:14px 16px;} .cn-try-link{width:100%;} }

/* ==========================================================================
   pass 5: the pricing page
   ==========================================================================
   Three faults, all structural rather than cosmetic:

   1. .container-wrapper is max-width:1760px with padding-inline:0, and the
      theme only starts shrinking it below 1600px. Between 1600 and 1760 the
      page therefore runs edge to edge: the section heading began at x=0 and
      the outer plan cards were clipped by the viewport. Bootstrap's .row also
      carries -12px side margins, which had nothing to sit inside, so the
      document scrolled 24px horizontally.

   2. The feature list in each plan card was a 280px box holding 699px of
      content, scrolled with a hidden scrollbar and a "scroll down features"
      caption. A buyer comparing plans cannot see what he is comparing.

   3. The "Recommended" ribbon sat under the fixed header.
   ========================================================================== */

.container-wrapper {
  padding-inline: clamp(16px, 2.4vw, 44px);
}

/* The list grows to its content; the card is already position:relative with an
   absolutely-positioned action, so the reserved 80px at the bottom stays. */
.plan-card .pricing-list {
  max-height: none !important;
  height: auto !important;
  overflow-y: visible !important;
}
/* The caption said "scroll down features". It now says what it is. */
.plan-card .cn-feature-title {
  margin: 26px 0 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-mute) !important;
}

/* Equal-height cards so the three action buttons line up. */
.plan .row > [class*="col-"] { display: flex; }
.plan .plan-card { width: 100%; }

/* ---------- pricing FAQ ---------- */
.cn-faq { padding: 0 0 110px; }
.cn-faq-title {
  margin: 0 0 28px;
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-ink) !important;
}
.cn-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1180px;
  gap: 12px 22px;
  align-items: start;
}
.cn-faq-item {
  border: 1px solid var(--c-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
  padding: 0 18px;
}
.cn-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 26px 16px 0;
  position: relative;
  font-size: 15px;
  font-weight: 650;
  color: var(--c-ink) !important;
}
.cn-faq-item > summary::-webkit-details-marker { display: none; }
.cn-faq-item > summary::after {
  content: '+';
  position: absolute;
  right: 2px; top: 50%;
  transform: translateY(-50%);
  font-size: 19px;
  font-weight: 400;
  color: var(--c-mute);
}
.cn-faq-item[open] > summary::after { content: '\2013'; }
.cn-faq-a {
  padding: 0 0 18px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--c-mute) !important;
  max-width: 62ch;
}
.cn-faq-a a { color: var(--c-mail) !important; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 575.98px) {
  .cn-faq { padding-bottom: 70px; }
  .cn-faq-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   pass 6: article typography and the in-post call to action
   ==========================================================================
   The theme styles a blog body as one undifferentiated block of text. These
   posts carry headings, lists and a closing offer, so they need a reading
   measure, real vertical rhythm, and a CTA that is visibly not body copy.
   ========================================================================== */

.blog-description {
  max-width: 74ch;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--c-mute) !important;
}
.blog-description > p { margin: 0 0 20px; color: inherit !important; }
.blog-description strong { color: var(--c-ink) !important; font-weight: 650; }
.blog-description em { font-style: italic; color: var(--c-ink) !important; }
.blog-description code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--c-ink) !important;
}
.blog-description h2 {
  margin: 42px 0 14px;
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--c-ink) !important;
}
.blog-description h3 {
  margin: 32px 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--c-ink) !important;
}
.blog-description ul,
.blog-description ol { margin: 0 0 22px; padding-left: 22px; }
.blog-description li { margin-bottom: 10px; color: inherit !important; }
.blog-description ul li::marker { color: var(--c-wa, #3fcf8e); }
.blog-description ol li::marker { color: var(--c-mail, #6d7cff); font-weight: 700; }
.blog-description a { color: var(--c-mail) !important; text-decoration: underline; text-underline-offset: 3px; }

/* The offer at the foot of each post. */
.cn-post-cta {
  margin: 44px 0 8px;
  padding: 26px 28px;
  border: 1px solid rgba(109, 124, 255, 0.34);
  border-radius: 20px;
  background: linear-gradient(150deg, rgba(109, 124, 255, 0.10), rgba(63, 207, 142, 0.06));
}
.cn-post-cta__h {
  margin: 0 0 8px !important;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.015em;
  color: var(--c-ink) !important;
}
.cn-post-cta__b { margin: 0 0 20px !important; font-size: 15px; line-height: 1.6; }
.cn-post-cta__a { margin: 0 !important; display: flex; flex-wrap: wrap; gap: 12px; }
.cn-post-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14.5px;
  font-weight: 650;
  text-decoration: none !important;
  color: var(--c-ink) !important;
  white-space: nowrap;
  transition: transform .2s ease, border-color .2s ease;
}
.cn-post-btn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.3); }
.cn-post-btn--go {
  background: var(--c-grad);
  border-color: transparent;
  color: #fff !important;
}
@media (max-width: 575.98px) {
  .blog-description { font-size: 16px; }
  .cn-post-cta { padding: 20px 18px; }
  .cn-post-btn { width: 100%; }
}

/* ---------- blog cards ---------- */
/* Card headlines were sitting at the muted body colour and reading as disabled
   text; the timestamp was 24px of unbacked white laid straight over the cover
   art. Both are the first thing a visitor sees on /blog. */
.blog-card .blog-title p {
  color: var(--c-ink) !important;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.32;
}
.blog-card .blog-title:hover p { color: var(--c-mail) !important; }
.blog-card .blog-img span {
  top: auto !important;
  bottom: 14px;
  left: auto !important;
  right: 14px;
  font-size: 12px !important;
  font-weight: 650;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(5, 6, 12, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

/* `.blog-description a` also carries !important, and beats a single class, so
   the CTA buttons inherited link colour and underline. Scope them to the body. */
.blog-description .cn-post-btn {
  color: var(--c-ink) !important;
  text-decoration: none !important;
}
.blog-description .cn-post-btn--go { color: #fff !important; }
.blog-description .cn-post-cta__h { color: var(--c-ink) !important; }

/* ---------- headings promoted to h1 ---------- */
/* Six pages had no <h1> at all; their real page title was an <h2> in the
   breadcrumb, and the auth pages used <h3>. The tags changed; the type scale
   must not, or the pages get a 48px "Sign in". */
.auth-title {
  font-size: clamp(24px, 2.4vw, 30px) !important;
  font-weight: 750 !important;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 6px;
  color: var(--c-ink) !important;
}
.blog-detail-title {
  font-size: clamp(26px, 3vw, 40px) !important;
  font-weight: 780 !important;
  letter-spacing: -0.028em;
  line-height: 1.18;
}

/* ---------- coupon field on the guest checkout ---------- */
.gc-coupon { margin: 14px 0 4px; }
.gc-coupon-toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--c-mail) !important;
  text-decoration: underline; text-underline-offset: 3px;
}
.gc-coupon-row { display: flex; gap: 8px; margin-top: 10px; }
.gc-coupon-row .gc-input { flex: 1 1 auto; width: auto; text-transform: uppercase; letter-spacing: .06em; }
.gc-coupon-apply {
  flex: 0 0 auto; padding: 0 18px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, .06);
  color: var(--c-ink) !important;
  font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap;
}
.gc-coupon-apply:hover { border-color: rgba(255, 255, 255, .3); }
.gc-coupon-apply:disabled { opacity: .55; cursor: default; }
.gc-coupon-msg { margin: 9px 0 0 !important; font-size: 13px; line-height: 1.5; }
.gc-coupon-msg.is-ok  { color: #3fcf8e !important; }
.gc-coupon-msg.is-bad { color: #ff8095 !important; }