:root {
    --bg-color: #DAD7CD;       /* Bone */
    --text-color: #2D2D2D;     /* Off-Black */
    --accent-color: #344E41;   /* Deep Green */
    --card-bg: #E8E6DF;        /* Slightly lighter bone for cards */
    --hover-color: #A3B18A;    /* Sage Green */
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Space Mono', monospace;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 2rem;
}

main {
    flex: 1; /* This makes the main section grow to fill any empty void */
}

/* --- Layout --- */
.container {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Index/Hub Header --- */
header {
    text-align: center;
    
    /* 1. The Box Shape (Matches your cards) */
    margin-bottom: 3rem; /* Spacing below the header */
    padding: 4rem 2rem;  /* generous padding to let the logo breathe */
    border-radius: 16px;
    
    /* 2. Remove the old divider line */
    border-bottom: none; 
    
    /* 3. The Bone Vellum Effect */
    /* We use a high opacity (0.9) to ensure the logo is readable */
    background-image: linear-gradient(rgba(218, 215, 205, 0.9), rgba(218, 215, 205, 0.8)), url('images/bg_header.jpeg');
    background-size: cover;
    background-position: center;
    
    /* 4. Subtle definition */
    border: 1px solid rgba(52, 78, 65, 0.1); /* Very faint green border */
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Tiny lift */
}

h1 {
    font-size: 2.5rem;
    letter-spacing: -1px;
    margin-bottom: 0.5rem;
}

.subtitle {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}

/* --- The Grid --- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
 }

/* --- Cards --- */
.card {
    background: var(--card-bg);
    border: 1px solid var(--text-color);
    padding: 2rem;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 16px;    /* NEW: Softens the corners */
    overflow: hidden;       /* NEW: Ensures the background image clips perfectly to the curve */
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 4px 4px 0px var(--accent-color);
    border-color: var(--accent-color);
}

.card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    border-style: dashed;
}

.card.disabled:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--text-color);
}

.card-header {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    color: var(--accent-color);
    font-weight: 700;
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.card-desc {
    font-size: 0.9rem;
    opacity: 0.9;
}

.status-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.7rem;
    border: 1px solid var(--text-color);
    padding: 2px 6px;
    border-radius: 4px;
    color: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
    background-color: rgba(218, 215, 205, 0.3); /* Semi-transparent background */
}

/* --- Full Width Action Card --- */

/* 1. The Layout Magic */
.full-width-card {
    grid-column: 1 / -1; /* This command forces the card to span ALL columns */
    
    /* Optional: Center the text for a "Billboard" effect */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 250px; /* Make it a bit taller/more substantial */
}

/* --- CARD BACKGROUND UPDATES --- */

/* Base settings for all image cards */
.card-bg-style {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: multiply;    /* This is the magic sauce: It blends the Green Color with the Image */
    background-color: #344E41;        /* The fallback color if image fails */
    color: #FFFFFF;
    transition: all 0.3s ease;
}

/* Hover Effect: Brighten slightly and lift */
.card-bg-style:hover {
    background-blend-mode: multiply;
    /* We just shift the card up, we don't change the background-image anymore.
       Instead, we use a box-shadow inset to darken it cleanly. */
    box-shadow: inset 0 0 0 200px rgba(0,0,0,0.2), 0 10px 20px rgba(0,0,0,0.3);
    
    transform: translateY(-5px);
}

/* Specific Backgrounds for each card */
/* We use a lighter gradient here so the photo shows through clearly */
.shop-card {
    /* 70% Opacity Green -> allows texture to show */
    background-image: linear-gradient(rgba(52, 78, 65, 0.1), rgba(52,78,65,0.1)), url('images/bg_shop2.jpg');
}

.guide-card {
    background-image: linear-gradient(rgba(52,78,65,0.1), rgba(52,78,65,0.1)), url('images/bg_guide.jpg');
}

.app-card {
    background-image: linear-gradient(rgba(52,78,65,0.1), rgba(52,78,65,0.1)), url('images/bg_app.jpg');
}

.community-card {
    background-image: linear-gradient(rgba(52,78,65,0.1), rgba(52,78,65,0.1)), url('images/bg_community.jpg');
    background-size: cover;
}

.action-card {
    /* You will need to upload an image named 'bg_action.jpg' to your images folder */
    background-image: linear-gradient(rgba(52,78,65,0.1), rgba(52,78,65,0.1)), url('images/bg_action2.jpeg');
}

.action-card2 {
    /* You will need to upload an image named 'bg_action.jpg' to your images folder */
    background-image: linear-gradient(rgba(52,78,65,0.1), rgba(52,78,65,0.1)), url('images/bg_action3.jpeg');
    align-items: center; /* Centers the Button and Content horizontally */
    text-align: center;  /* Centers the text inside the paragraphs */
    /* FIX: Push it down so it clears the Sticky Header */
    margin-top: 150px; 
    
    /* Optional: Add some side margin if it's touching the screen edges on mobile 
    margin-left: 20px;
    margin-right: 20px;*/
}

/* Disable the "Dimming" effect for the Countdown Card */
.action-card2:hover {
    /* Reset the shadow to just a normal drop-shadow (removing the 200px inset) */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
    
    /* Optional: If you don't want it to move up either, add this: */
    /* transform: none !important; */
}

/* Optional: Ensure the countdown widget doesn't overflow */
.action-card2 .countdown-timer {
    max-width: 100%; 
}

/* Tweak the text width so it doesn't stretch too far on wide screens */
.action-card .card-desc {
    max-width: 600px;
    margin-top: 10px;
}

/* ---------------------------- */
/* --- Social Feedback Card --- */
/* ---------------------------- */
.feedback-card {
    /* 1. The "System" Background Look */
    background-image: linear-gradient(rgba(52,78,65,0.3), rgba(52,78,65,0.2)), url('images/bg_social2.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-blend-mode: multiply !important;
    background-color: #344E41 !important; /* Fallback */
    
    /* 2. Shape & Border */
    max-width: 750px;
    padding: 40px;
    border-radius: 16px; /* Matches other cards */
    border: 1px dashed rgba(218, 215, 205, 0.3) !important; /* Subtle dashed border */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    
    /* 3. Text Colors (Force Light Mode) */
    color: #E0E0E0 !important;
    text-align: center;
}

/* Force the links inside to be Bone/White */
.feedback-card a {
    color: #DAD7CD !important;
    transition: opacity 0.2s;
}

.feedback-card a:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* Make the "Platform Names" (Twitter/Insta) bright white */
.feedback-card strong, 
.feedback-card span.platform-name {
    color: #FFFFFF !important;
}

/* --- FORCE WHITE TEXT ON IMAGE CARDS --- */

/* Reset the Header (Protocol/Source) */
.card-bg-style .card-header {
    color: #A3B18A !important; /* Light Green Accent acts as a highlighter */
    border-bottom: 1px solid rgba(255,255,255,0.3); /* Subtle white divider */
}

/* Reset the Title (The Shop, The Guide) */
.card-bg-style .card-title {
    color: #FFFFFF !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Adds a shadow so it pops off the photo */
}

/* Reset the Description text */
.card-bg-style .card-desc {
    color: #E0E0E0 !important; /* Slightly off-white for readability */
}

/* Reset the Badges (Status/Join) - DISABLED
.card-bg-style .status-badge {
    color: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
    background-color: rgba(218, 215, 205, 0.3);
}
*/

/* --- return button --- */
.return-btn {
    display: inline-block;
    margin-top: 50px;
    background-color: #344E41; 
    color: #DAD7CD; 
    text-decoration: none; 
    padding: 15px 30px; 
    border-radius: 4px; 
    font-family: 'Space Mono', monospace; 
    font-weight: bold; 
    transition: all 0.2s ease;
    border: 2px solid #344E41;
}

.return-btn:hover {
    background-color: #DAD7CD;
    color: #344E41;
    transform: translateY(-2px);
}

.main-logo {
    max-width: 300px;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* =========================================
   GUIDE PAGE STYLES (Synced to Index)
   ========================================= */

/* Layout Container */
.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    padding-top: 150px; /* Space for Sticky Header */
    font-family: 'Space Mono', monospace; /* Ensures Font Consistency */
    color: var(--text-color);
    line-height: 1.7;
}

/* Brand Headers */
.guide-title {
    font-size: 2.5em;
    color: var(--accent-color);
    margin-bottom: 10px;
}

.guide-subtitle {
    font-size: 1.2em;
    color: var(--accent-color);
    font-weight: bold;
    margin-bottom: 50px;
    border-left: 4px solid var(--accent-color);
    padding-left: 15px;
    opacity: 0.8;
}

h2 {
    color: var(--accent-color);
    border-bottom: 2px solid var(--text-color);
    padding-bottom: 15px;
    margin-bottom: 25px;
    margin-top: 60px;
}

h3 {
    color: var(--accent-color);
    margin-top: 30px;
    font-weight: bold;
}

/* The "Disclaimer" Box 
.disclaimer-box {
    background-color: var(--card-bg);*/ /* Use Card BG 
    border: 1px solid var(--text-color);
    border-radius: 4px;
    padding: 20px;
    font-size: 0.8em;
    color: var(--text-color);
    margin-bottom: 50px;
}*/

/* The "Concept" Box */
.concept-box {
    background-color: var(--card-bg);
    color: var(--text-color);
    padding: 25px;
    border: 1px solid var(--text-color);
    border-radius: 4px;
    margin: 30px 0;
    border-left: 5px solid var(--accent-color);
}

.concept-title {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: var(--accent-color);
}

/* Terpene Cards Grid */
.terpene-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

.terpene-card {
    background: var(--card-bg);
    border: 1px solid var(--text-color);
    padding: 20px;
    border-radius: 4px;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
}

.terpene-name {
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1.2em;
    display: block;
}

/* Sticky Header (Guide Only) */
.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    
    /* THE VELLUM TEXTURE */
    /* Matches index.html perfectly */
    background-image: linear-gradient(rgba(218, 215, 205, 0.85), rgba(218, 215, 205, 0.8)), url('images/bg_header.jpeg');
    background-size: cover;
    background-position: center;
    
    /* Subtle Definition */
    border-bottom: 1px solid rgba(52, 78, 65, 0.1); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    
    z-index: 1000;
    text-align: center;
    padding-top: 15px; /* Slightly tighter than index for space */
    padding-bottom: 15px;
}

.nav-logo {
    max-width: 180px;
    height: auto;
    display: block;
    margin: 0 auto 15px auto;
}

.main-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 1.1em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    
    flex-wrap: wrap; /* Allows the nav to wrap on smaller screens */
}

.main-nav a {
    text-decoration: none;
    color: var(--text-color);
    opacity: 0.6;
    transition: opacity 0.2s;
}

.main-nav a:hover, 
.main-nav a.active {
    opacity: 1;
    border-bottom: 2px solid var(--accent-color);
}

.inactiveLink {
    pointer-events: none;
    cursor: default;
    color: gray; /* Optional: visual hint */
}

/* --- Action Page Hero Banner --- */

.action-hero-banner {
    display: block; /* Makes the link act like a box */
    text-decoration: none; /* Removes underline */
    
    /* The Background Image + Overlay */
    background-image: linear-gradient(rgba(52,78,65,0.3), rgba(52,78,65,0.4)), url('images/hero_action.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply; /* The "Moody" filter */
    background-color: #344E41;
    
    /* Box Styling */
    border-radius: 16px;
    padding: 60px 40px;
    margin-bottom: 50px;
    text-align: center;
    border: 1px solid rgba(52,78,65,0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    
    /* Animation */
    transition: all 0.3s ease;
}

/* Hover Effect */
.action-hero-banner:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    /* Lighten the overlay slightly on hover to reveal the art */
    background-image: linear-gradient(rgba(52,78,65,0.6), rgba(52,78,65,0.5)), url('images/hero_action.jpg');
}

/* Force Text Colors inside the Hero */
.action-hero-banner .guide-title {
    color: #FFFFFF !important;
    margin-bottom: 10px;
    margin-top: 0; /* Reset spacing */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.action-hero-banner .guide-subtitle {
    color: #DAD7CD !important; /* Bone color text */
    border-left: none; /* Remove the green vertical line from the standard subtitle */
    padding-left: 0;
    margin-bottom: 20px;
    font-weight: normal;
}

/* The tiny "Click to follow" hint */
.hero-subtext {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #A3B18A; /* Sage Green */
    font-weight: bold;
}

/* -------------------------------- */
/*   ACTION / MISSION PAGE STYLES   */
/* -------------------------------- */

.mission-box {
    background: #fff; /* or var(--card-bg) if you want it bone-colored */
    border: 2px solid var(--accent-color);
    padding: 40px;
    border-radius: 8px;
    margin-bottom: 40px;
    text-align: center;
    box-shadow: 4px 4px 0px rgba(52, 78, 65, 0.1);
}

.mission-stat {
    font-size: 3em;
    font-weight: bold;
    color: var(--accent-color);
    display: block;
    margin-bottom: 20px;
    line-height: 1;
}

.btn-large {
    background-color: var(--accent-color);
    color: #fff !important; /* Force white text */
    border: none;
    padding: 20px 40px;
    font-family: 'Space Mono', monospace;
    font-weight: bold;
    font-size: 1.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
    text-decoration: none;
    margin-top: 20px;
    border-radius: 4px;
    text-align: center;
    max-width: 600px;
}

.btn-large:hover {
    background-color: var(--hover-color); /* The Sage Green */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ------------------------------- */
/* --- NATIVE COUNTDOWN STYLES --- */
/* ------------------------------- */

.countdown-grid {
    display: grid;
    /* DESKTOP: 4 items in a row */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    width: 100%;
    max-width: 800px;
    margin: 40px auto;
}

.time-unit {
    /* NEW: Vertical Gradient (Dark Green -> Darker Green) */
    background: linear-gradient(180deg, rgba(52, 78, 65, 0.85) 0%, rgba(30, 45, 35, 0.95) 100%);
    
    padding: 20px 10px;
    border-radius: 8px;
    
    /* Slightly brighter border to frame the gradient */
    border: 1px solid rgba(218, 215, 205, 0.4); 
    
    /* Add a tiny shadow to give the buttons depth */
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.time-val {
    font-family: 'Space Mono', monospace;
    font-size: 3.5rem; /* HUGE NUMBERS */
    font-weight: bold;
    color: #dad7cd; /* Bone Color */
    line-height: 1;
}

.time-label {
    font-family: 'Space Mono', monospace;
    font-size: 0.9rem;
    color: #A3B18A; /* Sage Green */
    margin-top: 10px;
    letter-spacing: 2px;
}

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 600px) {
    .countdown-grid {
        /* MOBILE: Switch to 2x2 Grid (2 items per row) */
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px;
    }
    
    .time-val {
        font-size: 2.5rem; /* Still huge, but fits phone */
    }
}

/* =========================================
   GUIDE 2.0 MODULES
   ========================================= */

/* 1. The "Status Grid" (For ECS Functions) */
.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

/* Base Style for all 3 boxes */
.status-item {
    /* Layout */
    padding: 40px 20px; /* Taller for better impact */
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.3); /* Bright subtle border */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    
    /* Text Visibility Helpers */
    color: #F0F0F0; /* Bright white/grey text */
    text-shadow: 0 2px 4px rgba(0,0,0,0.9); /* Heavy shadow so text pops */
    
    /* Default Background Settings */
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply; /* The "Moody" System Filter */
    background-color: #344E41; /* Fallback Green */
    
    transition: transform 0.2s ease;
}

.status-item:hover {
    transform: translateY(-5px); /* Hop up slightly on hover */
}

.status-item strong {
    display: block;
    color: #E9C46A; /* Gold/Yellow for the "Alert" Title */
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

/* --- Specific Background Images --- */

/* 1. Temperature */
.status-temp {
    background-image: linear-gradient(rgba(52,78,65,0.4), rgba(52,78,65,0.4)), url('images/bg_sweat1.jpg');
    background-blend-mode: normal !important; 
    background-color: transparent !important;
    background-size: cover;
    background-position: center;
}

/* 2. Stress */
.status-stress {
    background-image: linear-gradient(rgba(52,78,65,0.4), rgba(52,78,65,0.4)), url('images/bg_stress.jpg');
    background-blend-mode: normal !important; 
    background-color: transparent !important;
    background-size: cover;
    background-position: center;
}

/* 3. Pain */
.status-pain {
    background-image: linear-gradient(rgba(52,78,65,0.4), rgba(52,78,65,0.4)), url('images/bg_pain.jpg');
    background-blend-mode: normal !important; 
    background-color: transparent !important;
    background-size: cover;
    background-position: center;
}

/* 2. The "Protocol Card" (For Dosage) */
.protocol-card {
    background-color: #344E41; /* Dark Green Background */
    color: #DAD7CD; /* Bone Text */
    border-radius: 16px;
    padding: 40px;
    margin: 40px 0;
    box-shadow: 0 10px 20px rgba(52, 78, 65, 0.3);
    position: relative;
    overflow: hidden;
}

/* A subtle texture for the protocol card */
.protocol-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 10px);
    pointer-events: none;
}

.protocol-step {
    border-left: 2px solid #DAD7CD;
    padding-left: 20px;
    margin-bottom: 30px;
    position: relative;
}

.protocol-step::before {
    content: ""; /* The little dot on the timeline */
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    background: #A3B18A;
    border-radius: 50%;
}

.protocol-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 5px;
    display: block;
}

/* --- The "Orchestra" / Synergy Box --- */
.orchestra-box {
    /* 1. Background Image & Overlay */
    background-image: linear-gradient(rgba(52,78,65,0.9), rgba(52,78,65,0.8)), url('images/bg_orchestra.jpg');
    background-size: cover;
    background-position: center;
    background-color: #344E41; /* Fallback */
    
    /* 2. Shape & Border */
    padding: 40px 30px;
    margin: 30px 0;
    border-radius: 12px;
    border-left: 6px solid #E9C46A; /* Gold Accent Bar */
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    
    /* 3. Text Styling */
    color: #DAD7CD; /* Bone Body Text */
    font-size: 1.05em;
}

/* Force the Titles (THC, CBD, Terpenes) to be Gold */
.orchestra-box strong {
    color: #E9C46A !important; 
    font-size: 1.1em;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block; /* Ensures the title sits on its own line */
    margin-bottom: 5px;
}

/* --- Guide Page Specifics --- */

/* 1. The Hero Background (Moves inline styles to CSS) */
.guide-hero {
    background-image: linear-gradient(rgba(52,78,65,0.3), rgba(52,78,65,0.2)), url('images/bg_guide.jpg') !important;
    cursor: default; /* Show regular mouse cursor, not a hand */
}

/* Disable the "Hops Up" animation since this isn't a button 
.guide-hero:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Keep shadow static 
    background-image: linear-gradient(rgba(52,78,65,0.8), rgba(52,78,65,0.7)), url('images/bg_guide.jpg') !important; /* Don't lighten on hover 
}*/

/* 2. The Disclaimer / Notice Box */
.disclaimer-box {
    /* Texture Background */
    background-image: linear-gradient(rgba(52,78,65,0.7), rgba(52,78,65,0.6)), url('images/bg_notice.jpeg');
    background-size: cover;
    background-position: center;
    
    /* Box Shape */
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 40px;
    
    /* Borders & Colors */
    border-left: 5px solid #E9C46A; /* Yellow/Gold alert stripe */
    border-right: 1px solid rgba(255,255,255,0.1);
    border-top: 1px solid rgba(255,255,255,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    
    color: #DAD7CD; /* Bone Text */
    font-size: 0.95em;
    line-height: 1.6;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.disclaimer-box strong {
    color: #E9C46A; /* Matches the yellow border */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- The "Solution" / Helping Hand Card --- */
.concept-solution {
    /* 1. The Image & Overlay */
    background-image: linear-gradient(rgba(52,78,65,0.05), rgba(52,78,65,0.05)), url('images/bg_helpingHand.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply; /* The "System" look */
    background-color: #344E41;
    
    /* 2. Box Shape */
    padding: 30px;
    border-radius: 12px;
    margin-top: 30px;
    
    /* 3. The "Technical" Border */
    border: 2px dashed rgba(218, 215, 205, 0.4); 
    
    /* 4. Text Styling */
    color: #DAD7CD; /* Bone Text */
    font-size: 1.05em;
    line-height: 1.6;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.concept-solution strong {
    color: #FFFFFF; /* Bright White for "The Solution:" */
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--accent-color);
    margin-right: 5px;
}

/* --------------------------- */
/* ------- FOOTER LINKS ------ */
/* --------------------------- */

footer {
    text-align: center;
    padding: 60px 20px;
    margin-top: 50px;
    border-top: 1px solid #eee; /* Subtle divider line */
}

.footer-links {
    line-height: 2;
    font-family: 'Space Mono', monospace;
    font-size: 0.9em;
    
    /* Flexbox makes them sit nicely in a row/wrap on mobile */
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 20px; /* Space between items */
}

/* The Individual Links (X, Insta, Reddit) */
.footer-links a {
    text-decoration: none;
    color: var(--accent-color); /* Uses your main green #344E41 */
    font-weight: bold;
    transition: opacity 0.2s ease;
}

.footer-links a:hover {
    opacity: 0.6; /* Slight fade on hover */
}

/* The Copyright Text */
footer p {
    color: #999; /* Muted gray */
    margin-top: 30px;
    font-size: 0.8em;
}

/* --- Mobile Tweaks --- */
.mobile-text {
  display: block;
}

.desktop-text {
    display: none;
}

@media (min-width:600px) {
    .community-card { background-size:140%; }
    .desktop-text {
        display: block; /* Shown only on larger screens */
    }
    .mobile-text {
        display: none; /* Hidden on larger screens */
    }    
}

@media (max-width: 600px) {
    h1 { font-size: 2rem; }
    body { padding: 1.5rem; }
    .grid { grid-template-columns: 1fr; }
    .main-nav {
        gap: 15px;
        font-size: 0.85em;
        padding-bottom: 5px;
    }
    .nav-logo { max-width: 140px; }   /* Shrink logo slightly on mobile */
    .action-card2 {
        /* On desktop it's 150px. On mobile, the header is taller (2 lines), 
           so we push it down further to clear it. */
        /*margin-top: 160px !important; */
        
        /* Ensure the card itself fits the screen */
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
}