/* Extracted from cpanel.php style block 1 */
/* ================================================================
   THEME: cPanel - classic orange-red brand colour
   Token override identical to theme-uptimerobot pattern
   ================================================================ */
:root {
  --color-primary:          #FF6C2F;
  --color-primary-light:    #FF8C5A;
  --color-primary-dark:     #E05520;
  --color-primary-darker:   #8C2E00;
  --color-secondary:        #FF9F6B;
  --color-secondary-light:  #FFD0B5;
  --color-secondary-dark:   #C24510;
  --color-accent:           #FFD166;
  --color-accent-light:     #FFF3CD;
  --color-accent-dark:      #F5A623;

  --color-primary-rgb:          255, 108,  47;
  --color-primary-light-rgb:    255, 140,  90;
  --color-primary-dark-rgb:     224,  85,  32;
  --color-primary-darker-rgb:   140,  46,   0;
  --color-secondary-rgb:        255, 159, 107;
  --color-secondary-light-rgb:  255, 208, 181;
  --color-secondary-dark-rgb:   194,  69,  16;
  --color-accent-rgb:           255, 209, 102;

  --border-primary:   rgba(255, 108, 47, 0.18);
  --border-secondary: rgba(255, 108, 47, 0.09);

  --gradient-horizontal:  linear-gradient(90deg,  #C24510, #FF6C2F, #FF8C5A);
  --gradient-primary:     linear-gradient(135deg, #1A0800, #FF6C2F, #FF9F6B);
  --gradient-card-header: linear-gradient(145deg, #1A0800, #8C2E00, #FF6C2F);

  --shadow-md:   0 10px 20px rgba(255, 108, 47, 0.22);
  --shadow-lg:   0 15px 30px rgba(255, 108, 47, 0.30);
  --shadow-xl:   0 20px 40px rgba(255, 108, 47, 0.14);
  --shadow-glow: 0 0  30px  rgba(255, 108, 47, 0.45);
  --shadow-card: 0 30px 50px -15px rgba(255, 108, 47, 0.18);

  --dark-1: #0D0500;
  --dark-2: #1A0800;
  --dark-3: #8C2E00;
}

img { max-width: 100%; height: auto; display: block; }

/* ================================================================
   KEYFRAMES
   ================================================================ */
@keyframes slideUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes blink   { 0%,100%{opacity:1} 50%{opacity:.35} }
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ================================================================
   HERO
   ================================================================ */
.cp-hero {
  position: relative; min-height: 80svh;
  display: flex; align-items: center;
  background: linear-gradient(135deg, #0D0500 0%, #1A0800 60%, #2D1000 100%);
  overflow: hidden; padding: 80px 0 68px;
}
.cp-hero__photo {
  position: absolute; inset: 0;
  background: url('https://underhost.com/blog/wp-content/uploads/2024/11/chrome_yu0vSfTiWj-scaled.webp') center 40%/cover no-repeat;
  opacity: .09;
}
.cp-hero__blooms {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at 18% 52%, rgba(255,108,47,.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 38% at 80% 20%, rgba(255,209,102,.10) 0%, transparent 60%);
}
.cp-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,108,47,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,108,47,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 20%, transparent 100%);
}
.cp-hero .container { position: relative; z-index: 2; }

/* ── eyebrow ── */
.cp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px;
  background: rgba(255,108,47,.13); border: 1px solid rgba(255,108,47,.38);
  border-radius: var(--radius-full);
  color: var(--color-primary-light);
  font-size: 11px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  margin-bottom: 24px; animation: slideUp .5s ease both;
}
.cp-badge img { height: 18px; width: auto; }
.cp-badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-success); box-shadow: 0 0 8px var(--color-success);
  animation: blink 2s ease-in-out infinite;
}

.cp-hero__title {
  font-size: clamp(32px, 7.5vw, 68px); font-weight: 900;
  line-height: 1.05; letter-spacing: -2.5px; color: #fff;
  margin: 0 0 18px; animation: slideUp .55s .1s ease both;
}
.cp-hero__title .grad {
  background: linear-gradient(90deg, #FF8C5A, #FFD166);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.cp-hero__sub {
  font-size: 16px; color: rgba(255,255,255,.70); line-height: 1.75;
  max-width: 580px; margin-bottom: 32px;
  animation: slideUp .6s .18s ease both;
}
.cp-hero__sub strong { color: #fff; font-weight: 700; }

.cp-hero__actions {
  display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px;
  animation: slideUp .65s .24s ease both;
}
@media(min-width:480px){ .cp-hero__actions{ flex-direction: row; } }

.cp-trust {
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
  animation: slideUp .7s .3s ease both;
}
.cp-trust__item {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,.60);
}
.cp-trust__item i { color: var(--color-primary); font-size: 12px; }
.cp-trust__sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.18); }

/* ================================================================
   BUTTONS
   ================================================================ */
.cp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 28px; border-radius: var(--radius-full);
  font-weight: 700; font-size: 15px; font-family: inherit;
  text-decoration: none !important; border: none; cursor: pointer;
  transition: var(--transition-base); -webkit-appearance: none;
}
.cp-btn--fill {
  background: var(--gradient-horizontal); color: #fff !important;
  box-shadow: var(--shadow-md); width: 100%;
}
@media(min-width:480px){ .cp-btn--fill{ width: auto; } }
.cp-btn--fill:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: #fff !important; }
.cp-btn--ghost {
  background: transparent; color: rgba(255,255,255,.82) !important;
  border: 1.5px solid rgba(255,255,255,.25); width: 100%;
}
@media(min-width:480px){ .cp-btn--ghost{ width: auto; } }
.cp-btn--ghost:hover { border-color: rgba(255,108,47,.65); color: var(--color-primary) !important; background: rgba(255,108,47,.07); }
.cp-btn--outline {
  background: transparent; color: var(--color-primary) !important;
  border: 1.5px solid rgba(255,108,47,.40);
}
.cp-btn--outline:hover { background: rgba(255,108,47,.07); border-color: var(--color-primary); }
.cp-btn--wide { padding: 14px 36px; font-size: 16px; }
.cp-btn--sm { padding: 10px 22px; font-size: 14px; }

/* ================================================================
   PARTNERS
   ================================================================ */
.cp-partners {
  background: var(--surface-primary);
  border-bottom: 1px solid var(--border-secondary); padding: 22px 0;
}
.cp-partners__row {
  display: flex; align-items: center; justify-content: center;
  gap: 20px 32px; flex-wrap: wrap;
}
.cp-partners__row .logo-wrap {
  width: 100px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  opacity: .50; filter: grayscale(1); transition: var(--transition-base);
}
.cp-partners__row .logo-wrap:hover { opacity: 1; filter: none; }
.cp-partners__row .logo-wrap img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}

/* ================================================================
   SHARED SECTION HEADER
   ================================================================ */
.cp-lbl {
  display: inline-block; padding: 4px 14px;
  background: rgba(255,108,47,.10); border-radius: var(--radius-full);
  color: var(--color-primary); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;
}
.cp-lbl--light { background: rgba(255,108,47,.20); color: var(--color-primary-light); }
.cp-h2 {
  font-size: clamp(24px, 3.2vw, 42px); font-weight: 900;
  letter-spacing: -1.2px; line-height: 1.12;
  margin-bottom: 13px; color: var(--text-primary);
}
.cp-h2 em   { font-style: normal; color: var(--color-primary); }
.cp-h2--inv { color: #fff; }
.cp-sub {
  font-size: 15px; color: var(--text-secondary);
  line-height: 1.70; max-width: 600px; margin: 0 auto 50px;
}
.cp-sub--inv { color: rgba(255,255,255,.60); }

/* ================================================================
   STATS
   ================================================================ */
.cp-stats { background: var(--gradient-card-header); padding: 52px 0; position: relative; overflow: hidden; }
.cp-stats::before {
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size: 40px 40px;
}
.cp-stats-grid {
  display: grid; grid-template-columns: repeat(2,1fr); position: relative; z-index: 1;
}
@media(min-width:1024px){ .cp-stats-grid{ grid-template-columns: repeat(4,1fr); } }
.cp-stat {
  text-align: center; padding: 28px 16px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.cp-stat:last-child { border-right: none; }
.cp-stat__n {
  font-size: clamp(30px,4vw,48px); font-weight: 900; color: #fff;
  line-height: 1; letter-spacing: -1.5px; margin-bottom: 8px;
}
.cp-stat__n em { font-style: normal; color: var(--color-accent); }
.cp-stat__l { font-size: 12px; color: rgba(255,255,255,.68); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }

/* ================================================================
   PRICING TIERS
   ================================================================ */
.cp-pricing { background: var(--surface-secondary); padding: 88px 0; }
.cp-pricing-grid {
  display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 52px;
}
@media(min-width:640px)  { .cp-pricing-grid{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px) { .cp-pricing-grid{ grid-template-columns: repeat(4,1fr); } }

.cp-plan {
  background: var(--surface-primary);
  border-radius: var(--radius-2xl); overflow: hidden;
  border: 1.5px solid var(--border-secondary);
  transition: var(--transition-base); position: relative;
}
.cp-plan:hover { border-color: var(--border-primary); box-shadow: var(--shadow-xl); transform: translateY(-5px); }
.cp-plan--popular {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-xl);
}

/* Gradient header */
.cp-plan__head {
  background: var(--gradient-card-header); padding: 24px 22px 20px;
  position: relative;
}
.cp-plan--popular .cp-plan__head {
  background: var(--gradient-horizontal);
}
.cp-plan__badge {
  position: absolute; top: 14px; right: 14px;
  background: var(--color-accent); color: #1A0800;
  font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius-full);
}
.cp-plan__name { font-size: 20px; font-weight: 900; color: #fff; margin-bottom: 4px; }
.cp-plan__desc { font-size: 12px; color: rgba(255,255,255,.65); line-height: 1.5; }
.cp-plan__price {
  font-size: 36px; font-weight: 900; color: #fff;
  margin: 14px 0 0; letter-spacing: -1.5px; line-height: 1;
}
.cp-plan__price span { font-size: 14px; font-weight: 500; opacity: .70; letter-spacing: 0; }

/* Plan body */
.cp-plan__body { padding: 22px; }
.cp-plan__limit {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  padding: 10px 12px; background: var(--surface-secondary);
  border-radius: var(--radius-lg); margin-bottom: 16px;
  border: 1px solid var(--border-secondary);
}
.cp-plan__limit i { color: var(--color-primary); font-size: 14px; }

.cp-feat-list { list-style: none; padding: 0; margin: 0 0 20px; }
.cp-feat-list li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-primary);
  padding: 6px 0; border-bottom: 1px solid var(--border-secondary);
}
.cp-feat-list li:last-child { border-bottom: none; }
.cp-feat-list i { color: var(--color-primary); font-size: 12px; flex-shrink: 0; }
.cp-feat-list .na { color: var(--text-secondary); }
.cp-feat-list .na i { color: var(--color-gray-400); }

/* ================================================================
   WHAT'S INCLUDED - image cards using local assets
   ================================================================ */
.cp-included { background: var(--surface-primary); padding: 88px 0; }
.cp-inc-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 52px;
}
@media(min-width:640px)  { .cp-inc-grid{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px) { .cp-inc-grid{ grid-template-columns: repeat(3,1fr); } }

/* Cards with image on top */
.cp-inc-card {
  background: var(--surface-secondary);
  border-radius: var(--radius-xl); border: 1px solid var(--border-secondary);
  overflow: hidden; transition: var(--transition-base);
  display: flex; flex-direction: column;
}
.cp-inc-card:hover { border-color: var(--border-primary); box-shadow: var(--shadow-xl); transform: translateY(-3px); background: var(--surface-primary); }
.cp-inc-card--wide { flex-direction: row; align-items: center; }

/* Image area */
.cp-inc-img {
  display: flex; align-items: center; justify-content: center;
  padding: 24px 20px 16px; background: var(--surface-primary);
  border-bottom: 1px solid var(--border-secondary);
}
.cp-inc-img img { width: 64px; height: 64px; object-fit: contain; }
/* Text area */
.cp-inc-text { padding: 16px 18px 20px; }
.cp-inc-text h3 { font-size: 15px; font-weight: 800; color: var(--text-primary); margin-bottom: 5px; }
.cp-inc-text p  { font-size: 13px; color: var(--text-secondary); line-height: 1.60; margin: 0; }

/* ================================================================
   WHY CPANEL - dark glass section
   ================================================================ */
.cp-why {
  background: linear-gradient(160deg, var(--dark-1) 0%, var(--dark-2) 50%, var(--dark-3) 100%);
  padding: 88px 0; position: relative; overflow: hidden;
}
.cp-why::before {
  content:''; position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    -55deg, transparent, transparent 28px,
    rgba(255,108,47,.04) 28px, rgba(255,108,47,.04) 29px);
}
.cp-why .container { position: relative; z-index: 1; }
.cp-why-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 44px;
}
@media(min-width:640px)  { .cp-why-grid{ grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px) { .cp-why-grid{ grid-template-columns: repeat(3,1fr); } }
.cp-why-card {
  background: rgba(255,255,255,.055); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,108,47,.18); border-radius: var(--radius-xl); padding: 24px 20px;
  transition: var(--transition-base);
}
.cp-why-card:hover { background: rgba(255,255,255,.09); border-color: rgba(255,108,47,.42); transform: translateY(-4px); box-shadow: 0 14px 32px rgba(255,108,47,.18); }
.cp-why-icon {
  width: 46px; height: 46px; background: var(--gradient-horizontal);
  border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center;
  margin-bottom: 15px; box-shadow: var(--shadow-md);
}
.cp-why-icon i { color: #fff; font-size: 18px; }
.cp-why-card h3 { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 7px; }
.cp-why-card p  { font-size: 13px; color: rgba(255,255,255,.58); line-height: 1.65; margin: 0; }

/* ================================================================
   DIVIDER
   ================================================================ */
.uh-divider-line { background: linear-gradient(90deg, transparent, rgba(255,108,47,.32), transparent) !important; }

/* ================================================================
   MIGRATION
   ================================================================ */
.cp-mig { background: var(--surface-primary); padding: 88px 0; }
.cp-mig-layout {
  display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
}
@media(min-width:768px){ .cp-mig-layout{ grid-template-columns: 1fr 1.2fr; gap: 56px; } }
.cp-mig-imgwrap { position: relative; }
.cp-mig-imgwrap img {
  width: 100%; animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 18px 36px rgba(255,108,47,.18));
}
.cp-mig-badge {
  position: absolute; top: 16px; right: -8px;
  background: var(--gradient-horizontal); color: #fff;
  font-size: 13px; font-weight: 800; padding: 8px 20px;
  border-radius: var(--radius-full); box-shadow: var(--shadow-md);
}
.cp-mig-tiles {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin: 24px 0 30px;
}
@media(min-width:480px){ .cp-mig-tiles{ grid-template-columns: repeat(2,1fr); } }
.cp-mig-tile {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  background: var(--surface-secondary); border-radius: var(--radius-lg);
  border: 1px solid var(--border-secondary);
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  transition: var(--transition-base);
}
.cp-mig-tile:hover { background: var(--surface-primary); border-color: var(--border-primary); box-shadow: var(--shadow-md); }
.cp-mig-tile__icon {
  width: 32px; height: 32px; flex-shrink: 0;
  background: rgba(255,108,47,.10); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-primary); transition: var(--transition-base);
}
.cp-mig-tile:hover .cp-mig-tile__icon { background: var(--gradient-horizontal); border-color: transparent; }
.cp-mig-tile__icon i { color: var(--color-primary); font-size: 13px; }
.cp-mig-tile:hover .cp-mig-tile__icon i { color: #fff; }

/* ================================================================
   FAQ
   ================================================================ */
.cp-faq { background: var(--surface-secondary); padding: 88px 0; }
.cp-faq-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 48px;
}
@media(min-width:768px){ .cp-faq-grid{ grid-template-columns: repeat(2,1fr); gap: 12px; } }
.cp-faq-card {
  background: var(--surface-primary); border-radius: var(--radius-xl); padding: 20px;
  cursor: pointer; border: 1px solid transparent; transition: var(--transition-base);
}
.cp-faq-card:hover  { background: var(--surface-primary); border-color: var(--border-primary); }
.cp-faq-card.open   { background: var(--surface-primary); border-color: var(--border-primary); }
.cp-faq-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  font-weight: 700; font-size: 15px; color: var(--text-primary);
}
.cp-faq-q i { color: var(--color-primary); font-size: 13px; transition: transform .3s ease; flex-shrink: 0; margin-top: 2px; }
.cp-faq-card.open .cp-faq-q i { transform: rotate(180deg); }
.cp-faq-a { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin-top: 13px; display: none; }
.cp-faq-card.open .cp-faq-a { display: block; }

/* ================================================================
   CTA
   ================================================================ */
.cp-cta {
  background: linear-gradient(135deg, var(--dark-1) 0%, var(--dark-2) 55%, var(--dark-3) 100%);
  padding: 88px 0; position: relative; overflow: hidden; text-align: center;
}
.cp-cta::before {
  content:''; position:absolute; inset:0;
  background-image: linear-gradient(rgba(255,108,47,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,108,47,.055) 1px,transparent 1px);
  background-size: 56px 56px;
}
.cp-cta .container { position: relative; z-index: 1; }
.cp-cta h2 { font-size: clamp(26px,3.5vw,48px); font-weight: 900; color: #fff; letter-spacing: -1.5px; margin-bottom: 16px; }
.cp-cta h2 em { font-style: normal; color: var(--color-accent); }
.cp-cta p { font-size: 16px; color: rgba(255,255,255,.68); max-width: 560px; margin: 0 auto 32px; line-height: 1.7; }
.cp-cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; }
@media(min-width:480px){ .cp-cta-actions{ flex-direction: row; justify-content: center; } }

/* ================================================================
   JUPITER GRID
   ================================================================ */
.cp-jupiter-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media(min-width:768px){ .cp-jupiter-grid{ grid-template-columns: repeat(2,1fr); } }

/* ================================================================
   RESPONSIVE PADDING
   ================================================================ */
@media(min-width:768px){
  .cp-pricing,.cp-included,.cp-why,.cp-mig,.cp-faq,.cp-cta { padding: 96px 0; }
}

/* Contrast pass for dark/orange cPanel surfaces */
.cp-hero__photo {
  opacity: .16;
}

.cp-hero__sub,
.cp-trust__item,
.cp-sub--inv,
.cp-plan__desc,
.cp-why-card p,
.cp-cta p {
  color: rgba(248, 250, 252, .84) !important;
}

.cp-badge,
.cp-lbl--light {
  background: rgba(38, 13, 2, .72) !important;
  border: 1px solid rgba(255, 140, 90, .44) !important;
  color: #ffd7c4 !important;
}

.cp-why-card {
  background: rgba(42, 16, 7, .78) !important;
  border-color: rgba(255, 140, 90, .26) !important;
}

.cp-why-card h3 {
  color: #fff !important;
}

@media(max-width:768px){
  .cp-hero {
    padding: 64px 0 58px;
  }

  .cp-hero__photo {
    opacity: .2;
  }

  .cp-hero__blooms {
    background:
      radial-gradient(ellipse 70% 46% at 18% 42%, rgba(255,108,47,.26) 0%, transparent 65%),
      radial-gradient(ellipse 54% 38% at 80% 18%, rgba(255,209,102,.14) 0%, transparent 62%);
  }

  .cp-hero__sub,
  .cp-trust__item,
  .cp-sub--inv,
  .cp-why-card p {
    color: rgba(255, 255, 255, .9) !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .44);
  }

  .cp-why-card {
    background: rgba(45, 17, 7, .9) !important;
  }
}

/* Extracted from cpanel.php style block 2 */
/* Ensure all plan cards have equal height and flex column layout */
.cp-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 650px; /* Fixed minimum height for all cards */
}

/* Make the plan body take up remaining space and push footer down */
.cp-plan__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
}

/* Feature list takes available space to push footer consistently */
.cp-feat-list {
  flex: 1;
  margin-bottom: 10px;
}

/* Fixed height for feature list items to ensure consistency */
.cp-feat-list li {
  min-height: 32px;
  padding: 6px 0;
}

/* Plan footer with button - always at bottom */
.cp-plan__footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px dashed var(--border-secondary);
}

/* Block button styling for consistent width */
.cp-btn--block {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* Ensure all plan headers have consistent height */
.cp-plan__head {
  min-height: 180px;
  display: flex;
  flex-direction: column;
}

/* Consistent price positioning */
.cp-plan__price {
  margin-top: auto;
  padding-top: 14px;
}

/* Limit box consistent height */
.cp-plan__limit {
  min-height: 50px;
  display: flex;
  align-items: center;
}

/* New plan badge styling */
.cp-plan--new {
  border-color: #10b981;
  position: relative;
  background: linear-gradient(145deg, #ffffff, #fafeff);
}

.cp-plan__badge--new {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

/* Ensure all feature lists have same number of items visible */
.cp-feat-list li {
  opacity: 1;
  transition: opacity 0.2s;
}

/* Make "na" items consistently styled */
.cp-feat-list .na {
  color: var(--text-secondary);
  opacity: 0.7;
}

.cp-feat-list .na i {
  color: var(--color-gray-400);
}

/* Responsive adjustments */
@media (min-width: 1024px) {
  .cp-plan {
    min-height: 680px; /* Slightly taller on desktop */
  }
}

@media (max-width: 1023px) and (min-width: 640px) {
  .cp-pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cp-plan {
    min-height: 620px;
  }
}

@media (max-width: 639px) {
  .cp-plan {
    min-height: auto; /* Auto height on mobile */
  }
}

/* Ensure buttons are identical height */
.cp-btn--block {
  padding: 13px 28px;
  line-height: 1.2;
  font-size: 15px;
  white-space: nowrap;
}

/* Popular plan enhancements */
.cp-plan--popular .cp-plan__limit {
  background: rgba(255, 108, 47, 0.1);
  border-color: rgba(255, 108, 47, 0.2);
}

.cp-plan--popular .cp-plan__limit i,
.cp-plan--popular .cp-plan__limit strong {
  color: var(--color-primary-dark, #e03e00);
}

/* Extracted from cpanel.php style block 3 */
/* Ensure compatibility with existing UnderHost styles */
.greybg2 {
    background-color: #f8fafc;
}
.topbottompadding70 {
    padding-top: 70px;
    padding-bottom: 70px;
}
.topbottompadding50 {
    padding-top: 50px;
    padding-bottom: 50px;
}
.text42 {
    font-size: 42px;
    line-height: 1.2;
}
.text24 {
    font-size: 24px;
    line-height: 1.4;
}
.text20 {
    font-size: 20px;
    line-height: 1.5;
}
.text50 {
    font-size: 50px;
    line-height: 1.1;
}
.w700 {
    font-weight: 700;
}
.w400 {
    font-weight: 400;
}
:root {
    --uh-text: #1e293b;
    --uh-muted: #64748b;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .text42 {
        font-size: 32px;
    }
    .text50 {
        font-size: 36px;
    }
    .text24 {
        font-size: 20px;
    }
}