/* Global Styles & Variables */
:root {
    --off-black: #070707;
    --dark-green: #2A7025;
    --dark-green-low-opacity: rgba(42, 112, 37, 0.15);
    --light-green: #DFEADE;
    --gray-text: #4B5563;
    --gray-small-text: #7D7D7D;
    --gray-border: #EEEEEE;
    --white: #FFFFFF;
    --red: #D44825;
    --red-low-opacity: rgba(212, 72, 37, 0.15);
    --blue-protein: #72AAFF;
    --blue-protein-bg: rgba(114, 170, 255, 0.15);
    --purple-calories: #BD67EF;
    --purple-calories-bg: rgba(189, 103, 239, 0.15);
    --card-bg: #FFFFFF;
    --card-shadow: 0px 0px 120px rgba(0, 0, 0, 0.07);
    --avatar-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.10);

    --font-inter: 'Inter', 'system-ui', sans-serif;
}

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

html {
    color-scheme: light; /* Force light mode for browser UI elements */
}

body {
    font-family: var(--font-inter);
    background-color: #F3F3F3; /* Match Figma background */
    color: var(--off-black);
    line-height: 1.6;
    font-size: 16px; /* Base font size */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-inter);
    font-weight: 700;
    line-height: 1.2; /* Adjust as needed */
    color: #020817; /* Default heading color from Figma sections */
}
h3 {
    letter-spacing: -0.4px;
}

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

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px; /* As requested */
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;  
    padding-right: 32px; 
}

/* Header Styles */
.site-header {
    position: fixed;
    width: 100%;
    z-index: 10;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(20px);
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px 16px 32px;
    transition: background 0.3s ease;
}

.logo {
    font-family: var(--font-inter);
    font-size: 32.06px;
    font-weight: 700;
    color: var(--dark-green);
    line-height: 43.28px; 
    letter-spacing: -1.28px;
    /* text-box-trim: trim-both; /* Not standard CSS, ignore */
    /* text-box-edge: cap alphabetic; /* Not standard CSS, ignore */
}

.main-nav {
    /* Figma shows nav centered, let's achieve this if it's not too complex */
    /* For now, default flex behavior from header-container is fine */
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    display: none;
}

.main-nav ul {
    display: flex;
    gap: 32px; /* Match Figma gap */
    align-items: center; /* Vertically align items */
}

.main-nav a {
    font-family: var(--font-inter);
    font-size: 15px;
    font-weight: 600;
    color: var(--off-black);
    line-height: 24px; 
    letter-spacing: -0.30px;
    transition: color 0.3s ease;
    display: block; /* Ensure height is respected for alignment */
}

.main-nav a:hover {
    color: var(--dark-green);
}

.app-buttons {
    display: flex;
    gap: 12.02px; /* Match Figma gap */
    align-items: center; /* Vertically align items */
}

.app-buttons img {
    /* Figma: width: 122.93px; height: 41.18px and width: 137.94px; height: 41.20px */
    /* Current CSS uses height: 41px and width: auto. This is fine. */
    height: 41.18px; /* Be precise */
    width: auto;
}
.app-buttons .google-play-button img {
    height: 41.20px; /* Be precise */
}


/* Hero Section Styles */
.hero-section {
    min-height: 800px;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevent stat cards from overflowing weirdly */
    /* background: linear-gradient(0deg, #FF0000 0%, #00FF00 100%), #F3F3F3; /* Figma background, simplified to just #F3F3F3 from body */
}

.hero-container {
    display: flex;
    align-items: center;
    gap: 16px; /* Match Figma gap */
    max-width: 1200px; /* Figma max-width */
    /* padding-left: 32px; padding-right: 32px; already on .container */
}

.hero-content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px; /* Match Figma gap */
}

.hero-title {
    font-size: 44px;
    font-weight: 00;
    line-height: 56px; 
    letter-spacing: -2.5px;
    color: var(--off-black); /* Default part of title */
}

.hero-title .text-dark-green {
    color: var(--dark-green);
}

.hero-subtitle {
    font-size: 17px;
    font-family: var(--font-inter);
    font-weight: 400;
    line-height: 29px; 
    color: #4B5563; /* Match Figma color */
    letter-spacing: -0.37px;
    max-width: 513px; /* Match Figma width */
}

.hero-app-buttons {
    display: flex;
    gap: 16px; /* Match Figma gap */
}

.hero-app-buttons img {
    height: 55px; /* Match Figma height */
    width: auto; /* Maintain aspect ratio */
}


.hero-social-proof {
    display: flex;
    align-items: center;
    gap: 16px; /* Match Figma gap */
}

.user-avatars {
    /* display: flex; /* Not needed due to absolute positioning of children */
    position: relative;
    width: 108px; /* (36px * 4) - (12px * 3 overlaps) = 108px. Or 72px (last left) + 36px (width) */
    height: 36px;
}

.user-avatars img {
    width: 36px;
    height: 36px;
    border-radius: 9999px; /* Figma uses this for circle */
    /* border: 2px solid var(--white); /* Figma: outline: 2px white solid; outline-offset: -2px; */
    outline: 2px solid var(--white);
    outline-offset: -2px; /* Creates the inner border effect */
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.10); 
    position: absolute;
    top: 0;
    background: white; /* Figma shows background for avatar container */
    padding: 2px; /* Figma has padding on the div wrapping img */
    /* The actual image inside the padded div should be smaller if padding is on the wrapper */
    /* For simplicity, assuming the src image is already 32x32 and the 36x36 is the outer dimension */
    object-fit: cover; /* If images are not perfectly square */
}

.user-avatars img:nth-child(1) { left: 0px; z-index: 4; }
.user-avatars img:nth-child(2) { left: 24px; z-index: 3; }
.user-avatars img:nth-child(3) { left: 48px; z-index: 2; }
.user-avatars img:nth-child(4) { left: 72px; z-index: 1; }

.hero-social-proof p {
    font-size: 15px;
    font-family: var(--font-inter);
    font-weight: 400;
    line-height: 20px; 
    color: #374151; 
}

.hero-image-column {
    flex: 1 1 0;
    position: relative; /* Context for absolute positioned cards */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px; 
    align-self: stretch; 
    /* min-height: 552px; /* Approximate height needed for image + cards - let content define */
}

.hero-main-image {
    width: auto; 
    height: auto; 
    object-fit: cover;
}

/* Stat Cards */
.hero-stat-card {
    position: absolute;
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    border-radius: 16px; /* Default, some are 12px */
    padding: 16px; /* Default, some are 8.97px */
    display: flex;
    align-items: center;
    gap: 16px; /* Default gap */
    z-index: 5; /* Ensure cards are above image */
    overflow: hidden; 
}

.stat-card-icon-bg {
    width: 31.89px;
    height: 31.89px;
    border-radius: 10px;
    background: var(--dark-green-low-opacity);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    position: relative; /* For icon positioning */
}
.stat-card-icon-bg.purple-bg { background: var(--purple-calories-bg); }
.stat-card-icon-bg.blue-bg { background: var(--blue-protein-bg); }

/* Placeholder divs for icons - replace with actual icons/SVGs later */
/* Using ::before pseudo-elements for simple block icons */
.stat-card-icon-bg div[class^="stat-icon-"] {
    position: absolute; /* Centered within parent */
    background-color: var(--dark-green); /* Default */
}

.stat-icon-nutrients { width: 14px; height: 13px; left: 9px; top: 10.41px; background-color: #2A7025; }
.stat-icon-vitamins { width: 13px; height: 16px; left: 9px; top: 8.41px; background-color: #2A7025; }
.stat-icon-calories { width: 11.96px; height: 14.95px; left: 9.97px; top: 7.97px; background-color: #BD67EF; }
.stat-icon-protein { width: 11.96px; height: 15.94px; left: 9.97px; top: 7.97px; background-color: #72AAFF; }
.stat-icon-minerals { width: 12px; height: 16px; left: 10px; top: 8.41px; background-color: #2A7025; }


.stat-card-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 2px; 
}

.stat-card-title {
    font-family: var(--font-inter);
    font-size: 15px;
    font-weight: 600;
    line-height: 20.25px; 
    color: #3E3E3E;
    letter-spacing: -0.45px;
    margin-bottom: 0; /* Remove default margin if any */
}

.stat-card-value {
    font-family: var(--font-inter);
    font-size: 13px;
    font-weight: 400;
    line-height: 16.20px; 
    color: #7D7D7D; 
    letter-spacing: -0.24px;
}

.stat-card-number {
    font-family: var(--font-inter);
    font-size: 15px;
    font-weight: 600;
    line-height: 20.25px; 
    color: #3E3E3E;
    letter-spacing: -0.45px;
    margin-left: auto; /* Pushes number to the right if it's a direct child of flex .hero-stat-card */
}
/* If .stat-card-number is not meant to be pushed, remove margin-left: auto and ensure its container handles layout */
.hero-stat-card > .stat-card-number { /* If it's a direct child */
    margin-left: auto;
}

.stat-card-nutrients { top: 58.34px; right: 30px; width: 244px; justify-content: space-between; }
.stat-card-vitamins { top: 458.34px; left: 227px; width: 238px; justify-content: space-between; }

.stat-card-calories {
    top: 308.34px; left: 421px; width: 162px;
    display: flex; flex-direction: row; align-items: center;
    gap: 8px; padding: 8.97px; border-radius: 12px;
}
.stat-card-protein {
    top: 90px; left: 28px; width: 162px;
    display: flex; flex-direction: row; align-items: center;
    gap: 8px; padding: 8.97px; border-radius: 12px;
}
.stat-card-minerals { top: 380px; left: -98px; width: 242px; justify-content: space-between; }

/* Smaller cards need specific title font size and no .stat-card-value */
.stat-card-calories .stat-card-title,
.stat-card-protein .stat-card-title {
    font-size: 14.95px;
    line-height: 20.18px;
    letter-spacing: -0.45px;
}


.feature-container {
    /* The container inside features-section might not need specific styles if card takes full width */
    /* The Figma structure is often: section > div.container (1200px) > div.feature-card (1136px) */
    /* So the .container class handles the 1200px width and side padding. */
    padding-top: 32px;
    padding-bottom: 32px;
}

.feature-card {
    background: var(--white);
    border-radius: 32px;
    display: flex;
    align-items: center;
    gap: 64px;
    overflow: hidden;
    height: 540px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

.feature-card-image-left {
    flex-direction: row;
}

.feature-card-image-right {
    flex-direction: row-reverse;
}

.feature-card-img {
    flex: 1 1 0;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
    min-width: 0;
    min-height: 0;
}

.feature-card-text-col {
    flex: 1 1 0;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0 64px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
}

.feature-card-image-right .feature-card-text-col {
    padding: 0 0 0 64px;
    align-items: center;
}

.feature-image-container {
    flex: 1 1 0;
    align-self: stretch; 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-image {
    border-radius: 19.89px; 
    object-fit: contain; /* Or cover, depending on desired effect */
}

.phone-mockup-1 {
    width: 379.75px; 
    height: 717px;   
    /* The Figma design has negative top margin, we can achieve this with relative positioning or by allowing overflow and adjusting container */
    position: relative; /* If needed for fine-tuning */
    top: -40px; /* Match Figma offset */
    left: 46px; /* Match Figma offset */
    top: -40px; /* Match Figma offset */
}

.phone-mockup-2 {
    width: 280.94px; 
    height: 610.62px; 
    position: absolute; /* Figma uses absolute positioning within a 343.79px wide div */
    left: 30.88px; 
    top: 19.98px;  
    border-radius: 42.99px; 
    /* The parent div in Figma for phone-mockup-2 is:
       width: 343.79px; height: 650px; left: 64.20px; top: -34px; position: absolute;
       We need to replicate this structure or simplify.
       For now, assuming .feature-image-container acts as this positioned div.
    */
}


.phone-mockup-3 { /* Track more than 50 nutrients */
    width: 289.15px; 
    height: 628.47px; 
    position: absolute;
    left: 31.78px; 
    top: 20.56px;  
    border-radius: 44.25px; 
}

.phone-mockup-4 { /* Easily spot and fix nutrient deficiencies */
    width: 277.05px; 
    height: 602.17px; 
    position: absolute;
    left: 30.45px; 
    top: 19.70px;  
    border-radius: 42.39px; 
}

.phone-mockup-5 { /* Accurate information from a trusted database */
    width: 280.94px; 
    height: 610.62px; 
    position: absolute;
    left: 30.88px; 
    top: 19.98px;  
    border-radius: 42.99px; 
}

.phone-mockup-6 { /* Easily track calories, protein, fat & carbs */
    width: 312.93px; 
    height: 680.14px; 
    position: absolute;
    left: 34.40px; 
    top: 22.26px;  
    border-radius: 47.88px; 
}
.feature-image-container.phone-holder-2 { /* For phone-mockup-2 */
    width: 343.79px; height: 650px; left: 64.20px; top: -34px; position: absolute;
}
.feature-image-container.phone-holder-3 { /* For phone-mockup-3 */
    width: 353.84px; height: 669px; left: 59.17px; top: -34px; position: absolute;
}
.feature-image-container.phone-holder-4 { /* For phone-mockup-4 */
    width: 339.03px; height: 641px; left: 66.58px; top: -34px; position: absolute;
}
.feature-image-container.phone-holder-5 { /* For phone-mockup-5, same as 2 */
    width: 343.79px; height: 650px; left: 64.20px; top: -34px; position: absolute;
}
.feature-image-container.phone-holder-6 { /* For phone-mockup-6 */
    width: 382.93px; height: 724px; left: 44.63px; top: -34px; position: absolute;
}
/* Note: Using these helper classes on .feature-image-container would require HTML changes.
   For now, I'll keep the phone mockups centered within their flex container and apply their
   internal absolute positioning relative to that. The visual result might differ from Figma's
   pixel-perfect offsets without replicating the exact parent div structure.
   The current .feature-image-container is flex: 1 1 0; this will conflict with fixed widths.
   Let's simplify: phone mockups will be centered in their half of the .feature-card.
   The Figma offsets (e.g. left: 46px for mockup-1) are relative to the start of the image container.
   The current .feature-image class is on the img itself.
*/


.feature-content {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    justify-content: center; /* Vertically center content in its space */
    gap: 24px; /* Match Figma gap */
}

.feature-title {
    font-family: var(--font-inter);
    font-size: 42px;
    font-weight: 700;
    line-height: 51.66px; 
    color: #020817; /* Specific color from Figma */
    letter-spacing: -1.68px;
    align-self: stretch; 
}

.feature-description {
    font-family: var(--font-inter);
    font-size: 14.75px;
    font-weight: 400;
    line-height: 24px; 
    color: var(--gray-small-text); /* Match Figma var(--Gray-small-text, #7D7D7D) */
    letter-spacing: -0.29px;
    align-self: stretch; 
}

.feature-description .font-bold {
    font-weight: 700; 
}
.three-items-container { /* This is the .container div */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px; /* Match Figma gap */
    padding-top: 64px; 
    padding-bottom: 64px; 
}

/* Reusable Section Header Styles */
.section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-left: 32px; 
    padding-right: 32px; 
    width: 100%;
    text-align: center; /* Ensure text inside is centered */
}

.section-tag {
    display: inline-block;
    padding: 8px 16px; 
    background: var(--light-green); /* Match Figma #F2FCE2 */
    border-radius: 9999px; /* Pill shape */
    outline-offset: -1px;
    color: var(--dark-green);
    font-family: var(--font-inter);
    font-size: 13.23px;
    font-weight: 400;
    line-height: 20px; 
    text-align: center; 
    /* letter-spacing for "3 Simple Steps" is not specified directly, but similar tags are. Assuming default or small. */
    /* The Flutter code for "3 Simple Steps" tag has no letterSpacing. */
    /* The Flutter code for "Complete tracking" tag has no letterSpacing. */
    /* The Flutter code for "Compare for yourself" tag has no letterSpacing. */
    /* The Flutter code for "Reviews" tag has no letterSpacing. */
}

.section-title {
    font-family: var(--font-inter);
    font-size: 42px;
    font-weight: 700;
    line-height: 51.66px; 
    color: #020817; 
    text-align: center; 
    width: 100%;
    letter-spacing: -1.26px; /* General for section titles like "How It Works" */
    /* width: 570.98px; /* Figma specific width, let content flow or use max-width */
}
#how-it-works-title {
    max-width: 600px;
}
#comparison-section-title {
    max-width: 720px;
}
#cta-section-title {
    max-width: 740px;
}



.section-subtitle {
    font-family: var(--font-inter);
    font-size: 16.73px;
    font-weight: 400;
    line-height: 28px; 
    color: var(--gray-small-text); 
    text-align: center; 
    letter-spacing: -0.33px;
    height: auto;
    width: 100%; 
}

/* Steps Layout */
.three-blocks-container {
    display: flex;
    /* justify-content: space-between; /* Figma: justify-content: flex-start; align-items: center; */
    justify-content: flex-start;
    align-items: center; /* Figma */
    gap: 0; /* Figma implies no gap, padding on items handles spacing */
    align-self: stretch; /* Make container take full width */
}

.step-item {
    flex: 1 1 0; /* Equal width for each step */
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 24px; /* Match Figma gap */
    padding-left: 16px; 
    padding-right: 16px; 
    align-self: stretch; 
    overflow: hidden; 
    border-radius: 16px; 
}

.step-icon-wrapper {
    padding: 16px; 
    background: var(--light-green); /* Match Figma var(--Light-green, #DFEADE) */
    border-radius: 16px; 
    display: inline-flex;
    justify-content: center; 
    align-items: center; 
    position: relative; /* For icon positioning */
    overflow: hidden; 
}

.step-icon {
    width: 32px;
    height: 32px;
    /* The SVG itself provides the shape and color */
}


.step-title { /* Target title directly under step-item if structure is flat */
    font-family: var(--font-inter);
    font-size: 22.88px;
    font-weight: 700;
    line-height: 28px; 
    color: #020817; 
    text-align: center; 
    align-self: stretch; 
}
.step-item .step-description { /* Target description directly under step-item */
    font-family: var(--font-inter);
    font-size: 15px; /* Average of Figma values (14.88px, 15px, 14.75px) */
    font-weight: 400;
    line-height: 24px; 
    color: var(--gray-small-text); 
    text-align: center; 
    letter-spacing: -0.30px; /* Average from Figma for these descriptions */
    align-self: stretch; 
    height: 48px; /* Match Figma height */
}


.more-features-container { /* This is the .container div */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px; /* Match Figma gap */
    padding-top: 64px; 
    padding-bottom: 64px; 
}

.feature-block-item {
    flex: 1 1 0; /* Equal width */
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 24px; /* Match Figma gap */
    padding-left: 16px; 
    padding-right: 16px; 
    overflow: hidden; 
    border-radius: 16px; 
    align-self: stretch; 
}

.feature-block-icon-wrapper {
    padding: 16px; 
    background: var(--light-green); /* Match Figma var(--Light-green, #DFEADE) */
    border-radius: 16px; 
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
    position: relative;
    overflow: hidden;

}

.feature-block-icon {
    width: 32px;
    height: 32px;
    /* The SVG itself provides the shape and color */
}


.feature-block-title {
    font-family: var(--font-inter);
    font-size: 21.75px; 
    font-weight: 700;
    line-height: 28px; 
    color: #1F2937; 
    text-align: center; 
    align-self: stretch; 
}

.feature-block-item .feature-block-description {
    font-family: var(--font-inter);
    font-size: 14.8px; /* Average of Figma values (14.62px, 15px, 14.88px) */
    font-weight: 400;
    line-height: 24px; 
    color: var(--gray-small-text); 
    text-align: center; 
    align-self: stretch; 
    letter-spacing: -0.30px;
    /* min-height: 48px; /* Figma has varied heights, let content flow or set fixed height if needed */
}

.comparison-container { /* This is the .container div */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px; /* Match Figma gap */
    padding-top: 64px; 
    padding-bottom: 64px; 
}


.comparison-table-wrapper {
    background: var(--white);
    border-radius: 32px; 
    padding: 32px; 
    align-self: stretch; /* Make wrapper take full width of container */
    overflow-x: auto; /* For responsiveness on smaller screens */
}

/* New Comparison Table Styles */
.comparison-table-new {
    align-self: stretch;
    background: var(--white); /* Was on .comparison-table-wrapper */
    border-radius: 32px; /* Was on .comparison-table-wrapper */
    /* padding: 32px; /* Was on .comparison-table-wrapper, now part of this new structure */
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex; /* To mimic the provided structure's outer div */
    width: 100%; /* Ensure it takes full width of its parent */
}

.ctn-row {
    align-self: stretch;
    justify-content: flex-start;
    align-items: center; /* Vertically center content in cells */
    display: inline-flex; /* Changed to inline-flex to match structure, or flex */
    width: 100%; /* Ensure rows take full width */
}
.ctn-row:not(:first-child) { /* Add border to rows except the first (header) */
    border-top: 1px solid var(--gray-border);
}


.ctn-cell {
    align-self: stretch; /* Make cells take full height of row */
    display: flex; /* For centering content within cell */
    align-items: center; /* Vertical centering */
    justify-content: flex-start; /* Default horizontal alignment */
}

.ctn-feature-title {
    width: 30%;
    padding-top: 24px;
    padding-bottom: 24px;
    padding-right: 24px;
    flex-direction: column;
    justify-content: flex-end; /* Aligns text to bottom if cell is taller */
    align-items: flex-start;
    gap: 12px;
    color: var(--off-black);
    font-size: 21.75px;
    font-family: var(--font-inter);
    font-weight: 700;
    line-height: 28px;
    word-wrap: break-word;
}

.ctn-app-title {
    flex: 1 1 0; /* Distribute space equally */
    padding: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--off-black);
    font-size: 21.75px;
    font-family: var(--font-inter);
    font-weight: 700;
    line-height: 28px;
    word-wrap: break-word;
}

.ctn-app-title.ctn-app-intake {
    color: var(--dark-green);
    font-size: 25px; /* Intake title is slightly larger */
    letter-spacing: -0.5px;
}

.ctn-feature-name {
    width: 30%;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-right: 24px;
    /* justify-content: flex-start; /* Already default for ctn-cell */
    /* align-items: center; /* Already default for ctn-cell */
    gap: 12px;
    color: #4B5563;
    font-size: 16px;
    font-family: var(--font-inter);
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word;
}

.ctn-app-value {
    flex: 1 1 0; /* Distribute space equally */
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
    justify-content: center; /* Center the indicator horizontally */
    align-items: center; /* Center the indicator vertically */
    gap: 12px;
    display: flex; /* Ensure this cell is also a flex container for its content */
}

.ctn-indicator-bg {
    padding: 10px;
    overflow: hidden;
    border-radius: 11.25px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex; /* Changed from inline-flex to flex for consistency */
}

.ctn-indicator-check-bg {
    background: var(--dark-green-low-opacity); /* rgba(42, 112, 37, 0.15) */
}

.ctn-indicator-cross-bg {
    background: var(--red-low-opacity); /* rgba(212, 72, 37, 0.15) */
}

.ctn-indicator-mark {
    width: 15.76px; /* Container for the icon */
    height: 15.76px; /* Container for the icon */
    display: flex; /* To center the image inside */
    justify-content: center;
    align-items: center;
}

.ctn-indicator-mark img {
    width: 100%; /* Make image take full width of its 15.76px parent */
    height: 100%; /* Make image take full height of its 15.76px parent */
    object-fit: contain; /* Ensure aspect ratio is maintained if SVGs are not perfectly square */
}

.ctn-app-values-wrapper {
    display: flex; /* To lay out the ctn-app-value children in a row */
    flex: 1;       /* To take the remaining space in the ctn-row */
}

.testimonials-container { /* This is the .container div */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px; /* Match Figma gap */
    padding-top: 64px; 
    padding-bottom: 64px; 
}

.testimonial-cards-container {
    display: flex;
    justify-content: flex-start;
    align-items: stretch; /* Ensures equal height for cards in a row */
    gap: 16px;
    flex-wrap: wrap;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    align-self: stretch;
    background: var(--white);
    border-radius: 32px;
    padding: 32px;
    justify-content: space-between; /* Pushes author to bottom, Match Figma */
    gap: 24px; /* Match Figma gap between quote icon and text */
    min-height: 384px; /* Match Figma height for desktop/tablet */
    overflow: hidden;
    align-items: flex-start;
}

.testimonial-card > div:first-child { /* Targeting the div containing quote and text */
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    display: flex;
}

.testimonial-card > div:first-child > div:first-child { /* Targeting the div containing the quote icon */
    width: 40px;
    height: 40px;
    position: relative;
}

.testimonial-card > div:first-child > div:first-child img { /* Targeting the quote icon image */
    width: 40px;
    height: 40px;
    left: 1.25px;
    top: 5px;
    position: absolute;
}

.testimonial-text {
    font-family: var(--font-inter);
    font-size: 16.88px;
    font-weight: 400;
    line-height: 28px;
    word-wrap: break-word;
    color: var(--Off-black, #070707);
    align-self: stretch;
}

.testimonial-quote-icon {
    /* font-size: 40px; /* Not needed if using background image */
    /* color: var(--dark-green); */
    /* line-height: 1; */
    width: 40px; /* Match Figma div size */
    height: 40px; /* Match Figma div size */
    background-image: url("data:image/svg+xml,%3Csvg width='37' height='30' viewBox='0 0 37 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.7727 29.28C7.65909 29.28 4.98864 28.1267 2.76136 25.82C0.920454 23.5133 0 20.7333 0 17.48C0 13.8667 0.738636 10.6667 2.21591 7.88C3.69318 5.09333 5.73864 2.66667 8.35227 0.6L12.4432 4.44C10.5057 5.97333 9.01136 7.73333 7.96023 9.72C6.90909 11.7067 6.38352 13.8667 6.38352 16.2C6.38352 17.48 6.61364 18.5867 7.07386 19.52C7.53409 20.4533 8.22727 21.2133 9.15341 21.8C10.0795 22.3867 10.7727 22.68 10.7727 22.68V29.28ZM24.7727 29.28C21.6591 29.28 18.9886 28.1267 16.7614 25.82C14.9205 23.5133 14 20.7333 14 17.48C14 13.8667 14.7386 10.6667 16.2159 7.88C17.6932 5.09333 19.7386 2.66667 22.3523 0.6L26.4432 4.44C24.5057 5.97333 23.0114 7.73333 21.9602 9.72C20.9091 11.7067 20.3835 13.8667 20.3835 16.2C20.3835 17.48 20.6136 18.5867 21.0739 19.52C21.5341 20.4533 22.2273 21.2133 23.1534 21.8C24.0795 22.3867 24.7727 22.68 24.7727 22.68V29.28Z' fill='%232A7025'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center; /* The SVG has internal positioning */
    /* background-size: contain; /* Let it use its natural size within the 40x40 box */
    /* text-indent: -9999px; /* Hide the text quote if using background */
    /* The SVG itself is 36.36px wide, 29.28px tall, positioned at 1.25px left, 5px top within the 40x40 */
    position: relative; /* If we need to position the SVG precisely */
}
.testimonial-quote-icon::before { /* Replicating the SVG's inner path as a block */
    content: "";
    position: absolute;
    width: 36.36px;
    height: 29.28px;
    left: 1.25px;
    top: 5px;
    background-color: var(--dark-green); /* This will be masked by the SVG if HTML uses an img tag */
    /* If using the background-image on .testimonial-quote-icon, this ::before is not needed */
}


.testimonial-text {
    font-family: var(--font-inter);
    font-size: 16.7px; /* Average from Figma (16.73, 16.88, 16.45) */
    font-weight: 400;
    line-height: 28px;
    color: var(--off-black);
    letter-spacing: -0.33px;
    flex-grow: 1;
    align-self: stretch;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.author-avatar {
    width: 56px; 
    height: 56px; 
    border-radius: 9999px; 
    border: 2px solid var(--white); 
    box-shadow: var(--avatar-shadow); 
}

.author-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.author-name {
    font-family: var(--font-inter);
    font-size: 17px; /* Average from Figma (17.86, 17.30, 17.72) */
    font-weight: 600;
    line-height: 28px; 
    color: #1F2937; 
    align-self: stretch; 
    height: 28px; 
}

.author-title {
    font-family: var(--font-inter);
    font-size: 15.08px; /* Average from Figma (15.12, 15) */
    font-weight: 400;
    line-height: 24px; 
    color: #4B5563; 
    align-self: stretch; 
    height: 24px; 
}

/* CTA Section */
.cta-section {
    /* Figma: width: 1200px; max-width: 1400px; padding-top: 64px; padding-bottom: 128px; padding-left: 32px; padding-right: 32px; */
    /* This is handled by .cta-container (which is a .container) */
    position: relative; /* For the absolute positioned background div if we add it */
    overflow: hidden; 
    /* display: flex; justify-content: center; align-items: center; /* If section itself needs to center container */
}
/* Figma has a div: width: 1920px; height: 401px; left: 0px; top: 0px; position: absolute;
   This seems to be a background element for the CTA.
   It's complex to replicate without assets or more details on its appearance.
   Skipping this absolute background for now.
*/

.cta-container { /* This is the .container div */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-top: 32px; 
    padding-bottom: 128px; 
    /* max-width: 1200px; /* Already on .container */
}

.cta-title {
    font-family: var(--font-inter);
    font-size: 42px;
    font-weight: 700;
    line-height: 51.66px; 
    color: var(--off-black); 
    text-align: center; 
    letter-spacing: -1.26px;
}

.cta-subtitle {
    font-family: var(--font-inter);
    font-size: 18.44px;
    font-weight: 400;
    line-height: 28px; 
    color: var(--gray-small-text); 
    text-align: center; 
    letter-spacing: -0.37px;
}

.cta-app-buttons {
    display: flex;
    gap: 16px; 
    justify-content: flex-start; 
    align-items: flex-start; 
}

.cta-app-buttons img { /* Sizes are same as hero-app-buttons */
    height: 55px;
    width: auto;
}
.cta-app-buttons a:first-child img { width: 163px; }
.cta-app-buttons a:last-child img { width: 183px; }


/* Footer Styles */
.site-footer-bottom { /* This is the main footer element */
    background-color: var(--off-black);
    color: var(--white);
    padding-top: 64px; 
    padding-bottom: 64px; 
    overflow: hidden; 
    display: flex; /* To center the inner .footer-container */
    flex-direction: column; 
    align-items: center; 
    gap: 64px; 
}

.footer-container { /* This is the inner div with 1200px width */
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 64px; /* Match Figma gap between logo/nav and divider/legal */
    max-width: 1200px;
    /* No padding here, padding is on site-footer-bottom */
}

.footer-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px; /* Match Figma gap */
    /* width: 1200px; /* Takes width from parent .footer-container */
}

.footer-logo {
    font-family: var(--font-inter);
    font-size: 32.06px;
    font-weight: 700;
    color: var(--dark-green);
    line-height: 43.28px; 
    text-align: center; 
    letter-spacing: -1.28px;
    /* text-box-trim: trim-both; text-box-edge: cap alphabetic; /* Non-standard */
}

.footer-nav ul {
    display: flex;
    justify-content: center; 
    align-items: flex-start; 
    flex-wrap: wrap;
    gap: 32px; /* Match Figma gap */
}

.footer-nav a {
    font-family: var(--font-inter);
    font-size: 14px;
    font-weight: 600; /* Figma: font-weight: 600 */
    line-height: 21px; 
    color: var(--white);
    letter-spacing: -0.28px;
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--dark-green);
}

.footer-bottom {
    width: 100%; /* Takes width from parent .footer-container */
    display: flex;
    flex-direction: column;
    align-items: center; 
    gap: 32px; /* Match Figma gap */
}

.footer-divider {
    width: 100%; /* align-self: stretch in Figma */
    height: 1px; /* Figma: 0px height with outline */
    /* background-color: var(--white); /* Not needed if using outline */
    border: none;
    outline: 1px solid var(--white); 
    outline-offset: -0.50px; 
}

.footer-legal {
    width: 100%; /* align-self: stretch in Figma */
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; 
    font-family: var(--font-inter);
    font-size: 14px;
    font-weight: 400; 
    line-height: 21px; 
    color: var(--white);
}

.legal-links {
    display: flex;
    gap: 24px; /* Match Figma gap */
    justify-content: flex-start; 
    align-items: flex-start; 
}

.legal-links a {
    font-family: var(--font-inter); /* Ensure consistency */
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: var(--white);
    text-decoration: underline; 
    transition: color 0.3s ease;
}

.legal-links a:hover {
    color: var(--dark-green);
}


.feature-block-item > div {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    display: flex;
}
.support-email {
    text-align: center;
    letter-spacing: -0.3px;
}

@media (max-width: 767px) {
    .step-item > div:not(.step-icon-wrapper) { /* The text content wrapper */
        align-items: center; /* Center text elements */
        gap: 12px;
        align-self: stretch;
    }


    .step-icon-wrapper {
        padding: 16px;
        background: var(--light-green);
        border-radius: 16px;
        /* display: inline-flex; already set */
        justify-content: center;
        align-items: center;
    }
    .step-icon-wrapper > div { /* The 32x32 container for the icon */
        width: 32px;
        height: 32px;
        position: relative;
        overflow: hidden;
    }
    .step-icon-wrapper > div > div { /* The actual colored icon block */
        position: absolute;
        background: var(--dark-green);
        /* Specific sizes/positions for each icon */
    }
    .step-item .step-description { /* Description for step */
        font-size: 15px; /* Using average from desktop, mobile HTML has 14.88, 15, 14.75 */
        line-height: 24px;
        text-align: center;
        align-self: stretch;
        height: auto; /* Was 48px, let it be auto for mobile */
        min-height: 48px; /* Ensure it has some min height if text is short */
        letter-spacing: normal;
    }
}

@media (min-width: 1201px) {
    .mobile-menu-icon,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* Tablet Styles */
@media (max-width: 1200px) {
    .main-nav,
    .app-buttons {
        display: none;
    }
    .mobile-menu-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        outline: none;
        cursor: pointer;
        position: absolute;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 30;
        width: auto;
        height: auto;
        padding: 0;
    }
    .mobile-menu-close {
        top: 24px !important;
        right: 24px !important;
    }


    /* Mobile Menu Overlay Styles */
    .mobile-menu-overlay {
        position: fixed;
        left: 0;
        top: 0;
        width: 100vw;
        height: 100vh;
        background: var(--off-black);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    .mobile-menu-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
    .mobile-menu-content {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    .mobile-menu-close {
        position: absolute;
        top: 32px;
        right: 32px;
        background: none;
        border: none;
        font-size: 2.5rem;
        color: #fff;
        cursor: pointer;
        z-index: 1010;
        transition: color 0.2s;
    }
    .mobile-menu-close:hover {
        color: var(--dark-green);
    }
    .mobile-menu-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 36px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .mobile-menu-links li a {
        color: #fff;
        font-family: var(--font-inter);
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -0.5px;
        text-decoration: none;
        transition: color 0.2s;
    }
    .mobile-menu-links li a:hover {
        color: var(--dark-green);
    }
    .mobile-menu-app-buttons {
        position: absolute;
        bottom: 48px;
        left: 0;
        width: 100vw;
        display: flex;
        justify-content: center;
        gap: 18px;
    }
    .mobile-menu-app-buttons a img {
        height: 50px;
        width: auto;
        display: block;
    }
    /* End of Mobile Menu Overlay Styles */

    .site-header {
        padding: 12px 24px 12px 24px;
    }
    .container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .hero-title {
        font-size: 45px;
        line-height: 56px;
        letter-spacing: -3px;
    }
    .stat-card-nutrients, .stat-card-minerals {
        display: none;
    }
    .stat-card-calories {
        top: 58px;
        right: 10px;
        left: auto;
    }
    .stat-card-vitamins {
        bottom: 20px;
        top: auto;
        right: 30px;
        left: auto;
    }
    .feature-card {
        width: 100%;
        gap: 16px;
    }
    .feature-card-img,
    .feature-card-text-col {
        flex: 1 1 0;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        min-width: 0;
    }
    .feature-card-img {
        width: 100%;
        height: 100%;
    }
    .feature-card-image-right .feature-card-text-col { /* Reset for column layout */
        padding: 0 0 0 48px;
    }
    .feature-card-image-left .feature-card-text-col { /* Reset for column layout */
        padding: 0 48px 0 0;
    }
    .feature-title {
        font-size: 36px !important;
        line-height: 44.66px !important;
    }
    .ctn-app-title {
        font-size: 18px !important;
        padding-left: 16px;
        padding-right: 16px;
    }
    .ctn-app-intake {
        font-size: 22px;
    }
    .ctn-hidden-mobile {
        display: none;
    }
    .testimonial-card {
        padding: 24px;
    }
}

/* Mobile Styles */
@media (max-width: 767px) {
    .mobile-menu-close {
        top: 12px !important;
        right: 18px !important;
    }
    .mobile-menu-icon {
        right: 16px;
    }
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Header Mobile */
    .site-header {
        padding: 12px 16px 12px 16px;
    }

    .logo {
        font-size: 25px; /* Mobile font size */
        line-height: 33.75px; /* Mobile line height */
        text-align: center; /* As per mobile design */
        letter-spacing: -0.8px;
        /* text-box-trim, text-box-edge are non-standard */
    }

    .main-nav,
    .app-buttons {
        display: none; /* Hide desktop nav and app buttons */
    }

    /* Mobile Menu Icon (Hamburger) */
    /* Assuming a new element or class for this, e.g., .mobile-menu-icon */
    /* Based on provided HTML: last div in .site-header */
    .site-header > div:last-child { /* This is a bit fragile; a class would be better */
        width: 32px;
        height: 32px;
        position: relative;
        overflow: hidden;
        display: flex; /* To make it visible if it was display:none before */
        justify-content: center;
        align-items: center;
    }
    .site-header > div:last-child > div { /* The inner bars */
        width: 24px;
        height: 18px;
        background: black;
        /* The Figma HTML uses left/top absolute, but for a typical hamburger, this might be different.
           For now, sticking to the provided 'black' background.
           A real hamburger would have 3 lines. This is just one block.
        */
    }
    /* If you have a proper hamburger icon (e.g. using an SVG or multiple spans), target that instead. */
    /* For example: */
    .mobile-menu-toggle { /* Add this class to your menu toggle button/icon */
        display: block; /* Or flex, inline-flex */
        width: 32px;
        height: 32px;
        position: relative; /* For positioning lines if using spans */
    }
    .mobile-menu-toggle .icon-bar { /* Example if using spans for bars */
        display: block;
        width: 24px;
        height: 3px; /* Typical bar height */
        background-color: var(--off-black);
        margin: 4px auto; /* Spacing for bars */
        border-radius: 1px;
    }

    /* Hero Section Mobile */
    .hero-section {
        padding-top: 64px; /* Account for mobile header */
        padding-bottom: 0; /* Reduced padding */
        height: auto; /* Let content define height */
        min-height: unset;
    }
    .hero-container {
        flex-direction: column;
        gap: 16px; /* Mobile gap */
        padding-top: 32px; /* From mobile design (128px was too much with fixed header) */
        padding-bottom: 32px; /* From mobile design (64px / 2) */
        padding-left: 16px;
        padding-right: 16px;
        height: auto;
        width: 100%;
    }

    .hero-content {
        gap: 24px; /* Mobile gap */
        justify-content: center;
        align-items: stretch; /* Make content take full width */
        text-align: left; /* Default, but ensure it's not centered from desktop */
    }

    .hero-title {
        font-size: 39px; /* Mobile font size */
        line-height: 46px; /* Mobile line height */
        letter-spacing: -2px; /* Reset from desktop */
    }
    .hero-subtitle {
        font-size: 16px;
    }
    .hero-app-buttons {
        gap: 16px; /* Mobile gap */
        justify-content: flex-start; /* Align to start */
    }
    .hero-app-buttons img { /* Overriding desktop sizes */
        width: 147px;
        height: auto;
    }
    .hero-app-buttons a:last-child img { /* Second image in mobile design */
        width: 165px;
        height: auto;
    }
    .cta-app-buttons img { /* Overriding desktop sizes */
        width: 147px;
        height: auto;
    }
    .mobile-menu-app-buttons {
        flex-wrap: wrap;
    }


    .hero-image-column {
        gap: 10px; /* Mobile gap */
        align-self: stretch;
        width: 100%;
    }

    .hero-main-image {
        align-self: stretch; /* Full width of its container */
        width: 100%; /* Ensure it's responsive */
        height: auto;
        object-fit: cover;
    }

    /* Stat Cards Mobile - General Reset */
    .hero-stat-card {
        display: flex; /* inline-flex in figma, flex is fine */
        background: var(--white);
        box-shadow: var(--card-shadow);
        overflow: hidden;
        position: absolute; /* All are absolute in mobile */
        /* Resetting some desktop properties that might interfere */
        flex-direction: row; 
        align-items: center;
    }
    .hero-stat-card .stat-card-text {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1.86px; /* From mobile "Vitamins" card */
    }
    .hero-stat-card .stat-card-title {
        font-size: 13.94px; /* From mobile "Vitamins" card */
        font-weight: 600;
        line-height: 18.82px;
        color: var(--off-black);
    }
    .hero-stat-card .stat-card-value {
        font-size: 12px; /* From mobile "Vitamins" card */
        font-weight: 400;
        line-height: 15.06px;
        color: var(--gray-small-text);
        letter-spacing: normal;
    }
    .hero-stat-card .stat-card-icon-bg { /* The colored circle/square */
        width: 29.64px; /* From mobile "Vitamins" card */
        height: 29.64px;
        border-radius: 9.30px; /* From mobile "Vitamins" card */
        background: var(--dark-green-low-opacity); /* Default, override per card */
        display: flex; /* To center inner icon if any */
        justify-content: center;
        align-items: center;
        position: relative; /* For the inner icon div */
        flex-shrink: 0;
    }
    /* Hide desktop icons */
    .stat-card-icon-bg div[class^="stat-icon-"] {
        display: none;
    }
    /* Style for the new mobile inner icon divs */
    .hero-stat-card .stat-card-icon-bg > div { /* The actual small colored block */
        position: absolute;
        /* sizes and positions set per card */
    }
     .hero-stat-card .stat-card-number { /* The number like "7" or "11" */
        display: none;
    }

    /* Specific Stat Cards Mobile */
    .stat-card-vitamins { /* Matches "Vitamins" card */
        width: 221.24px;
        padding: 14.87px;
        left: 45px;
        top: 302.72px;
        border-radius: 14.87px;
        justify-content: space-between;
    }
    .stat-card-nutrients { display: none !important; }
    .stat-card-vitamins .stat-card-icon-bg { background: var(--dark-green-low-opacity); }
    .stat-card-vitamins .stat-card-icon-bg > div { width: 12.08px; height: 14.87px; left: 8.37px; top: 7.82px; background: var(--dark-green); }
    .stat-card-vitamins .stat-card-text { width: 128.28px; }


    .stat-card-calories { /* Matches "611 Calories" card */
        width: 150.59px;
        padding: 8.34px;
        left: -7px;
        top: 104.72px;
        border-radius: 11.15px;
        gap: 8px; /* Specific to this card */
    }
    .stat-card-calories .stat-card-title { /* "611 Calories" text */
        font-size: 13.90px;
        line-height: 18.76px;
    }
    .stat-card-calories .stat-card-icon-bg { background: var(--purple-calories-bg); } /* rgba(189, 103, 239, 0.15) */
    .stat-card-calories .stat-card-icon-bg > div { width: 11.12px; height: 13.90px; left: 9.26px; top: 7.41px; background: var(--purple-calories); } /* #BD67EF */
    .stat-card-calories .stat-card-value, .stat-card-calories .stat-card-number { display: none; } /* Not in this card's mobile design */


    .stat-card-protein { /* Matches "43.2g Protein" card */
        width: 150.59px;
        padding: 8.34px;
        left: 226px;
        top: 220.72px;
        border-radius: 11.15px;
        gap: 8px; /* Specific to this card */
    }
    .stat-card-protein .stat-card-title { /* "43.2g Protein" text */
        font-size: 13.90px;
        line-height: 18.76px;
    }
    .stat-card-protein .stat-card-icon-bg { background: var(--blue-protein-bg); } /* rgba(114, 170, 255, 0.15) */
    .stat-card-protein .stat-card-icon-bg > div { width: 11.12px; height: 14.82px; left: 9.26px; top: 7.41px; background: var(--blue-protein); } /* #72AAFF */
    .stat-card-protein .stat-card-value, .stat-card-protein .stat-card-number { display: none; } /* Not in this card's mobile design */


    .stat-card-minerals { /* Matches "Minerals" card */
        display: none;
    }
    .stat-card-minerals .stat-card-icon-bg { background: var(--dark-green-low-opacity); }
    .stat-card-minerals .stat-card-icon-bg > div { width: 11.15px; height: 14.87px; left: 9.30px; top: 7.82px; background: var(--dark-green); }
    .stat-card-minerals .stat-card-text { width: 128.28px; }

    /* Feature Card Sections Mobile */
    .features-section .container, /* If .container is used directly */
    .feature-container { /* Or if a specific .feature-container is used */
        padding-top: 0px; /* Mobile padding */
        padding-bottom: 16px; /* Mobile padding */
        /* gap: 10px; /* From Figma outer wrapper, apply to children if needed */
    }
    /* The Figma HTML has an outer div with gap: 10px, then an inner with padding:16px and gap:64px.
       Let's assume .feature-card is the main component.
    */
    .features-section .feature-container { /* Targeting the container within features section */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px; /* Reduced gap between feature cards if multiple */
    }

    .feature-card {
        flex-direction: column-reverse; /* Stack image and text */
        height: auto;
        gap: 24px; /* Mobile gap */
        border-radius: 32px; /* As per mobile design */
        background: var(--white);
        overflow: hidden;
        width: 100%; /* Ensure full width */
        padding: 0; /* Reset desktop padding if any */
        margin-bottom: 32px; /* Space between stacked feature cards */
        gap: 0px;
    }
     .feature-card:last-child {
        margin-bottom: 0;
    }

    .feature-card-text-col {
        padding: 48px 32px 0px 32px !important;
        gap: 16px; /* Mobile gap */
        align-items: flex-start; /* Align text to start */
        height: auto;
        order: 2;
        flex: 0 0 auto;
    }
    /* Target any images inside feature-card */
    .feature-card-img {
        order: 1;
        display: block !important;
        width: 550px !important;
        object-fit: contain;
        object-position: center bottom;
        flex: 1 1 auto;
        max-width: 140% !important;
    }
    #img-above {
        order: 2;
    }



    .feature-title { /* Inside .feature-card-text-col */
        font-size: 32px !important;
        line-height: 40px !important;
        color: var(--off-black);
        letter-spacing: -1px !important;
    }


    .feature-description { /* Inside .feature-card-text-col */
        line-height: 24px; /* Mobile line height */
        color: var(--gray-small-text);
    }
    .feature-description .font-bold {
        font-weight: 700; /* Ensure bold is maintained */
    }

    .feature-image-container { /* If this is a wrapper for the image */
        order: 2;
        align-self: stretch;
        width: 100%;
    }
    .three-blocks-container {
        flex-direction: column;
        gap: 48px;
        align-items: center;
        align-self: stretch;
    }
    .feature-block-item {
        padding-left: 0;
        padding-right: 0;
        flex: 0;
    }

    /* Hide desktop phone mockups if they are structured differently */
    .phone-mockup-1, .phone-mockup-2, .phone-mockup-3, .phone-mockup-4, .phone-mockup-5, .phone-mockup-6 {
        position: static; /* Reset absolute positioning */
        width: 100%;
        height: auto; /* Or specific mobile height if needed */
        /* The mobile design uses a simple img tag for feature cards */
        order: 2;
        display: block;
    }

    .feature-image-container {
        order: 2;
        width: 100%;
        height: auto;
    }
    .feature-image {
        order: 2;
        width: 100%;
        height: auto;
    }


    /* "How It Works" Section Mobile */
    .three-items-container { /* This is the .container div */
        padding-top: 64px; /* Reduced from 64px */
        padding-bottom: 64px; /* Reduced from 64px */
        flex-direction: column;
    }

    .section-header { /* Reused for "How It Works" */
        gap: 24px; /* Mobile gap */
        padding-left: 0; /* Mobile padding handled by .container */
        padding-right: 0;
        align-items: center; /* Ensure content is centered */
    }

    .section-tag { /* "3 Simple Steps" tag */
        padding: 8px 16px;
        font-size: 13.23px;
        line-height: 20px;
        /* background, border-radius, outline already set */
    }
    .section-title {
        font-size: 32px; /* Mobile font size */
        line-height: 42px; /* Mobile line height */
        width: auto; /* Allow text to wrap */
        max-width: 100%;
        height: auto;
        letter-spacing: -0.7px;
    }

    .three-items-container .section-subtitle, /* Subtitle for "How It Works" */
    .section-header .section-subtitle { /* General section subtitles */
        font-size: 16.73px; /* Mobile font size */
        line-height: 28px; /* Mobile line height */
        width: auto; /* Allow text to wrap */
        max-width: 100%;
        height: auto;
        letter-spacing: normal;
    }

    .comparison-container {
        gap: 48px;
    }
    .comparison-table-wrapper {
        padding: 16px 0px 16px 0px;
    }
    .ctn-row {
        display: flex;
        flex-direction: column;
    }
    .ctn-header {
        flex-direction: row !important;
        width: 100% !important;
    }
    .ctn-hidden-mobile {
        display: none;
    }
    .ctn-features-title {
        display: none;
    }
    .ctn-app-values-wrapper {
        width: 100% !important;
    }
    .ctn-feature-name {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 8px;
        margin-left: auto;
        margin-right: auto;
        width: auto;
        text-align: center;
    }
    .ctn-app-title {
        font-size: 17px;
        padding: 24px 8px 24px 8px;
    } 
    .ctn-app-title.ctn-app-intake {
        font-size: 24px !important;
    }

    .testimonial-cards-container {
        flex-direction: column;
    }
    .testimonial-card {
        min-height: unset !important;
        height: auto !important;
        align-self: auto !important;
        overflow: visible !important;
        align-items: stretch !important;
    }
    .testimonials-container {
        padding-top: 32px;
        gap: 48px;
    }
    .footer-nav ul {
        flex-direction: column;
        align-items: center;
    }
    .footer-legal {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .footer-bottom {
        gap: 64px;
    }

}

/* Force light mode override */
@media (prefers-color-scheme: dark) {
    html {
        color-scheme: light;
    }

    body {
        background-color: #F3F3F3 !important;
        color: #070707 !important;
    }

    /* Override any elements that might be affected by dark mode */
    h1, h2, h3, h4, h5, h6 {
        color: #020817 !important;
    }

    .feature-card,
    .testimonial-card,
    .comparison-table-wrapper,
    .section-tag {
        background-color: #FFFFFF !important;
        color: #070707 !important;
    }

    .site-footer-bottom {
        background-color: #070707 !important;
        color: #FFFFFF !important;
    }
}