.contentContainer {
max-width: 960px;
margin: 100px auto 0px auto;
padding: 20px;
}

/* Cap text measure for comfortable reading (~70 characters), independent of
   the wider container that tables/images/cards are allowed to use. */
.contentContainer h1,
.contentContainer h2,
.contentContainer h3,
.contentContainer h4,
.contentContainer p,
.contentContainer > ul,
.contentContainer > ol {
max-width: 80ch;
}

.contentContainer img {
max-width: 100%;
height: auto;
display: block;
margin: 1.5rem auto;
border-radius: var(--borderRadius);
box-shadow: var(--shadowLight);
}
.contentContainer figure { margin: 1.5rem 0; }
.contentContainer figcaption {
text-align: center;
font-size: 0.875rem;
color: var(--muted);
margin-top: 0.5rem;
}

.contentContainer .fullWidth { 
width: 100vw; 
margin-left: calc(-50vw + 50%); 
padding-left: calc(50vw - 50%); padding-right: calc(50vw - 50%); 
}

.contentContainer ul, ol {
margin: 1rem 0 1rem 1.5rem;
padding: 0;
list-style-type: none;
}

.contentContainer ul li, .contentContainer ol li {
margin: 0.1rem 0;
color: var(--clMuchDarker);
padding: 0 0 0.3rem 0;
/*line-height: 1.6;*/
}

.contentContainer ol > li {
counter-increment: item;
}

.contentContainer ul > li {
counter-increment: none; 
}


.contentContainer ol > li::before {
content: counter(item) "";
color: #ffffff;
font-weight: bold;
font-size: 1rem;
background: var(--clMonochrom3);
border-radius: 50%;
margin: 0 10px 0 0;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px;
}

.contentContainer ul li::before {
content: '\2022' !important;
color: var(--gold-2);
margin-right: 0.5rem;
font-size: 1.9rem;
line-height: 1;
position: relative;
top: 0.1em;
}

/* Nested lists: tighter spacing, smaller marker so hierarchy reads clearly */
.contentContainer li > ul,
.contentContainer li > ol {
margin: 0.5rem 0 0.5rem 1.25rem;
}
.contentContainer li > ul > li::before {
font-size: 1.1rem;
opacity: 0.7;
}


.contentContainer .hero {
background-color: var(--clMonochrom3) !important;
color: white !important;
padding: 5rem 0 !important;
text-align: center !important;
}

.contentContainer .hero h1 {
font-size: 2.5rem !important;
margin: 0 auto 1rem auto !important;
color: white !important;
max-width:990px;
}

.contentContainer .hero p {
font-size: 1.2rem !important;
max-width: 700px !important;
margin: 0 auto 2rem !important;
text-align: center !important;
}


.tocContainer{ 
transition: width 0.3s ease;
overflow: hidden;
max-height: 40vh;
overflow-y: auto;
width: fit-content;
}

.tocHeading{ 
cursor: pointer;
font-size: 19px;
position:sticky;
top:0;
z-index: 4;
padding: 5px;
display: block;
width: 100%;
background-color: var(--lightV01);
}

.tocNavigation{ 
display: none;
list-style: none;
}

.tocNavigation ul {
list-style: none;
padding: 0;
}

.tocNavigation li {
display: inline;
}

.contentContainer .tocNavigation li::before {
content: '' !important;
}

.tocNavigation a {
text-decoration: none !important;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.3s ease;
}

.tocNavigation a:hover {
background-color: var(--clMonochrom3);
color: white !important;
}

.tocNavigation li:not(:last-child):after {
content: "•";
margin: 0 0 0 10px;
color: var(--clAnalogous2);
}


.sticky{
background-color: #f9f9f9;
position: fixed;
top: 0px;
left: 0px;
width: auto !important;
padding-bottom:10px;
z-index: 5;
}




.ctaButton {
display: inline-block;
background-color: var(--accentC);
color: black;
padding: 0.8rem 1.5rem;
border: 1px solid var(--accentC);
border-radius: 5px;
text-decoration: none;
font-size: 1rem;
font-weight: bold;
transition: all 0.3s ease;
cursor:pointer;
}

.ctaButton:hover {
background-color: var(--accentC1);
color: white;
transform: translateY(-3px);
}


.contentContainer h1 {
font-size: 1.9rem;
color: #000000;
margin: 1rem 0 1rem 0;
padding-bottom: 0.5rem;
position: relative;
font-family:"Playfair Display",Georgia, serif;
}

.contentContainer h2 {
display: inline-block;
font-size: 1.4rem;
color: #000000;
text-align: left;
margin: 0.5rem 0 1rem 0;
padding-bottom: 0.6rem;
position: relative;
max-width: 100%; /* still wraps normally on narrow screens */
font-family:"Playfair Display",Georgia, serif;
}
.contentContainer h2::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background: linear-gradient(to right, var(--clComplementary) 0%, white 100%);
transition: background 0.3s ease;
z-index: 1;
}

.contentContainer h3 {
margin: 2rem 0 1rem 0;
padding-left: 2rem;
font-size: 1.1rem;
line-height: 1.6;
text-align: left;
font-weight: 600;
position: relative;
font-family:"Playfair Display",Georgia, serif;
}
.contentContainer h3::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 18px;
background-color: var(--clComplementary);
border-bottom-right-radius: 16px;
}


/* .contentContainer > h4 { /* Only for h4 that are direct children of .contentContainer */
.contentContainer h4:not(.resourceCard h4){
margin: 10px 10px 5px 10px;
line-height: 1.6;
text-align: center;
font-style: italic;
letter-spacing: 0.5px;
background: linear-gradient(135deg, var(--mainBg) 0%, var(--lightV01) 100%);
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}


.contentContainer hr {
clear: both;
border: 0;
height: 1px;
background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,.75),rgba(0,0,0,0));
margin: 20px;
}

.contentContainer p {
text-align: left;
margin: 0 0 15px 0;
/*line-height: 1.6;*/
}


.contentContainer a:not(.resourceGrid a) {
color: var(--clLighter);
text-decoration: underline;
text-underline-offset: 2px;
transition: color 0.3s ease-in-out;
}
.contentContainer a:hover {
color: var(--clDarker);
}
.contentContainer a:visited {
color: var(--clAnalogous1);
}
.contentContainer a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--accentC);
outline-offset: 2px;
}


.contentContainer .breadcrumbs{ 
font-size: 0.875rem;
}


.lastUpdated {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--lightV01);
border-left: 5px solid var(--accentC);
padding: 3px 15px;
margin-bottom: 20px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
width: fit-content;
}

.lastUpdated svg {
flex-shrink: 0;
color: var(--clMonochrom3);
}


/*Links to other pages START*/ 
.contentContainer .linksToOtherPages {
background-color: var(--lightV01);
border-radius: var(--borderRadius);
box-shadow: var(--shadowMedium);
padding: var(--defaultPadding);
margin: 2em 0;
}
.contentContainer .linksToOtherPages ul {
list-style-type: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5em;
}
.contentContainer .linksToOtherPages li {
background-color: var(--mainBg);
border-left: 4px solid var(--accentC);
border-radius: var(--borderRadius);
padding: 1.2em;
box-shadow: var(--shadowLight);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
}
.contentContainer .linksToOtherPages li:hover {
transform: translateY(-3px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
border-left-color: var(--accentC1);
}
.contentContainer .linksToOtherPages a {
color: var(--clLighter);
font-weight: 600;
font-size: 1.1em;
text-decoration: none;
margin-bottom: 0.5em;
display: block;
transition: color 0.2s ease;
}
.contentContainer .linksToOtherPages a:hover {
color: var(--accentC);
}
.contentContainer .linksToOtherPages li::before {
content: none !important;
}
.contentContainer .linksToOtherPages li::after {
content: "";
display: block;
width: 40px;
height: 3px;
background-color: var(--clComplementary);
margin: 0.5em 0;
opacity: 0.6;
}
.contentContainer .linksToOtherPages li a::after {
content: "→";
opacity: 0;
margin-left: 0.3em;
transition: opacity 0.2s ease, transform 0.2s ease;
display: inline-block;
}
.contentContainer .linksToOtherPages li:hover a::after {
opacity: 1;
transform: translateX(3px);
}
/*Links to other pages END*/ 


/** Links to other pages V01 START*/ 
/* ——— Resources ——— */
.resourcesHeading {
font-family: 'Fraunces', Georgia, serif;
font-size: clamp(1.6rem, 3vw, 2rem);
font-weight: 700;
color: var(--navy);
letter-spacing: -0.025em;
margin-bottom: 32px;
line-height: 1.25;
}

.resourceGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.resourceCard {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px 24px 24px;
transition: border-color 0.2s, box-shadow 0.25s, transform 0.25s;
position: relative;
overflow: hidden;
}
/*.resourceCard::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--gold), transparent 70%);
opacity: 0;
transition: opacity 0.25s;
}*/
.resourceCard:hover {
border-color: rgba(232, 155, 12, 0.35);
box-shadow: var(--shadow);
transform: translateY(-3px);
}
.resourceCard:hover::before { opacity: 1; }


.resourceCard h4 {
font-family: 'Fraunces', Georgia, serif;
font-size: 1.12rem;
font-weight: 600;
color: var(--navy);
line-height: 1.35;
letter-spacing: -0.015em;
margin-bottom: 10px;
}
.resourceCard > p { 
/* flex: 1;means grow to fill leftover vertical space. the <p> box becomes taller than its 3 lines of text */
font-size: 0.9rem;
/*color: var(--muted);*/
line-height: 1.55;
margin-bottom: 16px;
/* clamp to 3 lines */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
/* optional: helps some browsers */
text-overflow: ellipsis;
}


.resourceGrid a{ color: inherit; text-decoration: none; }

.resourceReadMore {
display: inline-flex;
margin-top: auto;   /* sticks to the bottom of the card */
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 600;
color: var(--gold-2);
letter-spacing: 0.01em;
transition: gap 0.2s, color 0.2s;
}
.resourceCard:hover .resourceReadMore {
gap: 10px;
color: var(--navy);
}
.resourceReadMore .arrow {
width: 14px;
height: 14px;
position: relative;
}
.resourceReadMore .arrow::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 10px;
height: 1.5px;
background: currentColor;
transform: translateY(-50%);
}
.resourceReadMore .arrow::after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 5px;
height: 5px;
border-right: 1.5px solid currentColor;
border-top: 1.5px solid currentColor;
transform: translateY(-50%) rotate(45deg);
}
/*Links to other pages V01 END*/ 



.tooltip {
position: relative;
display: inline-block;
border:0;
margin: 0 10px 0 0;
text-align: left;
}
.tooltip_info {
cursor:pointer;
width: 25px;
height: 25px;
border: 2px solid var(--clMonochrom3); 
border-radius: 50%;
position: relative;
display: inline-block;
}
.tooltip_info::before {
content: '';
position: absolute;
top: 1px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: var(--clMonochrom3);
border-radius: 50%; /* Small dot for top of "i" */
}
.tooltip_info::after {
content: '';
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 10px;
background: var(--clMonochrom3); 
border-radius: 2px;
}


.tooltiptext {
visibility: hidden;
background-color: #f7f7f7;
color: #000;
text-align: left;
border: 1px solid grey;
border-radius:3px;
padding: 3px;

position: absolute;
top:20px;
left:20px;
z-index: 1;
max-width: 250px;
height: auto;
transition: opacity 0.3s ease;
}


.tooltip_info:hover .tooltiptext {
visibility: visible;
}



.contactForm {
text-align: center;
margin: 0 auto;
}

.contactForm input[type="email"],
.contactForm input[type="text"],
.contactForm textarea, 
.calcContainer input 
{
width: 100%;
max-width: 400px; /* Set maximum width for input fields */
margin-bottom: 10px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}

.contactForm textarea {
resize: vertical;
}

.contactForm button, .calcContainer button {
padding: 10px 20px;
border: none;
border-radius: 7px;
background-color: #FF8C00;
color: #000000;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease;
}

.contactForm button:hover {
background-color: #FFD700;
}

.cfInitiallyHidden{ display: none; }
.contactForm.active {display: block; max-width:375px;}


.successMessage{ 
display:none;
text-align: center;
color: #006400;
font-weight: 600;
}
.messageSent{ 
background-color: Canvas;
/*color: var(--clAnalogous4);*/
color: CanvasText;
font-weight: bold;
text-align: center !important;
}
.errorMessage{ 
display:none;
text-align: center;
color: red;
font-weight: 400;
}
.messageSent, .successMessage, .errorMessage {
background: white;
width: fit-content;
margin: 5px auto;
padding: 20px;
}


input[type="checkbox"] { 
height:20px;
width:20px;
}

input[type="text"], input[type="number"], select { 
height:32px;
font-size: 16px;
font-weight: 500;
}

button, input[type="submit"] {
display: inline-block;
padding: 10px 16px;
font-size: 16px;
font-weight: 500;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
text-align: center;
width: auto;
min-width: 120px;
margin: 10px 0;
-webkit-appearance: none; /* Removes default styling in iOS */
}
button:hover, input[type="submit"]:hover {
background-color: var(--clMonochrom3);
color: white;
}
button:active, input[type="submit"]:active {
background-color: var(--clMonochrom2);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transform: translateY(1px);
}



.waitingSpinner {
display: flex;
align-items: center;
gap: 10px;
font-weight: bold;
color: #444;
font-family: sans-serif;
}
.waitingSpinner .waitingSpinnerLoader {
width: 16px;
height: 16px;
border: 3px solid #ccc;
border-top-color: #006400;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}








#ratioCalcForm label, .ratioCalcForm label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
#ratioCalcForm input[type="number"], .ratioCalcForm input[type="number"] {
width: 100%;
display: block;
padding: 12px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
}
#ratioCalcForm input[type="number"]:focus, .ratioCalcForm input[type="number"]:focus {
border-color: #4CAF50;
outline: none;
}

#ratioCalcForm select {
display: block; 
}


.liabilityDisclaimer{border:1px solid #ccc; padding:15px; background:#f9f9f9; margin:20px 0; border-left:5px solid red; font-size:14px; line-height:1.5; color:#333;}






.noteEl {
position: relative;
padding: var(--defaultPadding);
margin: 10px 0;
background-color: #e8f7f0;
border-left: 5px solid var(--clAnalogous3);
border-radius: var(--borderRadius);
}

.noteEl01 {
background: #fff6e9;
border-left: 4px solid var(--accentC);
padding: var(--defaultPadding);
font-style: italic;
border-radius: var(--borderRadius);
}

.cardEl {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 0;
margin: 20px 0;
list-style-type: none !important;
}
.cardEl li {
background-color: var(--mainBg);
border-radius: var(--borderRadius);
box-shadow: var(--shadowMedium);
padding: 20px !important;
margin: 20px 0 !important;
transition: transform 0.3s ease;
border: 1px solid rgba(44, 62, 80, 0.1);
width: calc(33.333% - 20px);
}
.contentContainer .cardEl li::before {
content: none !important;
}
.cardEl li:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.cardEl li a {
display: block;
padding: 5px;
color: #2c3e50;
text-decoration: none;
font-weight: 900;
text-align: center;
transition: color 0.3s ease;
}
.cardEl li a:hover {
color: #3498db;
}

.cardEl01 {
background: var(--mainBg);
border: 1px solid rgba(44, 62, 80, 0.15);
padding: var(--defaultPadding);
border-radius: var(--borderRadius);
box-shadow: var(--shadowLight);
margin: 1em 0;
}

/* Diagram Elements */
.contentContainer .diagramEl li {
list-style-type: decimal;
margin-left: 1em;
padding-left: 0.5em;
color: var(--clBase);
}
.contentContainer .diagramEl li::before { content: none !important; }

.contentContainer .diagramEl01 {
list-style: none !important;
padding-left: 0 !important;
counter-reset: diagram-counter !important;
}

.contentContainer .diagramEl01 li {
counter-increment: diagram-counter !important;
margin: 1em 0;
position: relative;
padding-left: 2em !important;
font-size: 1rem !important;
}

.contentContainer .diagramEl01 li::before {
content: counter(diagram-counter) "" !important;
position: absolute;
left: 0;
background: var(--clAnalogous3);
color: white;
font-size: 1rem !important;
font-weight: bold;
width: 1.5em;
height: 1.5em;
text-align: center;
border-radius: 50%;
line-height: 1.5em;
}


table {
border-collapse: collapse;
width: 100%;
margin: 1em 0;
background: var(--mainBg);
border: 1px solid rgba(44, 62, 80, 0.15);
text-align: left;
border-radius: var(--borderRadius);
overflow: hidden;
}

table th, table td {
border: 1px solid rgba(44, 62, 80, 0.15);
padding: 0.5em 1em;
line-height: 1.65;
}

table th {
background-color: var(--clBase);
color: white;
}


.successEl, .warningEl, .errorEl {
padding: var(--defaultPadding);
border-radius: var(--borderRadius);
margin: 1em 0;
}

.successEl { 
background: #e8f7f0; 
color: var(--clAnalogous3); 
border-left: 4px solid var(--clAnalogous3);
}

.warningEl { 
background: #fff6e9; 
color: var(--accentC); 
border-left: 4px solid var(--accentC);
}

.errorEl { 
background: #fbeaec; 
color: var(--clAnalogous2); 
border-left: 4px solid var(--clAnalogous2);
}

.tipEl {
background: #e8f0fa;
border-left: 4px solid var(--clMuchLighter);
padding: var(--defaultPadding);
border-radius: var(--borderRadius);
font-style: italic;
}


.contentContainer .timelineEl {
list-style-type: none;
position: relative;
padding-left: 30px;
}

.contentContainer .timelineEl:before {
content: '';
position: absolute;
left: 0;
top: -5px;
height: calc(100% + 5px);
width: 4px;
background: var(--clComplementary);
}

.contentContainer .timelineEl li {
position: relative;
margin-bottom: 20px;
padding-left: 20px;
}

.contentContainer .timelineEl li:before {
content: '' !important;
position: absolute;
left: -15px;
top: -5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: white;
border: 4px solid var(--clComplementary);
}

.contentContainer .timelineEl01 {
list-style: none;
padding-left: 0;
border-left: 2px solid var(--clComplementary);
margin: 1em 0;
}

.contentContainer .timelineEl01 li {
padding: 0.5em 1em;
position: relative;
}

.contentContainer .timelineEl01 li::before {
content: '';
position: absolute;
left: -8px;
top: 0.7em;
width: 12px;
height: 12px;
background: var(--clComplementary);
border-radius: 50%;
}

.questionEl {
background: #e8f0fa;
border-left: 4px solid var(--clAnalogous1);
padding: var(--defaultPadding);
border-radius: var(--borderRadius);
font-weight: 500;
}


.badgePrimary, .badgeSuccess, .badgeWarning, .badgeDanger {
display: inline-block;
padding: 4px 8px;
border-radius: 50px;
font-size: 14px;
font-weight: bold;
margin-right: 5px;
}

.badgePrimary { background: var(--clBase); color: white; }
.badgeSuccess { background: var(--clAnalogous3); color: white; }
.badgeWarning { background: var(--accentC); color: white; }
.badgeDanger { background: var(--clAnalogous2); color: white; }


.codeBlock {
background-color: var(--clDarker);
color: #f8f8f2;
padding: 15px;
border-radius: var(--borderRadius);
overflow-x: auto;
font-family: 'Courier New', Courier, monospace;
margin: 20px 0;
border: 1px solid var(--clMuchDarker);
}


.formulaBox {
background-color: var(--light);
border-left: 4px solid var(--clMonochrom2);
padding: 12px 16px;
margin: 20px 0;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.formulaLabel {
font-weight: bold;
color: var(--clDarker);
}
.formulaExpression {
font-style: italic;
}


.quoteEl {
border-left: 4px solid var(--clComplementary);
margin: 20px 0;
padding: 10px 20px;
font-style: italic;
background-color: rgba(211, 193, 175, 0.1);
position: relative;
border-radius: var(--borderRadius);
}

.quoteEl:before {
content: '"';
font-size: 60px;
color: var(--clComplementary);
opacity: 0.2;
position: absolute;
left: 10px;
top: -15px;
}

.highlightEl {
background-color: rgba(255, 140, 0, 0.15);
padding: 0 0.2em;
border-radius: 3px;
}

.definitionEl {
background: #e8f0fa;
border-left: 4px solid var(--clLighter);
padding: 0.8em;
margin: 1em 0;
border-radius: var(--borderRadius);
}

.fileboxEl {
background: rgba(211, 193, 175, 0.2);
border: 1px solid var(--clComplementary);
padding: 0.5em 1em;
display: inline-block;
border-radius: var(--borderRadius);
font-family: monospace;
}

.callout {
background: #e8f0fa;
padding: var(--defaultPadding);
border-left: 4px solid var(--clLighter);
margin: 1em 0;
border-radius: var(--borderRadius);
}

.calloutService {
background: linear-gradient(135deg, var(--lightV01) 0%, #fff 100%);
border: 1px solid var(--line);
border-left: 5px solid var(--gold);
border-radius: var(--radius);
padding: 1.75rem 2rem;
margin: 1.5rem 0 2.5rem 0;
box-shadow: var(--shadowLight);
}
.calloutService h2 {
margin-top: 0;
font-size: 1.3rem;
}
.calloutService > p:last-of-type {
margin-bottom: 1.25rem;
}

.contentContainer .featureList {
list-style-type: none;
padding: 0;
}
.contentContainer .featureList li {
padding: 10px 0 10px 35px;
position: relative;
}
.contentContainer .featureList li:before {
content: '✓' !important;
color: var(--clAnalogous3);
font-weight: bold;
position: absolute;
left: 0;
width: 25px;
height: 25px;
text-align: center;
line-height: 2rem;
background-color: rgba(43, 79, 79, 0.1);
border-radius: 50%;
}

.emphasizedP {
background-color: var(--clComplementary);
padding: 20px !important;
margin: 20px !important;
border-radius: 8px;
position: relative; /* Needed for proper layering with ::before */
z-index: 2; /* Keep the content above the background */
}
.emphasizedP::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
background-color: var(--lightV01);
transform: rotate(-1deg);
border-radius: 12px;
z-index: -1;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}




@media only screen and (max-width: 768px) {

.cardEl li {
width: 100%;
}

.contentContainer .linksToOtherPages ul {
grid-template-columns: 1fr;
}
.contentContainer .linksToOtherPages {
padding: 1em;
}

.contentContainer {
margin-top: 80px; /* fixed header is shorter once mobile nav wraps */
}

.resourceGrid { grid-template-columns: 2fr; grid-template-columns: repeat(2, 1fr); }

}


@media (max-width: 480px) {
.resourceGrid { grid-template-columns: 1fr; }

}