/* Modern Landing Page Styles based on landingtemplate.html */
:root{
  /* Brandable tokens — tune to your brand */
  --brand: #5A9A6F;           /* primary brand */
  --secondary: #F8B75D;        /* secondary accent */
  --hover: #4C8A5F;            /* hover state */
  --brand-ink: #083b2b;       /* deep green for headings */
  --brand-tint: #4C8A5F;      /* mint tint surfaces */
  --bg: #ffffff;
  --ink: #0f172a;             /* slate-900 */
  --muted: #475569;           /* slate-600 */
  --ring: rgba(21,158,102,.35);
  --shadow: rgba(0, 0, 0, 0.1) 0px 8px 16px;
  --radius: 4px;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;}
body{
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--ink);
  line-height:1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.container{width:min(1140px, 92vw); margin-inline:auto}

/* NAV */
.nav{position:sticky; top:0; z-index:3000; backdrop-filter:saturate(180%) blur(8px); background: color-mix(in oklab, var(--bg) 92%, transparent);  box-shadow: var(--shadow);}    
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; gap:12px; align-items:center; font-weight:700}
/* .brand .logo{width:28px;height:28px; display:grid; place-items:center; background:var(--brand); color:white; border-radius:10px} */
.nav a.link{opacity:.9; padding:10px 12px; border-radius:10px}
.nav a.link:hover{background: color-mix(in oklab, var(--brand-tint) 70%, transparent)}

/* Recipes Dropdown */
.recipes-dropdown-container{position:relative; display:inline-block; margin-left:0}
.recipes-dropdown-trigger{display:flex; align-items:center; gap:8px; padding:10px 16px; background:transparent; border:none; font-size:16px; font-weight:600; color:var(--ink); cursor:pointer; border-radius:10px; transition:all .3s ease}
.recipes-dropdown-trigger:hover{background:color-mix(in oklab, var(--brand-tint) 70%, transparent)}
.recipes-dropdown-trigger:focus{outline:2px solid var(--brand); outline-offset:2px}
.dropdown-arrow{transition:transform .3s ease}
.recipes-dropdown-trigger[aria-expanded="true"] .dropdown-arrow{transform:rotate(180deg)}

.recipes-dropdown-menu{position:fixed; top:80px; left:20px; background:#fff; border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.15); border:1px solid color-mix(in oklab, var(--brand), white 85%); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease, transform .3s ease; transform:translateY(-10px); z-index:5000; min-width:600px; max-width:800px}
.recipes-dropdown-menu[aria-hidden="false"]{opacity:1; visibility:visible; transform:translateY(0)}

.dropdown-content{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:24px; padding:24px; max-height:70vh; overflow-y:auto}

.dropdown-column{display:flex; flex-direction:column; gap:12px}
.section-title{font-size:14px; font-weight:700; color:var(--brand); text-transform:uppercase; letter-spacing:.05em; margin:0 0 8px; padding:0 12px; border-bottom:2px solid color-mix(in oklab, var(--brand), white 80%); padding-bottom:8px}

.category-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px}
.category-link{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; color:var(--ink); text-decoration:none; transition:all .25s ease; font-size:15px}
.category-link:hover{background:color-mix(in oklab, var(--brand-tint) 35%, transparent); transform:translateX(4px)}
.category-icon{font-size:18px; width:24px; text-align:center}
.category-name{flex:1}

/* Dropdown backdrop overlay */
.dropdown-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.2); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; z-index:999; backdrop-filter:blur(2px)}
.dropdown-backdrop.active{opacity:1; visibility:visible}

/* Dropdown close button (mobile only) */
.dropdown-close-btn{display:none; align-items:center; justify-content:space-between; padding:16px 20px; background:#fff; border-bottom:1px solid color-mix(in oklab, var(--brand), white 85%); position:sticky; top:0; z-index:10}
.dropdown-close-btn h3{margin:0; font-size:18px; color:var(--brand-ink); font-weight:700}
.dropdown-close-btn button{background:transparent; border:none; cursor:pointer; padding:8px; display:flex; align-items:center; justify-content:center; border-radius:8px; transition:background .2s ease}
.dropdown-close-btn button:hover{background:color-mix(in oklab, var(--brand-tint) 85%, transparent)}
.dropdown-close-btn button svg{width:24px; height:24px; stroke:var(--ink); stroke-width:2}

.logo {
    display: grid;
    align-items: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #4CAF50;
}

.logo-icon {
    height: 60px;
    margin-right: 10px;
    border-radius: 8px;
    object-fit: contain;
}

.logo-icon:not(img) {
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.logo-text {
    width: 150px;
}

/* Language Toggle Integration */
.language-toggle {
    display: flex;
    gap: 10px;
    margin-left: 20px;
}

.lang-btn {
    padding: 8px 12px;
    border: 1px solid var(--brand);
    background: transparent;
    color: var(--brand);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
    opacity: 0.9;
}

.lang-btn:hover,
.lang-btn.active {
    background: var(--brand);
    color: white;
    opacity: 1;
}

/* HERO */
.hero{position:relative; min-height:84vh; display:grid;}
.hero video{width:100%; height:100%; object-fit:cover; display:block;}
.hero .video-wrap{position:absolute; inset:0; overflow:hidden}
.hero .scrim{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 40%, rgba(0,0,0,0) 65%), linear-gradient(to top, var(--bg) 0%, transparent 40%)}
.hero .content{position:relative; align-self:end; padding:8vh 0 5vh}
.eyebrow{display:inline-flex; gap:8px; align-items:center; font-weight:600; padding:6px 12px; border-radius:999px; background: color-mix(in oklab, var(--bg) 85%, var(--brand-tint) 15%); border:1px solid color-mix(in oklab, var(--brand), white 75%);}
h1{font-size: clamp(32px, 5vw, 68px); line-height:1.05; letter-spacing:-.02em; margin:14px 0; color: var(--bg);
    text-shadow: 0 1px 0 rgba(0,0,0,.2), 0 30px 80px rgba(0,0,0,.35)}
h1 .accent{color:#fff;}
.hero p{max-width:70ch; color: color-mix(in oklab, white 85%, var(--bg)); font-size: clamp(16px, 2.2vw, 20px)}
.cta{display:flex; gap:12px; margin-top:20px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:12px; border:1px solid #0000; font-weight:700; transition:transform .25s ease, box-shadow .25s ease}
.btn:hover{transform:translateY(-2px); box-shadow: var(--shadow)}
.btn.primary{background: var(--brand); color:#fff}
.btn.primary:hover{background: var(--hover)}
.btn.ghost{background: color-mix(in oklab, var(--bg) 88%, var(--brand-tint) 12%); border-color: color-mix(in oklab, var(--brand), white 70%)}

.badge-appstore{background:#000; color:#fff; border-radius:14px; padding:10px 14px; display:inline-flex; align-items:center; gap:10px; font-weight:600}
.badge-appstore svg{width:20px;height:20px; fill:#fff}

.scroll-hint{position:absolute; bottom:18px; left:50%; translate:-50% 0; display:flex; align-items:center; gap:10px; color:#fff; opacity:.85}

/* FEATURES */
section{padding: clamp(56px, 9vh, 96px) 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px}
.kicker{font-weight:700; color: var(--secondary)}
h2{font-size:clamp(28px,3.2vw,44px); letter-spacing:-.02em; margin:.2em 0; color: var(--brand-ink)}
.lead{color: var(--muted); max-width:85ch}

.features{display:grid; grid-template-columns:1fr; gap:18px}
.card{background: #ffffff; border:1px solid color-mix(in oklab, var(--brand), white 80%); padding:20px; border-radius: var(--radius); box-shadow: var(--shadow); position:relative; overflow:hidden}
.card .icon{width:40px;height:40px; display:grid; place-items:center; border-radius:12px; background: color-mix(in oklab, var(--brand) 15%, var(--bg)); border:1px solid color-mix(in oklab, var(--brand), white 75%)}
.card h3{margin:14px 0 8px; font-size:20px}
.card p{color: var(--muted)}

/* HOW-IT-WORKS */
.how{display:grid; grid-template-columns:1fr; gap:22px}
.step{padding:22px; border-radius:var(--radius); background:linear-gradient(180deg, color-mix(in oklab, var(--brand-tint) 65%, var(--bg)), var(--bg)); border:1px solid color-mix(in oklab, var(--brand), white 78%)}
.step .num{font-weight:900; font-size:14px; color: var(--brand); letter-spacing:.08em}

/* SCREENSHOTS (with parallax items) */
.screens{position:relative}
.shot-grid{display:grid; grid-template-columns:1fr; gap:16px; align-items:stretch}
.shot{border-radius:24px; overflow:hidden; box-shadow: var(--shadow); border:1px solid color-mix(in oklab, var(--brand), white 82%)}
.shot img{display:block; width:100%; height:100%; object-fit:cover}
.shot.a,.shot.b,.shot.c{grid-column: 1 / -1}
.shot.a{grid-column: span 5}
.shot.b{grid-column: span 3}
.shot.c{grid-column: span 4}

/* Parallax helpers */
[data-speed]{will-change: transform}

/* Reveal on view */
.reveal{opacity:0; transform: translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* Footer */
footer{padding:56px 0; color:var(--muted); border-top:1px dashed color-mix(in oklab, var(--brand), white 80%)}

/* Added components */
.btn.secondary{background: var(--secondary); color:#1a1a1a}
.btn.secondary:hover{filter:brightness(.95)}
.btn.outline{background: transparent; border:1px solid var(--brand); color: var(--brand)}
.btn.outline:hover{background: var(--hover); color:#fff}
.btn.small{padding:10px 12px; font-weight:600}

.pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; font-size:12px; font-weight:700; border-radius:999px; background: color-mix(in oklab, var(--secondary) 70%, white); color:#1a1a1a; border:1px solid color-mix(in oklab, var(--secondary), white 70%)}

.theme-grid{display:grid; grid-template-columns:1fr; gap:20px}
.theme-card{display:block; border-radius: var(--radius); overflow:hidden; border:1px solid color-mix(in oklab, var(--brand), white 78%); background: color-mix(in oklab, var(--bg) 92%, var(--brand-tint) 8%); transition: transform .25s ease, box-shadow .25s ease}
.theme-card img{width:100%; height:320px; object-fit:cover; display:block}
.theme-card .theme-meta{padding:18px}
.theme-card h3{margin:10px 0 6px}
.theme-card:hover{transform:translateY(-4px); box-shadow: var(--shadow)}

.stage{display:grid; grid-template-columns:1fr; gap:18px; align-items:center}
.stage.reverse{grid-template-columns:1fr}
.stage figure{margin:0}
.stage .frame{border-radius:var(--radius); border:1px solid color-mix(in oklab, var(--brand), white 80%); overflow:hidden; box-shadow: var(--shadow)}
.stage .frame img{display:block; width:100%; height:auto; max-height:60vh; object-fit:cover}
.bullets{display:grid; gap:12px}
.bullets li{list-style:none; padding-left:30px; position:relative}
.bullets li:before{content:""; position:absolute; left:0; top:.45em; width:18px; height:18px; border-radius:6px; background: var(--brand)}

.gear-list{display:grid; grid-template-columns: 1fr auto; gap:12px 18px; align-items:center}
.gear-name{padding:14px 0; border-bottom:1px solid color-mix(in oklab, var(--brand), white 84%)}
.note{margin-top:14px; padding:12px 14px; border-radius:12px; background: color-mix(in oklab, var(--bg) 85%, var(--brand-tint) 15%); border:1px dashed color-mix(in oklab, var(--brand), white 70%); color: var(--muted)}

/* Legacy styles for existing components */
.hero .subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero .mission {
    font-size: 1.1rem;
    margin-bottom: 3rem;
    opacity: 0.8;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Download Buttons */
.download-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.download-buttons-mobile {
    display: none;
}

.download-buttons-features {
    padding-top: 33px;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.download-btn:hover {
    transform: translateY(-2px);
}

.download-btn img {
    height: 45px;
}

/* Welcome container */
.welcome_container {
    max-width: 366px;
    margin: 0 auto;
}

.welcome {
    width: 100%;
    background-color: white;
    color: #000;
    margin-bottom: 30px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.welcome .title {
    font-size: 18px;
    font-weight: bold;
    padding: 15px 0;
}

.welcome-icon {
    width: 100%;
}

.welcome-icon img {
    width: 100%;
}

.welcome-text {
    padding: 0 30px 30px 30px;
}

/* Features grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature {
    background: white;
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.feature:hover {
    transform: translateY(-5px);
}

.feature-icon {
    width: 100%;
    height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.feature-icon img {
    width: 100%;
}

.feature-text {
    padding: 0 30px 30px 30px;
}

.feature h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: #333;
}

.feature p {
    color: #666;
    line-height: 1.6;
}

/* Responsive Design */
@media (min-width: 960px){
  .features{grid-template-columns: repeat(3, minmax(0,1fr))}
  .how{grid-template-columns: repeat(3, minmax(0,1fr))}
  .theme-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
  .stage{grid-template-columns: 1.1fr .9fr}
  .stage.reverse{grid-template-columns: .9fr 1.1fr}
  .shot-grid{grid-template-columns: repeat(12, 1fr)}
  .shot.a{grid-column: span 5}
  .shot.b{grid-column: span 3}
  .shot.c{grid-column: span 4}
  .video-grid{grid-template-columns: repeat(3, minmax(0,1fr))}
  .hero{min-height:84vh}
}

@media (max-width: 960px){
  .how{grid-template-columns:1fr}
  .shot-grid{grid-template-columns:1fr}
  .shot.a,.shot.b,.shot.c{grid-column: 1 / -1}
  .hero{min-height:72vh}
  .theme-grid{grid-template-columns:1fr}
  .stage, .stage.reverse{grid-template-columns:1fr}
  .features-grid{grid-template-columns: 1fr}
  .section-head { flex-direction: column; }
  .try-now { padding-bottom: 12px; }
  section{padding: clamp(26px, 9vh, 26px) 0}
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero .subtitle {
        font-size: 1.1rem;
    }
    
    .download-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .nav-inner {
        flex-direction: column;
        gap: 15px;
        padding: 14px 0;
    }
    
    .nav nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
    }
    
    /* Responsive dropdown */
    .recipes-dropdown-menu{min-width:90vw; left:auto; right:0; max-width:90vw}
    .dropdown-content{grid-template-columns:repeat(2, 1fr); gap:16px; padding:16px}
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 2rem;
    }
    
    .container {
        padding: 0 15px;
    }

    .features h2 {
        font-size: 1.8rem;
    }
    
    .lang-btn {
        padding: 4px 8px;
        border-radius: 16px;
    }
    
    .hero {
        padding: 100px 0 60px;
    }

    .download-buttons-mobile {
        display: flex !important;
        padding-bottom: 33px;
    }

    .download-buttons-mobile .app-store-btn img {
        height: 51px;
    }

    .download-buttons-desktop {
        display: none !important;
    }
    
    .nav-inner {
        flex-direction: column;
        gap: 10px;
        padding: 14px 0;
    }
    
    .nav nav {
        flex-direction: column;
        gap: 8px;
    }
    
    .language-toggle {
        margin-left: 0;
        margin-top: 10px;
    }
    
    /* Mobile dropdown adjustments */
    .recipes-dropdown-container{margin-left:0; margin-top:10px}
    .recipes-dropdown-menu{position:fixed; top:0; left:0; right:0; bottom:0; min-width:100vw; max-width:100vw; border-radius:0; transform:translateY(0); display:flex; flex-direction:column}
    .recipes-dropdown-menu[aria-hidden="false"]{transform:translateY(0)}
    .dropdown-content{grid-template-columns:1fr; gap:16px; padding:20px; max-height:none; overflow-y:auto; flex:1}
    .section-title{font-size:14px; padding:0 0 8px 0}
    .category-link{font-size:15px; padding:10px 12px}
    .dropdown-close-btn{display:flex}
}

/* Video grid */
.video-grid{display:grid; grid-template-columns:1fr; gap:16px}
.video-card{border-radius:24px; overflow:hidden; box-shadow: var(--shadow); border:1px solid color-mix(in oklab, var(--brand), white 82%); aspect-ratio: 9/16; background:#000}
.video-card video{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width: 960px){ .video-grid{grid-template-columns:1fr} }

/* Recipe Carousel */
.recipe-carousel-wrapper{position:relative; margin-top:32px; overflow:hidden}
.recipe-carousel{display:flex; gap:32px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; padding:8px 0 24px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:color-mix(in oklab, var(--brand), white 60%) color-mix(in oklab, var(--brand), white 90%)}
.recipe-carousel::-webkit-scrollbar{height:8px}
.recipe-carousel::-webkit-scrollbar-track{background:color-mix(in oklab, var(--brand), white 90%); border-radius:4px}
.recipe-carousel::-webkit-scrollbar-thumb{background:color-mix(in oklab, var(--brand), white 60%); border-radius:4px}
.recipe-carousel::-webkit-scrollbar-thumb:hover{background:var(--brand)}

.recipe-card{flex:0 0 min(520px, 85vw); scroll-snap-align:center; background:#fff; border-radius:var(--radius); border:1px solid color-mix(in oklab, var(--brand), white 80%); box-shadow:var(--shadow); overflow:hidden}

.recipe-hero{position:relative; width:100%; height:320px; overflow:hidden}
.recipe-hero img{width:100%; height:100%; object-fit:cover; display:block}
.recipe-title-overlay{position:absolute; bottom:0; left:0; right:0; padding:20px; background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.4) 70%, transparent 100%)}
.recipe-title-overlay h3{color:#fff; font-size:24px; margin:0 0 6px; text-shadow:0 2px 8px rgba(0,0,0,.3)}
.recipe-meta{color:rgba(255,255,255,.9); font-size:14px; font-weight:600}

.recipe-content{padding:24px}

.recipe-process-images{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-bottom:24px}
.recipe-process-images img{width:100%; height:140px; object-fit:cover; border-radius:8px; border:1px solid color-mix(in oklab, var(--brand), white 85%)}

.recipe-section{margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid color-mix(in oklab, var(--brand), white 88%)}
.recipe-section:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0}
.recipe-section h4{color:var(--brand-ink); font-size:18px; margin:0 0 12px; font-weight:700}
.recipe-section p{color:var(--muted); line-height:1.6; margin:0 0 10px}
.recipe-section p:last-child{margin-bottom:0}

.recipe-list{margin:0; padding-left:20px; color:var(--muted)}
.recipe-list li{margin-bottom:8px; line-height:1.6}
.recipe-list li:last-child{margin-bottom:0}
.recipe-list li strong{color:var(--ink); font-weight:600}

.carousel-nav{position:absolute; top:100px; transform:translateY(-50%); z-index:10; width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid color-mix(in oklab, var(--brand), white 75%); box-shadow:var(--shadow); display:grid; place-items:center; cursor:pointer; transition:all .25s ease}
.carousel-nav:hover{background:color-mix(in oklab, var(--brand), white 92%); transform:translateY(-50%) scale(1.05)}
.carousel-nav.prev{left:8px}
.carousel-nav.next{right:8px}
.carousel-nav svg{color:var(--brand)}

@media (max-width: 960px){
  .recipe-carousel{gap:20px}
  .recipe-card{flex:0 0 min(420px, 85vw)}
  .recipe-hero{height:260px}
  .recipe-process-images{grid-template-columns:repeat(3, 1fr); gap:8px}
  .recipe-process-images img{height:100px}
  .carousel-nav{width:40px; height:40px}
}

@media (max-width: 480px){
  .recipe-carousel{gap:16px; padding:8px 0 16px}
  .recipe-card{flex:0 0 min(340px, 90vw)}
  .recipe-hero{height:220px}
  .recipe-title-overlay h3{font-size:20px}
  .recipe-content{padding:18px}
  .recipe-process-images{gap:6px}
  .recipe-process-images img{height:80px}
  .recipe-section{margin-bottom:18px; padding-bottom:18px}
  .recipe-section h4{font-size:16px}
  .carousel-nav{width:36px; height:36px}
}

/* Recipe CTA */
.recipe-cta{margin-top:48px; padding:40px; background:linear-gradient(135deg, color-mix(in oklab, var(--brand) 8%, var(--bg)) 0%, color-mix(in oklab, var(--brand-tint) 5%, var(--bg)) 100%); border-radius:var(--radius); border:1px solid color-mix(in oklab, var(--brand), white 82%); text-align:center}
.recipe-cta-content h3{color:var(--brand-ink); font-size:clamp(24px, 3vw, 32px); margin:0 0 16px; font-weight:700}
.recipe-cta-content p{color:var(--muted); font-size:clamp(16px, 2vw, 18px); line-height:1.6; max-width:65ch; margin:0 auto 28px}
.recipe-cta .download-buttons{justify-content:center; gap:16px}

@media (max-width: 480px){
  .recipe-cta{margin-top:32px; padding:28px 20px}
  .recipe-cta-content h3{font-size:22px; margin-bottom:12px}
  .recipe-cta-content p{font-size:15px; margin-bottom:20px}
  .recipe-cta .download-buttons{flex-direction:column; gap:12px}
}


#videos {
    display: none;
}

/* Download Buttons */
.download-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    z-index: 2;
}

.download-buttons-mobile {
    display: none;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.download-btn:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

.download-btn img {
    height: 50px;
}

.qr-code-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 2rem;
}

.qr-code {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: var(--off-white);
    padding: 8px;
}

.qr-text {
    font-size: 0.9rem;
    color: rgba(254, 252, 248, 0.8);
    margin-top: 0.5rem;
    font-weight: 500;
}