/* ========== Variables (brandable) ========== */
:root {
   --brand: #154360; /* primary brand color */
   --accent: #2a9d8f; /* secondary accent */
   --muted: #6b7280; /* muted text */
   --bg: #f9fafb;
   --card: #ffffff;
   --glass: rgba(21, 67, 96, 0.04);
   --radius: 12px;
   --max-width: 1100px;
   --fw-regular: 400;
   --fw-medium: 500;
   --fw-bold: 700;
   --transition: 240ms cubic-bezier(0.2, 0.9, 0.3, 1);
}

article ul li {
   list-style-type: disc;
}

/* Hero Section */
.hero-book {
   height: 60vh;
   background-color: white;
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--dark_gray_100);
   text-align: center;
   padding: 0 20px;
}

.hero-book h2 {
   font-size: 2.8rem;
   margin-bottom: 20px;
   color: var(--dark_gray_100);
}

.hero-book p {
   font-size: 1.2rem;
   margin-bottom: 30px;
}

.hero-book button {
   background: var(--gold);
   border: none;
   padding: 12px 25px;
   font-size: 1rem;
   border-radius: 5px;
   cursor: pointer;
   font-weight: 600;
   color: var(--navy);
   transition: background 0.3s ease;
}

.hero-book button:hover {
   background: var(--dark_gold_100);
   color: white;
}

.kda-section {
   position: relative;
   width: 100%;
   padding: 50px;
   background-color: var(--light_gray_100);
}

/* ========== Header ========== */
.kda-header {
   display: flex;
   gap: 20px;
   align-items: center;
   margin-bottom: 22px;
}

/* for services word */
.kda-badge {
   background: var(--black_95);
   color: var(--dark_gold_100);
   padding: 10px 14px;
   border-radius: 999px;
   font-weight: var(--fw-medium);
   font-size: 18px;
}

/* for Bookkeeping & Reconciliation */
.kda-title {
   color: var(--dark_gray_100);
}

.kda-title h2 {
   font-size: 32px;
   margin: 0;
   color: var(--dark_gray_100);
   font-weight: 700;
}

/* for Accurate books. Cleaner cash flow. Monthly reconciliations that make tax time simple. */
.kda-sub {
   margin: 6px 0 0 0;
   color: var(--dark_gray_100);
   font-size: 20px;
}

/* ========== Layout ========== */
.kda-grid {
   display: grid;
   grid-template-columns: 1fr 380px;
   gap: 28px;
   align-items: start;
}

/* ========== Left Column (content) ========== */
.kda-left {
   background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0.9)
   );
   border-radius: var(--radius);
   padding: 22px;
   box-shadow: 0 6px 22px rgba(12, 18, 30, 0.06);
   border: 1px solid rgba(21, 67, 96, 0.04);
}

/* for Full-cycle Bookkeeping, Monthly Reconciliations, Clean-up & Catch-up, Real-time Reporting */
.kda-features {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
   margin-top: 18px;
}

.feature {
   display: flex;
   gap: 12px;
   align-items: flex-start;
   background: var(--gold_100);
   padding: 12px;
   border-radius: 10px;
   border: 1px solid rgba(15, 23, 36, 0.04);
}

.feature svg {
   flex-shrink: 0;
   width: 50px;
   height: 50px;
}

.feature h4 {
   margin: 0;
   font-size: 18px;
   color: var(--dark_gray_100);
   font-weight: 600;
}

.feature p {
   margin: 6px 0 0 0;
   color: var(--dark_gray_100);
   font-size: 18px;
   line-height: 1.35;
}

.feature ul {
   color: var(--dark_gray_100);
   font-size: 18px;
   margin-left: 10px;
}

/* ========== Process / Steps ========== */
/* 1. Onboarding & Chart Setup, 2. Monthly Bookkeeping, 3. Review & Adjustment, 4. Monthly Close & Handover */
/* 
.process {
   margin-top: 20px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}
.step {
   display: flex;
   gap: 12px;
   align-items: flex-start;
} 
.step .num {
   min-width: 36px;
   height: 36px;
   border-radius: 10px;
   background: var(--black_95);
   color: white;
   display: grid;
   place-items: center;
   font-weight: 700;
}
.step .desc h5 {
   margin: 0;
   font-size: 18px;
   color: var(--brand);
   font-weight: 600;
}
.step .desc p {
   margin: 6px 0 0 0;
   color: var(--muted);
   font-size: 18px;
} */

/* ========== Right Column (aside) ========== */
/* for Transparent Pricing */
.kda-aside {
   position: absolute;
   /* top: 36px; */
   top: 160px;
   right: 15px;
   align-self: start;
   background: linear-gradient(180deg, var(--card), #fbfeff);
   border-radius: 12px;
   padding: 30px;
   border: 1px solid rgba(15, 23, 36, 0.04);
   box-shadow: 0 8px 26px rgba(11, 18, 30, 0.05);
   font-size: 20px;
}


.aside-list {
   margin: 12px 0 18px 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 8px;
}
.aside-list li {
   display: flex;
   gap: 10px;
   align-items: center;
   color: var(--muted);
   font-size: 14px;
}
.aside-cta {
   display: inline-flex;
   width: 100%;
   justify-content: center;
   align-items: center;
   gap: 10px;
   padding: 12px 14px;
   border-radius: 10px;
   background: linear-gradient(90deg, var(--black_95), var(--gold_100));
   color: white;
   text-decoration: none;
   font-weight: 700;
   transition: transform var(--transition), box-shadow var(--transition);
   box-shadow: 0 8px 18px rgba(13, 45, 78, 0.12);
}
.aside-cta:focus {
   outline: 3px solid rgba(42, 157, 143, 0.14);
   outline-offset: 3px;
}
.aside-cta:hover {
   transform: translateY(-3px);
   box-shadow: 0 12px 28px rgba(13, 45, 78, 0.16);
}

/* ========== Accessibility helpers ========== */
.visually-hidden {
   position: absolute !important;
   height: 1px;
   width: 1px;
   overflow: hidden;
   clip: rect(1px, 1px, 1px, 1px);
   white-space: nowrap;
   border: 0;
   padding: 0;
   margin: -1px;
}

/* ========== Responsive ========== */
@media (max-width: 980px) {
   .kda-grid {
      grid-template-columns: 1fr;
      gap: 18px;
   }
   .kda-aside {
      position: relative;
      top: auto;
   }
   .kda-features {
      grid-template-columns: 1fr;
   }
}