html { scroll-behavior: smooth;}
html { scroll-behavior: smooth;}
section {margin-bottom: 3rem;}
main.content{
    max-width: inherit !important; margin: inherit !important; padding: inherit !important; margin-top: inherit !important
}
main {
    max-width: 56rem; margin: 0 auto; padding: 2rem 1rem; margin-top: 12rem
}

.floating-share { position: fixed; left: 20px; top: 50%; transform: translateY(-50%); z-index: 100; }
.floating-share__container {background-color: white;border-radius: 0.5rem;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);padding: 0.75rem;display: flex;flex-direction: column;gap: 0.75rem;}

.floating-share__item {display: block;cursor: pointer;font-size: 1.125rem;transition: color 0.2s ease;}
.floating-share__item--facebook {color: #2563eb;}
.floating-share__item--facebook:hover {color: #1d4ed8;}
.floating-share__item--twitter {color: #60a5fa;}
.floating-share__item--twitter:hover {color: #3b82f6;}
.floating-share__item--linkedin {color: #1d4ed8;}
.floating-share__item--linkedin:hover {color: #1e3a8a;}
.floating-share__item--whatsapp {color: #16a34a;}
.floating-share__item--whatsapp:hover { color: #15803d; }

.hero {margin-bottom: 1.2rem;}
.hero__image {width: 100%;height: 400px;object-fit: cover;border-radius: 1rem;margin-bottom: 1.5rem;}
.hero__content {background: linear-gradient(to right, #2563eb, #9333ea);color: white;border-radius: 1rem;padding: 2rem;margin-bottom: 1.5rem;}
.hero__meta {display: flex; align-items: center;font-size: 0.875rem;margin-bottom: 1rem;}
.hero__category {background-color: rgba(255, 255, 255, 0.2);padding: 0.25rem 0.75rem;border-radius: 9999px;margin-right: 0.75rem;}

.hero__meta-item {margin-right: 1rem;}
.hero__meta-item i{margin-right:0.25rem;}
.hero__update {background-color:rgba(34,197,94,0.2);padding:0.125rem 0.5rem;border-radius:0.25rem;font-size:0.75rem;}
.hero__title{font-size:2.25rem;font-weight:bold;margin:2rem 0 !important; color: white;}
.hero__description {font-size: 1.25rem;opacity: 0.9; line-height: 2rem;}
.hero__footer {display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.hero__author {display:flex;align-items:center}
.hero__author-avatar {width:3rem;height:3rem;border-radius:50%;margin-right:1rem}
.hero__author-info {display:flex;flex-direction:column}
.hero__author-name {font-weight:600;color:#111827;margin:0}
.hero__author-title {color:#4b5563;font-size:0.875rem;margin:0}
.hero__actions {display:flex;gap:0.75rem}
.hero__btn {color:white;padding:.5rem 1rem;border-radius:.5rem;border:none;cursor:pointer;transition:background-color 0.2s ease}
.hero__btn i{margin-right:.5rem}
.hero__btn--facebook {background-color:#2563eb}
.hero__btn--facebook:hover {background-color: #1d4ed8;}
.hero__btn--twitter {background-color: #60a5fa;}
.hero__btn--twitter:hover {background-color: #3b82f6;}
.hero__btn--linkedin {background-color: #1d4ed8;}
.hero__btn--linkedin:hover {background-color: #1e3a8a;}



/* Table of Contents */
.toc{background-color:white;border-radius:.75rem;box-shadow:0 1px 3px 0 rgba(0,0,0,0.1);padding:1.5rem;position:sticky;top:2rem}
.toc__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.toc__title{font-size:1.125rem;font-weight:600;color:#111827}
.toc__toggle{color:#6b7280;background:none;border:none;cursor:pointer;transition:color 0.2s ease}
.toc__toggle:hover{color:#374151}
.toc__list{display:flex;flex-direction:column;gap:.5rem;font-size:.875rem}
.toc__link{display:block;color:#4b5563;cursor:pointer;transition:color 0.2s ease}
.toc__link:hover{color:#2563eb}
.toc-active { color: #3b82f6; font-weight: 600; }

/* Content Section */
.content {margin-bottom:3rem; text-align: justify !important;}
.content a {text-decoration: underline !important;}
.content h2 {font-size:1.875rem !important;font-weight:bold;color:#111827;margin-bottom:1.5rem !important}
.content h3 {font-size:1.25rem !important;font-weight:bold;color:#111827;margin-bottom:1.5rem !important}
.content__text{font-size:1.125rem;color:#374151;line-height:1.625;margin-bottom:1.5rem}

.content ul {display: flex; flex-direction: column; gap: 0.75rem; padding-left: 20px; margin-bottom: 1rem !important}
.content ul li {display: flex; align-items: start}

.content__insight{background-color:#eff6ff;border-left:4px solid #3b82f6;padding:1.5rem;margin:1.5rem 0 !important; display: flex; align-items: center; gap:1rem;}
.content__insight .wrapper{display:flex;align-items:start;gap:1rem}
.content__insight .icon{color:#3b82f6;font-size:1.5rem;margin-right:.75rem;margin-top:0}
.content__insight .title{font-weight:600;color:#1e3a8a;margin-bottom:.5rem}
.content__insight .text{color:#1e40af;line-height: 1.5em;margin: 0;}


.content__image-wrapper{margin:2rem 0}
.content__image-wrapper img{width:100%;height:16rem;object-fit:cover;border-radius:.75rem;}
.content__image-wrapper p{font-size:.875rem;color:#6b7280;text-align:center;margin-top:.5rem}



/* List with Icons Component */
.list-with-icons{background-color:white;border: 1px solid;border-radius:0.75rem;box-shadow:0 1px 3px 0 rgba(0,0,0,0.1);padding:1.5rem;margin-bottom:1rem;}
.list-with-icons h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem}
.list-with-icons .list{display:flex;flex-direction:column;gap:1.5rem}
.list-with-icons .item{display:flex;align-items:flex-start; gap:1rem}
.list-with-icons .icon{background-color:#dbeafe;border-radius:50%;padding:.75rem;margin-right:1rem;width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;flex-shrink: 0;color: white;font-weight: 700;}
.list-with-icons .icon svg{width:1.25rem;height:1.25rem;fill:currentColor}
.list-with-icons .icon--blue{background-color:#dbeafe;color:#2563eb}
.list-with-icons .icon--green{background-color:#dcfce7;color:#16a34a}
.list-with-icons .icon--red{background-color:#fee2e2;color:#dc2626}
.list-with-icons .icon--orange{background-color:#fed7aa;color:#ea580c}
.list-with-icons .list-content { flex:1; margin-top:0.7rem;}
.list-with-icons .list-content .title{font-weight:600;color:#111827;font-size:1.125rem}
.list-with-icons .list-content .description{color:#4b5563;margin-bottom:.5rem}
.list-with-icons .list-content .tags{display:flex;gap:.5rem}
.list-with-icons .list-content .tags .tag{background-color:#dcfce7;color:#166534;padding:.125rem .5rem;border-radius:.25rem;font-size:.75rem}
.list-with-icons .list-content .tags .tag--blue{background-color:#dbeafe;color:#1e40af}
.list-with-icons .list-content .tags .tag--purple{background-color:#f3e8ff;color:#7c2d12}
.list-with-icons .list-content .tags .tag--red{background-color:#fee2e2;color:#991b1b}

/* Quote 1 Component */
.quote1{background:linear-gradient(to right,#faf5ff,#eff6ff);border:1px solid #c084fc;border-radius:.75rem;padding:1.5rem;margin:2rem 0}
.quote1 blockquote{font-size:1.5rem;font-style:italic;color:#581c87;font-weight:500;text-align:center;border:none}
.quote1 .author{text-align:center;color:#7c3aed;margin-top:.75rem}

/* Quote 2 Component */
.quote2{background:linear-gradient(to right,#f9fafb,#faf5ff);border-radius:.75rem;padding:1.5rem;margin:2rem 0}
.quote2 .wrapper{display:flex;align-items:flex-start}
.quote2 .icon{background-color:#f3e8ff;border-radius:50%;padding:.75rem;margin-right:1rem}
.quote2 .icon svg{width:1.25rem;height:1.25rem;fill:#9333ea}
.quote2 .quote-content{flex:1}
.quote2 .text{font-size:1.125rem;font-style:italic;color:#1f2937;margin-bottom:.75rem;border:none}
.quote2 .author{display:flex;align-items:center}
.quote2 .author .avatar{width:2rem;height:2rem;border-radius:50%;margin-right:.5rem}
.quote2 .author .info{display:flex;flex-direction:column}
.quote2 .author .name{font-weight:600;color:#111827;font-size:.875rem;margin:0}
.quote2 .author .title{color:#4b5563;font-size:.75rem;margin:0}

.author_bio{background:linear-gradient(to right,#f9fafb,#faf5ff);border-radius:.75rem;padding:1.5rem;margin:2rem 0}
.author_bio .header{display:flex;align-items:center; margin-bottom:1rem;}
.author_bio .header .icon{background-color:#f3e8ff;border-radius:50%;margin-right:1rem}
.author_bio .header .icon svg{width:1.25rem;height:1.25rem;fill:#9333ea}
.author_bio .header .info{display:flex;flex-direction:column}
.author_bio .header .info .name{font-weight:600;color:#111827;font-size:1rem;margin:0}
.author_bio .header .info .title{color:#4b5563;font-size:.875rem;margin:0 0 1rem 0}
.author_bio .author_bio-content{flex:1;display:flex;flex-direction:column}
.author_bio .text{font-size:1rem;color:#1f2937;margin:0;border:none}


/* Pros List Component */
.pros-list{background-color:#f0fdf4;border-radius:.75rem;padding:1.5rem;border:1px solid #bbf7d0}
.pros-list .title{font-size:1.125rem;font-weight:600;color:#14532d;margin-bottom:1rem;display:flex;align-items:center}
.pros-list svg{color:green}
.pros-list .title .icon{color:#16a34a;margin-right:.5rem}
.pros-list ul{display:flex;flex-direction:column;gap:.75rem;color:#166534; padding-left: 0;}
.pros-list ul>li{display:flex;align-items:center}
.pros-list ul>li .icon{font-size:.75rem;margin-right:.75rem;background-color:#bbf7d0;border-radius:50%;padding:.25rem}

/* Cons List Component */
.cons-list{background-color:#fef2f2;border-radius:.75rem;padding:1.5rem;border:1px solid #fecaca}
.cons-list .title{font-size:1.125rem;font-weight:600;color:#991b1b;margin-bottom:1rem;display:flex;align-items:center}
.cons-list svg{color:red}
.cons-list .title .icon{color:#dc2626;margin-right:.5rem}
.cons-list ul{display:flex;flex-direction:column;gap:.75rem;color:#991b1b;padding-left:0}
.cons-list ul>li{display:flex;align-items:center}
.cons-list ul>li .icon{font-size:.75rem;margin-right:.75rem;background-color:#fecaca;border-radius:50%;padding:.25rem}

/* Step Guide 1 Component */
.step-guide-1{background:linear-gradient(to right,#f9fafb,#eff6ff);border-radius:.75rem;padding:2rem;margin-bottom:2rem;border:1px solid #bfdbfe}
.step-guide-1 .title{font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;display:flex;align-items:center}
.step-guide-1 .title .icon{color:#2563eb;margin-right:.75rem}
.step-guide-1 .steps{display:flex;flex-direction:column;gap:0}
.step-guide-1 .step{display:flex;align-items:flex-start}
.step-guide-1 .step .number{background-color:#2563eb;color:white;border-radius:50%;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;margin-right:1rem;margin-top:.25rem;font-size:.875rem;font-weight:bold;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1)}
.step-guide-1 .step .step-content{flex:1}
.step-guide-1 .step .title{font-weight:600;color:#111827;font-size:1.125rem;margin-bottom:.5rem}
.step-guide-1 .step .description{color:#4b5563}

/* Table with Header Component */
.table-with-header{overflow-x:auto;margin-bottom:1.5rem;}
.table-with-header table{width:100%;background-color:white;border-collapse: collapse;border-radius:.75rem;box-shadow:0 1px 3px 0 rgba(0,0,0,0.1);border:1px solid #e5e7eb}
.table-with-header thead{background:linear-gradient(to right,#f9fafb,#eff6ff)}
.table-with-header th, .table-with-header td{padding: 0.75rem;;text-align:left;font-size:.875rem;font-weight:600;color:#111827}
.table-with-header th {font-weight: bold; vertical-align: middle;}
.table-with-header tbody{border-top:1px solid #e5e7eb}
.table-with-header tr{border-bottom:1px solid #e5e7eb;transition:background-color 0.2s ease}
.table-with-header tr:nth-child(even) {background-color: rgba(0, 0, 0, 0.05);}
.table-with-header tr:hover{background-color:#f9fafb}
.table-with-header .category{font-weight:500;color:#111827}
.table-with-header .options{color:#4b5563}
.table-with-header .badge{background-color:#fef3c7;color:#92400e;padding:.125rem .5rem;border-radius:.25rem;font-size:.75rem}
.table-with-header .badge--easy{background-color:#dcfce7;color:#166534}
.table-with-header .badge--medium{background-color:#fef3c7;color:#92400e}




/* Yellow Box Component */
.yellow-box{background-color:#fefce8;border:1px solid #fde047;border-radius:.75rem;padding:1.5rem;margin-bottom:2rem}
.yellow-box .wrapper{display:flex;align-items:flex-start}
.yellow-box .icon{color:#ca8a04;font-size:1.5rem;margin-right:1rem;margin-top:.25rem}
.yellow-box .yellow-box-content{flex:1}
.yellow-box .title{font-weight:600;color:#a16207;margin-bottom:.5rem}
.yellow-box .text{color:#a16207}


.three-columns{display:flex;flex-wrap:nowrap;gap:1.2rem;}
.three-columns .column{flex:1;}


/* Rounded Box Component */
.rounded-box{background-color:white;border-radius:.75rem;box-shadow:0 1px 3px 0 rgba(0,0,0,0.1);padding:1.5rem;border:1px solid #e5e7eb}
.rounded-box .content{text-align:center}
.rounded-box .icon-wrapper{background-color:#dbeafe;border-radius:50%;width:4rem;height:4rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.rounded-box .icon-wrapper--blue{background-color:#dbeafe}
.rounded-box .icon-wrapper--green{background-color:#dcfce7}
.rounded-box .icon-wrapper--purple{background-color:#f3e8ff}
.rounded-box .icon{color:#2563eb;font-size:1.5rem}
.rounded-box .icon--blue{color:#2563eb}
.rounded-box .icon--green{color:#16a34a}
.rounded-box .icon--purple{color:#9333ea}
.rounded-box .title{font-weight:600;color:#111827;margin-bottom:.5rem;font-size:1.125rem}
.rounded-box .description{color:#4b5563;font-size:.875rem}

/* Red Box Component */
.red-box{background-color:#fef2f2;border:1px solid #fecaca;border-radius:.75rem;padding:1.5rem;margin-bottom:2rem}
.red-box .wrapper{display:flex;align-items:flex-start}
.red-box .icon{color:#dc2626;font-size:1.5rem;margin-right:1rem;margin-top:.25rem}
.red-box .red-box-content{flex:1}
.red-box .title{font-weight:600;color:#991b1b;margin-bottom:.5rem}
.red-box .text{color:#991b1b}




/* NEW Component Styles */
:root {
    --blue-primary: #2563eb;
    --blue-secondary: #eff6ff;
    --blue-tertiary: #bfdbfe;
    --blue-light: #f9fafb;
    --blue-icon-bg: #c2d8fb;

    --red-primary: #991b1b;
    --red-secondary: #fef2f2;
    --red-tertiary: #fecaca;

    --green-primary: #16a34a;
    --green-secondary: #f0fdf4;
    --green-tertiary: #bbf7d0;

    --yellow-primary: #a16207;
    --yellow-secondary: #fefce8;
    --yellow-tertiary: #fde047;

    --purple-primary: #581c87;
    --purple-secondary: linear-gradient(to right, #faf5ff, #eff6ff);
    --purple-tertiary: #c084fc;

    --black-primary: #111827;
    --black-secondary: #d1d1d1;

    --white: #ffffff;
}

.content-box {border-radius: 12px;padding: 2rem;margin: 2rem 0;}
.content-box-shadow {background-color: var(--white);box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);}
.content-box-border {border-left: 4px solid;}

.bg-blue {background-color: var(--blue-secondary) !important;}
.bg-red {background-color: var(--red-secondary) !important;}
.bg-green {background-color: var(--green-secondary) !important;}
.bg-yellow {background-color: var(--yellow-secondary) !important;}
.bg-purple {background: var(--purple-secondary) !important;}
.bg-white {background-color: var(--white) !important;}

.text-blue {color: var(--blue-primary) !important;}
.text-red {color: var(--red-primary) !important;}
.text-green {color: var(--green-primary) !important;}
.text-yellow {color: var(--yellow-primary) !important;}
.text-purple {color: var(--purple-primary) !important;}
.text-black {color: var(--black-primary) !important;}
.text-white {color: var(--white) !important;}

.border-blue {border-color: var(--blue-primary) !important;}
.border-red {border-color: var(--red-primary) !important;}
.border-green {border-color: var(--green-primary) !important;}
.border-yellow {border-color: var(--yellow-primary) !important;}
.border-purple {border-color: var(--purple-primary) !important;}

.solid-bg-blue {background-color: var(--blue-secondary) !important;}
.solid-bg-red {background-color: var(--red-secondary) !important;}
.solid-bg-green {background-color: var(--green-secondary) !important;}
.solid-bg-yellow {background-color: var(--yellow-secondary) !important;}
.solid-bg-purple {background: var(--purple-secondary) !important;}

.insight-blue { border-left-color: var(--blue-primary); background-color: var(--blue-secondary); }
.insight-blue .icon { color: var(--blue-primary); }
.insight-blue .text { color: var(--blue-primary); }
.insight-green { border-left-color: var(--green-primary); background-color: var(--green-secondary); }
.insight-green .icon { color: var(--green-primary); }
.insight-green .text { color: var(--green-primary); }
.insight-red { border-left-color: var(--red-primary); background-color: var(--red-secondary); }
.insight-red .icon { color: var(--red-primary); }
.insight-red .text { color: var(--red-primary); }
.insight-yellow { border-left-color: var(--yellow-primary); background-color: var(--yellow-secondary); }
.insight-yellow .icon { color: var(--yellow-primary); }
.insight-yellow .text { color: var(--yellow-primary); }
.insight-purple { border-left-color: var(--purple-primary); background: var(--purple-secondary); }
.insight-purple .icon { color: var(--purple-primary); }
.insight-purple .text { color: var(--purple-primary); }


.message-box {padding: 1rem;border: 1px solid;border-radius: 0.75rem;margin-bottom: 1rem;}
.message-box .wrapper {display: flex;align-items: flex-start;gap: 1rem;}
.message-box .icon {width: 36px;height: 36px;flex-shrink: 0;}
.message-box-content {flex: 1;}
.message-box .text {line-height: 1.5em;margin: 0;}

.info-blue {background: linear-gradient(to right, var(--blue-light), var(--blue-secondary));border-color: var(--blue-tertiary);}
.info-blue .icon {fill: var(--blue-primary);}
.info-blue .text {color: var(--blue-primary);}
.info-red {background: var(--red-secondary);border-color: var(--red-tertiary);}
.info-red .icon {fill: var(--red-primary);}
.info-red .text {color: var(--red-primary);}
.info-green {background: var(--green-secondary);border-color: var(--green-tertiary);}
.info-green .icon {fill: var(--green-primary);}
.info-green .text {color: var(--green-primary);}
.info-yellow {background: var(--yellow-secondary);border-color: var(--yellow-tertiary);}
.info-yellow .icon {fill: var(--yellow-primary);}
.info-yellow .text {color: var(--yellow-primary);}

.info-purple {background: var(--purple-secondary);border-color: var(--purple-tertiary);}
.info-purple .icon {fill: var(--purple-primary);}
.info-purple .text {color: var(--purple-primary);}

.step-container {margin-bottom: 2rem;}
.step-container .step-title {font-size: 1.25rem; width: 90%;}
.step-header {display: flex;align-items: center;margin-bottom: 1rem;}
.step-number {border-radius: 9999px;width: 50px;height: 50px;display: flex;align-items: center;
    justify-content: center;margin-right: 1rem;font-size: 0.875rem;font-weight: 700;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.badge-blue {background-color: var(--blue-primary);color: white;}
.badge-red {background-color: var(--red-primary);color: white;}
.badge-green {background-color: var(--green-primary);color: white;}
.badge-yellow {background-color: var(--yellow-primary);color: white;}
.badge-purple {background-color: var(--purple-primary);color: white;}

.step-blue .step-number {background-color: var(--blue-primary);color: white;}
.step-red .step-number {background-color: var(--red-primary);color: white;}
.step-green .step-number {background-color: var(--green-primary);color: white;}
.step-yellow .step-number {background-color: var(--yellow-primary);color: white;}
.step-purple .step-number {background-color: var(--purple-primary);color: white;}

.custom-list {display: flex;flex-direction: column;gap: 0.75rem;padding-left: 20px;margin-bottom: 1rem;}
.custom-list li {display: flex;align-items: center;}

.list-icon {font-size: 0.75rem;margin-right: 0.75rem;border-radius: 50%;padding: 0.25rem;}
.list-icon svg {width: 1rem;height: 1rem;}

.list-icons-blue {background: linear-gradient(to right, var(--blue-light), var(--blue-secondary)); border-color: var(--blue-tertiary);}
.list-icons-blue .icon {background-color: var(--blue-primary);}
.list-icons-red {background: var(--red-secondary); border-color: var(--red-tertiary);}
.list-icons-red .icon {background-color: var(--red-primary);}
.list-icons-green {background: var(--green-secondary); border-color: var(--green-tertiary);}
.list-icons-green .icon {background-color: var(--green-primary);}
.list-icons-yellow {background: var(--yellow-secondary); border-color: var(--yellow-tertiary);}
.list-icons-yellow .icon {background-color: var(--yellow-primary);}
.list-icons-purple {background: var(--purple-secondary); border-color: var(--purple-tertiary);}
.list-icons-purple .icon {background-color: var(--purple-primary);}

.inline-card { padding: 1.5rem; border: 1px solid; border-radius: 0.75rem; margin-bottom: 1rem; }
.inline-card-header { display: flex; align-items: center; margin-bottom: 1.25rem; }
.inline-card-number { border-radius: 9999px; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 1rem; font-size: 0.875rem; font-weight: 700; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.inline-card-title { font-size: 1.25rem; margin-bottom: 0 !important; }

.inline-card-blue { background: linear-gradient(to right, var(--blue-light), var(--blue-secondary)); border-color: var(--blue-tertiary); }
.inline-card-blue .inline-card-number { background-color: var(--blue-primary); color: white; }
.inline-card-red { background: var(--red-secondary); border-color: var(--red-tertiary); }
.inline-card-red .inline-card-number { background-color: var(--red-primary); color: white; }
.inline-card-green { background: var(--green-secondary); border-color: var(--green-tertiary); }
.inline-card-green .inline-card-number { background-color: var(--green-primary); color: white; }
.inline-card-yellow { background: var(--yellow-secondary); border-color: var(--yellow-tertiary); }
.inline-card-yellow .inline-card-number { background-color: var(--yellow-primary); color: white; }
.inline-card-purple { background: var(--purple-secondary); border-color: var(--purple-tertiary); }
.inline-card-purple .inline-card-number { background-color: var(--purple-primary); color: white; }

.table-with-header {margin-bottom: 1.5rem; overflow-x: auto;}
.table-with-header table {width: 100%; border-collapse: collapse;}
.table-with-header th, .table-with-header td {padding: 0.75rem; text-align: left; border-bottom: 1px solid #ddd;}
.table-with-header th {font-weight: bold; vertical-align: middle;}
.table-with-header tr:nth-child(even) {background-color: rgba(0, 0, 0, 0.05);}

.table-blue {border-color: 1px solid var(--blue-secondary);}
.table-blue thead tr {background: var(--blue-primary) !important;}
.table-blue thead th {color: white !important;}
.table-blue tr:nth-child(even) {background: linear-gradient(to right, var(--blue-light), var(--blue-secondary));}

.table-red {border-color: 1px solid var(--red-secondary);}
.table-red thead tr {background: var(--red-primary) !important;}
.table-red thead th {color: white !important;}
.table-red tr:nth-child(even) {background: var(--red-secondary);}

.table-green {border-color: 1px solid var(--green-secondary);}
.table-green thead tr {background: var(--green-primary) !important;}
.table-green thead th {color: white !important;}
.table-green tr:nth-child(even) {background: var(--green-secondary);}

.table-yellow {border-color: 1px solid var(--yellow-secondary);}
.table-yellow thead tr {background: var(--yellow-primary) !important;}
.table-yellow thead th {color: white !important;}
.table-yellow tr:nth-child(even) {background: var(--yellow-secondary);}

.table-purple {border: 1px solid var(--purple-secondary);}
.table-purple thead tr {background: var(--purple-primary) !important;}
.table-purple thead th {color: white !important;}
.table-purple tr:nth-child(even) {background: var(--purple-secondary);}


.bullet-list {padding: 1.5rem; border-radius: 12px; margin: 1rem 0; list-style: none; padding-left: 2rem; border-left: 4px solid;}
.bullet-list li {padding: 0.75rem 0; position: relative; padding-left: 2rem; display: flex; align-self: center;}
.bullet-list li span {position: absolute; top: 6px; left: 0; font-size: 1.5rem; font-weight: bold; line-height: 1.2em;}
.bullet-list li strong {font-size: 1.05rem; color: var(--black-primary);}

.grid-2 {display: grid;grid-template-columns: 1fr 1fr;gap: 1.1rem;margin: 2rem 0;}
.grid-item {background: var(--white);padding: 2rem;border-radius: 12px;border-left: 4px solid;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}


.step-guide {border-radius: 12px; padding: 2rem; margin: 2rem 0; border-left: 4px solid;}
.step-guide .title {display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem !important; font-size: 1.5rem; font-weight: 600;}
.step-guide .title .icon {flex-shrink: 0;}
.step-guide .steps {margin-top: 1.5rem;}
.step-guide .step {margin-bottom: 1.5rem; padding-left: 1rem; border-left: 2px solid;}
.step-guide .step:last-child {margin-bottom: 0;}
.step-guide .step-content {margin-bottom: 1rem !important;}
.step-guide .step-title {margin-top: 0.6rem !important; display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;}
.step-guide .step-title svg {flex-shrink: 0;}
.step-guide .description {margin: 0; line-height: 1.6em;}

.step-guide-blue {background: linear-gradient(to right, var(--blue-light), var(--blue-secondary)); border-left-color: var(--blue-primary);}
.step-guide-blue .title {color: var(--blue-primary);}
.step-guide-blue .title .icon {fill: var(--blue-primary);}
.step-guide-blue .step {border-left-color: var(--blue-tertiary);}
.step-guide-blue .step-title {color: var(--blue-primary);}
.step-guide-blue .step-title svg {fill: var(--blue-primary);}
.step-guide-blue .description {color: var(--blue-primary);}

.step-guide-red {background: var(--red-secondary); border-left-color: var(--red-primary);}
.step-guide-red .title {color: var(--red-primary);}
.step-guide-red .title .icon {fill: var(--red-primary);}
.step-guide-red .step {border-left-color: var(--red-tertiary);}
.step-guide-red .step-title {color: var(--red-primary);}
.step-guide-red .step-title svg {fill: var(--red-primary);}
.step-guide-red .description {color: var(--red-primary);}

.step-guide-green {background: var(--green-secondary); border-left-color: var(--green-primary);}
.step-guide-green .title {color: var(--green-primary);}
.step-guide-green .title .icon {fill: var(--green-primary);}
.step-guide-green .step {border-left-color: var(--green-tertiary);}
.step-guide-green .step-title {color: var(--green-primary);}
.step-guide-green .step-title svg {fill: var(--green-primary);}
.step-guide-green .description {color: var(--green-primary);}

.step-guide-yellow {background: var(--yellow-secondary);border-left-color: var(--yellow-primary);}
.step-guide-yellow .title {color: var(--yellow-primary);}
.step-guide-yellow .title .icon {fill: var(--yellow-primary);}
.step-guide-yellow .step {border-left-color: var(--yellow-tertiary);}
.step-guide-yellow .step-title {color: var(--yellow-primary);}
.step-guide-yellow .step-title svg {fill: var(--yellow-primary);}
.step-guide-yellow .description {color: var(--yellow-primary);}
.step-guide-purple {background: var(--purple-secondary);border-left-color: var(--purple-primary);}
.step-guide-purple .title {color: var(--purple-primary);}

.step-guide-purple .title .icon {fill: var(--purple-primary);}
.step-guide-purple .step {border-left-color: var(--purple-tertiary);}
.step-guide-purple .step-title {color: var(--purple-primary);}
.step-guide-purple .step-title svg {fill: var(--purple-primary);}
.step-guide-purple .description {color: var(--purple-primary);}

.content__text a {text-decoration: underline;color: var(--blue-primary);}
.content__text a strong {color: var(--blue-primary);}

.flex-center {justify-content: center;align-items: center;}
.mb-0 {margin-bottom: 0;}


.bg-primary-blue {background-color: var(--blue-primary) !important;}
.bg-primary-red {background-color: var(--red-primary) !important;}
.bg-primary-green {background-color: var(--green-primary) !important;}
.bg-primary-yellow {background-color: var(--yellow-primary) !important;}
.bg-primary-purple {background-color: var(--purple-primary) !important;}

@media (max-width: 767px) {
    .content img {
        max-width: 380px;
        height: auto;
        margin: 0 auto;
        display: block;
    }
    main {margin-top:0 !important;}
    .hero__title{margin:2rem 0 !important;}
    .hero__footer {flex-direction:column !important; gap: 1rem !important; align-items:start !important;}
    .hero__meta {display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, auto);gap: 0.5rem;font-size: 0.875rem;margin-bottom: 1rem;align-items: center;}

    .grid-2 {
        grid-template-columns: 1fr;
    }

}