/* =========================================================
ABABIOAPPS LEARNING CENTER
ARTICLE STYLES
article.css
========================================================= */

/* =========================================================
ARTICLE VARIABLES
========================================================= */

:root {


--article-max-width: 1180px;
--article-reading-width: 780px;

--article-text: #20242a;
--article-muted: #667085;
--article-border: #e6e9ee;

--article-background: #ffffff;
--article-soft-background: #f7f9fc;

--article-primary: #2563eb;
--article-primary-dark: #1d4ed8;

--article-success: #15803d;
--article-warning: #b45309;

--article-radius: 16px;

--article-shadow:
    0 8px 30px rgba(15, 23, 42, 0.07);


}

/* =========================================================
GLOBAL ARTICLE CONTAINER
========================================================= */

.article-container {


width: min(
    calc(100% - 40px),
    var(--article-max-width)
);

margin-left: auto;
margin-right: auto;


}

.article-container-narrow {


max-width: 900px;


}

/* =========================================================
BREADCRUMBS
========================================================= */

.article-breadcrumb-section {

background: var(--article-soft-background);

border-bottom:
    1px solid var(--article-border);


}

.breadcrumbs {


display: flex;

align-items: center;

flex-wrap: wrap;

gap: 10px;

padding: 18px 0;

font-size: 0.88rem;

color: var(--article-muted);


}

.breadcrumbs a {


color: var(--article-primary);

text-decoration: none;

font-weight: 600;


}

.breadcrumbs a:hover {


text-decoration: underline;


}

.breadcrumbs i {


font-size: 0.65rem;

opacity: 0.55;


}

/* =========================================================
ARTICLE HEADER
========================================================= */

.article-header {


padding:
    70px
    20px
    55px;

background:
    linear-gradient(
        180deg,
        #f8fafc 0%,
        #ffffff 100%
    );

border-bottom:
    1px solid var(--article-border);


}

.article-category {


display: flex;

align-items: center;

gap: 12px;

margin-bottom: 20px;

color: var(--article-muted);

font-size: 0.9rem;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 0.06em;


}

.category {


display: inline-flex;

align-items: center;

padding:
    7px
    12px;

border-radius: 999px;

background: #eaf2ff;

color: var(--article-primary);


}

.article-header h1 {


margin: 0;

max-width: 900px;

font-size:
    clamp(
        2.25rem,
        5vw,
        4.3rem
    );

line-height: 1.05;

letter-spacing: -0.045em;

color: #101828;


}

.article-header h1 span {


display: block;

margin-top: 12px;

color: var(--article-primary);


}

.article-intro {


max-width: 800px;

margin:
    28px
    0
    0;

font-size:
    clamp(
        1.05rem,
        2vw,
        1.28rem
    );

line-height: 1.75;

color: #475467;


}

.article-meta {


display: flex;

flex-wrap: wrap;

gap: 22px;

margin-top: 28px;

color: var(--article-muted);

font-size: 0.9rem;


}

.article-meta span {


display: inline-flex;

align-items: center;

gap: 7px;


}

.article-meta i {


color: var(--article-primary);


}

/* =========================================================
ARTICLE LAYOUT
========================================================= */

.article-layout {


background: var(--article-background);


}

.article-content-layout {


display: grid;

grid-template-columns:
    240px
    minmax(0, 780px);

gap: 70px;

align-items: start;

padding-top: 60px;

padding-bottom: 70px;


}

/* =========================================================
ARTICLE SIDEBAR
========================================================= */

.article-sidebar {


position: sticky;

top: 25px;


}

.toc-card {


padding:
    22px;

border:
    1px solid var(--article-border);

border-radius:
    var(--article-radius);

background: #ffffff;

box-shadow:
    0 5px 22px rgba(
        15,
        23,
        42,
        0.05
    );


}

.toc-card h2 {


margin:
    0
    0
    16px;

font-size: 0.95rem;

color: #101828;


}

.table-of-contents {


display: flex;

flex-direction: column;

gap: 2px;


}

.table-of-contents a {


position: relative;

display: block;

padding:
    8px
    10px;

border-radius: 8px;

color: #667085;

font-size: 0.84rem;

line-height: 1.4;

text-decoration: none;

transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;


}

.table-of-contents a:hover {


background: #f2f6ff;

color: var(--article-primary);

transform: translateX(2px);


}

/* =========================================================
ARTICLE BODY
========================================================= */

.article-body {


min-width: 0;

color: var(--article-text);


}

.article-body section {


scroll-margin-top: 30px;


}

.article-body p {


margin:
    0
    0
    22px;

font-size: 1.06rem;

line-height: 1.85;

color: #344054;


}

.article-body strong {


color: #101828;

font-weight: 700;


}

.article-body h2 {


margin:
    60px
    0
    22px;

font-size:
    clamp(
        1.65rem,
        3vw,
        2.25rem
    );

line-height: 1.2;

letter-spacing: -0.025em;

color: #101828;


}

.article-body h3 {


margin:
    34px
    0
    14px;

font-size: 1.3rem;

line-height: 1.35;

color: #101828;


}

.article-body a {


color: var(--article-primary);


}

/* =========================================================
QUICK ANSWER
========================================================= */

.quick-answer {


display: grid;

grid-template-columns:
    auto
    1fr;

gap: 20px;

padding:
    26px;

margin-bottom: 35px;

border:
    1px solid #cfe0ff;

border-radius:
    var(--article-radius);

background:
    linear-gradient(
        135deg,
        #f2f7ff,
        #ffffff
    );


}

.quick-answer-icon {


display: flex;

align-items: center;

justify-content: center;

width: 50px;

height: 50px;

border-radius: 14px;

background: #dbeafe;

color: var(--article-primary);

font-size: 1.25rem;


}

.quick-answer h2 {


margin:
    0
    0
    10px;

font-size: 1.35rem;


}

.quick-answer p {


margin-bottom: 0;


}

/* =========================================================
INFO BOX
========================================================= */

.info-box {


display: flex;

gap: 18px;

padding: 23px;

margin:
    30px
    0;

border-left:
    4px solid
    var(--article-primary);

border-radius: 12px;

background: #f7f9fc;


}

.info-box-icon {


flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

width: 42px;

height: 42px;

border-radius: 10px;

background: #eaf2ff;

color: var(--article-primary);


}

.info-box h3 {


margin:
    0
    0
    8px;


}

.info-box p {


margin-bottom: 0;


}

/* =========================================================
CHECK LIST
========================================================= */

.check-list {


list-style: none;

padding: 0;

margin:
    25px
    0
    30px;


}

.check-list li {


display: flex;

align-items: flex-start;

gap: 12px;

margin-bottom: 13px;

font-size: 1.03rem;

line-height: 1.65;

color: #344054;


}

.check-list i {


flex-shrink: 0;

margin-top: 5px;

color: var(--article-success);


}

/* =========================================================
STUDY TIME CARDS
========================================================= */

.study-time-grid {


display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 16px;

margin:
    30px
    0
    35px;


}

.study-time-card {


padding: 24px;

border:
    1px solid var(--article-border);

border-radius:
    var(--article-radius);

background: #ffffff;

box-shadow:
    0 4px 18px rgba(
        15,
        23,
        42,
        0.04
    );


}

.study-time-card.featured {


border-color:
    #bfdbfe;

background:
    linear-gradient(
        160deg,
        #eff6ff,
        #ffffff
    );

box-shadow:
    0 10px 28px rgba(
        37,
        99,
        235,
        0.10
    );


}

.study-time-card span {


display: block;

margin-bottom: 9px;

font-size: 0.7rem;

font-weight: 800;

letter-spacing: 0.08em;

color: var(--article-primary);


}

.study-time-card strong {

display: block;

margin-bottom: 10px;

font-size: 1.55rem;


}

.study-time-card p {


margin: 0;

font-size: 0.92rem;

line-height: 1.6;


}

/* =========================================================
WEEK CARDS
========================================================= */

.week-card {


display: grid;

grid-template-columns:
    72px
    1fr;

gap: 24px;

margin:
    28px
    0;

padding: 28px;

border:
    1px solid var(--article-border);

border-radius:
    var(--article-radius);

background:
    linear-gradient(
        135deg,
        #ffffff,
        #f8fafc
    );

box-shadow:
    0 5px 22px rgba(
        15,
        23,
        42,
        0.045
    );


}

.week-number {


display: flex;

align-items: center;

justify-content: center;

width: 62px;

height: 62px;

border-radius: 16px;

background: #eaf2ff;

color: var(--article-primary);

font-size: 1.15rem;

font-weight: 800;


}

.week-label {


display: inline-block;

margin-bottom: 7px;

color: var(--article-primary);

font-size: 0.72rem;

font-weight: 800;

letter-spacing: 0.08em;


}

.week-content h3 {


margin:
    0
    12px;

font-size: 1.45rem;


}

.week-content p {


margin-bottom: 16px;


}

.week-content ul {


margin:
    0
    0
    20px;

padding-left: 20px;


}

.week-content li {


margin-bottom: 8px;

color: #475467;

line-height: 1.6;


}

.week-goal {


padding:
    15px
    17px;

border-radius: 10px;

background: #f1f5f9;

color: #475467;

font-size: 0.94rem;

line-height: 1.6;


}

.week-goal strong {


color: #101828;


}

/* =========================================================
PRACTICE QUESTION STEPS
========================================================= */

.practice-process {
display: grid;


gap: 18px;

margin: 30px 0;


}

/* Individual practice step */

.practice-step {
display: flex;


align-items: flex-start;

gap: 18px;

padding: 22px;

border: 1px solid #e2e8f0;

border-radius: var(--article-radius);

background: #ffffff;

box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);


}

/* Number circle */

.practice-step-number {
flex: 0 0 48px;


width: 48px;
height: 48px;

display: flex;

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

border-radius: 50%;

background: #eff6ff;

font-size: 0.9rem;

font-weight: 800;

line-height: 1;

text-align: center;


}

/* Step heading */

.practice-step h3 {
margin: 0 0 7px;
}

/* Step description */

.practice-step p {
margin: 0;


line-height: 1.7;


}

/* =========================================================
PRACTICE TRACKING
========================================================= */

.practice-tracking {
display: grid;


grid-template-columns:
    repeat(2, minmax(0, 1fr));

gap: 16px;

margin: 25px 0 30px;


}

.tracking-item {
display: flex;


align-items: flex-start;

gap: 14px;

padding: 20px;

border: 1px solid #e2e8f0;

border-radius: var(--article-radius);

background: #ffffff;


}

.tracking-item > i {
flex: 0 0 auto;


margin-top: 3px;

font-size: 18px;


}

.tracking-item strong {
display: block;

margin-bottom: 5px;


}

.tracking-item p {
margin: 0;


font-size: 0.92rem;


}

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

@media (max-width: 768px) {


.practice-step {
    gap: 14px;

    padding: 18px;
}


.practice-step-number {
    flex-basis: 42px;

    width: 42px;
    height: 42px;

    font-size: 0.82rem;
}


.practice-tracking {
    grid-template-columns: 1fr;

    gap: 14px;
}


}

@media (max-width: 480px) {


.practice-step {
    padding: 16px;

    gap: 12px;
}


.practice-step-number {
    flex-basis: 38px;

    width: 38px;
    height: 38px;

    font-size: 0.75rem;
}


.practice-step p {
    font-size: 0.94rem;
}


}



/* =========================================================
PROCESS BOX
========================================================= */

.process-box {


display: grid;

grid-template-columns:
    1fr
    auto
    1fr
    auto
    1fr
    auto
    1fr;

align-items: center;

gap: 12px;

padding: 25px;

margin:
    30px
    0;

border:
    1px solid var(--article-border);

border-radius:
    var(--article-radius);

background: #f8fafc;


}

.process-step {


text-align: center;


}

.process-step span {


display: flex;

align-items: center;

justify-content: center;

width: 38px;

height: 38px;

margin:
    0
    auto
    10px;

border-radius: 50%;

background: #dbeafe;

color: var(--article-primary);

font-weight: 800;


}

.process-step strong {


display: block;

margin-bottom: 6px;


}

.process-step p {


margin: 0;

font-size: 0.85rem;

line-height: 1.5;


}

.process-arrow {


color: #98a2b3;


}

/* =========================================================
RESOURCE CALLOUT
========================================================= */

.resource-callout {


display: flex;

gap: 22px;

padding: 28px;

margin:
    35px
    0;

border-radius:
    var(--article-radius);

background:
    linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );

color: #ffffff;

box-shadow:
    0 12px 35px rgba(
        15,
        23,
        42,
        0.16
    );


}

.resource-callout-icon {


flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

width: 52px;

height: 52px;

border-radius: 14px;

background: rgba(
    255,
    255,
    255,
    0.10
);

font-size: 1.35rem;


}

.resource-callout span {

display: block;

margin-bottom: 7px;

font-size: 0.7rem;

font-weight: 800;

letter-spacing: 0.08em;

opacity: 0.75;


}

.resource-callout h3 {


margin:
    0
    10px;

color: #ffffff;


}

.resource-callout p {


color: #cbd5e1;

margin-bottom: 16px;


}

.resource-callout a {


display: inline-flex;

align-items: center;

gap: 8px;

color: #ffffff;

font-weight: 700;

text-decoration: none;


}

.resource-callout a:hover {


text-decoration: underline;


}

/* =========================================================
MISTAKES
========================================================= */

.mistake-list {


display: flex;

flex-direction: column;

gap: 12px;

margin:
    30px
    0;


}

.mistake-item {


display: grid;

grid-template-columns:
    48px
    1fr;

gap: 16px;

padding:
    20px;

border:
    1px solid var(--article-border);

border-radius: 13px;

background: #ffffff;


}

.mistake-item > span {


display: flex;

align-items: center;

justify-content: center;

width: 40px;

height: 40px;

border-radius: 10px;

background: #f1f5f9;

color: #64748b;

font-size: 0.8rem;

font-weight: 800;


}

.mistake-item h3 {


margin:
    0
    6px;

font-size: 1.08rem;


}

.mistake-item p {


margin: 0;

font-size: 0.95rem;


}

/* =========================================================
WARNING BOX
========================================================= */

.warning-box {


display: flex;

gap: 18px;

padding: 24px;

margin:
    30px
    0;

border:
    1px solid #fed7aa;

border-radius: 13px;

background: #fffaf5;


}

.warning-icon {


flex-shrink: 0;

color: var(--article-warning);

font-size: 1.3rem;


}

.warning-box h3 {


margin:
    0
    8px;


}

.warning-box p {


margin-bottom: 0;


}

/* =========================================================
RESOURCE GRID
========================================================= */

.resource-grid-article {


display: grid;

grid-template-columns:
    repeat(2, 1fr);

gap: 16px;

margin:
    30px
    0;


}

.article-resource-card {


display: flex;

gap: 16px;

padding: 23px;

border:
    1px solid var(--article-border);

border-radius:
    var(--article-radius);

color: inherit;

text-decoration: none;

background: #ffffff;

box-shadow:
    0 5px 20px rgba(
        15,
        23,
        42,
        0.04
    );

transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;

}

.article-resource-card:hover {


transform: translateY(-3px);

border-color:
    #bfdbfe;

box-shadow:
    0 12px 30px rgba(
        15,
        23,
        42,
        0.09
    );


}

.article-resource-icon {


flex-shrink: 0;

display: flex;

align-items: center;

justify-content: center;

width: 46px;

height: 46px;

border-radius: 12px;

background: #eaf2ff;

color: var(--article-primary);


}

.article-resource-card span {


display: block;

margin-bottom: 5px;

color: var(--article-primary);

font-size: 0.68rem;

font-weight: 800;

letter-spacing: 0.08em;


}

.article-resource-card h3 {


margin:
    0
    7px;

font-size: 1.08rem;


}

.article-resource-card p {


margin:
    0
    12px;

font-size: 0.88rem;

line-height: 1.55;


}

.article-resource-card strong {


color: var(--article-primary);

font-size: 0.86rem;

}

/* =========================================================
CONCLUSION
========================================================= */

.article-conclusion {


padding:
    30px;

margin:
    55px
    0;

border:
    1px solid #dbeafe;

border-radius:
    var(--article-radius);

background:
    linear-gradient(
        145deg,
        #f5f9ff,
        #ffffff
    );


}

.article-conclusion h2 {


margin-top: 0;


}

.article-conclusion p:last-child {


margin-bottom: 0;


}

/* =========================================================
CONCLUSION - ENHANCED LAYOUT
========================================================= */

.article-conclusion {
padding: 30px;
margin: 55px 0;
border: 1px solid #dbeafe;
border-radius: var(--article-radius);
background: linear-gradient(
145deg,
#f5f9ff,
#ffffff
);
}

.article-conclusion h2 {
margin-top: 0;
}

.article-conclusion p:last-child {
margin-bottom: 0;
}

/* =========================================================
DECISION CARDS
========================================================= */

.decision-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
margin: 30px 0;
}

.decision-card {
padding: 26px;
border: 1px solid #e2e8f0;
border-radius: var(--article-radius);
background: #ffffff;
box-shadow: 0 8px 25px rgba(15, 23, 42, 0.06);
}

.decision-card h3 {
margin: 12px 0 18px;
}

.decision-card ul {
margin: 0;
padding-left: 20px;
}

.decision-card li {
margin-bottom: 10px;
}

.decision-icon {
width: 46px;
height: 46px;


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

border-radius: 50%;

background: #eff6ff;

font-size: 20px;


}

/* =========================================================
PROCESS BOX
========================================================= */

.process-box {
display: grid;
grid-template-columns:
minmax(0, 1fr)
auto
minmax(0, 1fr)
auto
minmax(0, 1fr)
auto
minmax(0, 1fr);


align-items: center;

gap: 14px;

margin: 30px 0;
padding: 24px;

border: 1px solid #e2e8f0;
border-radius: var(--article-radius);

background: #ffffff;


}

.process-step {
text-align: center;
}

.process-step span {
width: 42px;
height: 42px;


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

margin: 0 auto 10px;

border-radius: 50%;

background: #eff6ff;

font-weight: 700;


}

.process-step strong {
display: block;
margin-bottom: 6px;
}

.process-step p {
margin: 0;
font-size: 0.92rem;
}

.process-arrow {
display: flex;
align-items: center;
justify-content: center;


font-size: 16px;


}

/* =========================================================
FINAL CTA
========================================================= */

.final-cta {
margin-top: 35px;
padding: 32px;

border-radius: var(--article-radius);

text-align: center;

background: linear-gradient(
    145deg,
    #eff6ff,
    #ffffff
);

border: 1px solid #bfdbfe;


}

.final-cta-label {
display: inline-block;


margin-bottom: 10px;

font-size: 0.78rem;
font-weight: 800;

letter-spacing: 0.08em;


}

.final-cta h3 {
margin: 0 0 12px;
}

.final-cta p {
max-width: 680px;
margin: 0 auto 22px;
}

.final-cta-buttons {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;


gap: 12px;


}

/* =========================================================
CTA BUTTONS
========================================================= */

.final-cta .btn {
display: inline-flex;


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

gap: 8px;

padding: 12px 18px;

border-radius: 10px;

text-decoration: none;

font-weight: 700;

transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;


}

.final-cta .btn:hover {
transform: translateY(-2px);
}

.final-cta .btn-primary {
background: #2563eb;
color: #ffffff;
box-shadow: 0 6px 18px rgba(37, 99, 235, 0.22);
}

.final-cta .btn-secondary {
background: #ffffff;
color: #1e40af;


border: 1px solid #bfdbfe;


}

/* =========================================================
DISCLAIMER
========================================================= */

.article-disclaimer {
margin-top: 25px;

font-size: 0.88rem;

color: #64748b;

text-align: center;


}

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

@media (max-width: 768px) {


.article-conclusion {
    padding: 22px 18px;
    margin: 40px 0;
}


.decision-grid {
    grid-template-columns: 1fr;
    gap: 16px;
}


.decision-card {
    padding: 22px;
}


.process-box {
    grid-template-columns: 1fr;
    gap: 18px;

    padding: 20px;
}


.process-arrow {
    transform: rotate(90deg);
}


.process-step {
    max-width: 300px;
    margin: 0 auto;
}


.final-cta {
    padding: 25px 18px;
}


.final-cta-buttons {
    flex-direction: column;
    width: 100%;
}


.final-cta .btn {
    width: 100%;
}

}

@media (max-width: 480px) {


.article-conclusion {
    padding: 18px 14px;
}


.decision-card {
    padding: 18px;
}


.final-cta {
    padding: 22px 15px;
}


.final-cta h3 {
    font-size: 1.25rem;
}


}


/* =========================================================
FAQ
========================================================= */

.faq-section {


margin-top: 70px;


}

.faq-section details {


border-top:
    1px solid var(--article-border);


}

.faq-section details:last-child {


border-bottom:
    1px solid var(--article-border);


}

.faq-section summary {


position: relative;

cursor: pointer;

list-style: none;

padding:
    22px
    40px
    22px
    0;

font-size: 1.02rem;

font-weight: 700;

color: #101828;


}

.faq-section summary::-webkit-details-marker {


display: none;


}

.faq-section summary::after {


content: "+";

position: absolute;

right: 5px;

top: 19px;

font-size: 1.5rem;

font-weight: 400;

color: var(--article-primary);


}

.faq-section details[open] summary::after {


content: "−";


}

.faq-section details p {


max-width: 700px;

padding:
    0
    35px
    20px
    0;

margin: 0;


}

/* =========================================================
RELATED ARTICLES
========================================================= */

.related-articles {


padding:
    45px
    0
    10px;


}

.related-header span {


display: block;

margin-bottom: 7px;

color: var(--article-primary);

font-size: 0.7rem;

font-weight: 800;

letter-spacing: 0.08em;


}

.related-header h2 {


margin-top: 0;


}

.related-grid {


display: grid;

grid-template-columns:
    repeat(3, 1fr);

gap: 16px;


}

.related-card {


display: block;

padding: 23px;

border:
    1px solid var(--article-border);

border-radius:
    var(--article-radius);

background: #ffffff;

color: inherit;

text-decoration: none;

transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;


}

.related-card:hover {


transform: translateY(-3px);

border-color:
    #bfdbfe;

box-shadow:
    0 12px 30px rgba(
        15,
        23,
        42,
        0.08
    );


}

.related-card span {


color: var(--article-primary);

font-size: 0.68rem;

font-weight: 800;

letter-spacing: 0.08em;


}

.related-card h3 {


margin:
    10px
    0
    20px;

font-size: 1.08rem;

line-height: 1.4;


}

.related-card strong {


color: var(--article-primary);

font-size: 0.86rem;


}

/* =========================================================
FINAL CTA
========================================================= */

.article-final-cta {


padding:
    60px
    20px;

background:
    linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );

color: #ffffff;


}

.article-final-cta .article-container {


display: flex;

align-items: center;

justify-content: space-between;

gap: 40px;


}

.article-final-cta span {


display: block;

margin-bottom: 9px;

color: #93c5fd;

font-size: 0.7rem;

font-weight: 800;

letter-spacing: 0.08em;


}

.article-final-cta h2 {


margin:
    0
    10px;

color: #ffffff;

font-size:
    clamp(
        1.6rem,
        3vw,
        2.3rem
    );

}

.article-final-cta p {


max-width: 650px;

margin: 0;

color: #cbd5e1;

line-height: 1.7;


}

.article-final-actions {


display: flex;

flex-wrap: wrap;

gap: 12px;

flex-shrink: 0;


}

.primary-button,
.secondary-button {


display: inline-flex;

align-items: center;

justify-content: center;

gap: 8px;

min-height: 48px;

padding:
    0
    20px;

border-radius: 10px;

text-decoration: none;

font-weight: 700;

transition:
    transform 0.2s ease,
    opacity 0.2s ease;


}

.primary-button {


background: #ffffff;

color: #0f172a;


}

.secondary-button {


border:
    1px solid
    rgba(
        255,
        255,
        255,
        0.25
    );

color: #0f172a;


}

.primary-button:hover,
.secondary-button:hover {


transform: translateY(-2px);

opacity: 0.9;


}

/* =========================================================
FOOTER
========================================================= */

.blog-footer {


padding:
    50px
    20px
    25px;

background: #f8fafc;

border-top:
    1px solid var(--article-border);


}

.blog-footer .container {


width: min(
    calc(100% - 40px),
    var(--article-max-width)
);

margin: auto;


}

.footer-grid {


display: grid;

grid-template-columns:
    2fr
    1fr
    1fr;

gap: 50px;

padding-bottom: 40px;


}

.footer-brand p {

max-width: 350px;

margin-top: 18px;

color: var(--article-muted);

line-height: 1.7;


}

.footer-column {


display: flex;

flex-direction: column;

gap: 10px;


}

.footer-column h3 {


margin:
    0
    8px;

color: #101828;

font-size: 0.95rem;

}

.footer-column a {

color: #667085;

text-decoration: none;

font-size: 0.9rem;


}

.footer-column a:hover {


color: var(--article-primary);


}

.footer-bottom {


display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

padding-top: 22px;

border-top:
    1px solid var(--article-border);

color: var(--article-muted);

font-size: 0.82rem;


}

.footer-bottom a {


color: var(--article-primary);

text-decoration: none;


}

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

@media (max-width: 1050px) {


.article-content-layout {

    grid-template-columns:
        200px
        minmax(0, 1fr);

    gap: 40px;

}


.related-grid {

    grid-template-columns:
        repeat(2, 1fr);

}


.related-card:last-child {

    grid-column:
        1 / -1;

}


}

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

@media (max-width: 800px) {


.article-container {

    width:
        min(
            calc(100% - 30px),
            var(--article-max-width)
        );

}


.article-header {

    padding:
        48px
        15px
        42px;

}


.article-header h1 {

    font-size:
        clamp(
            2rem,
            9vw,
            3rem
        );

}


.article-intro {

    font-size: 1.02rem;

    line-height: 1.7;

}


.article-content-layout {

    display: block;

    padding-top: 30px;

}


.article-sidebar {

    position: static;

    margin-bottom: 35px;

}


.toc-card {

    padding: 18px;

}


.table-of-contents {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 3px;

}


.table-of-contents a {

    font-size: 0.8rem;

}


.article-body p {

    font-size: 1rem;

    line-height: 1.78;

}


.article-body h2 {

    margin-top: 48px;

}


.study-time-grid {

    grid-template-columns:
        1fr;

}


.process-box {

    grid-template-columns:
        1fr;

    gap: 20px;

}


.process-arrow {

    display: none;

}


.resource-grid-article {

    grid-template-columns:
        1fr;

}


.related-grid {

    grid-template-columns:
        1fr;

}


.related-card:last-child {

    grid-column: auto;

}


.article-final-cta .article-container {

    flex-direction: column;

    align-items: flex-start;

}


.footer-grid {

    grid-template-columns:
        1fr
        1fr;

    gap: 30px;

}


.footer-brand {

    grid-column:
        1 / -1;

}


}

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

@media (max-width: 520px) {


.article-container {

    width:
        calc(100% - 24px);

}


.article-header {

    padding:
        38px
        12px
        35px;

}


.article-category {

    font-size: 0.76rem;

}


.article-header h1 {

    font-size:
        clamp(
            1.85rem,
            10vw,
            2.45rem
        );

    line-height: 1.08;

}


.article-header h1 span {

    margin-top: 8px;

}


.article-meta {

    flex-direction: column;

    gap: 9px;

}


.breadcrumbs {

    font-size: 0.78rem;

    gap: 7px;

}


.quick-answer {

    grid-template-columns: 1fr;

    padding: 21px;

}


.info-box {

    flex-direction: column;

}


.week-card {

    grid-template-columns:
        1fr;

    padding: 21px;

}


.week-number {

    width: 52px;

    height: 52px;

}


.resource-callout {

    flex-direction: column;

    padding: 22px;

}


.mistake-item {

    grid-template-columns:
        1fr;

}


.mistake-item > span {

    width: 38px;

    height: 38px;

}


.article-conclusion {

    padding: 22px;

}


.article-final-cta {

    padding:
        45px
        12px;

}


.article-final-actions {

    width: 100%;

    flex-direction: column;

}


.primary-button,
.secondary-button {

    width: 100%;

}


.footer-grid {

    grid-template-columns:
        1fr;

}


.footer-brand {

    grid-column: auto;

}


.footer-bottom {

    flex-direction: column;

    align-items: flex-start;

}


}

/* =========================================================
ACCESSIBILITY
========================================================= */

.article-body a:focus-visible,
.table-of-contents a:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible,
.related-card:focus-visible,
.article-resource-card:focus-visible,
.breadcrumbs a:focus-visible {


outline:
    3px solid
    rgba(
        37,
        99,
        235,
        0.35
    );

outline-offset: 3px;


}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


*,
*::before,
*::after {

    scroll-behavior: auto !important;

    transition: none !important;

    animation: none !important;

}


}

/* Featured Article Image */
.article-featured-image {
    margin: 28px 0 35px;
}

.article-featured-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--article-radius);
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.10);
}

@media (max-width: 768px) {
    .article-featured-image {
        margin: 22px 0 28px;
    }
}

/* =========================================================
   COMPARISON TABLE
========================================================= */

.comparison-table-wrapper {

    width: 100%;

    margin: 35px 0 45px;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

    border: 1px solid #dbeafe;

    border-radius: var(--article-radius);

    background: #ffffff;

    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);

}


.comparison-table {

    width: 100%;

    min-width: 720px;

    border-collapse: collapse;

    font-size: 15px;

}


.comparison-table th,
.comparison-table td {

    padding: 17px 18px;

    text-align: left;

    vertical-align: middle;

    border-bottom: 1px solid #e5e7eb;

}


.comparison-table thead th {

    background: #0f2747;

    color: #ffffff;

    font-weight: 700;

    font-size: 15px;

}


.comparison-table thead th:first-child {

    border-top-left-radius: 10px;

}


.comparison-table thead th:last-child {

    border-top-right-radius: 10px;

}


.comparison-table tbody th {

    width: 25%;

    background: #f8fafc;

    color: #172033;

    font-weight: 700;

}


.comparison-table tbody td {

    color: #475569;

}


.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {

    border-bottom: none;

}


.comparison-table tbody tr:hover {

    background: #f8fbff;

}


@media (max-width: 700px) {

    .comparison-table-wrapper {

        margin-left: 0;

        margin-right: 0;

        border-radius: 12px;

    }


    .comparison-table {

        min-width: 680px;

        font-size: 14px;

    }


    .comparison-table th,
    .comparison-table td {

        padding: 14px;

    }

}

/* =========================================================
   STUDY PLAN CARDS
========================================================= */

.study-plan-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

    margin: 35px 0 45px;

}


.study-plan-card {

    position: relative;

    padding: 28px;

    border: 1px solid #dbeafe;

    border-radius: var(--article-radius);

    background:
        linear-gradient(
            145deg,
            #f8fbff,
            #ffffff
        );

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.05);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;

}


.study-plan-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 16px 36px rgba(15, 23, 42, 0.08);

}


.study-plan-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    padding: 7px 11px;

    border-radius: 999px;

    background: #eaf3ff;

    color: #2563eb;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.08em;

}


.study-plan-card h3 {

    margin-top: 0;

    margin-bottom: 12px;

}


.study-plan-card p {

    margin-bottom: 0;

}


.study-plan-card ul {

    margin-bottom: 0;

    padding-left: 20px;

}


.study-plan-card li {

    margin-bottom: 8px;

}


.study-plan-card li:last-child {

    margin-bottom: 0;

}


/* =========================================================
   STUDY PLAN MOBILE
========================================================= */

@media (max-width: 760px) {

    .study-plan-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }


    .study-plan-card {

        padding: 22px;

    }

}