/* ── Color palette (light mode, real hex values — no CSS variables) ────── */
/*
text-primary: #1a1a1a
text-secondary: #555555
text-tertiary:#888888
bg-primary: #ffffff
bg-secondary: #f5f5f3
border-light: #e8e8e4
border-mid: #d0d0ca
red-dark: #a32d2d
red-mid:#e24b4a, or #d20503
red-pale: #fcebeb
green-dark: #3b6d11
amber-dark: #854f0b
*/

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
background: #ffffff;
color: #1a1a1a;
}

#main, .main { display: grid; grid-template-columns: 350px 1fr; max-width: 1200px; margin: 0 auto; padding: 0 4vw; }

.blog-wrap {
max-width: 740px;
margin: 0 auto;
padding: 2.5rem 1.5rem 5rem;
font-family: Georgia, 'Times New Roman', serif;
font-size: 18px;
line-height: 1.78;
color: #1a1a1a;
}

.blog-wrap a, .blog-wrap a:visited { 
color: blue;
}
.blog-wrap a:hover { 
background-color: blue;
color:white;
}


/* ── Vertical sticky sidebar TOC ─────────────────────────────────────────── */

.page-toc {
position: sticky;
top: calc(var(--nav_h) + 24px);
z-index: 1;
height: fit-content;
padding: 0 1.5rem 0 0;
}

.page-toc__inner {
display: flex;
flex-direction: column;
gap: 2px;
}

.page-toc__otp {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #b0ada6;
margin-bottom: 10px;
}

.page-toc__link {
display: block;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.45;
/*color: #9a9690;*/
text-decoration: none;
padding: 5px 10px 5px 12px;
border-left: 2px solid transparent;
border-radius: 0 4px 4px 0;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.page-toc__link:hover {
color: #1a1a1a;
background: #f5f5f3;
border-left-color: #d0d0ca;
}

.page-toc__link.active {
color: #1c3a28;
font-weight: 600;
border-left-color: #1c3a28;
background: #f0f5f1;
}



/* ── Header elements ─────────────────────────────────────────────────────── */

.kicker {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
/*color: #888888;
margin-bottom: 1rem;*/
}

.headline {
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(28px, 5vw, 44px);
font-weight: 700;
line-height: 1.13;
letter-spacing: -0.01em;
margin: 0 0 1.25rem;
color: #1a1a1a;
}

.deck {
font-family: Georgia, 'Times New Roman', serif;
font-size: 20px;
font-weight: 400;
font-style: italic;
line-height: 1.6;
color: #181818;
border-left: 3px solid #d0d0ca;
padding-left: 1.25rem;
margin: 0 0 2.5rem;
}

.meta {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #757575;
border-top: 1px solid #e8e8e4;
border-bottom: 1px solid #e8e8e4;
padding: 0.6rem 0;
margin-bottom: 2.5rem;
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */
/*.breadcrumb { padding: 10px 1vw 0; font-size: 13px; display: flex; align-items: center; gap: 7px; background: #ffffff; }*/
.breadcrumb { max-width: 1200px; margin: calc(var(--nav_h) + 12px) auto 0; padding: 0 4vw 10px; font-family: Arial, sans-serif; font-size: 13px; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: #777; }
.breadcrumb a { color: #bc5151; text-decoration:none; }
.breadcrumb a:hover { color: #560e0e; }
.breadcrumb .sep { color: rgba(236, 6, 6, 0.6); }
.breadcrumb .current { color: #453939 }


button.speakBtn {
padding: 0px 16px;
margin: 0 0 0 10px;
font-size: 14px;
font-weight: 600;
border: 1px solid #d0d5dd;
border-radius: 8px;
background: #ffffff;
color: #111827;
cursor: pointer;
transition: all 0.15s ease-in-out;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
button.speakBtn:hover {
background: #f9fafb;
border-color: #b9c0cc;
}
button.speakBtn:active {
transform: translateY(1px);
box-shadow: 0 0 0 rgba(0,0,0,0);
}
#stopSpeak {
background: #ef4444;
color: #ffffff;
border-color: #ef4444;
}
#stopSpeak:hover {
background: #dc2626;
border-color: #dc2626;
}







/* ── Body text ───────────────────────────────────────────────────────────── */

.blog-wrap p {
margin: 0.5rem 0 0.5rem;
color: #1a1a1a;
}

.blog-wrap ul:not(.timeline-wrap):not(.warning-signs) {
padding-left: 0;
list-style: none;
}

.blog-wrap ul:not(.timeline-wrap):not(.warning-signs) li {
position: relative;
padding-left: 1.4rem;
margin-bottom: 0.6rem;
}

.blog-wrap ul:not(.timeline-wrap):not(.warning-signs) li::before {
content: '';
position: absolute;
left: 0;
top: 0.65em;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #CBB27A;/*d20503*/
}

/* ── Section headings ────────────────────────────────────────────────────── */

h2.section-head, h2 {
font-family: Georgia, 'Times New Roman', serif;
font-size: 24px;
font-weight: 700;
line-height: 1.25;
margin: 3.5rem 0 1rem;
color: #1a1a1a;
text-align: center;
display: flex; /*turns the h2 into a flex container, so the text and the two pseudo-elements sit in a row.*/
align-items: center;
gap: 1rem;
}

h2.section-head::before,
h2.section-head::after,
h2::before,
h2::after {
content: "";
flex: 1; /* makes them stretch equally to fill the remaining space on each side of the text.*/
height: 1px;
background-color: #d0d0d0;
}


h3.sub-head, h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: 700;
color: #182514;/*1a1a1a*/
margin: 2rem 0 0.5rem;
padding-left: 0.15rem;
/*border-bottom: 1px dotted #cf6766;*/ border-bottom: none;
background: linear-gradient(to right, #f7c5c4, #fff) bottom / 100% 1px no-repeat;
}

h4.sub-head, h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #555555;
margin: 1.5rem 0 0.35rem;
}

/* ── Callout boxes ───────────────────────────────────────────────────────── */

.callout {
background: #f5f5f3;
border-left: 3px solid #CBB27A;/*d20503*/
border-radius: 0 6px 6px 0;
padding: 1rem 1.25rem;
margin: 2rem 0;
}

.callout p {
margin: 0;
font-style: italic;
font-size: 17px;
color: #1a1a1a;
}

.callout-label {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: #132F20;/*d20503*/
margin-bottom: 0.4rem;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.data-table {
width: 100%;
border-collapse: collapse;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 1.5rem 0 2rem;
}

.data-table th {
text-align: left;
font-weight: 700;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #181818;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #d0d0ca;
}

.data-table td {
padding: 0.7rem 0.75rem;
border-bottom: 1px solid #e8e8e4;
color: #1a1a1a;
vertical-align: top;
line-height: 1.5;
}

.data-table tr:last-child td { border-bottom: none; }

.td-neg{ color: #a32d2d; }
.td-pos{ color: #3b6d11; }
.td-warn { color: #854f0b; }

/* ── Scenario grid ───────────────────────────────────────────────────────── */

.scenario-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin: 1.5rem 0 2rem;
}

.scenario-box {
background: #f5f5f3;
border: 1px solid #e8e8e4;
border-radius: 6px;
padding: 1rem 1.1rem;
}

.scenario-box .s-label {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: 0.3rem;
}

.scenario-box .s-val {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: 700;
margin-bottom: 0.3rem;
}

.scenario-box .s-desc {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #181818;
line-height: 1.5;
}

.s-profit .s-label { color: #3b6d11; }
.s-profit .s-val { color: #3b6d11; }
.s-cash .s-label { color: #a32d2d; }
.s-cash .s-val { color: #a32d2d; }


/* ── Scenario grid modifiers ──────────────────────────────────────────── */

/* Variant B: ruled — no fill, divided by a centre line */
.scenario-grid.sg-ruled {
background: transparent;
border-top: 2px solid #1a1a1a;
border-bottom: 1px solid #e8e8e4;
border-radius: 0;
gap: 0;
}
.scenario-grid.sg-ruled .scenario-box {
background: transparent;
border: none;
border-right: 1px solid #e8e8e4;
border-radius: 0;
padding: 1.1rem 1.5rem 1.1rem 0;
}
.scenario-grid.sg-ruled .scenario-box:last-child {
border-right: none;
padding: 1.1rem 0 1.1rem 1.5rem;
}
.scenario-grid.sg-ruled .s-label { color: #757575; }
.scenario-grid.sg-ruled .s-val { font-size: 30px; color: #1a1a1a; }
.scenario-grid.sg-ruled .s-cash .s-val { color: #a32d2d; }

/* Variant C: dark left panel */
.scenario-grid.sg-dark {
gap: 0;
border-radius: 6px;
overflow: hidden;
}
.scenario-grid.sg-dark .scenario-box:first-child {
background: #1a1a1a;
border-radius: 0;
}
.scenario-grid.sg-dark .scenario-box:first-child .s-label { color: #ececec; }
.scenario-grid.sg-dark .scenario-box:first-child .s-val { color: #ffffff; }
.scenario-grid.sg-dark .scenario-box:first-child .s-desc{ color: #f0f0f0; }
.scenario-grid.sg-dark .scenario-box:last-child {
background: #f5f5f3;
border-radius: 0;
border: 1px solid #e8e8e4;
border-left: none;
}
.scenario-grid.sg-dark .scenario-box:last-child .s-label { color: #757575; }
.scenario-grid.sg-dark .scenario-box:last-child .s-val { color: #a32d2d; }
.scenario-grid.sg-dark .scenario-box:last-child .s-desc{ color: #555555; }

/* Variant D: accent border top */
.scenario-grid.sg-accent {
gap: 0;
border: 1px solid #e8e8e4;
border-radius: 6px;
overflow: hidden;
}
.scenario-grid.sg-accent .scenario-box {
background: #ffffff;
border-radius: 0;
border-top: 3px solid #ef9f27;
}
.scenario-grid.sg-accent .scenario-box:last-child {
border-top-color: #d20503;
border-left: 1px solid #e8e8e4;
}
.scenario-grid.sg-accent .scenario-box .s-label { color: #854f0b; }
.scenario-grid.sg-accent .scenario-box:last-child .s-label { color: #a32d2d; }
.scenario-grid.sg-accent .s-val { color: #1a1a1a; }



/* ── Timeline ────────────────────────────────────────────────────────────── */

.timeline-wrap {
position: relative;
margin: 1.5rem 0 2rem;
padding-left: 1.75rem;
list-style: none;
}

/* The vertical line — real hex, no CSS variable */
.timeline-wrap::before {
content: '';
position: absolute;
left: 3px;
top: 10px;
bottom: 10px;
width: 1px;
background: #d0d0ca;
}

.tl-item {
position: relative;
margin-bottom: 1.4rem;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

/* The dot on the timeline */
.tl-item::before {
content: '';
position: absolute;
left: -1.75rem;
top: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #d0d0ca;
}

.tl-item.danger::before { background: #d20503; }
.tl-item.warn::before { background: #ef9f27; }
.tl-item.ok::before { background: #639922; }

.tl-week {
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #757575;
margin-bottom: 3px;
}

.tl-text {
color: #1a1a1a;
line-height: 1.55;
}

/* ── Warning signs list ──────────────────────────────────────────────────── */

.warning-signs {
display: grid;
gap: 0.85rem;
margin: 1.5rem 0 2rem;
}

.ws-item {
display: flex;
gap: 0.85rem;
align-items: flex-start;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.55;
color: #1a1a1a;
}

.ws-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: #fcebeb;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
font-size: 14px;
color: #a32d2d;
}

.ws-item div {
margin: 0 0 1.0rem;
}

.ws-item p {
margin: 0 0 0.5rem;
}

/* ── Pull quote ──────────────────────────────────────────────────────────── */

.pullquote {
font-family: Georgia, 'Times New Roman', serif;
font-size: 23px;
font-style: italic;
font-weight: 400;
line-height: 1.4;
color: #1a1a1a;
text-align: center;
margin: 3rem 1rem;
padding: 1.5rem 2rem;
border-top: 2px solid #e8e8e4;
border-bottom: 2px solid #e8e8e4;
}


/* Stress meter — visual device unique to this post */
.stress-meter {
margin: 1.75rem 0 2rem;
border: 1px solid #e8e8e4;
border-radius: 6px;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}

.stress-meter__row {
display: grid;
grid-template-columns: 160px 1fr auto;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 1rem;
border-bottom: 1px solid #e8e8e4;
font-size: 13px;
}

.stress-meter__row:last-child { border-bottom: none; }

.stress-meter__label { color: #181818; font-weight: 600; }

.stress-meter__bar-wrap {
background: #f5f5f3;
border-radius: 3px;
height: 8px;
position: relative;
}

.stress-meter__bar {
height: 100%;
border-radius: 3px;
background: #d20503;
opacity: 0.18;
}

.stress-meter__bar.w20 { width: 20%; opacity: 0.25; }
.stress-meter__bar.w40 { width: 40%; opacity: 0.40; background: #ef9f27; }
.stress-meter__bar.w60 { width: 60%; opacity: 0.55; background: #ef9f27; }
.stress-meter__bar.w80 { width: 80%; opacity: 0.75; background: #d20503; }
.stress-meter__bar.w100 { width: 100%; background: #d20503; opacity: 1; }

.stress-meter__status {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}

.stress-meter__status.low { color: #3b6d11; }
.stress-meter__status.mid { color: #854f0b; }
.stress-meter__status.high{ color: #a32d2d; }
.stress-meter__status.crit{ color: #d20503; }


/* Decision log — the "what do we pay first" device */
.decision-log {
margin: 1.5rem 0 2rem;
border: 1px solid #e8e8e4;
border-radius: 6px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13.5px;
overflow: hidden;
}

.decision-log__head {
background: #f5f5f3;
padding: 0.55rem 1rem;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #2c2c2c;
display: grid;
grid-template-columns: 1fr 90px 100px 120px;
gap: 0.5rem;
border-bottom: 1px solid #d8d8d2;
}

.decision-log__row {
display: grid;
grid-template-columns: 1fr 90px 100px 120px;
gap: 0.5rem;
padding: 0.65rem 1rem;
border-top: 1px solid #e8e8e4;
align-items: start;
line-height: 1.45;
color: #1a1a1a;
}

.decision-log__row .obligation { font-weight: 510; }
.decision-log__row .amount { color: #181818; }

.badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 3px;
}

.badge-pay{ background: #e9f3e2; color: #3b6d11; }
.badge-delay{ background: #fff3e0; color: #854f0b; }
.badge-skip { background: #fcebeb; color: #a32d2d; }

.decision-log__consequence {
grid-column: 1 / -1;
font-size: 12px;
color: #a32d2d;
padding: 0 0 0.3rem 0;
font-style: italic;
}


/* ── Chain-reaction diagram — dominant visual device for this article ── */
.chain-reaction {
margin: 2rem 0 2.5rem;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}

.chain-reaction__node {
display: flex;
align-items: flex-start;
gap: 1rem;
position: relative;
}

.chain-reaction__node + .chain-reaction__node {
margin-top: 0;
}

.chain-reaction__left {
display: flex;
flex-direction: column;
align-items: center;
flex-shrink: 0;
width: 36px;
}

.chain-reaction__dot {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
color: #ffffff;
flex-shrink: 0;
z-index: 1;
}

.chain-reaction__line {
width: 2px;
flex: 1;
min-height: 28px;
background: #e8e8e4;
}

.chain-reaction__body {
padding: 0.55rem 0 1.4rem;
flex: 1;
}

.chain-reaction__title {
font-weight: 700;
font-size: 14px;
color: #1a1a1a;
margin-bottom: 0.25rem;
line-height: 1.35;
}

.chain-reaction__desc {
font-size: 13px;
color: #3a3a3a;
line-height: 1.55;
}

.chain-reaction__arrow {
text-align: center;
margin: 0 0 0 0;
color: #d0d0ca;
font-size: 18px;
line-height: 1;
padding: 0 0 0 0;
}

/* color variants */
.dot-1 { background: #ef9f27; }
.dot-2 { background: #d07020; }
.dot-3 { background: #b84c1c; }
.dot-4 { background: #a32d2d; }
.dot-5 { background: #d20503; }








/* ── Divider ─────────────────────────────────────────────────────────────── */

.divider {
border: none;
border-top: 1px solid #e8e8e4;
margin: 2.5rem 0;
}

/* Download button */
.jl-download-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: #1C3A28 !important; 
color: #ffffff !important;
font-family: inherit;
font-size: 15px;
font-weight: 600;
line-height: 1;
padding: 14px 24px;
border-radius: 6px;
text-decoration: none !important;
border: 2px solid transparent !important;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease !important;
white-space: nowrap !important;
}

.jl-download-btn:hover,
.jl-download-btn:focus {
background-color: #d20503 !important; 
border-color: #d20503 !important;
color: #ffffff !important;
text-decoration: none !important;
outline: none !important;
}

.jl-download-btn:active {
transform: translateY(1px);
}

.jl-download-btn svg {
flex-shrink: 0;
}

.jl-download-wrap {
margin: 28px 0;
}

.jl-download-caption {
display: block;
margin-top: 8px;
font-size: 13px;
color: #6B7280;
}


/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq-section {
margin-top: 3.5rem;
border-top: 1px solid #e8e8e4;
padding-top: 2rem;
}

.faq-label {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #757575;
margin-bottom: 1.5rem;
}

.faq-item {
border-bottom: 1px solid #e8e8e4;
}

.faq-q {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: 700;
color: #1a1a1a;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
gap: 1rem;
user-select: none;

}

.faq-q:hover { color: #181818; }

.faq-toggle {
font-size: 22px;
font-weight: 300;
color: #757575;
flex-shrink: 0;
line-height: 1;
transition: transform 0.18s;
font-family: Arial, Helvetica, sans-serif;
}

.faq-a {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.7;
color: #181818;
padding: 0 2rem 1.1rem 0;
display: none;
}

.faq-item.open .faq-a { display: block; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }

/* ── Author block ────────────────────────────────────────────────────────── */

.author-block {
margin-top: 3rem;
border-top: 3px solid #e8e8e4;
padding-top: 1.5rem;
}

.author-name {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 0.4rem;
}

.author-desc {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #555555;
line-height: 1.65;
margin-bottom: 0.75rem;
}

.cta-link {
display: inline-block;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 700;
color: #185fa5;
text-decoration: none;
}

.cta-link:hover { text-decoration: underline; }


.purpose-block {
margin: 1.5rem 0 0;
border: 1px solid #e8e8e4;
border-radius: 6px;
overflow: hidden;
}
.purpose-block__grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0;
}
.purpose-block__col {
padding: 1rem 1.1rem;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.6;
border-right: 1px solid #e8e8e4;
}
.purpose-block__col:last-child { border-right: none; }
.purpose-block__col-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #631212;
margin-bottom: 0.6rem;
}
.purpose-block__col ul {
padding-left: 0;
list-style: none;
margin: 0;
}
.purpose-block__col ul li {
position: relative;
padding-left: 1rem;
margin-bottom: 0.45rem;
color: #1a1a1a;
}
.purpose-block__col ul li::before {
content: '';
position: absolute;
left: 0;
top: 0.6em;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #d0d0ca;
}
@media (max-width: 640px) {
.purpose-block__grid { grid-template-columns: 1fr; }
.purpose-block__col { border-right: none; border-bottom: 1px solid #e8e8e4; }
.purpose-block__col:last-child { border-bottom: none; }
}

.base-layer {
background: #f9f9f9;/*f5f5f3*/
border: 1px solid #e8e8e4;
border-radius: 6px;
padding: 1.25rem 1.5rem;
margin: 2rem 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.65;
}
.base-layer__title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: #af0000;
margin-bottom: 0.75rem;
}
.base-layer__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem 2rem;
}
.base-layer__col-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #555555;
margin-bottom: 0.5rem;
}
.base-layer ul {
padding-left: 0;
list-style: none;
margin: 0;
}
.base-layer ul li {
position: relative;
padding-left: 1rem;
margin-bottom: 0.4rem;
color: #1a1a1a;
}
.base-layer ul li::before {
content: '';
position: absolute;
left: 0;
top: 0.6em;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #d20503;
}
@media (max-width: 520px) {
.base-layer__grid { grid-template-columns: 1fr; }
}

.numbered_list-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #1a1a1a;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
margin-right: 0.5rem;
vertical-align: middle;
position: relative;
top: -2px;
}

.how-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
margin: 1.5rem 0;
}
.how-box {
background: #fdfdfd;
border: 1px solid #e8e8e4;
border-radius: 6px;
padding: 1rem 1.1rem;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.55;
}
.how-box-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #382000;
margin-bottom: 0.4rem;
}
.how-box.full { grid-column: span 2; }
@media (max-width: 520px) {
.how-grid { grid-template-columns: 1fr; }
.how-box.full { grid-column: span 1; }
}


/* Tip box — lighter than callout */
.tip-box {
background: #f0f5f1;
border-left: 3px solid #3b6d11;
border-radius: 0 6px 6px 0;
padding: 1rem 1.25rem;
margin: 1.5rem 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.65;
color: #1a1a1a;
}
.tip-box-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: #142b00;/*3b6d11*/
margin-bottom: 0.4rem;
}
/* Example box */
.example-box {
background: #f5f5f3;
border: 1px solid #e8e8e4;
border-radius: 6px;
padding: 1rem 1.25rem;
margin: 1.5rem 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.65;
color: #1a1a1a;
}
.example-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
color: #854f0b;
margin-bottom: 0.4rem;
}




/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) { 
#main, .main { grid-template-columns: 200px 1fr; padding: 0 1vw; }
}

@media (max-width: 770px) { 
#main, .main { grid-template-columns: 1fr; padding: 0 1vw; } 
.page-toc { display: none; }
}


@media (max-width: 640px) {
.page-toc { display: none; }
}

@media (max-width: 520px) {
.scenario-grid { grid-template-columns: 1fr; }
.blog-wrap { font-size: 17px; }
}