/* ==================================================================
   NOURISH N NARRATE — SHARED DESIGN SYSTEM
   The single stylesheet for every page: index, all-recipes,
   calculator, tracker, profile and login.

   Pages may add a small <style> block of their own for page-specific
   bits, but everything shared lives here. Edit once, applies
   everywhere.
================================================================== */

  /* ==================================================================
     NOURISH N NARRATE — DESIGN SYSTEM
     Modern, premium redesign. Everything lives in this file.

     TABLE OF CONTENTS
       1.  Design tokens (colors, shadows, radii, motion)
       2.  Reset & base
       3.  Layout utilities & section headers
       4.  Loading screen
       5.  Navigation & mobile menu
       6.  Hero
       7.  Buttons
       8.  About
       9.  Recipes (selector, search, filters, cards)
       10. Recipe modal
       11. Suggest-a-food
       12. FAQ
       13. Contact
       14. Footer & scroll-to-top
       15. Scroll-reveal & keyframes
       16. Dark theme
       17. Responsive breakpoints
       18. Accessibility (reduced motion, focus)
  ================================================================== */

  /* ---------- 1. DESIGN TOKENS ---------- */
  :root {
    /* Brand greens — trustworthy, fresh, professional */
    --green:       #059669;
    --green-mid:   #047857;
    --green-deep:  #065f46;
    --green-light: #34d399;
    --green-pale:  #ecfdf5;

    /* Warm accent */
    --orange:      #ea580c;
    --orange-pale: #fff4ec;
    --amber:       #f59e0b;

    /* Neutrals */
    --ink:        #0f172a;
    --text:       #334155;
    --text-muted: #64748b;
    --bg:         #fbfcfb;
    --surface:    #ffffff;
    --surface-2:  #f4f8f6;
    --border:     rgba(15, 23, 42, 0.08);
    --border-strong: rgba(15, 23, 42, 0.14);

    /* Gradients */
    --grad-green:  linear-gradient(135deg, #059669 0%, #047857 60%, #065f46 100%);
    --grad-hero:   linear-gradient(120deg, #f0fdf7 0%, #fbfcfb 45%, #fff7ed 100%);
    --grad-text:   linear-gradient(120deg, #059669, #0d9488);

    /* Elevation */
    /* Layered, warm shadows — soft ink base with a brass-tinted bloom */
    --shadow-sm: 0 1px 2px rgba(45, 38, 22, 0.04), 0 2px 6px rgba(45, 38, 22, 0.05), 0 8px 18px -6px rgba(45, 38, 22, 0.06);
    --shadow-md: 0 2px 4px rgba(45, 38, 22, 0.05), 0 8px 18px -4px rgba(45, 38, 22, 0.08), 0 22px 44px -14px rgba(150, 116, 40, 0.14);
    --shadow-lg: 0 4px 8px rgba(45, 38, 22, 0.05), 0 16px 32px -8px rgba(45, 38, 22, 0.10), 0 36px 72px -18px rgba(150, 116, 40, 0.18);
    --shadow-green: 0 10px 30px -8px rgba(5, 150, 105, 0.45);

    /* Shape */
    --radius-sm:  12px;
    --radius:     20px;
    --radius-lg:  28px;
    --radius-full: 999px;

    /* Motion */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

    /* Type */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Layout */
    --nav-h: 60px;
  }

  /* ---------- 2. RESET & BASE ---------- */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 12px);
  }

  body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    font-size: 16px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background 0.4s ease, color 0.4s ease;
  }

  ::selection { background: rgba(5, 150, 105, 0.22); }

  img { max-width: 100%; display: block; }
  a { color: inherit; }
  button { font-family: inherit; cursor: pointer; }

  h1, h2, h3 { color: var(--ink); font-weight: 700; line-height: 1.2; }

  /* ---------- 3. LAYOUT UTILITIES & SECTION HEADERS ---------- */
  .container {
    width: min(100% - 2.5rem, 1140px);
    margin-inline: auto;
  }

  section {
    position: relative;
    padding: clamp(4.5rem, 9vw, 7rem) 0;
  }

  .text-center { text-align: center; }

  .section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--green);
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, 0.18);
    padding: 0.4rem 0.95rem;
    border-radius: var(--radius-full);
    margin-bottom: 1.1rem;
  }
  .section-label::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--green);
  }

  .section-title {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4vw, 2.8rem);
    letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
    text-wrap: balance;
  }

  .divider {
    width: 56px; height: 4px;
    border-radius: var(--radius-full);
    background: var(--grad-green);
    margin: 1.1rem 0 1.4rem;
  }
  .text-center .divider { margin-inline: auto; }

  .section-sub {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 62ch;
  }
  .text-center .section-sub { margin-inline: auto; }

  /* ---------- 4. LOADING SCREEN ---------- */
  #loading-screen {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.5rem;
    background: var(--grad-hero);
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }
  #loading-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

  .loader-logo {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    color: var(--ink);
  }
  .loader-logo span { color: var(--green); }

  .loader-bar {
    width: 180px; height: 4px;
    border-radius: var(--radius-full);
    background: rgba(5, 150, 105, 0.15);
    overflow: hidden;
    position: relative;
  }
  .loader-bar::after {
    content: '';
    position: absolute; inset: 0;
    width: 40%;
    border-radius: inherit;
    background: var(--grad-green);
    animation: loaderSlide 1.1s var(--ease-out) infinite;
  }
  @keyframes loaderSlide {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(280%); }
  }

  /* Luxury loader: brass leaf drawn line-by-line, logo tracks in */
  #loading-screen {
    transition: opacity 0.65s ease, visibility 0.65s ease, transform 0.65s var(--ease-out);
  }
  #loading-screen.hidden { transform: scale(1.04); }
  .loader-draw { width: 82px; height: 82px; margin-bottom: 0.35rem; }
  .loader-draw path {
    stroke: #b28a3a;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    animation: ldDraw 1.15s var(--ease-out) forwards;
  }
  .loader-draw .ld-vein {
    stroke: #d4b06a;
    stroke-width: 2;
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    animation-delay: 0.45s;
    animation-duration: 0.7s;
  }
  @keyframes ldDraw { to { stroke-dashoffset: 0; } }
  .loader-logo { animation: ldTrack 0.9s var(--ease-out) 0.15s both; }
  .loader-logo span {
    background: linear-gradient(120deg, #b28a3a, #e2c078 45%, #b28a3a);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
  @keyframes ldTrack {
    from { opacity: 0; letter-spacing: 0.3em; filter: blur(3px); }
    to   { opacity: 1; letter-spacing: 0.01em; filter: blur(0); }
  }

  /* ---------- 5. NAVIGATION ---------- */
  #navbar {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 900;
    height: var(--nav-h);
    display: flex; align-items: center;
    background: transparent;
    transition: background 0.35s ease, box-shadow 0.35s ease,
                height 0.35s ease, border-color 0.35s ease,
                backdrop-filter 0.35s ease;
    border-bottom: 1px solid transparent;
  }
  #navbar.scrolled {
    height: 54px;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
    border-bottom-color: var(--border);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
  }

  .nav-inner {
    width: min(100% - 2.5rem, 1240px);
    margin-inline: auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem;
  }

  .nav-logo {
    display: flex; align-items: center; gap: 0.55rem;
    font-family: var(--font-display);
    font-size: 1.1rem; font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }
  .nav-logo .accent { color: var(--green); }
  .nav-logo .leaf {
    display: grid; place-items: center;
    width: 32px; height: 32px;
    font-size: 1rem;
    border-radius: var(--radius-sm);
    background: var(--grad-green);
    box-shadow: var(--shadow-green);
    transition: transform 0.35s var(--ease-spring);
  }
  .nav-logo:hover .leaf { transform: rotate(-10deg) scale(1.08); }

  .nav-links {
    display: flex; align-items: center; gap: 0.25rem;
    list-style: none;
  }
  .nav-links a {
    position: relative;
    display: block;
    padding: 0.5rem 0.9rem;
    font-size: 0.92rem; font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: color 0.25s ease, background 0.25s ease;
  }
  .nav-links a:hover { color: var(--ink); background: var(--surface-2); }
  .nav-links a.active { color: var(--green); }
  .nav-links a.active::after {
    content: '';
    position: absolute; left: 50%; bottom: 1px;
    width: 16px; height: 3px;
    border-radius: var(--radius-full);
    background: var(--grad-green);
    transform: translateX(-50%);
  }

  .nav-actions { display: flex; align-items: center; gap: 0.7rem; }

  .nav-social {
    display: inline-flex; align-items: center;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0.4rem;
    border-radius: var(--radius-full);
    transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
  }
  .nav-social span { display: none; } /* icon-only in the top bar */
  .nav-social:hover { color: var(--green); background: var(--surface-2); transform: translateY(-1px); }
  .nav-social svg { width: 20px; height: 20px; }

  .theme-toggle {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    font-size: 1.05rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    transition: transform 0.4s var(--ease-spring), box-shadow 0.25s ease, border-color 0.25s ease;
  }
  .theme-toggle:hover { transform: rotate(20deg) scale(1.06); box-shadow: var(--shadow-md); border-color: var(--border-strong); }

  .nav-cta {
    padding: 0.62rem 1.35rem;
    font-size: 0.9rem; font-weight: 600;
    color: #fff;
    background: var(--grad-green);
    border: none;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-green);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease, filter 0.3s ease;
    white-space: nowrap;
  }
  .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -8px rgba(5, 150, 105, 0.55); filter: brightness(1.05); }
  .nav-cta:active { transform: translateY(0) scale(0.98); }

  /* Log In / Sign Up — secondary outlined button */
  .nav-auth {
    padding: 0.55rem 1.1rem;
    font-size: 0.88rem; font-weight: 600;
    color: var(--green-mid);
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.3s var(--ease-spring);
  }
  .nav-auth:hover { color: var(--green); border-color: var(--green); background: var(--green-pale); transform: translateY(-1px); }

  /* Hamburger — mobile only */
  .hamburger {
    display: none;
    flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px;
    padding: 0 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
  }
  .hamburger span {
    height: 2px; width: 100%;
    border-radius: 2px;
    background: var(--ink);
    transition: transform 0.3s var(--ease-out), opacity 0.3s ease;
    transform-origin: center;
  }
  .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { opacity: 0; }
  .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    position: fixed;
    top: var(--nav-h); left: 1rem; right: 1rem;
    z-index: 890;
    display: none;
    flex-direction: column; gap: 0.25rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: fadeInDown 0.35s var(--ease-out);
  }
  .mobile-menu a {
    padding: 0.8rem 1rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.2s ease, color 0.2s ease;
  }
  .mobile-menu a:hover { background: var(--green-pale); color: var(--green); }
  .mobile-menu .mobile-cta {
    margin-top: 0.5rem;
    text-align: center;
    color: #fff; font-weight: 600;
    background: var(--grad-green);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-green);
  }
  .mobile-menu .mobile-cta:hover { background: var(--grad-green); color: #fff; filter: brightness(1.06); }

  /* ---------- 6. HERO ---------- */
  #home {
    min-height: 100svh;
    display: flex; align-items: center;
    padding: calc(var(--nav-h) + 2rem) 0 4rem;
    overflow: hidden;
  }

  .hero-bg { position: absolute; inset: 0; pointer-events: none; }
  .hero-bg::before {
    /* Subtle dot pattern that fades toward the bottom */
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(5, 150, 105, 0.13) 1px, transparent 1px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 70%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 70%);
  }

  .hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    will-change: transform;
    animation: blobDrift 16s ease-in-out infinite alternate;
  }
  .hero-blob-1 {
    width: 520px; height: 520px;
    top: -160px; right: -120px;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.5), transparent 65%);
  }
  .hero-blob-2 {
    width: 460px; height: 460px;
    bottom: -180px; left: -140px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.38), transparent 65%);
    animation-delay: -8s;
  }
  .hero-blob-3 {
    width: 300px; height: 300px;
    top: 38%; left: 42%;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.25), transparent 65%);
    animation-delay: -4s;
  }
  @keyframes blobDrift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, 30px) scale(1.08); }
  }

  .hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: 4rem;
  }

  /* Entrance animation helpers (hero only) */
  .anim-d1 { animation: fadeInDown 0.7s var(--ease-out) 0.15s both; }
  .anim-d2 { animation: fadeInUp 0.8s var(--ease-out) 0.25s both; }
  .anim-d3 { animation: fadeInUp 0.8s var(--ease-out) 0.38s both; }
  .anim-d4 { animation: fadeInUp 0.8s var(--ease-out) 0.5s both; }
  .anim-d5 { animation: fadeInUp 0.8s var(--ease-out) 0.62s both; }

  .hero-badge {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.5rem 1.1rem;
    font-size: 0.85rem; font-weight: 500;
    color: var(--green-deep);
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(5, 150, 105, 0.22);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.6rem;
  }
  .badge-dot {
    position: relative;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
  }
  .badge-dot::after {
    content: '';
    position: absolute; inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(5, 150, 105, 0.4);
    animation: pulseRing 2s var(--ease-out) infinite;
  }
  @keyframes pulseRing {
    0%   { transform: scale(0.6); opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
  }

  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 4.9rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin-bottom: 1.4rem;
  }
  .hero-title .accent {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .hero-sub {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    color: var(--text-muted);
    max-width: 50ch;
    margin-bottom: 2.2rem;
  }

  /* "Get the app" pill — sits on its own row just above the hero buttons.
     Deliberately lighter than .btn-primary so it invites without competing
     with Explore Recipes. */
  .hero-install {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.62rem 1.2rem;
    margin-bottom: 1.15rem;
    font-size: 0.9rem; font-weight: 600;
    color: var(--green-deep);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.75);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(5, 150, 105, 0.28);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease,
                border-color 0.3s ease, background 0.3s ease;
  }
  .hero-install:hover {
    transform: translateY(-2px);
    border-color: var(--green);
    background: rgba(255, 255, 255, 0.92);
  }
  .hero-install .hi-arrow { transition: transform 0.3s var(--ease-out); }
  .hero-install:hover .hi-arrow { transform: translateX(4px); }
  /* The pill must never wrap to two lines — drop the long tail on narrow phones */
  @media (max-width: 430px) {
    .hero-install { font-size: 0.84rem; padding: 0.55rem 1rem; }
    .hero-install .hi-long { display: none; }
  }

  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.6rem; }

  .hero-stats {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
  }
  .hero-stat { display: flex; flex-direction: column; }
  .hero-stat strong {
    font-family: var(--font-display);
    font-size: 1.55rem; font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
  }
  .hero-stat span { font-size: 0.83rem; color: var(--text-muted); }
  .hero-stat + .hero-stat {
    padding-left: clamp(1.25rem, 3vw, 2.5rem);
    border-left: 1px solid var(--border-strong);
  }

  /* Hero visual — floating plate + stat cards */
  .hero-visual {
    position: relative;
    display: grid; place-items: center;
    animation: fadeInUp 1s var(--ease-out) 0.5s both;
  }
  .hero-img-wrap {
    display: grid; place-items: center;
    width: min(340px, 70vw);
    aspect-ratio: 1;
    font-size: clamp(6rem, 12vw, 9rem);
    background:
      radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9), transparent 55%),
      linear-gradient(145deg, #d1fae5, #a7f3d0 60%, #fef3c7 130%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 38% 62% 55% 45% / 45% 42% 58% 55%;
    box-shadow: var(--shadow-lg), inset 0 0 60px rgba(255, 255, 255, 0.55);
    animation: floatSlow 7s ease-in-out infinite, blobMorph 14s ease-in-out infinite alternate;
  }
  @keyframes blobMorph {
    0%   { border-radius: 38% 62% 55% 45% / 45% 42% 58% 55%; }
    100% { border-radius: 55% 45% 40% 60% / 55% 60% 40% 45%; }
  }

  .stat-card {
    position: absolute;
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    animation: floatSlow 6s ease-in-out infinite;
  }
  .stat-card-1 { top: 8%; left: -4%; animation-delay: -1.5s; }
  .stat-card-2 { bottom: 10%; right: -2%; animation-delay: -3.5s; }
  .stat-icon {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    font-size: 1.3rem;
    background: var(--green-pale);
    color: var(--green);
    border-radius: 12px;
  }
  .stat-num { font-weight: 700; font-size: 0.95rem; color: var(--ink); }

  @keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
  }

  /* ---------- 7. BUTTONS ---------- */
  .btn-primary, .btn-secondary {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.95rem 1.9rem;
    font-size: 1rem; font-weight: 600;
    border-radius: var(--radius-full);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease,
                background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
  }
  .btn-primary {
    color: #fff;
    background: var(--grad-green);
    border: none;
    box-shadow: var(--shadow-green);
  }
  .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(5, 150, 105, 0.55); }
  .btn-primary:active { transform: translateY(-1px) scale(0.98); }
  .btn-primary .btn-arrow { transition: transform 0.3s var(--ease-spring); }
  .btn-primary:hover .btn-arrow { transform: translateX(4px); }

  .btn-secondary {
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-sm);
  }
  .btn-secondary:hover {
    transform: translateY(-3px);
    border-color: rgba(5, 150, 105, 0.45);
    color: var(--green-mid);
    background: var(--green-pale);
    box-shadow: var(--shadow-md);
  }

  .see-more-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.7rem;
    font-size: 0.95rem; font-weight: 600;
    color: var(--green-mid);
    background: var(--surface);
    border: 1.5px solid rgba(5, 150, 105, 0.35);
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease,
                background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .see-more-btn:hover {
    transform: translateY(-2px);
    background: var(--grad-green);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-green);
  }

  .btn-back {
    background: var(--surface) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-strong) !important;
  }
  .btn-back:hover { background: var(--surface-2) !important; color: var(--ink) !important; box-shadow: var(--shadow-md); }

  .btn-rate {
    display: inline-flex; align-items: center; gap: 0.55rem;
    padding: 0.85rem 2rem;
    font-size: 1rem; font-weight: 600;
    color: #fff;
    background: var(--grad-green);
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: var(--shadow-green);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
  }
  .btn-rate:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(5, 150, 105, 0.55); }

  /* ---------- 8. ABOUT ---------- */
  #about { background: var(--surface); }
  #about::before {
    /* Soft radial wash behind the section */
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(700px 380px at 12% 20%, rgba(5, 150, 105, 0.05), transparent 70%);
    pointer-events: none;
  }

  .about-inner {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
  }

  .about-visual { position: relative; }
  .about-img-box {
    padding: clamp(1.25rem, 3vw, 2rem);
    background: linear-gradient(150deg, var(--green-pale), #f0fdfa 55%, var(--orange-pale));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  .emoji-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.6rem, 1.5vw, 1rem);
  }
  .emoji-grid span {
    display: grid; place-items: center;
    aspect-ratio: 1;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    transition: transform 0.35s var(--ease-spring), box-shadow 0.3s ease;
  }
  .emoji-grid span:hover { transform: translateY(-5px) scale(1.07) rotate(-3deg); box-shadow: var(--shadow-md); }

  .about-tag {
    position: absolute;
    padding: 0.55rem 1.05rem;
    font-size: 0.85rem; font-weight: 600;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-md);
    animation: floatSlow 6s ease-in-out infinite;
  }
  .about-tag-1 { top: -18px; right: 8%; }
  .about-tag-2 { bottom: -16px; left: 6%; animation-delay: -3s; }

  /* Keep the fruit grid perfectly aligned everywhere */
  .emoji-grid span { line-height: 1; }

  @media (max-width: 640px) {
    .about-visual { text-align: center; }
    .about-img-box { padding: 1rem; }
    .emoji-grid { gap: 0.6rem; }
    .emoji-grid span { font-size: 2rem; border-radius: 12px; }
    /* On phones the floating tags become neat pills under the grid
       instead of absolutely-positioned overlays */
    .about-tag {
      position: static;
      display: inline-flex;
      margin: 0.9rem 0.3rem 0;
      animation: none;
    }
  }

  .about-pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
    margin-top: 2.2rem;
  }
  .pillar {
    padding: 1.35rem 1.4rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 18px;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
  }
  .pillar:hover {
    transform: translateY(-5px);
    border-color: rgba(5, 150, 105, 0.3);
    box-shadow: var(--shadow-md);
  }
  .pillar-icon {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    font-size: 1.35rem;
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, 0.15);
    border-radius: 14px;
    margin-bottom: 0.85rem;
  }
  .pillar-title { font-weight: 700; color: var(--ink); margin-bottom: 0.3rem; }
  .pillar-desc { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }

  /* ---------- 9. RECIPES ---------- */
  #recipes {
    background:
      radial-gradient(800px 400px at 88% 8%, rgba(5, 150, 105, 0.06), transparent 70%),
      radial-gradient(700px 420px at 5% 90%, rgba(234, 88, 12, 0.05), transparent 70%),
      var(--bg);
  }

  .recipes-header { text-align: center; margin-bottom: 2.75rem; }
  .recipes-header .divider { margin-inline: auto; }

  /* Diet selector */
  .diet-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 280px));
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
  }
  .diet-btn {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
    padding: 2.4rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease, border-color 0.35s ease;
  }
  .diet-btn::before {
    /* Colored wash sweeps up on hover */
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, var(--green-pale), transparent 65%);
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .non-veg-btn::before { background: linear-gradient(to top, var(--orange-pale), transparent 65%); }
  .diet-btn:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .veg-btn:hover     { border-color: rgba(5, 150, 105, 0.4); }
  .non-veg-btn:hover { border-color: rgba(234, 88, 12, 0.4); }
  .diet-btn:hover::before { opacity: 1; }

  .diet-icon {
    position: relative;
    display: grid; place-items: center;
    width: 74px; height: 74px;
    font-size: 2.3rem;
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, 0.15);
    border-radius: 22px;
    transition: transform 0.35s var(--ease-spring);
  }
  .non-veg-btn .diet-icon { background: var(--orange-pale); border-color: rgba(234, 88, 12, 0.18); }
  .diet-btn:hover .diet-icon { transform: scale(1.12) rotate(-5deg); }
  .diet-label { position: relative; font-size: 1.15rem; font-weight: 700; color: var(--ink); }

  /* An extra collection card sits on its own row under the diet pair.
     Recipes in it also remain in Vegetarian / Non-Vegetarian above. */
  .diet-btn-wide { grid-column: 1 / -1; padding-block: 1.9rem; }
  .diet-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: -0.35rem; }
  .high-protein-btn .diet-icon { filter: saturate(1.15); }
  .high-protein-btn:hover { border-color: var(--orange); }
  .high-protein-btn:hover .diet-label { color: var(--orange); }

  .diet-see-all { grid-column: 1 / -1; justify-self: center; margin-top: 0.75rem; }

  /* ---------- The two AI tools ----------
     The chooser grid above is only two 280px tracks wide, so this wrapper
     is given an explicit width and centred: that lets the tools use the
     full container instead of being squeezed into a 584px cell. */
  .nn-tools {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(1140px, calc(100vw - 2.5rem));
    margin-top: 2.25rem;
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.5rem;
    text-align: left;
  }
  /* Side by side once there is room for both to breathe. */
  @media (min-width: 940px) {
    .nn-tools { grid-template-columns: 1fr 1fr; }
    /* Half the width means the default 290px card track would drop to a
       single very tall column, so tighten it to keep results two-up. */
    .nn-tools .nnf-results {
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1rem;
    }
    .nn-tools .nnf-results .recipe-card { font-size: 0.94rem; }
  }

  /* ---------- AI Recipe Finder ---------- */
  .nn-finder {
    padding: 2rem 1.75rem;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .nnf-head { text-align: center; margin-bottom: 1.4rem; }
  .nnf-badge {
    display: inline-block; margin-bottom: .7rem;
    padding: .35rem .9rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em;
    color: var(--green-deep); background: var(--green-pale);
    border-radius: var(--radius-full);
  }
  .nnf-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3.4vw, 1.7rem);
    color: var(--ink); margin-bottom: .45rem;
  }
  .nnf-sub { font-size: .92rem; line-height: 1.6; color: var(--text-muted); margin: 0 auto; max-width: 560px; }

  .nnf-bar {
    position: relative;
    display: flex; align-items: center; gap: .6rem;
    max-width: 680px; margin: 0 auto 1.1rem;
  }
  .nnf-icon { position: absolute; left: 1rem; font-size: .95rem; pointer-events: none; opacity: .7; }
  .nnf-bar input {
    flex: 1; min-width: 0;
    padding: .9rem 1rem .9rem 2.6rem;
    font-family: inherit; font-size: .95rem; color: var(--ink);
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-full);
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  .nnf-bar input:focus {
    outline: none; border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.14);
  }
  .nnf-go {
    flex: 0 0 auto;
    padding: .9rem 1.5rem;
    font-family: inherit; font-size: .92rem; font-weight: 700; color: #fff;
    background: var(--grad-green);
    border: none; border-radius: var(--radius-full);
    cursor: pointer;
    transition: transform .25s var(--ease-spring), box-shadow .25s ease;
  }
  .nnf-go:hover { transform: translateY(-2px); box-shadow: var(--shadow-green); }

  .nnf-chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
    max-width: 680px; margin: 0 auto;
  }
  .nnf-chip {
    padding: .45rem 1rem;
    font-family: inherit; font-size: .85rem; font-weight: 600;
    color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
  }
  .nnf-chip:hover { color: var(--green); border-color: var(--green); background: var(--green-pale); }

  .nnf-status {
    margin: 1.2rem 0 0; text-align: center;
    font-size: .9rem; font-weight: 600; color: var(--text-muted);
  }
  .nnf-results:empty { display: none; }
  .nnf-results { margin-top: 1.4rem; }

  /* Why a recipe was recommended — appended to the normal recipe card. */
  .nnf-why {
    display: flex; flex-wrap: wrap; gap: .35rem;
    padding: 0 1.1rem 1.1rem;
  }
  .nnf-why-chip {
    font-size: .74rem; font-weight: 700;
    color: var(--green-deep); background: var(--green-pale);
    border-radius: var(--radius-full);
    padding: .22rem .6rem;
  }

  /* Mic — voice search where the browser supports it */
  .nnf-mic {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    font-size: 1rem;
    color: var(--text-muted); background: var(--surface-2);
    border: 1.5px solid var(--border); border-radius: 50%;
    cursor: pointer;
    transition: color .25s ease, border-color .25s ease, transform .25s ease;
  }
  .nnf-mic:hover { color: var(--green); border-color: var(--green); }
  .nnf-mic.listening { color: #fff; background: var(--grad-green); border-color: transparent; animation: nnfPulse 1.2s ease-in-out infinite; }
  @keyframes nnfPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

  .nnf-status.thinking::after {
    content: ''; display: inline-block;
    width: 1.1em; text-align: left;
    animation: nnfDots 1.2s steps(4, end) infinite;
  }
  @keyframes nnfDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

  /* Recent + related-search rows */
  .nnf-recent, .nnf-suggest {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .45rem; max-width: 680px; margin: 1rem auto 0;
  }
  .nnf-suggest:empty { display: none; }
  .nnf-recent-label {
    font-size: .74rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted); margin-right: .2rem;
  }
  .nnf-chip-ghost { background: transparent; font-weight: 500; }
  .nnf-chip-solid {
    color: #fff; background: var(--grad-green); border-color: transparent; font-weight: 700;
  }
  .nnf-chip-solid:hover { color: #fff; background: var(--grad-green); opacity: .9; }

  /* Follow-up question */
  .nnf-followup {
    max-width: 620px; margin: 1.2rem auto 0;
    padding: 1.1rem 1.3rem;
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, 0.22);
    border-radius: var(--radius-lg);
    text-align: center;
    animation: fadeInUp .4s var(--ease-out) both;
  }
  .nnf-followup-q { margin: 0 0 .8rem; font-size: .97rem; font-weight: 600; color: var(--green-deep); }
  .nnf-followup-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }

  /* Skeleton cards while thinking */
  .nnf-skel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .nnf-skel-img { height: 160px; }
  .nnf-skel-body { padding: 1.1rem; }
  .nnf-skel-line { height: 12px; border-radius: 6px; margin-bottom: .6rem; }
  .nnf-skel-line.short { width: 60%; }
  .nnf-skel-chips { display: flex; gap: .4rem; margin-top: .9rem; }
  .nnf-skel-chips span { height: 18px; width: 54px; border-radius: 999px; }
  .nnf-skel-img, .nnf-skel-line, .nnf-skel-chips span {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: nnfShimmer 1.3s ease-in-out infinite;
  }
  @keyframes nnfShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

  /* Results ease in rather than snapping */
  .nnf-results .nnf-in { animation: fadeInUp .45s var(--ease-out) both; }

  /* ---------- Pantry Mode ---------- */
  .nn-pantry {
    padding: 2rem 1.75rem;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .nnp-inputwrap { position: relative; max-width: 680px; margin: 0 auto; }

  /* Ingredient suggestions */
  .nnp-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + .35rem);
    z-index: 40;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-md, 0 16px 40px rgba(10,18,30,.12));
    overflow: hidden;
  }
  .nnp-suggest-item {
    display: block; width: 100%; text-align: left;
    padding: .65rem 1rem;
    font-family: inherit; font-size: .92rem; color: var(--text);
    background: transparent; border: none; cursor: pointer;
  }
  .nnp-suggest-item:hover,
  .nnp-suggest-item.active { background: var(--green-pale); color: var(--green-deep); }
  .nnp-suggest { max-height: 260px; overflow-y: auto; }

  /* A long pasted ingredient must wrap rather than stretch the chip row */
  .nnp-chip-name { overflow-wrap: anywhere; }

  /* Pantry chips */
  .nnp-chips {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
    max-width: 680px; margin: 1.1rem auto 0;
  }
  .nnp-chip {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .42rem .5rem .42rem .8rem;
    font-size: .88rem; font-weight: 600; color: var(--green-deep);
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, 0.25);
    border-radius: var(--radius-full);
    animation: nnpPop .28s var(--ease-spring) both;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nnp-chip.leaving { opacity: 0; transform: scale(.8); }
  .nnp-chip-emoji { font-size: 1rem; line-height: 1; }
  .nnp-chip-x {
    width: 20px; height: 20px; display: grid; place-items: center;
    font-size: .68rem; color: var(--green-deep);
    background: rgba(5, 150, 105, 0.14);
    border: none; border-radius: 50%; cursor: pointer;
    transition: background .2s ease, transform .2s ease;
  }
  .nnp-chip-x:hover { background: var(--green); color: #fff; transform: rotate(90deg); }
  @keyframes nnpPop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

  /* Match strip under each recipe card */
  .nnp-match { padding: 0 1.1rem 1.1rem; }
  .nnp-match-all {
    margin: 0; padding: .6rem .8rem;
    font-size: .88rem; font-weight: 700; text-align: center;
    color: var(--green-deep); background: var(--green-pale);
    border-radius: var(--radius-full);
  }
  .nnp-match-head { margin: 0 0 .5rem; font-size: .85rem; font-weight: 700; color: var(--ink); }
  .nnp-bar {
    height: 7px; background: var(--surface-2);
    border-radius: var(--radius-full); overflow: hidden; margin-bottom: .55rem;
  }
  .nnp-bar-fill {
    height: 100%; background: var(--grad-green);
    border-radius: var(--radius-full);
    animation: nnpGrow .7s var(--ease-out) both;
  }
  @keyframes nnpGrow { from { width: 0 !important; } }
  .nnp-match-missing { margin: 0 0 .7rem; font-size: .82rem; line-height: 1.5; color: var(--text-muted); }

  /* Have vs need, told apart by colour and icon rather than position */
  .nnp-pills { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; }
  .nnp-pill {
    font-size: .73rem; font-weight: 700;
    padding: .2rem .55rem; border-radius: var(--radius-full);
  }
  .nnp-pill-have { color: var(--green-deep); background: var(--green-pale); }
  .nnp-pill-need {
    color: var(--orange); background: var(--orange-pale);
    border: 1px dashed rgba(234, 88, 12, 0.35);
  }
  [data-theme="dark"] .nnp-pill-have { color: var(--green-light); background: rgba(52,211,153,.12); }
  [data-theme="dark"] .nnp-pill-need { color: #fdba74; background: rgba(234,88,12,.14); }

  /* Auto-complete: how many recipes use this ingredient */
  .nnp-suggest-item { display: flex; align-items: center; justify-content: space-between; }
  .nnp-suggest-uses { font-size: .72rem; color: var(--text-muted); margin-left: 1rem; }
  .nnp-list-btn {
    width: 100%; padding: .55rem 1rem;
    font-family: inherit; font-size: .84rem; font-weight: 700;
    color: var(--orange); background: var(--orange-pale);
    border: 1px solid rgba(234, 88, 12, 0.28);
    border-radius: var(--radius-full); cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }
  .nnp-list-btn:hover { color: #fff; background: var(--orange); }

  /* Shopping list */
  .nnp-modal-overlay {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center; padding: 1.25rem;
    background: rgba(10, 18, 30, 0.6);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .nnp-modal-overlay.open { opacity: 1; visibility: visible; }
  .nnp-modal {
    position: relative; width: min(420px, 100%);
    padding: 1.9rem 1.6rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(10, 18, 30, 0.4);
    transform: translateY(16px) scale(.97);
    transition: transform .35s var(--ease-out);
  }
  .nnp-modal-overlay.open .nnp-modal { transform: none; }
  .nnp-modal-x {
    position: absolute; top: .8rem; right: .8rem;
    width: 32px; height: 32px; display: grid; place-items: center;
    font-size: .8rem; color: var(--ink);
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 50%; cursor: pointer;
    transition: transform .3s var(--ease-spring);
  }
  .nnp-modal-x:hover { transform: rotate(90deg); }
  .nnp-modal-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin-bottom: .2rem; }
  .nnp-modal-sub {
    margin: 0 0 .8rem; font-size: .78rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  }
  .nnp-list { list-style: none; padding: 0; margin: 0 0 1rem; }
  .nnp-list li {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem 0; border-bottom: 1px solid var(--border);
    font-size: .95rem; color: var(--text);
  }
  .nnp-list li:last-child { border-bottom: none; }
  .nnp-list input { width: 17px; height: 17px; accent-color: var(--green); cursor: pointer; }
  .nnp-list label { cursor: pointer; }
  .nnp-list input:checked + label { color: var(--text-muted); text-decoration: line-through; }
  .nnp-modal-note { margin: 0 0 1.1rem; font-size: .78rem; line-height: 1.5; color: var(--text-muted); }
  .nnp-modal-actions { display: flex; gap: .5rem; justify-content: center; }

  [data-theme="dark"] .nnp-chip { background: rgba(52, 211, 153, 0.12); color: var(--green-light); }
  [data-theme="dark"] .nnp-match-all { background: rgba(52, 211, 153, 0.12); color: var(--green-light); }

  @media (max-width: 560px) {
    .nn-pantry { padding: 1.5rem 1.1rem; }
    .nnp-chips { justify-content: flex-start; }
    .nnp-modal { padding: 1.6rem 1.1rem 1.2rem; }
  }

  .nnf-foot { text-align: center; }
  .nnf-clear {
    margin-top: 1.3rem;
    padding: .6rem 1.4rem;
    font-family: inherit; font-size: .88rem; font-weight: 600;
    color: var(--text-muted); background: transparent;
    border: 1.5px solid var(--border); border-radius: var(--radius-full);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
  }
  .nnf-clear:hover { color: var(--orange); border-color: var(--orange); }

  [data-theme="dark"] .nnf-why-chip { color: var(--green-light); background: rgba(52, 211, 153, 0.12); }

  @media (max-width: 560px) {
    .nn-finder { padding: 1.5rem 1.1rem; }
    .nnf-bar { flex-wrap: wrap; }
    .nnf-bar input { flex: 1 1 100%; order: 1; }
    .nnf-mic { order: 2; }
    .nnf-go { order: 3; flex: 1; }
    .nnf-icon { top: 1rem; }
    .nnf-followup { padding: 1rem; }
    .nnf-recent, .nnf-suggest { justify-content: flex-start; }
  }

  /* ================================================================
     AI RECIPE CREATOR

     Shares the finder's shell (.nnf-head, .nnf-badge, .nnf-bar,
     .nnf-chip, .nnf-go) so the three tools read as one family. Only
     the pieces the creator adds — the settings grid and the generated
     recipe sheet — are defined here.
  ================================================================ */
  .nn-creator {
    grid-column: 1 / -1;               /* full width beneath the two-up tools */
    padding: 2.25rem 2rem;
    text-align: left;
    /* A quiet gradient wash marks this as the flagship of the three without
       shouting over the recipe cards below it. */
    background:
      radial-gradient(600px 220px at 92% 0%, rgba(234, 88, 12, 0.05), transparent 70%),
      radial-gradient(520px 240px at 4% 100%, rgba(5, 150, 105, 0.06), transparent 70%),
      var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  /* ---------- Settings grid ---------- */
  .nnc-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
  }
  @media (min-width: 720px) {
    .nnc-form { grid-template-columns: 1fr 1fr; }
    .nnc-field-wide { grid-column: 1 / -1; }
  }

  .nnc-field { min-width: 0; }
  .nnc-label {
    display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
    margin-bottom: .55rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .nnc-value {
    font-size: .85rem; font-weight: 700; letter-spacing: 0;
    text-transform: none; color: var(--green);
  }
  .nnc-optional { color: var(--text-muted); font-weight: 500; font-style: italic; }

  /* The shared search bar, but left-aligned and full width in this context. */
  .nnc-bar { max-width: none; margin: 0 0 .7rem; }
  .nnc-bar input { padding-left: 2.6rem; }

  .nnc-pills { justify-content: flex-start; gap: .45rem; }
  .nnc-opt { padding: .5rem 1rem; }
  .nnc-opt.active {
    color: #fff; background: var(--grad-green);
    border-color: transparent; box-shadow: var(--shadow-sm);
  }
  .nnc-opt.active:hover { color: #fff; background: var(--grad-green); }
  .nnc-pantry { margin-top: .1rem; }

  .nnc-sliders {
    grid-column: 1 / -1;
    display: grid; gap: 1.1rem 1.75rem;
    grid-template-columns: 1fr;
    padding: 1.25rem 1.35rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  @media (min-width: 720px) { .nnc-sliders { grid-template-columns: repeat(3, 1fr); } }

  .nnc-range {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px;
    background: var(--border-strong);
    border-radius: var(--radius-full);
    outline: none; cursor: pointer;
  }
  .nnc-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--grad-green);
    border: 2px solid var(--surface);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform .2s var(--ease-spring);
  }
  .nnc-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
  .nnc-range::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--green); border: 2px solid var(--surface);
    box-shadow: var(--shadow-sm); cursor: pointer;
  }
  .nnc-range:focus-visible { box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.18); }

  .nnc-go-row { text-align: center; }
  .nnc-generate { padding: 1rem 2.6rem; font-size: 1rem; }
  .nnc-generate:disabled { opacity: .65; cursor: progress; transform: none; }

  /* ---------- Generated recipe sheet ---------- */
  .nnc-result:empty { display: none; }
  .nnc-result.show {
    margin-top: 1.6rem;
    padding: 1.75rem 1.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    animation: fadeInUp .45s var(--ease-out) both;
  }

  .nnc-rx-head { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1.3rem; }
  .nnc-rx-emoji {
    flex: 0 0 auto;
    width: 64px; height: 64px;
    display: grid; place-items: center;
    font-size: 2rem;
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, 0.15);
    border-radius: 20px;
  }
  .nnc-rx-headtext { flex: 1; min-width: 0; }
  /* The label the whole feature turns on — always visible above the title. */
  .nnc-badge {
    display: inline-block; margin-bottom: .5rem;
    padding: .3rem .8rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    color: #fff; background: var(--grad-green);
    border-radius: var(--radius-full);
  }
  .nnc-rx-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3.6vw, 1.75rem);
    line-height: 1.2; color: var(--ink); margin: 0 0 .35rem;
  }
  .nnc-rx-desc { margin: 0 0 .6rem; font-size: .95rem; line-height: 1.6; color: var(--text); }
  .nnc-rx-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
  .nnc-tag {
    font-size: .72rem; font-weight: 700;
    color: var(--text-muted); background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: .2rem .65rem;
  }

  .nnc-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
    margin-bottom: .75rem;
  }
  .nnc-stat {
    padding: .8rem .5rem; text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
  }
  .nnc-stat-val { font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
  .nnc-stat-label {
    margin-top: .2rem;
    font-size: .68rem; font-weight: 600; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .nnc-macros .nnc-stat { background: var(--green-pale); border-color: rgba(5, 150, 105, 0.18); }
  .nnc-macros .nnc-stat-val { color: var(--green-deep); }

  .nnc-rx-h {
    margin: 1.5rem 0 .7rem;
    font-family: inherit;
    font-size: .82rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--green);
  }

  .nnc-ing { list-style: none; padding: 0; margin: 0; }
  .nnc-ing li {
    display: flex; gap: .65rem; align-items: baseline;
    padding: .45rem 0;
    font-size: .94rem; line-height: 1.5; color: var(--text);
    border-bottom: 1px solid var(--border);
  }
  .nnc-ing li:last-child { border-bottom: none; }
  .nnc-ing-body strong { color: var(--ink); font-weight: 700; }
  .nnc-ing-mark {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    display: grid; place-items: center;
    font-size: .7rem; font-weight: 700;
    border-radius: 50%;
  }
  /* Green tick = already yours. Orange plus = on the shopping list. */
  .nnc-ing-have .nnc-ing-mark { color: var(--green-deep); background: var(--green-pale); }
  .nnc-ing-need .nnc-ing-mark { color: var(--orange); background: var(--orange-pale); }

  .nnc-shop { margin-top: .5rem; }
  .nnc-shop-sub { margin: 0 0 .7rem; font-size: .85rem; line-height: 1.55; color: var(--text-muted); }

  .nnc-steps { margin: 0; padding-left: 1.3rem; }
  .nnc-steps li {
    margin-bottom: .7rem;
    font-size: .95rem; line-height: 1.7; color: var(--text);
    padding-left: .3rem;
  }
  .nnc-steps li::marker { color: var(--green); font-weight: 700; }

  .nnc-tips { margin: 0; padding-left: 1.2rem; }
  .nnc-tips li { margin-bottom: .5rem; font-size: .92rem; line-height: 1.65; color: var(--text); }

  .nnc-rx-note { margin: .6rem 0 0; font-size: .82rem; line-height: 1.55; color: var(--text-muted); }

  .nnc-actions {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
    margin-top: 1.6rem; padding-top: 1.4rem;
    border-top: 1px solid var(--border);
  }
  .nnc-save:disabled { opacity: .75; cursor: default; transform: none; }

  .nnc-disclaimer {
    margin: 1rem 0 0;
    font-size: .78rem; line-height: 1.6; color: var(--text-muted);
  }

  /* ---------- Could-not-generate panel ---------- */
  .nnc-refuse { text-align: center; padding: .5rem 0; }
  .nnc-refuse-ico { font-size: 2.2rem; margin-bottom: .5rem; }
  .nnc-refuse-title {
    font-family: var(--font-display); font-size: 1.25rem;
    color: var(--ink); margin: 0 0 .5rem;
  }
  .nnc-refuse-why {
    max-width: 520px; margin: 0 auto 1.2rem;
    font-size: .95rem; line-height: 1.65; color: var(--text);
  }
  .nnc-refuse-lead {
    margin: 0 0 .5rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .nnc-refuse-list {
    display: inline-block; text-align: left;
    max-width: 480px; margin: 0 auto 1.4rem; padding-left: 1.2rem;
  }
  .nnc-refuse-list li {
    margin-bottom: .45rem;
    font-size: .93rem; line-height: 1.6; color: var(--text);
  }
  .nnc-refuse-list li::marker { color: var(--orange); }

  /* ---------- Saved recipes ---------- */
  .nnc-saved-wrap { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
  .nnc-saved-list { display: grid; gap: .55rem; }
  .nnc-saved {
    display: flex; align-items: stretch; gap: .5rem;
  }
  .nnc-saved-open {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: .85rem;
    padding: .7rem .9rem;
    font-family: inherit; text-align: left;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
  }
  .nnc-saved-open:hover { border-color: var(--green); transform: translateX(2px); }
  .nnc-saved-emoji { flex: 0 0 auto; font-size: 1.35rem; }
  .nnc-saved-meta { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
  .nnc-saved-title {
    font-size: .93rem; font-weight: 600; color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .nnc-saved-sub { font-size: .78rem; color: var(--text-muted); }
  .nnc-saved-del {
    flex: 0 0 auto; width: 42px;
    font-size: .9rem; color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
  }
  .nnc-saved-del:hover { color: var(--orange); border-color: var(--orange); }
  .nnc-saved-del:disabled { opacity: .4; cursor: default; }

  .nnc-skel { display: grid; gap: .7rem; }

  [data-theme="dark"] .nnc-macros .nnc-stat {
    background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.20);
  }
  [data-theme="dark"] .nnc-macros .nnc-stat-val { color: var(--green-light); }
  [data-theme="dark"] .nnc-ing-have .nnc-ing-mark { background: rgba(52, 211, 153, 0.14); color: var(--green-light); }

  @media (max-width: 560px) {
    .nn-creator { padding: 1.5rem 1.1rem; }
    .nnc-result.show { padding: 1.3rem 1rem; }
    .nnc-stats { grid-template-columns: repeat(2, 1fr); }
    .nnc-rx-head { gap: .85rem; }
    .nnc-rx-emoji { width: 52px; height: 52px; font-size: 1.6rem; border-radius: 16px; }
    .nnc-actions > * { flex: 1 1 auto; }
    .nnc-generate { width: 100%; }
  }

  /* Printing the page itself should give the recipe, not the form. */
  @media print {
    .nn-creator .nnc-form,
    .nn-creator .nnc-go-row,
    .nn-creator .nnf-head,
    .nnc-actions,
    .nnc-saved-wrap { display: none !important; }
    .nnc-result.show { border: none; background: none; padding: 0; }
  }

  /* ================================================================
     NUTRITION SCORE

     One number out of 100 per recipe, worked out by nn-score.js from
     the recipe's own data. Three places show it: a badge on the card,
     a "Why this score?" panel in the modal, and the filter/sort bar.

     The five bands share four colours, so 80–89 and 90–100 both read
     green — the number itself carries the finer distinction.
  ================================================================ */

  /* ---------- Colour bands ---------- */
  /* --score-solid is the filled version, used where the number sits ON the
     colour and has to be white. Yellow is darkened from #ca8a04 because
     white on that only reaches 2.9:1 — every other band clears 3:1 as is. */
  .score-green  { --score-ink: var(--green-deep);  --score-bg: var(--green-pale);  --score-line: #059669; --score-solid: #059669; }
  .score-yellow { --score-ink: #92400e;            --score-bg: #fef9c3;            --score-line: #ca8a04; --score-solid: #a16207; }
  .score-orange { --score-ink: #9a3412;            --score-bg: var(--orange-pale); --score-line: #ea580c; --score-solid: #ea580c; }
  .score-red    { --score-ink: #991b1b;            --score-bg: #fee2e2;            --score-line: #dc2626; --score-solid: #dc2626; }

  [data-theme="dark"] .score-green  { --score-ink: #6ee7b7; --score-bg: rgba(5, 150, 105, 0.20); --score-solid: #059669; }
  [data-theme="dark"] .score-yellow { --score-ink: #fde047; --score-bg: rgba(202, 138, 4, 0.22); --score-solid: #a16207; }
  [data-theme="dark"] .score-orange { --score-ink: #fdba74; --score-bg: rgba(234, 88, 12, 0.22); --score-solid: #ea580c; }
  [data-theme="dark"] .score-red    { --score-ink: #fca5a5; --score-bg: rgba(220, 38, 38, 0.22); --score-solid: #dc2626; }

  /* ---------- Badge on the card ----------
     Sits over the top-right of the image so it costs no vertical space
     and never pushes the card layout around. */
  .card-score {
    position: absolute;
    top: .7rem; right: .7rem;
    z-index: 2;
    display: inline-flex; align-items: baseline; gap: .1rem;
    padding: .3rem .6rem;
    color: var(--score-ink);
    background: var(--score-bg);
    border: 1px solid var(--score-line);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 10px rgba(10, 18, 30, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: none;            /* the whole card is the click target */
    transition: transform .3s var(--ease-spring);
  }
  .recipe-card:hover .card-score { transform: scale(1.06); }
  .card-score-num { font-size: .95rem; font-weight: 800; line-height: 1; }
  .card-score-out { font-size: .65rem; font-weight: 600; opacity: .75; }

  /* ---------- Filter + sort bar ---------- */
  .score-bar {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: .75rem 1rem;
    margin-bottom: 2.5rem;
  }
  .score-pills { display: flex; flex-wrap: wrap; gap: .6rem; }
  .score-sort {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .82rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .score-sort select {
    padding: .5rem 2rem .5rem .9rem;
    font-family: inherit; font-size: .88rem; font-weight: 600;
    letter-spacing: 0; text-transform: none;
    color: var(--text); background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    cursor: pointer;
    /* Custom caret — the native one ignores the border radius. */
    -webkit-appearance: none; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.1rem) 52%, calc(100% - .8rem) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  .score-sort select:hover { border-color: var(--green); }
  .score-sort select:focus-visible {
    outline: none; border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.14);
  }

  /* ---------- "Why this score?" panel in the modal ---------- */
  .modal-score:empty { display: none; }
  .modal-score {
    margin: 0 0 2rem;
    padding: 1.4rem 1.5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
  }
  .mscore-head { display: flex; align-items: center; gap: 1rem; margin-bottom: .9rem; }
  /* Solid disc, white numerals. A pale disc with dark ink read badly against
     the dark-mode modal, and the score is the one number that has to be
     legible at a glance — so it gets the strongest contrast available. */
  .mscore-dial {
    flex: 0 0 auto;
    width: 72px; height: 72px;
    display: grid; place-content: center; justify-items: center;
    color: #fff;
    background: var(--score-solid);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
  }
  .mscore-num { font-size: 1.5rem; font-weight: 800; line-height: 1; color: #fff; }
  .mscore-out { font-size: .62rem; font-weight: 700; color: #fff; opacity: .85; }
  .mscore-headtext { min-width: 0; }
  .mscore-title {
    font-size: .78rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: .2rem;
  }
  .mscore-band {
    font-family: var(--font-display);
    font-size: 1.2rem; color: var(--ink);
  }
  .mscore-summary {
    margin: 0 0 1.2rem;
    font-size: .95rem; line-height: 1.65; color: var(--text);
  }

  .mscore-factors { display: grid; gap: .9rem; }
  .mscore-frow { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
  .mscore-fname { font-size: .9rem; font-weight: 700; color: var(--ink); }
  .mscore-fpts { font-size: .8rem; font-weight: 700; color: var(--text-muted); }
  .mscore-bar {
    height: 6px; margin: .35rem 0 .3rem;
    background: var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
  }
  .mscore-bar span {
    display: block; height: 100%;
    border-radius: var(--radius-full);
    transition: width .6s var(--ease-out);
  }
  /* The bar colour says how this one factor did, independently of the
     overall band — a great recipe can still be light on fibre. */
  .mscore-factor.is-good span { background: var(--grad-green); }
  .mscore-factor.is-ok   span { background: #ca8a04; }
  .mscore-factor.is-poor span { background: #ea580c; }
  .mscore-note { margin: 0; font-size: .86rem; line-height: 1.55; color: var(--text-muted); }

  .mscore-foot {
    margin: 1.3rem 0 0; padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: .78rem; line-height: 1.6; color: var(--text-muted);
  }

  @media (max-width: 560px) {
    .card-score { top: .55rem; right: .55rem; padding: .25rem .5rem; }
    .card-score-num { font-size: .85rem; }
    .modal-score { padding: 1.1rem 1rem; }
    .mscore-dial { width: 60px; height: 60px; }
    .mscore-num { font-size: 1.25rem; }
    .score-bar { justify-content: flex-start; }
    .score-sort { width: 100%; }
    .score-sort select { flex: 1; }
  }

  /* ================================================================
     SMART RECIPE COMPARISON

     A Compare button on each card, a tray docked along the bottom,
     and a slide-over panel. Everything is fixed-position or inside
     the panel, so it overlays the recipes page without shifting a
     single card.
  ================================================================ */

  /* ---------- Button on the card ---------- */
  .card-compare {
    margin-left: auto;
    padding: .3rem .7rem;
    font-family: inherit; font-size: .74rem; font-weight: 700;
    color: var(--text-muted); background: transparent;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    cursor: pointer; white-space: nowrap;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
  }
  .card-compare:hover { color: var(--green); border-color: var(--green); background: var(--green-pale); }
  .card-compare.active {
    color: #fff; background: var(--grad-green); border-color: transparent;
  }
  /* The Track button already claims the right edge when it is present. */
  .card-track + .card-compare { margin-left: .4rem; }

  /* ---------- Tray ---------- */
  .nncmp-tray {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(140%);
    transition: transform .4s var(--ease-spring);
    pointer-events: none;
  }
  .nncmp-tray.show { transform: translateY(0); }
  .nncmp-tray-inner {
    pointer-events: auto;
    display: flex; align-items: center; flex-wrap: wrap; gap: .75rem 1rem;
    max-width: 1140px; margin: 0 auto;
    padding: .9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: 0 -6px 34px rgba(10, 18, 30, .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .nncmp-tray-head { display: flex; flex-direction: column; gap: .1rem; }
  .nncmp-tray-title {
    font-size: .8rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--green);
  }
  .nncmp-tray-count { font-size: .76rem; color: var(--text-muted); }

  .nncmp-slots { display: flex; flex: 1; flex-wrap: wrap; gap: .55rem; min-width: 0; }
  .nncmp-slot {
    display: flex; align-items: center; gap: .5rem;
    min-width: 0; max-width: 260px;
    padding: .45rem .7rem;
    font-size: .85rem; color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
  }
  .nncmp-slot.empty {
    color: var(--text-muted); font-style: italic;
    border-style: dashed; background: transparent;
  }
  .nncmp-slot-emoji { flex: 0 0 auto; }
  .nncmp-slot-name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600;
  }
  .nncmp-slot-x {
    flex: 0 0 auto;
    font-size: .7rem; color: var(--text-muted);
    background: none; border: none; cursor: pointer; padding: 0 0 0 .1rem;
  }
  .nncmp-slot-x:hover { color: var(--orange); }

  .nncmp-tray-actions { display: flex; align-items: center; gap: .5rem; }
  .nncmp-go {
    padding: .6rem 1.3rem;
    font-family: inherit; font-size: .88rem; font-weight: 700; color: #fff;
    background: var(--grad-green);
    border: none; border-radius: var(--radius-full);
    cursor: pointer;
    transition: transform .25s var(--ease-spring), box-shadow .25s ease;
  }
  .nncmp-go:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-green); }
  .nncmp-go:disabled { opacity: .5; cursor: default; }
  .nncmp-ghost, .nncmp-min {
    padding: .55rem .9rem;
    font-family: inherit; font-size: .84rem; font-weight: 600;
    color: var(--text-muted); background: transparent;
    border: 1.5px solid var(--border); border-radius: var(--radius-full);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
  }
  .nncmp-ghost:hover { color: var(--orange); border-color: var(--orange); }
  .nncmp-min { padding: .55rem .75rem; }
  .nncmp-min:hover { color: var(--green); border-color: var(--green); }

  /* Minimised: just the header and the restore arrow. */
  .nncmp-tray.mini .nncmp-slots,
  .nncmp-tray.mini .nncmp-go,
  .nncmp-tray.mini .nncmp-ghost { display: none; }
  .nncmp-tray.mini .nncmp-tray-inner { justify-content: space-between; }

  /* ---------- Slide-over panel ---------- */
  .nncmp-panel-overlay {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; justify-content: flex-end;
    background: rgba(10, 18, 30, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .nncmp-panel-overlay.open { opacity: 1; visibility: visible; }
  .nncmp-panel {
    width: min(680px, 100%);
    height: 100%;
    display: flex; flex-direction: column;
    background: var(--surface);
    box-shadow: -12px 0 44px rgba(10, 18, 30, .28);
    transform: translateX(100%);
    transition: transform .38s var(--ease-out);
  }
  .nncmp-panel-overlay.open .nncmp-panel { transform: translateX(0); }

  .nncmp-panel-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.3rem 1.5rem;
    border-bottom: 1px solid var(--border);
  }
  .nncmp-panel-title {
    font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin: 0;
  }
  .nncmp-panel-x {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    font-size: .9rem; color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border); border-radius: 50%;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease;
  }
  .nncmp-panel-x:hover { color: var(--orange); border-color: var(--orange); }

  .nncmp-panel-body {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: 1.5rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Summary */
  .nncmp-summary {
    padding: 1.15rem 1.3rem; margin-bottom: 1.5rem;
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, .22);
    border-radius: var(--radius-lg);
  }
  .nncmp-summary-label {
    font-size: .74rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--green-deep); margin-bottom: .35rem;
  }
  .nncmp-summary-text { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--ink); }

  /* The shared three-column shape: label, recipe A, recipe B. */
  .nncmp-grid {
    display: grid;
    grid-template-columns: minmax(90px, 1.1fr) 1fr 1fr;
    gap: .5rem .75rem;
    align-items: center;
  }
  .nncmp-heads { padding-bottom: .9rem; border-bottom: 2px solid var(--border); }
  .nncmp-head { text-align: center; min-width: 0; }
  .nncmp-head-emoji { font-size: 1.6rem; line-height: 1.2; }
  .nncmp-head-title {
    font-size: .9rem; font-weight: 700; color: var(--ink);
    line-height: 1.3; margin-top: .2rem;
  }
  .nncmp-head-cat {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); margin-top: .15rem;
  }

  .nncmp-rows { margin-top: .3rem; }
  .nncmp-row { padding: .7rem 0; border-bottom: 1px solid var(--border); }
  .nncmp-row.is-key {
    background: var(--surface-2);
    border-radius: var(--radius-md, 12px);
    padding: .85rem .6rem;
    margin: .3rem 0;
    border-bottom: none;
  }
  .nncmp-rowlabel {
    display: flex; flex-direction: column; gap: .05rem;
    font-size: .84rem; font-weight: 600; color: var(--text-muted);
  }
  .nncmp-rownote {
    font-size: .68rem; font-weight: 500; font-style: italic;
    color: var(--text-muted); opacity: .8;
  }
  .nncmp-cell {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .35rem .4rem;
    font-size: .92rem; color: var(--text);
    border-radius: var(--radius-full);
    text-align: center;
  }
  /* The win is shown with colour, weight AND a tick, so it does not rely
     on colour alone. */
  .nncmp-cell.is-better {
    color: var(--green-deep); font-weight: 800;
    background: var(--green-pale);
  }
  .nncmp-val { min-width: 0; }
  .nncmp-better { font-size: .75rem; }

  .nncmp-legend {
    margin: 1.3rem 0 0;
    font-size: .78rem; line-height: 1.6; color: var(--text-muted);
  }

  .nncmp-actions-row { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--border); }
  .nncmp-actions { display: flex; flex-direction: column; gap: .4rem; }
  .nncmp-act {
    padding: .55rem .8rem;
    font-family: inherit; font-size: .82rem; font-weight: 600;
    color: var(--text); background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--radius-full);
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
  }
  .nncmp-act:hover { border-color: var(--green); color: var(--green); }
  .nncmp-act-primary {
    color: #fff; background: var(--grad-green); border-color: transparent;
  }
  .nncmp-act-primary:hover { color: #fff; }
  .nncmp-act-quiet { background: transparent; color: var(--text-muted); }
  .nncmp-act-quiet:hover { color: var(--orange); border-color: var(--orange); }

  [data-theme="dark"] .nncmp-cell.is-better { background: rgba(5, 150, 105, .18); color: var(--green-light); }
  [data-theme="dark"] .nncmp-summary { background: rgba(5, 150, 105, .12); }

  @media (max-width: 620px) {
    .nncmp-tray-inner { padding: .75rem .85rem; gap: .6rem .7rem; }
    .nncmp-tray-head { flex-direction: row; align-items: baseline; gap: .5rem; width: 100%; }
    .nncmp-slots { flex: 1 1 100%; }
    .nncmp-slot { max-width: 100%; flex: 1 1 100%; }
    .nncmp-tray-actions { width: 100%; }
    .nncmp-go { flex: 1; }
    .nncmp-panel { width: 100%; }
    .nncmp-panel-body { padding: 1.1rem; }
    .nncmp-grid { grid-template-columns: minmax(72px, .9fr) 1fr 1fr; gap: .4rem .5rem; }
    .nncmp-head-title { font-size: .8rem; }
    .nncmp-cell { font-size: .85rem; }
    .nncmp-rowlabel { font-size: .78rem; }
  }

  /* The tray floats over the page bottom, so give the last section room
     to breathe and keep the scroll rails clear of it. */
  body.nncmp-tray-open { padding-bottom: 5rem; }

  /* ---------- Recipe count ----------
     Sits at the top of a collection, above the search box. The number
     carries the weight; the wording after it stays quiet so the line
     reads as a heading rather than a sentence. */
  .recipe-count {
    display: flex; align-items: baseline; gap: .4rem;
    margin: 0 0 1.5rem;
  }
  .recipe-count:empty { display: none; }
  .recipe-count-num {
    font-family: var(--font-display);
    font-size: 1.9rem; font-weight: 700; line-height: 1;
    color: var(--green);
  }
  .recipe-count-label {
    font-size: .95rem; font-weight: 600;
    color: var(--text-muted);
  }
  @media (max-width: 560px) {
    .recipe-count { margin-bottom: 1.15rem; }
    .recipe-count-num { font-size: 1.55rem; }
    .recipe-count-label { font-size: .88rem; }
  }

  /* Admin dashboard link in the footer. Deliberately quiet — it is a
     tool for one or two people, not a call to action. */
  .foot-admin {
    display: inline-block;
    margin-top: 1.25rem;
    padding: .4rem .95rem;
    font-size: .78rem; font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
  }
  .foot-admin:hover { color: var(--green); border-color: var(--green); }
  .foot-admin[hidden] { display: none; }

  /* Live page-view count, sat at the top right in the navbar. Quiet by
     design — a trust signal, not a headline. */
  .nav-views {
    display: inline-flex; align-items: center;
    padding: .3rem .7rem;
    font-size: .78rem; font-weight: 700;
    color: var(--green-deep);
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, 0.22);
    border-radius: var(--radius-full);
    white-space: nowrap;
  }
  .nav-views[hidden] { display: none; }
  [data-theme="dark"] .nav-views {
    color: var(--green-light);
    background: rgba(5, 150, 105, 0.18);
    border-color: rgba(52, 211, 153, 0.26);
  }
  /* On a phone the nav collapses to logo + icons, leaving a gap in the
     middle. The count is centred into that gap rather than crowding the
     icons: taken out of flow so it centres on the bar itself, not on
     whatever space happens to be left over.

     Below 430px the logo and icons meet in the middle and there is no
     gap to sit in, so it steps aside. */
  /* The count appears twice in the markup and exactly one copy is ever
     visible: the navbar on a computer, the hero on a phone. Squeezing it
     into a phone navbar meant fighting the logo and the hamburger for a
     40px gap, so on small screens it moves to the hero instead, sitting
     just above the "Student-led healthy eating project" badge. */
  .hero-views { display: none; margin-bottom: .6rem; }
  .hero-views-pill { font-size: .74rem; }

  @media (max-width: 900px) {
    .nav-views { display: none; }                 /* navbar copy steps aside */
    .hero-views { display: block; }               /* hero copy takes over */
    .hero-views .nav-views[hidden] { display: none; }
    .hero-views .nav-views { display: inline-flex; }
  }

  /* Slide-in when switching views */
  .slide-in { animation: fadeInUp 0.5s var(--ease-out) both; }

  /* Search */
  .search-wrap {
    position: relative;
    max-width: 520px;
    margin: 0 auto 1.6rem;
  }
  .search-icon {
    position: absolute; left: 1.15rem; top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    opacity: 0.6;
    pointer-events: none;
  }
  #recipe-search {
    width: 100%;
    padding: 0.95rem 1.4rem 0.95rem 3rem;
    font-family: inherit; font-size: 0.98rem;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }
  #recipe-search::placeholder { color: var(--text-muted); }
  #recipe-search:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.14), var(--shadow-sm);
  }

  /* Filter pills */
  .filter-pills {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.6rem;
    margin-bottom: 2.5rem;
  }
  .pill {
    padding: 0.55rem 1.3rem;
    font-size: 0.9rem; font-weight: 500;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    transition: all 0.28s var(--ease-out);
  }
  .pill:hover { border-color: rgba(5, 150, 105, 0.45); color: var(--green-mid); transform: translateY(-2px); }
  .pill.active {
    color: #fff;
    background: var(--grad-green);
    border-color: transparent;
    box-shadow: var(--shadow-green);
  }

  /* Recipe grid & cards */
  .recipe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.75rem;
  }

  .recipe-card {
    position: relative;              /* anchors the Nutrition Score badge */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    cursor: pointer;
    animation: cardIn 0.55s var(--ease-out) both;
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
  }
  /* Gentle stagger as cards render */
  .recipe-card:nth-child(2) { animation-delay: 0.07s; }
  .recipe-card:nth-child(3) { animation-delay: 0.14s; }
  .recipe-card:nth-child(4) { animation-delay: 0.21s; }
  .recipe-card:nth-child(5) { animation-delay: 0.28s; }
  .recipe-card:nth-child(6) { animation-delay: 0.35s; }
  .recipe-card:nth-child(n+7) { animation-delay: 0.4s; }

  .recipe-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(5, 150, 105, 0.28);
  }
  .recipe-card:focus-visible {
    outline: 3px solid rgba(5, 150, 105, 0.5);
    outline-offset: 3px;
  }

  @keyframes cardIn {
    from { opacity: 0; transform: translateY(26px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .card-img, .card-img-placeholder, .card-title-banner {
    height: 205px; width: 100%;
  }
  .card-img {
    object-fit: cover;
    transition: transform 0.6s var(--ease-out);
  }
  .recipe-card:hover .card-img { transform: scale(1.06); }
  .card-img-placeholder {
    display: grid; place-items: center;
    font-size: 4rem;
    background: linear-gradient(140deg, var(--green-pale), #f0fdfa);
  }
  .card-title-banner {
    display: grid; place-items: center;
    padding: 1rem;
    background: var(--grad-green);
  }
  .card-title-banner span {
    font-family: var(--font-display);
    font-size: 1.4rem; font-weight: 700;
    color: #fff; text-align: center;
  }

  .card-body { padding: 1.4rem 1.5rem 1.5rem; }
  .card-category {
    display: inline-block;
    padding: 0.22rem 0.75rem;
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--green-mid);
    background: var(--green-pale);
    border-radius: var(--radius-full);
    margin-bottom: 0.7rem;
  }
  .card-title {
    font-family: var(--font-display);
    font-size: 1.28rem;
    margin-bottom: 0.45rem;
  }
  .card-desc {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
  }
  .card-meta {
    display: flex; flex-wrap: wrap; gap: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    font-size: 0.82rem; font-weight: 500;
    color: var(--text-muted);
  }


  /* "+ Track" button on recipe cards */
  .card-track {
    margin-left: auto;
    padding: 0.3rem 0.95rem;
    font-family: inherit;
    font-size: 0.78rem; font-weight: 600;
    color: var(--green-mid);
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, 0.3);
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s var(--ease-out);
  }
  .card-track:hover:not(:disabled) { background: var(--grad-green); color: #fff; transform: translateY(-1px); }
  .card-track:disabled { opacity: 0.75; cursor: default; }

  /* Placeholder ("coming soon") cards */
  .recipe-card.placeholder {
    cursor: default;
    border-style: dashed;
    border-color: var(--border-strong);
    box-shadow: none;
    background: var(--surface-2);
  }
  .recipe-card.placeholder:hover { transform: none; box-shadow: none; border-color: var(--border-strong); }
  .placeholder-img {
    height: 205px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.6rem;
    background: repeating-linear-gradient(-45deg, transparent, transparent 12px,
                rgba(15, 23, 42, 0.022) 12px, rgba(15, 23, 42, 0.022) 24px);
  }
  .placeholder-plus {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    font-size: 1.6rem; font-weight: 300;
    color: var(--text-muted);
    border: 2px dashed var(--border-strong);
    border-radius: 50%;
  }
  .placeholder-label { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
  .placeholder-body { padding: 1.4rem 1.5rem 1.5rem; }
  .placeholder-title, .placeholder-line, .placeholder-chip {
    background: linear-gradient(90deg, rgba(100, 116, 139, 0.14) 25%,
                rgba(100, 116, 139, 0.07) 50%, rgba(100, 116, 139, 0.14) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s linear infinite;
    border-radius: 6px;
  }
  .placeholder-title { height: 18px; width: 60%; margin-bottom: 0.8rem; }
  .placeholder-line  { height: 11px; width: 100%; margin-bottom: 0.55rem; }
  .placeholder-line.short { width: 70%; }
  .placeholder-meta { display: flex; gap: 0.6rem; margin-top: 1rem; }
  .placeholder-chip { height: 22px; width: 62px; border-radius: var(--radius-full); }
  @keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  .rate-note { color: var(--text-muted); margin-bottom: 1rem; font-size: 1rem; }

  /* ---------- 9b. NUTRITION CALCULATOR PROMO ---------- */
  #calc-promo { padding-top: 0; }
  .calc-banner {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: 2rem;
    padding: clamp(2.25rem, 5vw, 3.5rem);
    background: var(--grad-green);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px -18px rgba(5, 150, 105, 0.55);
    overflow: hidden;
  }
  .calc-banner-glow {
    position: absolute; inset: 0;
    background:
      radial-gradient(400px 260px at 85% 0%, rgba(255, 255, 255, 0.18), transparent 65%),
      radial-gradient(360px 240px at 5% 100%, rgba(255, 255, 255, 0.1), transparent 65%);
    pointer-events: none;
  }
  .calc-banner-emoji {
    position: absolute;
    font-size: 3.2rem;
    opacity: 0.18;
    pointer-events: none;
    animation: floatSlow 6s ease-in-out infinite;
  }
  .calc-banner-emoji:nth-of-type(1) { top: 10%; right: 4%; }
  .calc-banner-emoji:nth-of-type(2) { bottom: 8%; left: 3%; animation-delay: -3s; }
  .calc-banner-text { position: relative; }
  .calc-banner-label {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-full);
    margin-bottom: 1rem;
  }
  .calc-banner h2 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    color: #fff;
    margin-bottom: 0.7rem;
  }
  .calc-banner p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 46ch;
    margin-bottom: 1.3rem;
  }
  .calc-banner-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .calc-banner-chips span {
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem; font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-full);
  }
  .calc-banner-action {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; gap: 0.8rem;
    justify-self: center;
  }
  .btn-calc-promo {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 1rem 2.1rem;
    font-size: 1.02rem; font-weight: 600;
    color: var(--green-deep);
    background: #fff;
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: 0 14px 34px -8px rgba(6, 78, 59, 0.5);
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
  }
  .btn-calc-promo:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -8px rgba(6, 78, 59, 0.6); }
  .btn-calc-promo .btn-arrow { transition: transform 0.3s var(--ease-spring); }
  .btn-calc-promo:hover .btn-arrow { transform: translateX(4px); }
  .calc-banner-note { font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); }

  @media (max-width: 860px) {
    .calc-banner { grid-template-columns: 1fr; text-align: center; }
    .calc-banner p, .calc-banner-chips { margin-inline: auto; justify-content: center; }
  }

  /* ---------- 10. RECIPE MODAL ---------- */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 950;
    display: flex; align-items: center; justify-content: center;
    padding: 1.25rem;
    background: rgba(10, 18, 30, 0.55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .modal-overlay.open { opacity: 1; visibility: visible; }

  .modal {
    position: relative;
    width: min(720px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 30px 80px rgba(10, 18, 30, 0.35);
    transform: translateY(24px) scale(0.97);
    transition: transform 0.35s var(--ease-out);
    overscroll-behavior: contain;
  }
  .modal-overlay.open .modal { transform: translateY(0) scale(1); }

  .modal-close {
    position: sticky;
    top: 0.9rem;
    margin-left: calc(100% - 3.4rem);
    margin-right: 0.9rem;
    z-index: 5;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    font-size: 1rem;
    color: var(--ink);
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    transition: transform 0.3s var(--ease-spring), background 0.25s ease;
  }
  .modal-close:hover { transform: rotate(90deg) scale(1.08); }

  #modal-header { margin-top: -3.2rem; }
  .modal-img { width: 100%; height: 280px; object-fit: cover; }
  .modal-img-emoji {
    display: grid; place-items: center;
    height: 220px;
    font-size: 5.5rem;
    background: linear-gradient(140deg, var(--green-pale), #f0fdfa 60%, var(--orange-pale));
  }

  .modal-body { padding: clamp(1.5rem, 4vw, 2.4rem); }

  .modal-category {
    display: inline-block;
    padding: 0.25rem 0.85rem;
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--green-mid);
    background: var(--green-pale);
    border-radius: var(--radius-full);
    margin-bottom: 0.8rem;
  }
  .modal-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.1rem);
    margin-bottom: 0.6rem;
  }
  .modal-desc { color: var(--text-muted); margin-bottom: 1.6rem; }

  .modal-stats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.6rem;
    margin-bottom: 2rem;
  }
  .modal-stat {
    padding: 0.8rem 0.4rem;
    text-align: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: transform 0.3s var(--ease-out), border-color 0.3s ease;
  }
  .modal-stat:hover { transform: translateY(-3px); border-color: rgba(5, 150, 105, 0.3); }
  .modal-stat-val { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
  .modal-stat-label {
    font-size: 0.68rem; font-weight: 500;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.2rem;
  }

  .modal-section-title {
    font-family: var(--font-display);
    font-size: 1.25rem; font-weight: 700;
    color: var(--ink);
    margin-bottom: 1rem;
  }

  .modal-ingredients { margin-bottom: 2rem; }
  .modal-ingredient {
    position: relative;
    padding: 0.6rem 0 0.6rem 1.7rem;
    border-bottom: 1px dashed var(--border);
    font-size: 0.95rem;
  }
  .modal-ingredient:last-child { border-bottom: none; }
  .modal-ingredient::before {
    content: '';
    position: absolute; left: 0.2rem; top: 1.05rem;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green-light);
  }

  .modal-steps { margin-bottom: 1.5rem; }
  .modal-steps ol { list-style: none; counter-reset: step; }
  .modal-steps li {
    counter-increment: step;
    position: relative;
    padding: 0 0 1.2rem 3rem;
    font-size: 0.96rem;
  }
  .modal-steps li::before {
    content: counter(step);
    position: absolute; left: 0; top: 0;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    font-size: 0.85rem; font-weight: 700;
    color: #fff;
    background: var(--grad-green);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
  }
  .modal-steps li:not(:last-child)::after {
    content: '';
    position: absolute; left: 15px; top: 36px; bottom: 4px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(5, 150, 105, 0.3), rgba(5, 150, 105, 0.06));
  }

  .modal-tip {
    display: flex; flex-direction: column; gap: 0.3rem;
    padding: 1.1rem 1.3rem;
    background: #fffbeb;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid var(--amber);
    border-radius: 14px;
    font-size: 0.93rem;
    margin-bottom: 1.5rem;
  }
  .modal-tip strong { color: #92400e; }

  .modal-why { margin-bottom: 1rem; }
  .modal-why-item {
    position: relative;
    padding: 0.55rem 0 0.55rem 2rem;
    font-size: 0.94rem;
  }
  .modal-why-item::before {
    content: '✓';
    position: absolute; left: 0; top: 0.55rem;
    display: grid; place-items: center;
    width: 22px; height: 22px;
    font-size: 0.75rem; font-weight: 700;
    color: var(--green-mid);
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, 0.25);
    border-radius: 50%;
  }

  .modal-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    font-size: 0.92rem;
  }
  .modal-table th {
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
    color: #fff;
    background: var(--grad-green);
  }
  .modal-table td {
    padding: 0.8rem 1rem;
    border-top: 1px solid var(--border);
    vertical-align: top;
  }
  .modal-table tbody tr:nth-child(even) { background: var(--surface-2); }

  /* ---------- 11. SUGGEST-A-FOOD ---------- */
  #request { background: var(--surface); overflow: hidden; }
  #request::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(700px 400px at 85% 15%, rgba(5, 150, 105, 0.06), transparent 70%);
    pointer-events: none;
  }

  .suggest-card {
    position: relative;
    max-width: 720px;
    margin: 2.5rem auto 0;
    padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
    text-align: center;
    background:
      radial-gradient(circle at 20% 10%, rgba(52, 211, 153, 0.1), transparent 45%),
      radial-gradient(circle at 85% 90%, rgba(251, 191, 36, 0.1), transparent 45%),
      var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .suggest-card h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 1.9rem);
    margin-bottom: 0.8rem;
  }
  .suggest-card p { color: var(--text-muted); max-width: 48ch; margin: 0 auto 1.8rem; }

  .suggest-accent {
    position: absolute;
    font-size: 1.7rem;
    opacity: 0.7;
    animation: floatSlow 5.5s ease-in-out infinite;
    pointer-events: none;
  }
  .suggest-accent:nth-of-type(1) { top: 12%;  left: 7%; }
  .suggest-accent:nth-of-type(2) { top: 22%;  right: 8%;  animation-delay: -1.6s; }
  .suggest-accent:nth-of-type(3) { bottom: 16%; left: 11%; animation-delay: -3s; }
  .suggest-accent:nth-of-type(4) { bottom: 22%; right: 12%; animation-delay: -4.4s; }

  .suggest-icon-ring {
    position: relative;
    display: grid; place-items: center;
    width: 86px; height: 86px;
    margin: 0 auto 1.5rem;
    font-size: 2.3rem;
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, 0.2);
    border-radius: 26px;
    box-shadow: var(--shadow-md);
  }
  .suggest-icon-ring::after {
    content: '';
    position: absolute; inset: -8px;
    border: 2px dashed rgba(5, 150, 105, 0.3);
    border-radius: 32px;
    animation: spinSlow 22s linear infinite;
  }
  @keyframes spinSlow { to { transform: rotate(360deg); } }

  .btn-suggest-wrap { margin-bottom: 1.1rem; }
  .btn-suggest {
    position: relative;
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 1rem 2.4rem;
    font-size: 1.05rem; font-weight: 600;
    color: #fff;
    background: var(--grad-green);
    border-radius: var(--radius-full);
    text-decoration: none;
    box-shadow: var(--shadow-green);
    overflow: hidden;
    transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
  }
  .btn-suggest::after {
    /* Shine sweep on hover */
    content: '';
    position: absolute; top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
  }
  .btn-suggest:hover { transform: translateY(-3px); box-shadow: 0 18px 44px -10px rgba(5, 150, 105, 0.55); }
  .btn-suggest:hover::after { left: 130%; }

  .suggest-note { font-size: 0.88rem !important; color: var(--text-muted); margin-bottom: 0 !important; }
  .suggest-note span { color: var(--green-mid); font-weight: 600; }

  /* ---------- 12. FAQ ---------- */
  #faq {
    background:
      radial-gradient(650px 350px at 10% 10%, rgba(5, 150, 105, 0.05), transparent 70%),
      var(--bg);
  }
  .faq-grid { max-width: 780px; margin: 2.75rem auto 0; }

  .faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    margin-bottom: 0.9rem;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .faq-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
  .faq-item.open {
    border-color: rgba(5, 150, 105, 0.35);
    box-shadow: var(--shadow-md);
  }

  .faq-q {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: 100%;
    padding: 1.2rem 1.5rem;
    font-size: 1rem; font-weight: 600;
    text-align: left;
    color: var(--ink);
    background: none;
    border: none;
    transition: color 0.25s ease;
  }
  .faq-item.open .faq-q { color: var(--green-mid); }

  .faq-arrow {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 28px; height: 28px;
    font-size: 0.7rem;
    color: var(--green-mid);
    background: var(--green-pale);
    border-radius: 50%;
    transition: transform 0.35s var(--ease-spring);
  }
  .faq-item.open .faq-arrow { transform: rotate(180deg); }

  .faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--ease-out);
  }
  .faq-item.open .faq-a { grid-template-rows: 1fr; }
  .faq-a-inner {
    min-height: 0;
    overflow: hidden;
    padding: 0 1.5rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    transition: padding 0.4s var(--ease-out);
  }
  .faq-item.open .faq-a-inner { padding: 0 1.5rem 1.3rem; }

  /* ---------- 13. CONTACT ---------- */
  #contact { background: var(--surface); }

  .contact-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    max-width: 860px;
    margin: 2.75rem auto 0;
  }

  .contact-founders, .contact-email-wrap {
    padding: 2rem 2.2rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.35s ease;
  }
  .contact-founders:hover, .contact-email-wrap:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(5, 150, 105, 0.25);
  }

  .contact-founders-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
  }
  .contact-founders-list { list-style: none; }
  .contact-founders-list li {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.55rem 0;
    font-weight: 500;
    color: var(--text);
  }
  .contact-founders-list li::before {
    content: '👤';
    display: grid; place-items: center;
    width: 34px; height: 34px;
    font-size: 0.9rem;
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, 0.15);
    border-radius: 50%;
    flex-shrink: 0;
  }

  .contact-email-wrap {
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
  }
  .contact-email-label {
    font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
  }
  .contact-email-link {
    display: inline-flex; align-items: center; gap: 0.7rem;
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    word-break: break-all;
    transition: color 0.25s ease;
  }
  .contact-email-link:hover { color: var(--green-mid); }
  .contact-email-icon {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    font-size: 1.2rem;
    background: var(--green-pale);
    border: 1px solid rgba(5, 150, 105, 0.18);
    border-radius: 14px;
    flex-shrink: 0;
  }

  /* ---------- 14. FOOTER & SCROLL-TO-TOP ---------- */
  footer {
    position: relative;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: rgba(226, 232, 240, 0.75);
    background: linear-gradient(160deg, #0c1a14, #0f172a);
  }
  footer::before {
    /* Thin gradient accent along the top edge */
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad-green);
  }
  .foot-logo {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
  }
  .foot-logo span { color: var(--green-light); }
  footer p { font-size: 0.9rem; }

  #scroll-top {
    position: fixed;
    right: 1.5rem; bottom: 1.5rem;
    z-index: 800;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    font-size: 1.1rem;
    color: #fff;
    background: var(--grad-green);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-green);
    opacity: 0; visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.3s ease, visibility 0.3s ease,
                transform 0.3s var(--ease-spring), box-shadow 0.3s ease;
  }
  #scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
  #scroll-top:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -8px rgba(5, 150, 105, 0.55); }

  /* ---------- Side scroll rails (recipe pages only) ----------
     Long recipe lists are tiring to scroll, so a jump-to-top sits on
     the left edge and a jump-to-bottom on the right, both vertically
     centred. They stay clear of #scroll-top, which lives bottom-right. */
  .nn-rail {
    position: fixed;
    top: 50%; transform: translateY(-50%) scale(0.85);
    z-index: 700;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    font-size: 1.05rem; line-height: 1;
    color: var(--green-deep);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease, transform .3s var(--ease-spring),
                background .25s ease, color .25s ease, border-color .25s ease;
  }
  .nn-rail.visible { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
  .nn-rail:hover {
    color: #fff; background: var(--grad-green); border-color: transparent;
    box-shadow: var(--shadow-green);
  }
  .nn-rail-top    { left:  calc(1rem + var(--safe-l, 0px)); }
  .nn-rail-bottom { right: calc(1rem + var(--safe-r, 0px)); }

  [data-theme="dark"] .nn-rail { background: rgba(17, 26, 46, 0.9); color: var(--green-light); }

  @media (max-width: 560px) {
    .nn-rail { width: 38px; height: 38px; font-size: 0.95rem; }
    .nn-rail-top    { left:  calc(0.5rem + var(--safe-l, 0px)); }
    .nn-rail-bottom { right: calc(0.5rem + var(--safe-r, 0px)); }
    /* Keep the right rail clear of the round back-to-top button */
    .nn-rail-bottom { top: 42%; }
  }

  /* ---------- 15. SCROLL-REVEAL & SHARED KEYFRAMES ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
    will-change: opacity, transform;
  }
  .reveal-left  { transform: translateX(-40px); }
  .reveal-right { transform: translateX(40px); }
  .reveal-scale { transform: scale(0.94); }
  .reveal-rotate { transform: rotate(-3deg) translateY(24px) scale(0.97); }
  .reveal.visible { opacity: 1; transform: none; }
  .no-io .reveal { opacity: 1; transform: none; } /* Fallback: no IntersectionObserver */

  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ---------- 16. DARK THEME ---------- */
  [data-theme="dark"] {
    --ink:        #f1f5f9;
    --text:       #cbd5e1;
    --text-muted: #94a3b8;
    --bg:         #0b1220;
    --surface:    #111a2e;
    --surface-2:  #16203a;
    --border:        rgba(148, 163, 184, 0.14);
    --border-strong: rgba(148, 163, 184, 0.24);
    --green-pale:  rgba(16, 185, 129, 0.13);
    --orange-pale: rgba(234, 88, 12, 0.14);
    --grad-hero: linear-gradient(120deg, #0d1b17 0%, #0b1220 50%, #1a1410 100%);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.45);
  }
  [data-theme="dark"] #navbar.scrolled {
    background: rgba(11, 18, 32, 0.82);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }
  [data-theme="dark"] .mobile-menu { background: rgba(17, 26, 46, 0.94); }
  [data-theme="dark"] .hero-badge {
    background: rgba(17, 26, 46, 0.75);
    color: var(--green-light);
  }
  [data-theme="dark"] .hero-install {
    background: rgba(17, 26, 46, 0.75);
    color: var(--green-light);
    border-color: rgba(52, 211, 153, 0.3);
  }
  [data-theme="dark"] .hero-install:hover {
    background: rgba(17, 26, 46, 0.92);
    border-color: var(--green-light);
  }
  [data-theme="dark"] .hero-bg::before {
    background-image: radial-gradient(rgba(52, 211, 153, 0.12) 1px, transparent 1px);
  }
  [data-theme="dark"] .hero-img-wrap {
    background:
      radial-gradient(circle at 30% 25%, rgba(52, 211, 153, 0.16), transparent 55%),
      linear-gradient(145deg, #10241d, #132c22 60%, #241d10 130%);
    border-color: rgba(148, 163, 184, 0.16);
    box-shadow: var(--shadow-lg), inset 0 0 60px rgba(16, 185, 129, 0.07);
  }
  [data-theme="dark"] .stat-card,
  [data-theme="dark"] .about-tag {
    background: rgba(17, 26, 46, 0.85);
    border-color: var(--border);
  }
  [data-theme="dark"] .about-img-box {
    background: linear-gradient(150deg, rgba(16, 185, 129, 0.09), rgba(13, 148, 136, 0.06) 55%, rgba(234, 88, 12, 0.08));
  }
  [data-theme="dark"] .card-img-placeholder,
  [data-theme="dark"] .modal-img-emoji {
    background: linear-gradient(140deg, rgba(16, 185, 129, 0.12), rgba(13, 148, 136, 0.08));
  }
  [data-theme="dark"] .modal-close {
    background: rgba(17, 26, 46, 0.9);
    color: var(--ink);
  }
  [data-theme="dark"] .modal-tip {
    background: rgba(245, 158, 11, 0.09);
    border-color: rgba(245, 158, 11, 0.25);
  }
  [data-theme="dark"] .modal-tip strong { color: #fbbf24; }
  [data-theme="dark"] .suggest-card {
    background:
      radial-gradient(circle at 20% 10%, rgba(52, 211, 153, 0.09), transparent 45%),
      radial-gradient(circle at 85% 90%, rgba(251, 191, 36, 0.07), transparent 45%),
      var(--surface);
  }
  [data-theme="dark"] .hamburger span { background: var(--ink); }
  [data-theme="dark"] ::selection { background: rgba(52, 211, 153, 0.3); }

  /* ---------- 17. RESPONSIVE ---------- */
  @media (max-width: 1024px) {
    .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
    .hero-visual { display: none; } /* decorative only — desktop */
    .hero-content { text-align: center; }
    .hero-sub { margin-inline: auto; }
    .hero-actions, .hero-stats { justify-content: center; }
    .about-inner { grid-template-columns: 1fr; gap: 3.5rem; }
    .about-visual { max-width: 480px; margin-inline: auto; }
  }

  @media (max-width: 860px) {
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .nav-social span { display: none; } /* icon only on small screens */
    .contact-bottom { grid-template-columns: 1fr; }
    .modal-stats { grid-template-columns: repeat(3, 1fr); }
  }

  @media (max-width: 640px) {
    :root { --nav-h: 66px; }
    #home { min-height: auto; padding-top: calc(var(--nav-h) + 3rem); }
    .nav-cta { display: none; } /* CTA lives in the mobile menu */
    .nav-auth { display: none; } /* Log In lives in the mobile menu */
    .diet-selector { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
    .about-pillars { grid-template-columns: 1fr; }
    .hero-stat + .hero-stat { padding-left: 1.1rem; }
    .recipe-grid { grid-template-columns: 1fr; }
    .modal-close { top: 0.7rem; margin-left: calc(100% - 3.1rem); }
    #scroll-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; }
  }

  /* ---------- 18. ACCESSIBILITY ---------- */
  :is(a, button, input, [tabindex]):focus-visible {
    outline: 3px solid rgba(5, 150, 105, 0.55);
    outline-offset: 2px;
    border-radius: 6px;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
  }

  /* ==================================================================
     SECTION IDENTITY — each section gets its own quiet signature
     (hero: drifting dots · about: stitched frame + grain ·
      recipes: stitch divider · faq: double-rule · contact: warm blend ·
      footer: seam)
  ================================================================== */

  /* About: faint dot grain + stitched (dashed) frame around the visual */
  #about::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(5, 150, 105, 0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,0.8), transparent 55%);
    mask-image: linear-gradient(115deg, rgba(0,0,0,0.8), transparent 55%);
    pointer-events: none;
  }
  .about-img-box { position: relative; }
  .about-img-box::after {
    content: '';
    position: absolute; inset: 10px;
    border: 2px dashed rgba(5, 150, 105, 0.28);
    border-radius: calc(var(--radius-lg) - 8px);
    pointer-events: none;
  }

  /* Recipes: stitch-styled divider */
  #recipes .divider {
    background: repeating-linear-gradient(90deg, var(--green) 0 9px, transparent 9px 15px);
    width: 72px;
  }

  /* Request: warm amber-to-green divider echoing the floating fruit */
  #request .divider { background: linear-gradient(90deg, var(--amber), var(--green)); width: 72px; }

  /* FAQ: editorial double rule */
  #faq .divider {
    height: 2px;
    box-shadow: 0 5px 0 0 rgba(5, 150, 105, 0.3);
  }

  /* Contact: short warm rule */
  #contact .divider { width: 36px; background: linear-gradient(90deg, var(--green), var(--amber)); }

  /* Footer: stitched seam above the gradient edge */
  footer::after {
    content: '';
    position: absolute; top: 9px; left: 8%; right: 8%;
    border-top: 1px dashed rgba(255, 255, 255, 0.14);
  }

  /* Hero on phones: full-width comfy buttons */
  @media (max-width: 640px) {
    .hero-actions > * { flex: 1 1 100%; justify-content: center; }
  }

  /* ==================================================================
     PREMIUM POLISH LAYER
     Typography rhythm · hover refinement · glass touches · mobile fit
  ================================================================== */

  /* Editorial typography rhythm */
  h1, h2, h3 { letter-spacing: -0.015em; }
  p { text-wrap: pretty; }
  .section-title { line-height: 1.15; }
  .section-sub { line-height: 1.78; }
  button, a { -webkit-tap-highlight-color: transparent; }

  /* Navigation: animated underline */
  .nav-links a::after {
    content: '';
    position: absolute;
    left: 0.95rem; right: 0.95rem; bottom: 3px;
    width: auto; height: 2px;
    border-radius: 2px;
    background: var(--grad-green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.32s var(--ease-out);
  }
  .nav-links a:hover::after,
  .nav-links a.active::after { transform: scaleX(1); }

  /* Cards: lift + whisper of rotation, image zoom with warm overlay */
  .recipe-card:hover { transform: translateY(-7px) rotate(-0.35deg); }
  .recipe-card .card-img { transition: transform 0.6s var(--ease-out), filter 0.45s ease; }
  .recipe-card:hover .card-img { transform: scale(1.07); filter: brightness(1.05) saturate(1.06); }
  .recipe-card { will-change: transform; }

  /* Buttons: gentle glow on top of the lift */
  .btn-primary:hover, .btn-calculate:hover, .nav-cta:hover, .btn-rate:hover {
    filter: brightness(1.06) saturate(1.08);
  }

  /* Floating scroll-top button becomes glass */
  #scroll-top {
    background: rgba(5, 150, 105, 0.82);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    backdrop-filter: blur(10px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.28);
  }

  /* Footer micro-interactions */
  .foot-logo {
    display: inline-block;
    transition: letter-spacing 0.4s var(--ease-out), transform 0.4s var(--ease-spring);
  }
  .foot-logo:hover { letter-spacing: 0.05em; transform: translateY(-2px); }
  .foot-logo span { transition: text-shadow 0.35s ease; }
  .foot-logo:hover span { text-shadow: 0 0 18px rgba(52, 211, 153, 0.55); }

  /* Phone-friendly rhythm */
  @media (max-width: 640px) {
    section { padding: 3.4rem 0; }
    .container { width: min(100% - 1.8rem, 1140px); }
    .section-sub { font-size: 0.98rem; }
  }


  /* ==================================================================
     COMPACT MOBILE NAVBAR — slimmer bar, nothing clipped on the right
  ================================================================== */
  @media (max-width: 640px) {
    :root { --nav-h: 60px; }
    #navbar.scrolled { height: 56px; }
    .nav-inner { width: min(100% - 1.5rem, 1240px); gap: 0.45rem; }
    .nav-logo { font-size: 1rem; gap: 0.4rem; flex-shrink: 1; min-width: 0; white-space: nowrap; }
    .nav-logo .leaf { width: 30px; height: 30px; font-size: 0.95rem; border-radius: 10px; flex-shrink: 0; }
    .nav-actions { gap: 0.4rem; flex-shrink: 0; }
    .theme-toggle { width: 34px; height: 34px; font-size: 0.9rem; }
    .nav-cta { padding: 0.48rem 0.85rem; font-size: 0.76rem; }
    .nav-auth { padding: 0.42rem 0.8rem; font-size: 0.76rem; }
    .nav-social { padding: 0.3rem 0.4rem; }
    .nav-social svg { width: 18px; height: 18px; }
    .hamburger { width: 38px; height: 38px; }
    .mobile-menu { top: var(--nav-h); }
  }
  @media (max-width: 420px) {
    .nav-logo .leaf { display: none; }
    .nav-logo { font-size: 0.94rem; }
    .nav-cta { padding: 0.42rem 0.7rem; font-size: 0.72rem; }
    .nav-auth { padding: 0.4rem 0.7rem; font-size: 0.72rem; }
  }


  /* ==================================================================
     DEVICE-AWARE REFINEMENTS
     nn-premium.js tags <html data-device="phone|tablet|desktop">
     based on touch + pointer + screen — these rules adapt to the
     real device, not just the window width.
  ================================================================== */

  /* Phones: bigger, thumb-friendly tap targets */
  html[data-device="phone"] .btn-primary,
  html[data-device="phone"] .btn-secondary,
  html[data-device="phone"] .btn-calculate,
  html[data-device="phone"] .btn-auth,
  html[data-device="phone"] .btn-suggest,
  html[data-device="phone"] .btn-rate { min-height: 48px; }
  html[data-device="phone"] .pill,
  html[data-device="phone"] .see-more-btn,
  html[data-device="phone"] .mp-add,
  html[data-device="phone"] .card-track { min-height: 40px; }

  /* Phones: 16px inputs stop iOS from zooming in on focus */
  html[data-device="phone"] input,
  html[data-device="phone"] select { font-size: 16px !important; }

  /* Phones: the barcode scanner is the hero input method */
  html[data-device="phone"] .scan-btn { font-size: 1rem; padding: 1rem 1.2rem; }

  /* Phones: no hover states exist — keep cards flat and steady */
  html[data-device="phone"] .recipe-card:hover,
  html[data-device="phone"] .pillar:hover,
  html[data-device="phone"] .t-card:hover,
  html[data-device="phone"] .p-card:hover { transform: none; }

  /* Tablets: a bit more breathing room than phones */
  html[data-device="tablet"] .container { width: min(100% - 2.4rem, 1140px); }
  html[data-device="tablet"] input,
  html[data-device="tablet"] select { font-size: 16px !important; }


/* ==================================================================
   19. RESPONSIVE HARDENING
   Makes every page behave on real phones and real desktops:
   notch/home-bar safe areas, thumb-sized tap targets, nothing that
   can scroll sideways, and dynamic viewport units so mobile browser
   chrome doesn't cut content off.

   These rules use media queries (not the data-device attribute) so
   they apply immediately, before any JavaScript runs.
================================================================== */

/* ---------- 19a. Never scroll sideways ---------- */
html, body { max-width: 100%; overflow-x: clip; }

/* Long words, URLs and emails wrap instead of pushing the page wide */
body { overflow-wrap: break-word; }

/* Media and embeds always shrink to fit their column */
img, svg, video, canvas, iframe, table { max-width: 100%; }
img, video { height: auto; }

/* Stop iOS from re-scaling text after a rotate */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Decorative hero blobs must never widen the page */
.hero-bg, .hero-blob { max-width: 100vw; }

/* ---------- 19b. Safe areas (notches + home bar) ---------- */
:root {
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

.nav-inner   { padding-left: var(--safe-l); padding-right: var(--safe-r); }
.mobile-menu { margin-left: var(--safe-l); margin-right: var(--safe-r); }
footer       { padding-bottom: calc(3.5rem + var(--safe-b)); }
#scroll-top  { bottom: calc(1.5rem + var(--safe-b)); }

@media (max-width: 640px) {
  #scroll-top { bottom: calc(1rem + var(--safe-b)); }
}

/* ---------- 19c. Full-height sections that respect browser chrome ---------- */
/* svh/dvh keep hero sections from being clipped by mobile toolbars. */
@supports (height: 100svh) {
  #home, #login-hero { min-height: 100svh; }
  .modal { max-height: 88dvh; }
  .mobile-menu { max-height: calc(100dvh - var(--nav-h) - 1.5rem); }
}

/* A long mobile menu scrolls rather than running off the screen */
.mobile-menu {
  max-height: calc(100vh - var(--nav-h) - 1.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 19d. Touch targets ---------- */
/* Apple and Google both ask for ~44px. Applied on touch devices only,
   so the desktop layout keeps its tighter, tidier proportions. */
@media (pointer: coarse) {
  .nav-links a,
  .mobile-menu a,
  .theme-toggle,
  .hamburger,
  .nav-social,
  .nav-cta,
  .nav-auth,
  .pill,
  .faq-q,
  .modal-close,
  .card-track,
  .see-more-btn,
  .btn-primary,
  .btn-secondary,
  .btn-auth,
  .btn-suggest,
  .btn-rate,
  .btn-calc-promo,
  .auth-tab,
  #scroll-top {
    min-height: 44px;
  }

  .theme-toggle, .hamburger, .modal-close, #scroll-top { min-width: 44px; }

  .nav-social { padding: 0.6rem; }
  .pill { display: inline-flex; align-items: center; }
}

/* 16px inputs stop iOS Safari zooming in when a field is focused */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
}

/* ---------- 19e. No hover states on touch ---------- */
/* Sticky :hover transforms look broken after a tap on mobile. */
@media (hover: none) {
  .recipe-card:hover,
  .pillar:hover,
  .diet-btn:hover,
  .stat-card:hover,
  .t-card:hover,
  .p-card:hover,
  .res-card:hover,
  .contact-founders:hover,
  .contact-email-wrap:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-auth:hover,
  .btn-suggest:hover,
  .btn-rate:hover,
  .see-more-btn:hover,
  .nav-cta:hover,
  .nav-auth:hover,
  .btn-calc-promo:hover,
  .modal-stat:hover {
    transform: none;
  }
  .recipe-card:hover .card-img { transform: none; filter: none; }
  .theme-toggle:hover { transform: none; }
  .modal-close:hover { transform: none; }
  .diet-btn:hover .diet-icon { transform: none; }
  .nav-logo:hover .leaf { transform: none; }
  .emoji-grid span:hover { transform: none; }

  /* Tapping a card should still give feedback */
  .recipe-card:active { transform: scale(0.985); }
}

/* ---------- 19f. Recipe modal on small screens ---------- */
/* The comparison table is the one element that can't shrink far, so it
   gets its own horizontal scroller instead of stretching the modal. */
.modal-comparison {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.modal-table { min-width: 380px; }

@media (max-width: 640px) {
  .modal-overlay { padding: 0.75rem; align-items: flex-end; }
  .modal {
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal-img { height: 200px; }
  .modal-img-emoji { height: 160px; font-size: 4rem; }
  .modal-stats { grid-template-columns: repeat(3, 1fr); }
  .modal-steps li { padding-left: 2.6rem; }
  .modal-steps li::before { width: 28px; height: 28px; font-size: 0.78rem; }
  .modal-steps li:not(:last-child)::after { left: 13px; top: 32px; }
}

@supports (height: 100dvh) {
  @media (max-width: 640px) { .modal { max-height: 92dvh; } }
}

@media (max-width: 400px) {
  .modal-stats { grid-template-columns: repeat(2, 1fr); }
  .modal-table { min-width: 300px; }
}

/* ---------- 19g. Small-screen typography and spacing ---------- */
@media (max-width: 480px) {
  .hero-title { font-size: clamp(2.4rem, 12vw, 3.2rem); }
  .hero-stats { gap: 1rem 1.25rem; }
  .hero-stat strong { font-size: 1.3rem; }
  .hero-stat + .hero-stat { padding-left: 1rem; }
  .section-title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .contact-founders, .contact-email-wrap { padding: 1.5rem 1.35rem; }
  .contact-email-link { font-size: 0.95rem; }
  .faq-q { padding: 1rem 1.15rem; font-size: 0.95rem; }
  .faq-a-inner { padding: 0 1.15rem; }
  .faq-item.open .faq-a-inner { padding: 0 1.15rem 1.1rem; }
  .card-body { padding: 1.15rem 1.25rem 1.3rem; }
  .suggest-accent { display: none; } /* decorative — they crowd a small card */
}

/* ---------- 19h. Tablet / mid-size ---------- */
@media (min-width: 641px) and (max-width: 1024px) {
  .recipe-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .modal-stats { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 19i. Very wide screens ---------- */
/* Keep line lengths readable instead of stretching edge to edge. */
@media (min-width: 1600px) {
  .container { width: min(100% - 4rem, 1280px); }
  .nav-inner { width: min(100% - 4rem, 1380px); }
}

/* ---------- 19j. Print ---------- */
@media print {
  #navbar, .mobile-menu, #scroll-top, #loading-screen,
  .hero-bg, .theme-toggle, .hamburger, .nn-tour, .card-track { display: none !important; }
  body { background: #fff; color: #000; }
  .modal-overlay { position: static; opacity: 1; visibility: visible; background: none; }
  .modal { box-shadow: none; max-height: none; overflow: visible; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}

/* ---------- 19k. Filter pills on phones ---------- */
/* Six category pills stack into a tall block on a narrow screen. A
   single swipeable row keeps the recipe grid above the fold. */
@media (max-width: 560px) {
  .filter-pills {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.35rem;
    /* Bleed to the screen edges so the row reads as scrollable */
    margin-inline: -0.9rem;
    padding-inline: 0.9rem;
  }
  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pills .pill { flex: 0 0 auto; }
}

/* ---------- 19l. Shared footer ---------- */
.foot-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: 1.2rem 0 0.3rem;
}
.foot-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-full);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-spring);
}
.foot-social a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
}
.foot-social svg { width: 22px; height: 22px; flex-shrink: 0; }
.foot-note { margin-top: 0.7rem; font-size: 0.8rem; opacity: 0.6; }

@media (max-width: 420px) {
  .foot-social { flex-direction: column; align-items: stretch; }
  .foot-social a { justify-content: center; }
}
@media (hover: none) {
  .foot-social a:hover { transform: none; }
}

/* ---------- 19m. Decorative blobs on phones ---------- */
/* The hero blobs are clipped by their overflow:hidden container, so they
   never widen the page — but a 520px blurred circle is expensive to
   composite on a small screen. Scale them to the viewport instead. */
@media (max-width: 640px) {
  .hero-blob { filter: blur(60px); }
  .hero-blob-1 { width: min(340px, 90vw); height: min(340px, 90vw); top: -110px; right: -80px; }
  .hero-blob-2 { width: min(300px, 85vw); height: min(300px, 85vw); bottom: -120px; left: -90px; }
  .hero-blob-3 { display: none; }
}

/* Devices that ask for reduced motion get static blobs */
@media (prefers-reduced-motion: reduce) {
  .hero-blob, .hero-img-wrap, .stat-card, .about-tag,
  .suggest-accent, .calc-banner-emoji { animation: none !important; }
}