:root {
     --tax11-primary: #003a80;
     --tax11-primary-soft: #0b4c99;
     --tax11-accent: #ffb400;
     --tax11-bg: #f5f7fb;
     --tax11-surface: #ffffff;
     --tax11-text: #1f2a3c;
     --tax11-text-muted: #5b6475;
     --tax11-radius-lg: 24px;
     --tax11-radius-xl: 32px;
     --tax11-shadow-soft: 0 18px 45px rgba(9, 37, 77, 0.12);

}/* Row 1 is a single 12-col grid item inside <main class="container"> */
.row-1 {
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     gap: 1.5rem;
     padding-block: clamp(2.25rem, 4vw, 3.25rem);
     box-shadow: none;
}

/* Left hero text: columns 1–7 */
.row-1 .hero-content {
     grid-column: 1 / span 7;
     display: grid;
     row-gap: 1.5rem;
}

.row-1 .hero-eyebrow {
     font-size: 0.9rem;
     text-transform: uppercase;
     letter-spacing: 0.12em;
     color: var(--tax11-primary-soft);
     font-weight: 600;
}

.row-1 .hero-lead {
     margin: 0;
     color: var(--tax11-text-muted);
     font-size: 1rem;
     line-height: 1.6;
}

.row-1 .hero-actions {
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: max-content;
     gap: 0.9rem;
     margin-top: 0.5rem;
}

.row-1 .hero-highlights {
     margin: 1.25rem 0 0;
     padding-left: 1.2rem;
     color: var(--tax11-text-muted);
     font-size: 0.98rem;
     line-height: 1.6;
}

/* Right profile card: columns 8–12 */
.row-1 .hero-profile-card {
     grid-column: 8 / span 5;
     align-self: center;
     background: var(--tax11-surface);
     border-radius: var(--tax11-radius-xl);
     box-shadow: var(--tax11-shadow-soft);
     padding: 2rem 1.8rem;
     display: grid;
     row-gap: 1.5rem;
}

.row-1 .profile-image-wrapper {
     display: grid;
     place-items: center;
}

.row-1 .profile-image {
     width: 140px;
     height: 140px;
     object-fit: cover;
     border-radius: 50%;
     border: 5px solid var(--tax11-surface);
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.row-1 .profile-text {
     display: grid;
     row-gap: 0.5rem;
     text-align: left;
}

.row-1 .profile-name {
     margin: 0;
     font-size: 1.35rem;
     color: var(--tax11-primary);
     text-align: center;
}

.row-1 .profile-title {
     margin: 0;
     font-weight: 600;
     color: var(--tax11-text);
     text-align: center;
}

.row-1 .profile-subtitle {
     margin: 0;
     color: var(--tax11-text-muted);
     font-size: 0.95rem;
     text-align: center;
}

.row-1 .profile-copy {
     margin-top: 0.75rem;
     color: var(--tax11-text-muted);
     font-size: 0.95rem;
     line-height: 1.6;
}

.row-1 .profile-link {
     margin-top: 0.75rem;
     font-weight: 600;
     color: var(--tax11-primary-soft);
     text-decoration: none;
}

.row-1 .profile-link:hover {
     text-decoration: underline;
}

/* Responsive */
@media (max-width: 960px) {

     .row-1 {
          gap: 1.5rem;
     }

     .row-1 .hero-content,
     .row-1 .hero-profile-card {
          grid-column: 1 / -1;
     }

     .row-1 .hero-profile-card {
          margin-top: 0;
     }
}

@media (max-width: 720px) {
     .row-1 {
          gap: 1.5rem;
          padding: 0;
     }

     .row-1 .hero-actions {
          grid-auto-flow: row;
          grid-auto-columns: auto;
     }

     .row-1 .hero-actions .btn {
          width: 100%;
          text-align: center;
     }
}.row-2 {
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     gap: 1.5rem;
     padding-block: 0.75rem;
     padding: 0;
}

/* all feature cards share this look */
.row-2 .feature-card {
     background: var(--tax11-surface);
     border-radius: var(--tax11-radius-lg);
     box-shadow: var(--tax11-shadow-soft);
     padding: 1.5rem 1.6rem;
     display: grid;
     row-gap: 1rem;
}

/* Alert card: wide on left (cols 1–8) */
.row-2 .feature-card--alert {
     grid-column: 1 / span 8;
}

/* Company card: right top (cols 9–12) */
.row-2 .feature-card--company {
     grid-column: 9 / span 4;
}

/* Individual card: full width under them */
.row-2 .feature-card--individual {
     grid-column: 1 / -1;
}

/* Inner styling */
.row-2 .feature-title {
     margin: 0;
     font-size: 1.3rem;
     color: var(--tax11-primary);
}

.row-2 .feature-subtitle {
     margin: 0.35rem 0 0.25rem;
     font-weight: 600;
     color: var(--tax11-text);
}

.row-2 .feature-text {
     margin: 0.4rem 0 0.75rem;
     color: var(--tax11-text-muted);
     font-size: 0.97rem;
     line-height: 1.6;
}

.row-2 .feature-image-wrapper {
     border-radius: 18px;
     overflow: hidden;
}

.row-2 .feature-image {
     width: 100%;
     height: 170px;
     object-fit: cover;
     display: block;
}

.row-2 .feature-body {
     display: grid;
     row-gap: 0.75rem;
}

.row-2 .feature-list {
     margin: 0.2rem 0 0.75rem;
     padding-left: 1.1rem;
     color: var(--tax11-text-muted);
     font-size: 0.96rem;
     line-height: 1.6;
}

.row-2 .feature-link {
     font-weight: 600;
     color: var(--tax11-primary-soft);
     text-decoration: none;
}

.row-2 .feature-link:hover {
     text-decoration: underline;
}

/* Responsive */
@media (max-width: 960px) {

     .row-2 .feature-card--alert,
     .row-2 .feature-card--company,
     .row-2 .feature-card--individual {
          grid-column: 1 / -1;
     }

     .row-2 .feature-image {
          height: 210px;
     }
}.row-3 {
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     gap: 1.5rem;
     padding-top: 1.25rem;
     padding-bottom: 0.5rem;
}

.row-3__header {
     grid-column: 1 / -1;
}

.row-3__title {
     margin: 0;
     font-size: 1.35rem;
     color: var(--tax11-primary);
}

.row-3__cards {
     grid-column: 1 / -1;
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     gap: 1.5rem;
}

.row-3__card {
     grid-column: span 4;
     background: var(--tax11-surface);
     border-radius: var(--tax11-radius-lg);
     box-shadow: var(--tax11-shadow-soft);
     padding: 1.35rem 1.4rem;
     display: grid;
     row-gap: 0.5rem;
}

.row-3__card-title {
     margin: 0;
     font-size: 1.05rem;
     color: var(--tax11-text);
}

.row-3__card-text {
     margin: 0;
     color: var(--tax11-text-muted);
     line-height: 1.6;
}

@media (max-width: 960px) {
     .row-3__card {
          grid-column: 1 / -1;
     }
}.row-4 {
     grid-column: 1 / -1;
     margin-top: 2.25rem;
     margin-bottom: 1.25rem;
}

.row-4 .cta-strip-inner {
     background: linear-gradient(135deg,
               rgba(0, 58, 128, 0.98),
               rgba(0, 95, 178, 0.97));
     border-radius: var(--tax11-radius-lg);
     padding: 2rem 1.75rem;
     color: #ffffff;
     display: grid;
     row-gap: 0.75rem;
     box-shadow: var(--tax11-shadow-soft);
}

.row-4 .cta-title {
     margin: 0;
     color: var(--accent-3);
     font-size: 1.4rem;
}

.row-4 .cta-text {
     margin: 0;
     font-size: 0.98rem;
     opacity: 0.95;
}

.row-4 .cta-actions {
     margin-top: 1rem;
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: max-content;
     gap: 0.75rem;
}

/* Keep the outline readable on the dark gradient */
.row-4 .btn-outline {
     color: #ffffff;
     border-color: rgba(255, 255, 255, 0.8);
}

.row-4 .btn-outline:hover {
     background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 720px) {
     .row-4 .cta-actions {
          grid-auto-flow: row;
          grid-auto-columns: auto;
     }

     .row-4 .cta-actions .btn {
          width: 100%;
          text-align: center;
     }

     .row-4 .cta-strip-inner {
          padding: 1.75rem 1.4rem;
     }
}/* =========================================================
   TEMP LANDING PAGE (Grid-only)
   Drop-in: uses your variables + shadows + radius
========================================================= */

.landing-hero {
   position: relative;
   overflow: hidden;
   padding: 2.25rem 3rem;
   border-radius: var(--radius-xl);
   box-shadow: var(--shadow);
   background:
      radial-gradient(900px 450px at 15% 10%,
         color-mix(in srgb, var(--color-4), white 35%) 0%,
         transparent 60%),
      radial-gradient(900px 450px at 90% 0%,
         color-mix(in srgb, var(--accent-2), white 45%) 0%,
         transparent 55%),
      linear-gradient(135deg,
         color-mix(in srgb, var(--color-1), white 18%) 0%,
         color-mix(in srgb, var(--color-2), white 12%) 45%,
         color-mix(in srgb, var(--color-3), white 30%) 100%);
}

.hero-grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   gap: 1.5rem;
   align-items: start;
}

.hero-copy {
   grid-column: 1 / span 7;
}

.hero-card {
   grid-column: 8 / span 5;
   background: rgba(255, 255, 255, 0.78);
   border: 1px solid rgba(255, 255, 255, 0.55);
   border-radius: var(--radius);
   padding: 1.5rem 1.5rem;
   box-shadow: var(--shadow-btn);
   backdrop-filter: blur(8px);
}

.hero-badge {
   display: inline-block;
   padding: 0.45rem 0.75rem;
   border-radius: 999px;
   font-weight: 700;
   font-size: 0.85rem;
   color: var(--light-1);
   background: var(--gradient-h-2);
   box-shadow: var(--shadow-btn);
   margin-bottom: 0.85rem;
}

.hero-title {
   color: var(--light-1);
   text-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
   margin-bottom: 0.6rem;
}

.hero-subtitle {
   color: rgba(255, 255, 255, 0.92);
   font-size: 1.05rem;
   line-height: 1.65;
   max-width: 48ch;
   margin-bottom: 1.25rem;
}

.hero-actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.9rem;
   max-width: 520px;
}

.hero-btn {
   margin: 0;
   width: 100%;
   text-align: center;
}

.hero-note {
   margin-top: 1rem;
   color: rgba(255, 255, 255, 0.92);
   font-weight: 600;
}

.hero-list {
   margin-top: 0.25rem;
}

.hero-micro {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 0.75rem;
}

.micro-item {
   background: rgba(255, 255, 255, 0.75);
   border-radius: 16px;
   padding: 0.85rem 0.9rem;
   box-shadow: var(--shadow-btn);
}

.micro-label {
   display: block;
   font-size: 0.78rem;
   font-weight: 700;
   color: var(--shade-4);
   margin-bottom: 0.2rem;
}

.micro-value {
   display: block;
   font-weight: 800;
   color: var(--color-1);
}

/* 3 cards row (each span 4) */
.landing-card {
   grid-column: span 4;
   background-color: var(--light-1);
   border-radius: var(--radius);
   padding: 1.5rem 1.75rem;
   box-shadow: var(--shadow);
}

/* bottom strip */
.landing-status {
   background:
      radial-gradient(900px 380px at 15% 0%,
         color-mix(in srgb, var(--accent-2), white 55%) 0%,
         transparent 60%),
      linear-gradient(90deg,
         color-mix(in srgb, var(--color-1), white 10%) 0%,
         color-mix(in srgb, var(--color-2), white 18%) 100%);
   color: var(--light-1);
   padding: 2rem 3rem;
}

.landing-status h2 {
   color: var(--light-1);
}

.status-text {
   color: rgba(255, 255, 255, 0.92);
   margin-top: 0.35rem;
}

.status-actions {
   margin-top: 1rem;
}

/* =======================
   TABLET
========================== */
@media (max-width: 960px) {
   .landing-hero {
      padding: 1.75rem 1.25rem;
   }

   .hero-copy {
      grid-column: 1 / span 12;
   }

   .hero-card {
      grid-column: 1 / span 12;
   }

   .hero-actions {
      grid-template-columns: 1fr;
      max-width: 520px;
   }

   .landing-card {
      grid-column: span 12;
   }

   .landing-status {
      padding: 1.75rem 1.25rem;
   }
}

/* =======================
   MOBILE
========================== */
@media (max-width: 768px) {
   .hero-title {
      text-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
   }
}/* =========================
   BUTTONS  (Grid-based, no flex)
========================= */

.btn-primary {
     background: var(--accent-2);
     color: var(--color-1);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.btn-primary:hover {
     color: var(--shade-4);
     transform: translateY(-1px);
     box-shadow: 0 14px 32px rgba(0, 0, 0, 0.23);
}

.btn-outline {
     background: transparent;
     color: var(--color-1);
     border-color: var(--color-1);
}

.btn-outline:hover {
     background: var(--shade-6);
}

.home-cta-row {
     background: transparent;
     color: var(--light-1);
     border-color: var(--light-1);
}

.home-cta-row:hover {
     background: var(--color-2);
}.btn-pg1-1 {
     background: var(--accent-2);
     color: var(--color-1);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.btn-pg1-1:hover {
     color: var(--shade-4);
     transform: translateY(-1px);
     box-shadow: 0 14px 32px rgba(0, 0, 0, 0.23);
}

.btn-pg1-2 {
     background: transparent;
     color: var(--color-1);
     border-color: var(--color-1);
}

.btn-pg1-2:hover {
     background: var(--shade-6);
}

.btn-pg1-3 {
     background: transparent;
     color: var(--light-1);
     border-color: var(--light-1);
}

.btn-pg1-3:hover {
     background: var(--color-2);
}