/* --- Global & Layout --- */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Quicksand:wght@500;700&family=Varela+Round&display=swap');

/* Apply to your questions */

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.logo-anchor {
  display: flex;
  align-items: center;
  padding: 0;
  margin-left: 7px;
  margin-right: 0.25rem;
}
.logo-anchor.active {
    /* This ensures that even if it somehow gets the class,
       it doesn't change color or add an underline */
    border-bottom: none !important;
    color: inherit !important;
}

.nav-logo-img {
  height: 2.2rem;        /* Scaled to fit within your 55px min-height */
  width: auto;
  display: block;
}

.topnav {
  background-color: #ffffff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 1.25rem 0 0; /* 20px */
  min-height: 3.438rem; /* 55px */
  box-sizing: border-box;
  box-shadow: 0 0.125rem 0.938rem rgba(74, 107, 83, 0.15); /* 2px 15px */
  border-bottom: 0.063rem solid rgba(74, 107, 83, 0.3); /* 1px */
  justify-content: center;
}

/* --- Navigation Links --- */


.topnav a {
  color: #000000;
  text-decoration: none;
  padding: 0.625rem 0.75rem; /* 10px 12px */
  font-size: .9rem; /* 17px */
  display: block;
  transition: color 0.3s ease, border-bottom 0.3s ease;
  border-bottom: 2px solid transparent; /* Keeps layout stable */
  padding-bottom: 5px;
}

/* Only apply hover background on devices that support hovering (mouse) */
@media (hover: hover) {
  .topnav a:hover, .topnav a.active:hover {
    background-color: #5a6e5f;
    border-radius: 0.5rem; /* 8px */
    color: white !important;
    border-bottom-color: transparent !important;
  }
}

.topnav a.active {
    color: #4a6b53 !important; /* Your brand green */
    border-bottom: 2px solid #4a6b53;
}

/* --- Auth & Dropdown Section --- */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  margin-left: auto;
}

.nav-auth span, .nav-auth p {
    font-size: 0.9rem; /* Reduced from default to save space */
    color: #000000;
    margin: 0;
    white-space: nowrap; /* Prevents the email from wrapping to a second line */
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  color: black !important;
  background-color: ghostwhite;
  padding: 0.375rem 0.875rem; /* 6px 14px */
  font-size: 1rem; /* 16px */
  cursor: pointer;
  border-radius: 0.5rem; /* 8px */
  border: none;
  user-select: none;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: ghostwhite;
  width: max-content;
  min-width: 10rem; /* 160px */
  border: 0.063rem solid black; /* 1px */
  border-radius: 0.5rem; /* 8px */
  overflow: hidden;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2); /* 8px 16px */
}

.dropdown-content a {
  padding: 0.75rem 1.25rem; /* 12px 20px */
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  white-space: nowrap;
  box-sizing: border-box;
  width: 100%;
  color: black;
  text-decoration: none;
  border-bottom: 0.063rem solid #ddd; /* 1px */
  transition: background-color 0.2s;
}

.dropdown-content a:first-child {
  border-top-left-radius: 0.438rem; /* 7px */
  border-top-right-radius: 0.438rem;
}

.dropdown-content a:last-child {
  border-bottom: none;
  border-bottom-left-radius: 0.438rem;
  border-bottom-right-radius: 0.438rem;
}

.dropdown-content img {
  height: 1.9rem;
  width: auto;
}

.dropdown:hover .dropdown-content {
  display: block;
  background-color: #e8e8e8;
}

/* --- Page Sections --- */
.full-page {
  min-height: 100vh;
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  padding: 6.25rem 2.5rem 6.25rem; /* 100px 40px 100px */
  box-sizing: border-box;
  position: relative;
}

.scroll-indicator {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem; /* 10px */
    color: #000000;
    font-size: 0.75rem; /* 12px */
    letter-spacing: 0.125rem; /* 2px */
    text-decoration: none;
    z-index: 20;
}

.arrow {
    width: 0.75rem; /* 12px */
    height: 0.75rem;
    border-right: 0.125rem solid #000000; /* 2px */
    border-bottom: 0.125rem solid #000000;
    transform: rotate(45deg);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0) rotate(45deg);}
    40% {transform: translateY(-0.625rem) rotate(45deg);} /* -10px */
    60% {transform: translateY(-0.313rem) rotate(45deg);} /* -5px */
}

#vision, #technology, #demand, #unitcost, #finances, #history, #access, #investors, #hero, #information {
  min-height: 80vh; /* Keeps the professional look on short pages */
  height: auto;      /* CRITICAL: Allows it to expand with text */
  padding: 6.25rem 1.25rem;
  box-sizing: border-box;
  display: flex;     /* Ensures children can stretch */
  align-items: center;

}

.hero-hbox {
  display: flex;
  flex-direction: row;
  align-items: center;    /* Changed from stretch to center */
  width: 100%;
  max-width: 90rem;
  height: 65vh;
  gap: 3.125rem;
  margin: 0 auto;         /* Ensures horizontal centering */
}

.hero-content-left {
  flex: 1;               /* MAGIC LINE: Take up all remaining space */
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  color: white;
  min-width: 300px;      /* Prevents text from getting too skinny */
}

.hero-asset-right {
  flex: 0 0 60%;         /* Keeps the image at its specific size */
  max-width: 650px;
  padding-right: 0;      /* Remove this if it's pushing the image too far left */
  box-sizing: border-box;
}

.kitchenware_rendering {
  width: 100%;
  max-height: 45vh;    /* Ensures the image never takes up more than 45% of your screen height */
  aspect-ratio: 16 / 9; /* Keeps the cinematic shape */

  background: #f5f5f5;
  border: .05rem solid #000000;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.kitchenware_rendering img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Change to 'cover' if you want it to fill the whole black box */
  display: block;

}



.hero-content-left h2 {
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.094rem; /* -1.5px */
  margin-bottom: 0.938rem; /* 15px */
  line-height: 1.05;
  text-transform: capitalize;
  color: #000000;
}

.hero-content-left p {
  font-size: 1.25rem;
  line-height: 1.6;
  color: #333333;
  max-width: 90%;
}

.hero-accessories {
    font-size: 0.563rem !important; /* 9px */
    color: rgba(255, 255, 255, 0.6);
}

/* style.css - Targeted Fix */

.btn-hero {
    /* Reset defaults for <button> elements */
    background: transparent !important;
    appearance: none;
    -webkit-appearance: none;

    /* Apply the visual style from your hero page */
    border: 0.063rem solid #4a6b53 !important; /* Forces the green border back */
    color: #000000 !important;
    padding: 1.063rem;
    text-align: center;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 0.063rem;
    transition: 0.3s;
    cursor: pointer;
    display: block;
    width: 82%;
    font-family: inherit; /* Matches your Arial/Sans-serif choice */
}

.btn-hero:hover {
    background: rgba(74, 107, 83, 0.1) !important;
    box-shadow: 0 0 0.938rem rgba(74, 107, 83, 0.2);
}

/* --- Technology Section --- */

/* --- Independent Vision Section Styling --- */

#vision.full-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 6rem 1.25rem;
}
.vision-hbox {
  display: grid;
  /* Decoupled: You can change the 65% split here for Vision only */
  grid-template-columns: 64% 1fr;
  align-items: stretch; /* Forces image column to match text height */
  width: 100%;
  max-width: 90rem;
  min-height: 65vh;
  height: auto;
  gap: 2.125rem;
  margin: 0 auto;
}

.vision-content-left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
}

.vision-content-left h2 {
    color: #000000;
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.05rem;
    line-height: 1.05;
    margin-top: 0;
    margin-bottom: 0rem;
    text-transform: capitalize;
    border-left: 0.25rem solid #4a6b53;
    padding-left: 1rem;
}

/* Specific spacing for the second H2 in Vision */
.vision-content-left h2:nth-of-type(2) {
    margin-top: 2rem; /* Restored spacing since they are in the same column again */
}

.vision-content-left p {
    color: #333333;
    font-size: 1.168rem;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* New container for the right column of images */
.vision-assets-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Forces this column to only be as tall as the text column */
    height: 0;
    min-height: 100%;
}

.vision-hbox .asset-card {
    /* Standard card styling inherits from global .asset-card */
    padding: 0;
    overflow: hidden;
}

#technology.full-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.vision-hbox .asset-card img {
  width: 100%;    /* Force width to match card */
  height: 100%;   /* Force height to match card */
  object-fit: cover; /* This is better than 'fill'—it prevents stretching/distortion */
}

.tech-hbox {
  display: grid;
  /* Forces the two columns to share the exact same top and bottom line */
  grid-template-columns: 60% 1fr;
  align-items: stretch;

  width: 100%;
  max-width: 90rem;
  min-height: 65vh; /* This is your 'floor' */
  height: auto;     /* This is your 'ceiling'—it grows with your text */

  gap: 1.525rem;
  margin: 0 auto;
  align-items: center;
}

.tech-content-left {
  display: flex;
  flex-direction: column;
  /* Crucial: Keeps content at the top so it matches the box tops */
  justify-content: flex-start;
  padding: 0;
}

.tech-content-left h2 {
    color: #000000;
    font-size: 1.65rem;
    font-weight: 800;
    /* Tighter tracking for a premium, custom look */
    letter-spacing: -0.05rem;
    line-height: 1.05;
    margin-top: 0;
    margin-bottom: .1rem;
    text-transform: capitalize;
    /* Subtle border-left in brand green creates a "technical" anchor */
    border-left: 0.25rem solid #4a6b53;
    padding-left: 1rem;
}

.tech-content-left p {
    color: #333333;
    font-size: 1.168rem;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 1.2rem; /* Standard paragraph gap */
}

/* --- The Technical List (The "Tabbed" Bullets) --- */
.tech-list {
    list-style-type: disc;
    margin: 0; /* REMOVE margin-bottom here to stop the double-gap */
    padding-left: 1.563rem;
    color: #333333;
}


.tech-list li {
    margin-top: 0.5rem;
    font-size: 1.168rem;
    line-height: 1.3;
    margin-bottom: 0rem; /* Tight spacing between bullets */
    margin-top: 0rem;
    padding-left: 0.5rem;
}


.tech-list li strong {
    color: #000000;
    font-weight: 600;
}



.technical_assets {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.technical_assets .asset-card {
  flex: 1;
  background: #f5f5f5;
  border: 0.063rem solid #ccc;
  border-radius: 0.75rem;
  padding: 0; /* Ensures the image hits the borders */
  overflow: hidden; /* Clips image to the card corners */
  display: flex;
}

.technical_assets .asset-card img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fills the card without stretching */
}
#technology {
    position: relative; /* This is the anchor for the absolute positioning */
    display: flex;
    flex-direction: column;
}

.scroll-indicator-tech {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);

    /* Flexbox Alignment */
    display: flex;
    flex-direction: column;
    align-items: center; /* This centers the arrow perfectly under the text */

    text-decoration: none;
    cursor: pointer;
    z-index: 10;
}

.scroll-indicator-tech span {
    font-size: 0.8rem;
    letter-spacing: 0.15rem;
    color: #000000;
    margin-bottom: 8px; /* Spacing between text and arrow */
    text-transform: uppercase;
}

.scroll-indicator-tech .arrow {
    width: 12px;
    height: 12px;
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    transform: rotate(45deg); /* Creates the downward chevron */
}

#investor-trigger {
    /* Lower numbers move it CLOSER to the bottom edge */
    bottom: 0.5rem !important; /* This is 8px from the floor */
}

.asset-card {
  /* Tells the three boxes to perfectly divide the height of the text */
  flex: 1;
  background: #f5f5f5;
  border: 0.063rem solid #ccc;
  border-radius: 0.75rem;
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.asset-card {
  flex: 1; /* Tells the 3 cards to perfectly divide the available height */
  background: #f5f5f5;
  border: 0.063rem solid #ccc;
  border-radius: 0.75rem;
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.asset-card:hover {
  border-color: #4a6b53;
}



#demand.full-page {
    position: relative;
    min-height: 100vh;
    height: auto; /* Allows it to grow if text is very long */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4rem 1.25rem 2rem 1.25rem; /* Increased top padding to prevent scroll chop */
}

.demand-hbox {
    display: grid;
    grid-template-columns: 60% 1fr; /* Gives images more width so they can grow larger */
    align-items: stretch; /* Forces image column to match text height */
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    gap: 1.125rem;
    padding-top: 0rem;
}

.demand-content-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.demand-content-left h2 {
    color: #000000;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 0.1rem;
    margin-top: 0.1rem;
    border-left: 0.25rem solid #4a6b53;
    padding-left: 1rem;
    text-transform: capitalize;
}

.demand-content-left h3 {
    color: #000000;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.05;
    margin-bottom: 0.1rem;
    margin-top: 1.25rem;
    border-left: 0.25rem solid #4a6b53;
    padding-left: 1rem;
    text-transform: capitalize;
}
.demand-content-left p {
    color: #333333;
    font-size: 1.0rem;
    /*line-height: 1.3;*/
    margin-bottom: 0rem;
    margin-top: 0rem;
}

.demand-content-left li{
    margin-top: 0.5rem;
    font-size: 1.0rem;
    line-height: 1.3;
    margin-bottom: 0rem; /* Tight spacing between bullets */
    margin-top: 0rem;
    padding-left: 0.5rem;
    color: #333333;
}

.demand-content-left li strong {
    color: #000000;
    font-weight: 600;
    margin-bottom: .3rem
}

.demand-content-left ul {
    /* Prevents the top of the list from pushing away */
    margin-top: 1rem;
    margin-bottom: 0rem;  /* Matches your tight bullet spacing */
    padding-left: .5rem;
}

.demand-content-left li strong {
    color: #4a6b53;
    font-weight: 600;
}

.demand-assets-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Forces this column to only be as tall as the text column */
    height: 0;
    min-height: 100%;
}

.demand-asset-box {
    flex: 1; /* Distributes height equally among the 4 images */
    width: 100%;
    background: transparent; /* Removes visible box background */
    border: none;            /* Removes visible border */
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    /* Pop-out logic */
    transition: transform 0.3s ease;
    transform-origin: right center;
}

.demand-asset-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Fix for Demand Page Scroll Indicator Overlap */
#demand .scroll-indicator-tech {
    position: static;
    margin-top: 3rem;
    transform: none;
}

/* 1. Target only Vision, Tech, and Demand assets */
.asset-card, .demand-asset-box, .kitchenware_rendering {
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    transform-origin: right center;
}

/* 2. Professional 25% "Pop" */
.asset-card:hover,
.demand-asset-box:hover, .kitchenware_rendering:hover {
    transform: scale(1.25); /* Slightly bigger than before */
    z-index: 50;
    box-shadow: -20px 20px 40px rgba(0, 0, 0, 0.6);
    border-color: #00993d;
}

/* 3. Hero is now explicitly static */
/*.kitchenware_rendering, .kitchenware_rendering:hover {*/
/*    transform: none !important;*/
/*    box-shadow: none !important;*/
/*    z-index: 1;*/
/*}*/

/* 4. Keep containers open for the pop-out */
.technical_assets, .hero-asset-right, .demand-assets-right {
    overflow: visible !important;
}

.joke-container {
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.video-ui {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* REMOVED: background: rgba(0,0,0,0.6) */
    background: transparent;
    transition: opacity 0.3s;
}
.play-circle-glow {
    width: 50px;
    height: 50px;
    border: 2px solid #00ff66;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #00ff66;
    font-size: 1.2rem;
    margin-bottom: 8px;
    /* This ensures the button is visible over light images */
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 15px rgba(0, 255, 102, 0.4);
    backdrop-filter: blur(2px); /* Optional: lightly blurs just the area behind the button */
}

.play-text-shadow {
    color: #00ff66;
    font-size: 0.6rem;
    letter-spacing: 2px;
    font-weight: 800;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.8); /* Makes text pop without darkening the whole image */
}

.play-text {
    color: #00ff66;
    font-size: 0.65rem;
    letter-spacing: 2px;
    font-weight: 800;
}

.expand-icon {
    position: absolute;
    bottom: 15px;
    right: 15px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1rem;
    z-index: 1;
}

/* Hide overlay when playing */
.joke-container.is-playing .video-overlay,
.joke-container.is-playing .expand-icon {
    opacity: 0;
    pointer-events: none;
}

.demand-asset-box:hover {
    border-color: #4a6b53;
}

.counter-grid {
    transition: transform 0.3s ease;
}
.counter-grid div:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}



#finances {
    width: 100vw;               /* Span full viewport width */
    min-height: 100vh;          /* Span at least full viewport height */
    display: flex;              /* Enable Flexbox */
    flex-direction: column;     /* Stack content vertically */
    justify-content: center;    /* Center content vertically */
    align-items: center;        /* Center content horizontally */
    margin: 0;
    padding: 6rem 0;            /* Adds breathing room so it doesn't hug Unit Cost */
    box-sizing: border-box;
    overflow-x: hidden;         /* Prevents horizontal scrollbars from 100vw */
}



/* --- History Section: Substantive Spine --- */
#history {
    background: #ffffff;
    padding: 4rem 0 10rem 0; /* Pulled up to make room */
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* CRITICAL: Anchor for the absolute arrow */
    overflow: visible;  /* Prevent clipping of the Sign Up text */
}

#history .scroll-indicator {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 100;
}

/* Ensure the text matches the Hero/Vision spans */
#history .scroll-indicator span {
    color: #000000;
    font-size: 0.8rem;
    letter-spacing: 0.15rem;
    font-weight: bold;
    text-transform: uppercase;
}

.timeline-container {
    width: 90%;
    max-width: 1200px;
}

/* Section Title Styling */
.section-title {
    color: #4a6b53;
    font-size: 2.8rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.25rem;
    margin-bottom: 2rem;
    margin-top: 0rem;
    font-weight: 800;
}

.timeline-wrapper {
    position: relative;
    width: 100%;
}

.center-line {
    position: absolute;
    left: 50%;
    width: 1px;
    height: calc(100% - 150px);
    background: #ccc;
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-row {
    display: flex;
    align-items: flex-start;
    /* This negative margin pulls the next row up.
       Adjust this value (-3rem to -6rem) based on text length */
    margin-bottom: -4.5rem;
    position: relative;
    z-index: 2;
    width: 100%;
}
.timeline-content {
    width: 45%;
    padding: 1rem;
    /* Background helps keep text readable if overlapping slightly */
    background: rgba(255, 255, 255, 0.95);
    position: relative;
    z-index: 5;
}

/* Alignment Logic */
.row-left { justify-content: flex-start; }
.row-right { justify-content: flex-end; }

.timeline-pulse {
    position: absolute;
    left: 50%;
    top: 1.5rem; /* Aligns with the first line of text */
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: #4a6b53;
    border-radius: 50%;
    z-index: 10;
}

.tech-box {
    color: #4a6b53;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
}

.critique-box {
    color: #333333;
    font-size: 1rem;
    line-height: 1.5;
    border-left: 3px solid #4a6b53;
    padding-left: 20px;
    /* Ensures the bar doesn't grow beyond the text */
    display: inline-block;
    text-align: left;
}
/* Reverse the bar for the left side */
.row-left .timeline-content { text-align: right; }
.row-left .critique-box {
    border-left: none;
    border-right: 3px solid #4a6b53;
    padding-left: 0;
    padding-right: 20px;
    text-align: right;
}
/* Khleb Finale */
.khleb-row {
    margin-top: 6rem;
    justify-content: center;
    text-align: center;
}

.khleb-pulse-main {
    width: 100px;
    height: 100px;
    background: #4a6b53;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem auto;
    font-weight: 900;
    font-size: 1.3rem;
}

.khleb-final-box h3 { color: #000000; font-size: 1.5rem; margin-bottom: 1rem; }
.khleb-final-box p { color: #4a6b53; font-size: 1rem; font-weight: bold; max-width: 850px; margin: 0 auto; }
.model-container {
    width: 90%;
    max-width: 1400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#khleb.full-page {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Vertically centers the content */
  align-items: center;     /* Horizontally centers the content */
  min-height: 100vh;
  position: relative;
}

/* Investor Portal Styles */

#investors {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    padding: 0 !important; /* Clear all padding to let the nudge work */
}

.investor-portal-card {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
    padding: 40px 60px 20px 60px; /* Trimmed bottom padding as we discussed */
    background: #ffffff;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
    height: auto;
    min-height: 0;

    /* THE NUDGE: Moves the card down 30px from the mathematical center */
    transform: translateY(30px); /* Moved down further per request */
}



.investor-action-lead {
    background: #f9f9f9;
    padding: 25px 35px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 30px;
    max-width: 500px; /* Constrains the vertical form for better aesthetics */
    margin-left: 0;
    margin-right: auto;
    max-width: 850px;

}
.investor-portal-card h1 {
    line-height: 1.2;
    border: none; /* Keep it clean */
}

.investor-header h2 {
    font-size: 1.1rem;
    letter-spacing: 3px;
    margin: 10px 0 25px 0;
    color: #4a6b53;
    border-bottom: 1px solid #ddd;
    display: block; /* Spans the width as a separator */
    padding-bottom: 10px;
}

.investor-copy {
    text-align: left;
    margin-top: 30px;
    max-width: 850px; /* Matching the visual weight of your paragraphs */
    margin-left: 0;
    margin-right: auto;
}

.investor-copy p {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #333333;
}

.investor-copy p:last-child {
    margin-bottom: 0;
}

/* The "Data Room" Box */
.data-room-box {
    max-width: 850px;
    margin-left: 0;
    margin-right: auto;
    background: rgba(74, 107, 83, 0.15);
    border-left: 3px solid #4a6b53;
    padding: 15px 30px;
    text-align: left;
    margin-bottom: 30px
}


.data-room-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 20px;
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
}
.data-room-list li {
    color: #333333;
    font-size: 0.85rem;
    padding-left: 15px;
    position: relative;
    white-space: nowrap; /* Prevents awkward wrapping */
}

.data-room-box li {
    color: #333333;
    font-size: 0.95rem;
    position: relative;
    padding-left: 20px;
}

.data-room-box li::before {
    content: "•";
    color: #997b18; /* Matches the investor theme */
    position: absolute;
    left: 0;
}

/* Labels for the form */
.investor-form label {
    display: block;
    color: #4a6b53;
    font-size: 0.8rem;
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.investor-form input {
    width: 100%;
    background: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 12px;
    color: #000000;
    outline: none;
    margin-bottom: 15px; /* Tighter vertical stack */
    box-sizing: border-box;
    transition: 0.3s;
}

.investor-form input:focus {
    border-color: #997b18;
    box-shadow: 0 0 15px rgba(153, 123, 24, 0.3);
}
.auth-btn-container {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 25px;
}

.auth-img-link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    /* Remove padding: 12px; to let the image go edge-to-edge */
    padding: 0;
    border-radius: 4px;
    overflow: hidden; /* Ensures the image doesn't bleed past rounded corners */
    transition: transform 0.2s, background 0.2s;
    min-height: 50px;
}

.auth-img-link:hover img {
    opacity: 0.8;
}

.auth-img-link:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
}

.auth-img-link img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keeps the logo centered and properly scaled */
    display: block;
    /* Remove max-width: 180px; so it fills the white button area */
}

.investor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.investor-stat-box {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    border-left: 3px solid #4a6b53;
}

.btn-submit-investor {
    width: 100%;
    font-weight: 800;
    padding: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: none;
    cursor: pointer;
    margin-top: 5px;
    background: #e0e0e0;
    color: #997b18;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(153, 123, 24, 0.4);
}

.btn-submit-investor:hover {
    /* Intensify the glow on hover */
    box-shadow: 0 0 25px rgba(153, 123, 24, 0.7);
    transform: translateY(-1px);
}

.auth-instruction {
    color: #000000 !important; /* Forces white */
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    line-height: 1.4;
    text-align: left;
}

#information {
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4rem 1.25rem 3rem 1.25rem; /* Increased bottom padding pulls footer up */
    box-sizing: border-box;
    position: relative;
}

#access {
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
    color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 4rem 1.25rem 3rem 1.25rem; /* Increased bottom padding pulls footer up */
    box-sizing: border-box;
    position: relative;
}

/* Fix for Access Page Scroll Indicator Overlap */
#access .scroll-indicator {
    position: static;
    transform: none;
    margin: 0;
}

#information .scroll-indicator {
    position: static;
    transform: none;
    margin: 0;
}

.info-video-container {
    width: 90%;
    max-width: 1000px; /* Matches typical deck width */
    margin: 0 auto 3rem auto; /* Centers it and adds bottom spacing */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    aspect-ratio: 16 / 9; /* Enforces video shape */
}

.deck-header-box {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid #000000;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-bottom: 20px;
}

.deck-header-text {
    color: #888282;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin: 0;
    font-weight: 800;
    letter-spacing: 4px;
}

.deck-container-v {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.deck-viewport-v {
    width: 100%;
    height: 70vh; /* Increased from 50vh to use available real estate */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    border: 1px solid #ccc;
    background: #ffffff;
}

.ks-cta-box {
    display: inline-block;
    background: #ffffff;
    border: 1px solid black;

    padding: 25px 50px;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 0 15px rgba(9, 232, 20, 0.15);
    margin-top: 40px;
}

.ks-cta-box:hover {
    background-color: #00ff66;
    box-shadow:
        0 0 20px rgba(0, 255, 102, 0.6),
        0 0 60px rgba(0, 255, 102, 0.3);
    transform: scale(1.02);
}

.ks-number {
    color: black;
    font-size: 1.4rem;
    font-weight: 800;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.ks-cta-box:hover .ks-number {
    color: black !important;
}
.deck-viewport-v::-webkit-scrollbar { display: none; }

/* Kickstarter Share Button Container */
.ks-share-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 3rem;
    flex-wrap: wrap; /* Wraps on very small screens */
}

.ks-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid black;
    width: 80px; /* Matches the visual height of the main button */
    height: 80px; /* Matches the visual height of the main button */
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 15px rgba(9, 232, 20, 0.15);
    margin-top: 40px; /* Aligns with ks-cta-box margin */
    padding: 0;
}

.ks-share-btn:hover {
    background-color: #00ff66;
    box-shadow: 0 0 20px rgba(0, 255, 102, 0.6), 0 0 60px rgba(0, 255, 102, 0.3);
    transform: scale(1.02);
}


.slide-v {
    min-height: 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.nav-btn-v {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid #ccc;
    color: #000;
    width: 80px;
    height: 24px;
    cursor: pointer;
    margin: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* Pinned Investor Link at Bottom */
.investor-footer {
    position: relative; /* No longer absolute: prevents overlap on all screens */
    margin-top: auto;   /* Pushes footer to the bottom of the container */
    padding-bottom: 0.5rem; /* Moves the scroll indicator down closer to the edge */
    width: 100%;
    display: flex;
    justify-content: center;
}

.mobile-auth-icons { display: none; }

/* Global fix for Grid/Chart resizing */
.finance-chart-box, .unit-cost-chart-box {
    min-width: 0; /* CRITICAL: Prevents the graph from skewing in a grid */
}

/* FORCE FIX: Tells the canvas to ignore its internal resolution and fill the box */
.finance-chart-box canvas, .unit-cost-chart-box canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Unit Cost & Household Scale Chart Container */
.unit-cost-chart-box {
    background: #f9f9f9;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid #ccc;
    height: 55vh;      /* Grows with the screen height */
    min-height: 500px; /* Ensures it doesn't get too short on desktop */
}

/* --- Tablet / Narrow Desktop Fixes --- */
/* Prevents the graph from skewing or overlapping when the screen is narrower than a full desktop */
@media screen and (max-width: 64rem) {
  .finance-grid {
    display: flex !important;
    flex-direction: column;
    gap: 3rem;
  }

  .finance-chart-box {
    width: 100% !important;
  }

  /* Fix for Unit Cost & Household Scale Graphs on Tablet/Laptop */
  .unit-cost-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3rem !important;
  }

  .unit-cost-chart-box {
    width: 100% !important;
  }

  /* Fixes the scroll indicator overlap on tablet */
  #finances .scroll-indicator-tech {
    position: static;
    margin-top: 3rem;
    transform: none;
  }

  #finances {
      justify-content: flex-start; /* Prevents top cut-off if content is tall */
      padding-top: 8rem;
  }
}

/* Fix for Unit Cost & Household Scale Graphs on Laptops */
/* Prevents text from crushing the graph by allowing columns to shrink */
@media screen and (max-width: 90rem) {
  .unit-cost-grid {
    gap: 2rem !important;
    grid-template-columns: 1fr 1fr !important;
  }
  .unit-cost-grid > div {
      min-width: 0 !important;
  }
  .unit-cost-chart-box {
      height: 45vh !important; /* Slightly shorter for laptops */
      min-height: 350px !important;
  }
}

@media screen and (min-width: 48.01rem) {
  .mobile-share-icon { display: none; }
  .desktop-copy-icon { display: block; }
  }

/* --- MOBILE & TABLET ADAPTATION --- */
@media screen and (max-width: 48rem) {
  /* 1. Navbar & Auth Icons */
.topnav {
    position: fixed !important; /* Forces it to stay at the very top of the screen */
    top: 0;
    left: 0;
    z-index: 99999 !important; /* Layers it above EVERYTHING */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    width: 100% !important;
    height: 50px !important; /* Explicit height */
    justify-content: flex-start !important;
    background-color: #ffffff !important;
  }
body {
    padding-top: 50px !important;
  }

.topnav a, .nav-auth span {
    font-size: 0.8rem !important;
    padding: 0 10px !important;
    line-height: 50px !important; /* Vertically centers text in the 50px bar */
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    color: #000000 !important;
  }
  .desktop-only { display: none !important; }

  .mobile-auth-icons {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    padding-left: 10px !important;
    flex: 0 0 auto !important;
  }

  .mobile-auth-icons a {
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    border: none !important;
  }

  .mobile-auth-icons img {
    height: 22px !important;
    width: auto !important;
  }

  /* 2. Overlap Fix: Kickstarter & Scroll Indicator */
  /* This prevents the "Go to Investors" from sitting on top of the Kickstarter box */
div[style*="position: absolute; bottom: 40px;"] {
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    /* Increase this value to push it down further */
    margin-top: 100px !important;
    padding-bottom: 40px !important;
    display: block !important;
  }



  /* 4. Global Section Lock */
.hero-hbox {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    z-index: 1 !important; /* Keeps it behind the nav but above the background */
    margin-top: 0 !important; /* Resets any conflicting margins */
    width: 100% !important;
    height: auto !important;
    min-height: 80vh !important; /* Forces it to take up screen space */
}

  /* 4b. Force Grid Sections to Stack (Fixes "Squishing") */
  .vision-hbox, .tech-hbox, .demand-hbox {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  /* --- INTERLEAVED LAYOUT MAGIC (Mobile Only) --- */
  /* This unwraps the columns and lets us reorder the pieces individually */
  .vision-content-left, .vision-assets-right,
  .demand-content-left, .demand-assets-right {
    display: contents !important;
  }

  /* Vision Ordering */
  .vision-block-1 { order: 1; }
  .vision-assets-right .asset-card:nth-child(1) { order: 2; margin-bottom: 3rem !important; }
  .vision-block-2 { order: 3; }
  .vision-assets-right .asset-card:nth-child(2) { order: 4; margin-bottom: 3rem !important; }

  .vision-hbox .asset-card {
      height: auto !important; /* Resets desktop constraint */
      flex: 0 0 auto !important; /* Resets desktop flex */
  }

  /* Demand Ordering */
  .demand-block-1 { order: 1; }
  .demand-assets-right .demand-asset-box:nth-child(1) { order: 2; margin-bottom: 3rem !important; }

  .demand-block-2 { order: 3; }
  .demand-assets-right .demand-asset-box:nth-child(2) { order: 4; margin-bottom: 3rem !important; }

  .demand-block-3 { order: 5; }
  .demand-assets-right .demand-asset-box:nth-child(3) { order: 6; margin-bottom: 3rem !important; }

  .demand-block-4 { order: 7; }
  .demand-assets-right .demand-asset-box:nth-child(4) { order: 8; margin-bottom: 3rem !important; }

  .demand-asset-box {
    max-width: 100% !important;
    margin-left: 0 !important;
    height: auto !important; /* Resets desktop constraint */
    flex: 0 0 auto !important; /* Resets desktop flex */
  }

  /* 5. Investor Section Stacking */
  .investor-portal-card {
    height: auto !important;
    min-height: auto !important;
    padding: 2rem 1.25rem !important;
  }

  .investor-action-lead > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
  }

  .investor-action-lead > div > div {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    flex: none !important;
  }

  /* 6. Button & Logo Styling */
  .auth-img-link {
    width: 100% !important;
    height: 50px !important;
    background: #f5f5f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  .auth-img-link img {
    height: auto !important;
    width: 200px !important;
    object-fit: contain !important;
  }

  .auth-instruction {
    margin: 0 !important;
    font-size: 1.1rem !important;
  }

  /* 7. Data Room: 2-Column Grid */
  .data-room-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px 10px !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
    list-style: none !important;
  }

  .data-room-list li {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    display: flex !important;
    align-items: flex-start !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }

  .data-room-list li::before {
    content: "•";
    margin-right: 8px;
    color: #4a6b53;
    flex-shrink: 0;
  }

  /* 8. General Cleanup */
  .hero-content-left, .vision-content-left, .tech-content-right, .demand-content-left {
    padding: 0 1.5rem !important;
    box-sizing: border-box !important;
  }

  .asset-card:hover, .kitchenware_rendering:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  #finances {
    padding-top: 9rem !important; /* Pushes the section down so it doesn't hug Unit Cost */
    justify-content: flex-start !important; /* Ensures it starts from the top padding, not centered */
  }

  #access {
    justify-content: flex-start !important;
    padding-top: 4rem !important; /* Moves the deck higher up on mobile */
  }

  #information {
    justify-content: flex-start !important;
    padding-top: 4rem !important; /* Moves the deck higher up on mobile */
  }

  .deck-viewport-v {
    height: 50vh !important; /* Reduces slide height on mobile so they aren't cut off */
  }

  /* Fix for Unit Cost & Household Scale Graphs on Mobile Portrait */
  .unit-cost-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .unit-cost-chart-box {
    height: 35vh !important; /* Overrides the fixed 450px to fit screen */
    width: 100% !important;
  }

  /* Fix for Finance Section on Mobile Portrait */
  .finance-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    margin-bottom: 2rem !important;
  }

  .finance-chart-box {
    height: 35vh !important; /* Override fixed 500px */
    width: 100% !important;
    padding: 1rem !important;
    flex-shrink: 0 !important; /* CRITICAL: Prevents the graph from collapsing to 0 height */
  }

  .counter-grid {
    grid-template-columns: 1fr 1fr !important; /* 2x2 grid instead of 1x4 */
    gap: 1rem !important;
  }

  /* Fix for Finance Scroll Indicator Overlap */
  #finances .scroll-indicator-tech {
    position: static !important; /* Unsticks it from the bottom so it flows AFTER the grid */
    transform: none !important;
    margin-top: 3rem !important;
    margin-bottom: 2rem !important;
  }

  /* Fix for History Timeline Overlap on Mobile */
  .center-line {
    left: 2rem !important;
    transform: none !important;
  }

  .timeline-row {
    margin-bottom: 2rem !important; /* Removes negative margin overlap */
    justify-content: flex-start !important;
  }

  .timeline-pulse {
    left: calc(2rem - 6px) !important; /* Centers dot on the new left line */
    transform: none !important;
  }

  .timeline-content {
    width: calc(100% - 4rem) !important; /* Full width minus space for line */
    margin-left: 4rem !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* Force left-side boxes to align correctly in this new stack */
  .row-left .timeline-content { text-align: left !important; }

  .row-left .critique-box {
    border-right: none !important;
    padding-right: 0 !important;
    border-left: 3px solid #4a6b53 !important;
    padding-left: 20px !important;
  }

  /* Keep the final Khleb circle centered */
  .khleb-row {
    justify-content: center !important;
  }
  .khleb-row .timeline-content {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
}


/* --- Mobile Landscape Fix --- */
@media screen and (orientation: landscape) and (max-height: 50rem) {
  /* Landscape: Side-by-side layout to prevent "zoomed in" feel */
  .unit-cost-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }

  .unit-cost-chart-box {
    height: 70vh !important; /* Fits nicely in landscape height */
    flex: 1 !important;
  }

  /* Landscape Finance */
  .finance-grid {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }

  .finance-chart-box {
    height: 70vh !important;
    flex: 1.5 !important;
  }

  .controls-card {
    flex: 1 !important;
  }
}

/* Fix for Unit Cost & Household Scale on Short Screens (Laptops) */
/* Forces content to stack and scroll if vertical space is limited */
@media screen and (max-height: 60rem) {
  .unit-cost-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3rem !important;
  }

  .unit-cost-chart-box {
    width: 100% !important;
  }
}



/* --- FINAL SAFETY RESET --- */
html, body {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative;
  margin: 0;
  padding: 0;
}