h1, h2, h3, h4, h5, h6{margin-block-end: 0; margin-block-start: 0;}
img{vertical-align:middle;}
.container{max-width:1290px; margin:0 auto; padding:0 15px; box-sizing:border-box;}
.adv{background:#FFE9C3; text-align: center; padding: 15px 0; }
.adv h3{font-size:15px; font-weight:600;}
.adv h3 a{text-decoration:underline; color:#F43F19;}
#content{position:relative;}
.nav-trigger a{ cursor:pointer;}
.nav-area{box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);}

.top{background:#121212; padding:10px 0; color:#fff; text-align:right;}
.top ul{margin:0; padding:0;}
.top ul li{list-style:none; display:inline-block;margin-left: 20px;}
.top img{margin-right:5px;}
.site-header{padding-top:30px; padding-bottom:30px;display:none!important;}
.site-header .site-navigation .menu li:last-child a{border:2px solid #FFC244; color:#080808; font-weight:600; text-transform:uppercase; border-radius:10px;}

.footer{background:#161616; padding:75px 0 0 0;}
.footer .row{display:flex;flex-wrap: wrap; padding-bottom:40px;}
.footer-col {flex: 1; padding:0 15px; box-sizing: border-box;}
.footer-logo{margin-bottom:15px;}
.footer-col p{color:#CDCDCD;font-size:18px; line-height:27px; font-weight:normal;font-family: "Inter", sans-serif;}
.footer-col h3{font-size:22px; color:#ffffff; font-weight:bold; font-family: "Plus Jakarta Sans", sans-serif; margin-bottom:15px; line-height:51px; height:51px;}
.footer-col ul{list-style:none; padding:0; margin:0;}
.footer-col ul li{margin-bottom:14px;}
.footer-col a{text-decoration:none; color:#CDCDCD; font-size:18px; font-weight:normal;font-family: "Inter", sans-serif;}
.footer-col.fc4 li{color:#CDCDCD;}
.footer-col.fc4 li strong{color:#fff;}
.footer-col.fc4 span{margin-right:18px;}
footer .site-branding,.copyright {display:none!important;}
footer .site-navigation{margin:auto;}
footer .footer-inner .site-navigation a{color:#CDCDCD!important;}
.site-footer{border-top:1px solid #2D2D2D;}

#head1:after{content:""; display:block; width:100px; height:29px; background:url(../images/a1.png) no-repeat; position:absolute;top: 30%;
  right: -22%;
  z-index: 999;}
  #head2:after{content:""; display:block; width:100px; height:29px; background:url(../images/a2.png) no-repeat; position:absolute;top: 50%;
  right: -22%;
  z-index: 999;}
  
#p:after{content:""; display:block; width:30px; height:80px; background:url(../images/a3.png) no-repeat; position:absolute;left:0;
  right:0; margin: auto;
  z-index: 999; display:none;}  
  
.nav-area {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.4s ease, opacity 0.4s ease;
}      

 /* ===================================
       NAVBAR
    ==================================== */

    .navbar{box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.17);
    position:sticky;
    top:0;
    z-index:9999;
    background:#fff;
}

    .container-nav{max-width: 1290px;
      margin:auto;
      padding:0px 15px;
      height:100%;
    }

    .nav-inner{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    .logo{
      font-size:24px; width: 180px;
      font-weight:700;
      color:#111827;
    }

    /* ===================================
       DESKTOP MENU
    ==================================== */

    .nav-menu{
      display:flex;
      align-items:center;
      gap:10px;
    }

    .nav-item{
    position:static; 
}

    .nav-link{
      display:flex;
      align-items:center;
      gap:4px;
      height:90px;
      cursor:pointer;
      font-size:16px;
      font-weight:500;
      color:#111827;
      transition:.3s;padding: 0 12px;
    }

    .nav-link:hover{
      color:rgb(249, 175, 71);
    }
    .nav-link.last{padding-right:0px;}

    .arrow{
      font-size:12px;
      transition:.3s;
    }
    .nav-link a{color:#111827;}
    .nav-link a:hover{color:rgb(249, 175, 71);}
    .nav-item:hover .arrow{
      transform:rotate(180deg);
    }

    /* ===================================
       FULL WIDTH MEGA MENU
    ==================================== */

    .mega-menu{
    position:absolute;
    top:90px; 
    left:0;
    right:0;
    width:100%;
    transform:translateY(10px);

    background:#fff;
    border-top:1px solid #e5e7eb;

    opacity:0;
    visibility:hidden;
    transition:.3s ease;
}

    .nav-item:hover .mega-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

    /* ===================================
       MEGA MENU INNER WRAPPER
    ==================================== */

    .mega-wrapper{ padding:50px;
      margin:auto;

      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
    }

    /* ===================================
       MENU CARD
    ==================================== */

    .menu-card{
      display:flex;
      align-items:flex-start;
      gap:16px;

      padding:12px;

      border-radius:14px;

      transition:.3s ease; 
    }

    .menu-card:hover{
      background:#f3f6fb;
      transform:translateY(-2px);
    }
    
    .menu-card.viewLink:hover{
      background:none;
      transform:none;
    }
    .menu-card.viewLink{padding:0 12px;}
   .viewLink a{text-decoration:underline; font-weight:600;}
    .menu-card.active{
      background:#eef3f9;
    }

    .icon-box{
      width:40px;
      min-width:40px;
      height:40px;

      border-radius:6px;

      background:#f1f5f9;

      display:flex;
      align-items:center;
      justify-content:center;

      font-size:24px;
    }

    .menu-content a{ text-decoration: none;
      font-size:16px;
      font-weight:600;
      margin-bottom:5px;
      color:#111827;
    }

    .menu-content p{
      font-size:12px;
      line-height:1;
      color:#6b7280;
    }

    /* ===================================
       MOBILE TOGGLE
    ==================================== */

    .mobile-toggle{
      display:none;

      width:42px;
      height:42px;

      border-radius:10px;

      border:1px solid #e5e7eb;

      align-items:center;
      justify-content:center;

      cursor:pointer;

      font-size:22px;

      background:#fff;
    }

    /* ===================================
       MOBILE MENU
    ==================================== */

    .mobile-menu{
      display:none;
      flex-direction:column;

      background:#fff;

      border-top:1px solid #e5e7eb;

      padding:10px 20px 20px;
    }

    .mobile-menu.active{
      display:flex;
    }

    .mobile-item{
      border-bottom:1px solid #f1f5f9;
    }

    .mobile-link{
      width:100%;

      display:flex;
      justify-content:space-between;
      align-items:center;

      padding:18px 0;

      border:none;
      background:none;

      font-size:16px;
      font-weight:600;

      cursor:pointer;
    }
    .mobile-link a{color:#000;}

    .mobile-dropdown{
      display:none;
      padding-bottom:15px;
    }
    .mobile-dropdown ul{padding:0; list-style:none;}
    .mobile-dropdown ul li{ margin-bottom:12px;}
    .mobile-dropdown ul a{color:#7d592b;font-size: 15px;}

    .mobile-item.active .mobile-dropdown{
      display:grid;
      gap:12px;
    }

    /* ===================================
       RESPONSIVE
    ==================================== */

    @media(max-width:1200px){

      .mega-wrapper{
        grid-template-columns:repeat(3,1fr);
      }
    }

    @media(max-width:992px){

      .nav-menu{
        display:none;
      }

      .mobile-toggle{
        display:flex;
      }

      .mega-menu{
        display:none !important;
      }
    }

    @media(max-width:768px){

      .menu-content h4{
        font-size:15px;
      }

      .menu-content p{
        font-size:13px;
      }

      .icon-box{
        width:50px;
        min-width:50px;
        height:50px;
        font-size:20px;
      }
      .container-nav{padding:10px 20px}
    }

@media only screen and (max-width:767px)
{
    .footer-col{flex:none; width:100%;}
    #head1:after, #head2:after{display:none;}
    #p:after{display:block;}
}

/*===============================
 ---Price card--
/*===============================*/

:root{

--primary:#0F3D75;
--primary-light:#2563EB;
--secondary:#16A34A;
--orange:#F59E0B;

--dark:#1E293B;
--text:#374151;
--light:#F8FAFC;
--white:#ffffff;

--border:#E5E7EB;

--shadow-sm:0 10px 25px rgba(15,61,117,.06);

--shadow:
0 20px 60px rgba(15,61,117,.10);

--shadow-hover:
0 35px 70px rgba(37,99,235,.16);

--radius:22px;

--transition:.35s ease;

}

.priceWrapper{

position:relative; margin: auto; max-width: 1290px; padding: 0 15px;

z-index:1;

}



/*===============================
HEADING
================================*/

.section-title{

font-size:48px;

font-weight:800;

color:var(--primary);

margin-bottom:18px;

text-align:center;

line-height:1.2;

letter-spacing:-.5px;

}

.section-sub{

max-width:700px;

margin:auto;

text-align:center;

font-size:19px;

color:#64748B;

line-height:1.8;

margin-bottom:70px;

}


/*===============================
TABLE WRAPPER
================================*/

.table-wrap{

background:#fff;

border-radius:26px;

overflow:hidden;

box-shadow:var(--shadow);

border:1px solid #ECF2F8;

transition:var(--transition);

}

.table-wrap:hover{

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

}


/*===============================
TABLE
FIX: switched border-collapse -> separate + border-spacing:0
so sticky thead works correctly in Safari (collapse breaks
position:sticky on <th> in WebKit).
================================*/

.table-wrap table{

width:100%;

border-collapse:separate;

border-spacing:0;

table-layout:fixed;

background:#fff;

}

/*===============================
FIX: borders were adding extra px
outside the fixed column widths after
switching to border-collapse:separate,
pushing the table past 100% wide and
triggering an unwanted horizontal
scrollbar (the blue bar at the footer
of the table). box-sizing:border-box
keeps borders inside the declared widths.
================================*/

.table-wrap table,
.table-wrap th,
.table-wrap td{

box-sizing:border-box;

}


/*===============================
COLUMN WIDTH
================================*/

.c-feat{

width:28%;

}

.c-plan{

width:24%;

}


/*===============================
TABLE HEADER
================================*/

thead{

background:

linear-gradient(
135deg,
#0F3D75,
#2563EB);

color:#fff;

}

thead th{

padding:40px 20px;

font-size:22px;

font-weight:700;

text-align:center;

position:relative;

border-right:1px solid rgba(255,255,255,.08);

}

thead th:last-child{

border-right:none;

}


/*===============================
FEATURE HEADER
================================*/

thead th:first-child{vertical-align: middle;

text-align:left;

padding-left:35px;

font-size:24px;

}


/*===============================
PLAN ICON
================================*/

.th-icon{

display:flex;

align-items:center;

justify-content:center;

margin:auto;

width:72px;

height:72px;

font-size:34px;

background:rgba(255,255,255,.15);

border-radius:50%;

margin-bottom:20px;

backdrop-filter:blur(10px);

transition:.35s;

}

thead th:hover .th-icon{

transform:scale(1.08);

}


/*===============================
POPULAR COLUMN
FIX: extra top padding so the "Most Popular" badge
no longer overlaps the icon below it.
================================*/

.popular-col{

position:relative;

background:

linear-gradient(
180deg,
#EFF6FF,
#FFFFFF);

}

thead th.popular-col{

padding-top:78px;

}

.badge-popular{

position:absolute;

top:18px;

left:50%;

transform:translateX(-50%);

padding:8px 22px;

background:#fff0d8;

color:#000;

font-size:13px;

font-weight:700;

border-radius:50px;

letter-spacing:.5px;

white-space:nowrap;

box-shadow:

0 8px 20px rgba(37,99,235,.25);

}


/*===============================
TABLE BODY
================================*/

tbody td{

padding:22px 18px;

font-size:15px;

color:var(--text);

border-bottom:1px solid #EDF2F7;

text-align:center;

transition:.30s;

}

tbody td:first-child{

font-weight:700;

color:#0F3D75;

text-align:left;

padding-left:35px;

background:#FBFCFE;

}


/*===============================
ALTERNATE ROWS
================================*/

tbody tr:nth-child(even){

background:#FBFCFE;

}

tbody tr:hover{

background:#EEF6FF;

}

tbody tr:hover td{

color:#111827;

}


/*===============================
CHECK ICON
FIX: this pseudo-element already renders the green check
bubble, so the HTML text should NOT also include a ✔️ emoji
(that was producing two checkmarks per row). See markup below.
================================*/

.check{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

font-weight:600;

color:#16A34A;

flex-wrap:nowrap;

white-space:nowrap;

}

.check::before{

flex-shrink:0;

}

.check:before{

content:"✓";

display:inline-flex;

justify-content:center;

align-items:center;

width:24px;

height:24px;

background:#DCFCE7;

border-radius:50%;

font-size:13px;

font-weight:bold;

}


/*===============================
LIMITED
================================*/

.limited{

color:#F59E0B;

font-weight:700;

}


/*===============================
OPTIONAL
================================*/

.opt{

color:#6366F1;

font-weight:700;

}


/*===============================
COST ROW
================================*/

.cost-row td{

padding:30px;

font-size:18px;

font-weight:700;

}

.cost-premium{

color:#0F3D75;

}

.cost-moderate{

color:#2563EB;

}

.cost-best{

color:#16A34A;

font-size:20px;

}


/*===============================
BUTTON
================================*/

.choosePlan{

display:inline-flex;

align-items:center;

justify-content:center;

height:56px;

padding:0 34px;

background:

linear-gradient(
135deg,
#0F3D75,
#2563EB);

color:#fff;

font-weight:700;

font-size:16px;

border-radius:14px;

text-decoration:none;

transition:.35s;

box-shadow:

0 12px 25px rgba(37,99,235,.20);

}

.choosePlan:hover{

transform:translateY(-4px);

box-shadow:

0 20px 40px rgba(37,99,235,.30);

}

.plan2{

background:

linear-gradient(
135deg,
#4338CA,
#6366F1);

}

.plan3{

background:

linear-gradient(
135deg,
#059669,
#16A34A);

}

/* END OF PART 1 */

/*======================================================
        PREMIUM ACCOUNTING PRICING TABLE
        PART 2
======================================================*/

/*=========================================
MOBILE CARDS WRAPPER
=========================================*/

.mobile-cards{
    display:none;
    gap:30px;
    margin-top:40px;
}

/*=========================================
PLAN CARD
=========================================*/

.plan-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #E8EEF6;

    box-shadow:
    0 20px 45px rgba(15,61,117,.08);

    transition:.4s;

}

.plan-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 35px 70px rgba(37,99,235,.18);

}

/*=========================================
POPULAR CARD
=========================================*/

.plan-card:nth-child(3){

    border:3px solid #2563EB;

}

.plan-card:nth-child(3)::before{

    content:"⭐ MOST POPULAR";

    position:absolute;

    top:20px;

    right:-35px;

    width:180px;

    text-align:center;

    background:#2563EB;

    color:#fff;

    padding:8px;

    font-size:12px;

    font-weight:700;

    transform:rotate(45deg);

    z-index:99;

}

/*=========================================
CARD HEADER
=========================================*/

.card-header{

    padding:35px;

    background:
    linear-gradient(135deg,#0F3D75,#2563EB);

    color:#fff;

    text-align:center;

}

.card-header.popular{

    background:
    linear-gradient(135deg,#059669,#16A34A);

}

/*=========================================
HEADER ICON
=========================================*/

.card-header-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:80px;

    height:80px;

    margin:auto;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    font-size:36px;

    backdrop-filter:blur(12px);

    margin-bottom:20px;

}

/*=========================================
CARD TITLE
=========================================*/

.card-header h3{

    color:#fff;

    font-size:26px;

    margin:0;

    font-weight:700;

    line-height:1.4;

}

/*=========================================
POPULAR TAG
=========================================*/

.pop-tag{

    display:inline-block;

    margin-top:15px;

    background:#fff;

    color:#16A34A;

    font-size:13px;

    font-weight:700;

    padding:8px 18px;

    border-radius:40px;

}

/*=========================================
ROWS
=========================================*/

.card-rows{

    padding:25px;

}

.card-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:18px 0;

    border-bottom:1px solid #EDF2F7;

}

.card-row:last-child{

    border-bottom:none;

}

/*=========================================
LABEL
=========================================*/

.row-label{

    width:42%;

    font-size:15px;

    color:#0F3D75;

    font-weight:700;

}

/*=========================================
VALUE
=========================================*/

.row-val{

    width:58%;

    text-align:right;

    color:#475569;

    font-size:15px;

    font-weight:500;

}

/*=========================================
CHECK COLORS
FIX: same emoji-duplication fix applies to mobile cards
via .row-val.check — the ✓ bubble is added by .check:before
above, so the markup text should read "Yes" / "Included"
without a leading ✔️.
=========================================*/

.row-val.check{

    color:#16A34A;

    font-weight:700;

}

.row-val.limited{

    color:#F59E0B;

    font-weight:700;

}

.row-val.opt{

    color:#6366F1;

    font-weight:700;

}

/*=========================================
COST BOX
=========================================*/

.card-cost{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 30px;

    background:#F8FAFC;

    font-size:18px;

    font-weight:700;

}

.cost-label{

    color:#0F3D75;

}

/*=========================================
CTA AREA
=========================================*/

.card-cta{

    background:#fff;

    padding:30px;

}

.card-cta .choosePlan{

    width:100%;

}

/*=========================================
BUTTON ANIMATION
=========================================*/

.choosePlan{

    position:relative;

    overflow:hidden;

}

.choosePlan::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent);

    transition:.7s;

}

.choosePlan:hover::before{

    left:140%;

}

/*=========================================
TABLE SCROLL
=========================================*/

.table-wrap{

    overflow-x:auto;

    scrollbar-width:thin;

    scrollbar-color:#2563EB #EEF5FF;

}

.table-wrap::-webkit-scrollbar{

    height:8px;

}

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

    background:#EEF5FF;

}

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

    background:#2563EB;

    border-radius:50px;

}

/*=========================================
SMOOTH TRANSITIONS
=========================================*/

tbody td,
thead th,
.plan-card,
.choosePlan{

    transition:.35s ease;

}

/*=========================================
HOVER EFFECT
=========================================*/

tbody tr:hover td.popular-col{

    background:#EAF3FF;

}

/*=========================================
TABLE HEADER STICKY
=========================================*/

thead th{

    position:sticky;

    top:0;

    z-index:10;

}

/*=========================================
TABLE SHADOW
=========================================*/

.table-wrap{

    position:relative;

}

.table-wrap::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:24px;

    pointer-events:none;

    box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.5);

}

/*=========================================
TABLET
=========================================*/

@media(max-width:1024px){

.section-title{

font-size:38px;

}

.section-sub{

font-size:18px;

}

thead th{

font-size:18px;

padding:30px 15px;

}

thead th.popular-col{

padding-top:66px;

}

tbody td{

padding:18px 14px;

font-size:14px;

}

.choosePlan{

font-size:15px;

height:52px;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px){

.table-wrap{

display:none;

}

.mobile-cards{

display:grid;

}

.section-title{

font-size:34px;

}

.section-sub{

font-size:16px;

margin-bottom:40px;

}

.plan-card{

border-radius:22px;

}

.card-header{

padding:30px;

}

.card-header h3{

font-size:22px;

}

.card-row{

flex-direction:column;

align-items:flex-start;

gap:8px;

}

.row-label,
.row-val{

width:100%;

text-align:left;

}

.row-val.check{

justify-content:flex-start;

}

.card-cost{

flex-direction:column;

gap:10px;

text-align:center;

}

.choosePlan{

width:100%;

}

}

/*====================================================
        PREMIUM ACCOUNTING TABLE
        PART 3 - FINAL POLISH
====================================================*/

/*=============================
CSS ANIMATIONS
=============================*/

@keyframes floatCard{
0%{transform:translateY(0);}
50%{transform:translateY(-8px);}
100%{transform:translateY(0);}
}

@keyframes pulseGlow{
0%{
box-shadow:0 0 0 rgba(37,99,235,0);
}

50%{
box-shadow:0 0 35px rgba(37,99,235,.25);
}

100%{
box-shadow:0 0 0 rgba(37,99,235,0);
}
}

@keyframes shine{

0%{
left:-150%;
}

100%{
left:150%;
}

}

@keyframes fadeUp{

0%{
opacity:0;
transform:translateY(40px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

/*=============================
SECTION ANIMATION
=============================*/

.priceWrapper{

animation:fadeUp .8s ease;

}

/*=============================
TABLE HEADER ICON
=============================*/

.th-icon{

animation:floatCard 5s infinite ease-in-out;

}

/*=============================
POPULAR COLUMN
=============================*/

.popular-col{

position:relative;

overflow:hidden;

}

.popular-col::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent);

animation:shine 6s infinite;

}

/*=============================
MOST POPULAR COLUMN
=============================*/

thead th.popular-col{

background:

linear-gradient(
135deg,
#2563EB,
#0F3D75);

color:#fff;

}

/*=============================
BUTTON GLOW
=============================*/

.choosePlan{

position:relative;

overflow:hidden;

}

.choosePlan:hover{

animation:pulseGlow .8s;

}

/*=============================
CARD FLOAT
=============================*/

.plan-card:hover{

animation:floatCard 2.5s infinite;

}

/*=============================
TABLE ROW TRANSITION
=============================*/

tbody tr{

transition:.35s;

}

tbody tr:hover{

transform:scale(1.01);

}

/*=============================
CHECK ICON
=============================*/

.check::before{

transition:.3s;

}

tbody tr:hover .check::before{

transform:scale(1.2);

}

/*=============================
FEATURE LABEL
=============================*/

tbody td:first-child{

position:relative;

}

tbody td:first-child::before{

content:"";

position:absolute;

left:15px;

top:50%;

transform:translateY(-50%);

width:5px;

height:22px;

border-radius:30px;

background:#2563EB;

opacity:0;

transition:.3s;

}

tbody tr:hover td:first-child::before{

opacity:1;

}

/*=============================
CARD BORDER
=============================*/

.plan-card{

background:

linear-gradient(#fff,#fff) padding-box,

linear-gradient(
135deg,
rgba(37,99,235,.3),
rgba(22,163,74,.15))
border-box;

border:1px solid transparent;

}

/*=============================
CARD COST
=============================*/

.card-cost{

font-size:20px;

}

/*=============================
BUTTON ICON
=============================*/

.choosePlan::after{

content:"→";

margin-left:10px;

transition:.3s;

}

.choosePlan:hover::after{

margin-left:18px;

}

/*=============================
TABLE HEADER HOVER
=============================*/

thead th:hover{

background:

linear-gradient(
135deg,
#1D4ED8,
#0F3D75);

}

/*=============================
BADGE
=============================*/

.badge-popular{

animation:pulseGlow 4s infinite;

}

/*=============================
MOBILE CARD
=============================*/

.plan-card{

backdrop-filter:blur(12px);

}

/*=============================
SCROLLBAR
=============================*/

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-thumb{

background:#2563EB;

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#EEF5FF;

}

/*=============================
FOCUS STATES
=============================*/

.choosePlan:focus{

outline:none;

box-shadow:

0 0 0 4px rgba(37,99,235,.2);

}

/*=============================
DARK MODE
FIX: added row-label / row-val contrast rules for mobile
cards (previously unstyled and hard to read on the new
dark card background).
=============================*/

@media(prefers-color-scheme:dark){

.priceWrapper{

background:#08111F;

}

.table-wrap{

background:#111827;

}

tbody td{

color:#E5E7EB;

border-color:#1F2937;

}

tbody td:first-child{

background:#0F172A;

color:#fff;

}

.section-title{

color:#fff;

}

.section-sub{

color:#CBD5E1;

}

.plan-card{

background:#111827;

}

.card-row{

border-color:#1F2937;

}

.row-label{

color:#93C5FD;

}

.row-val{

color:#CBD5E1;

}

.card-cost{

background:#1E293B;

color:#fff;

}

.cost-label{

color:#93C5FD;

}

}

/*=============================
SMALL MOBILE
=============================*/

@media(max-width:480px){

.section-title{

font-size:30px;

}

.section-sub{

font-size:15px;

}

.card-header{

padding:25px;

}

.card-header h3{

font-size:20px;

}

.choosePlan{

font-size:14px;

height:50px;

}

.card-row{

padding:15px 0;

}

}