@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

/* Natural Green theme: every colour on the site comes from these tokens. */
:root {
    --tb-primary: #2E7D32;
    --tb-secondary: #4CAF50;
    --tb-light: #E8F5E9;
    --tb-bg: #F9FBF7;
    --tb-dark: #1B5E20;
    --tb-white: #FFFFFF;
    --tb-text: #263238;
    --tb-text-muted: #68756B;
    --tb-border: #E2EAE2;
    /* Hover for primary actions: a touch deeper, never a new hue. */
    --tb-primary-hover: color-mix(in srgb, var(--tb-primary) 82%, var(--tb-dark));
    /* Soft green outline for selected cards and dashed boxes. */
    --tb-border-strong: color-mix(in srgb, var(--tb-secondary) 40%, var(--tb-white));
    --tb-shadow: 27, 94, 32;

    /* Older names used across the stylesheets, mapped onto the palette. */
    --green-950: var(--tb-dark);
    --green-900: var(--tb-dark);
    --green-800: var(--tb-primary);
    --green-700: var(--tb-primary-hover);
    --green-600: var(--tb-secondary);
    --green-500: var(--tb-secondary);
    --green-300: var(--tb-border-strong);
    --green-200: color-mix(in srgb, var(--tb-secondary) 22%, var(--tb-white));
    --green-100: var(--tb-light);
    --green-50: var(--tb-bg);
    --cream: var(--tb-bg);
    --ink: var(--tb-text);
    --muted: var(--tb-text-muted);
    --line: var(--tb-border);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--tb-bg);
    font-family: 'Vazirmatn', Tahoma, sans-serif;
}
a { color: inherit; text-decoration: none; }
/* The width/height attributes on <img> only reserve space; CSS width wins and the height follows the picture. */
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
h1:focus { outline: none; }

.home-page { overflow: hidden; background: var(--tb-bg); }
.site-header {
    width: min(1200px, calc(100% - 56px));
    height: 88px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 1px solid rgba(var(--tb-shadow), .08);
}
.brand { display: inline-flex; align-items: center; gap: 10px; direction: ltr; flex-shrink: 0; }
.brand-mark {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px 14px 14px 5px;
    color: var(--tb-white); background: var(--green-800); font-weight: 900; font-size: 23px;
    box-shadow: 0 7px 18px rgba(var(--tb-shadow), .18);
}
.brand-name { color: var(--green-950); font-family: 'Vazirmatn', sans-serif; font-size: 23px; font-weight: 900; letter-spacing: -1.2px; }
.brand-name span { color: var(--green-600); }
.main-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.nav-link { color: var(--tb-text-muted); font-size: 13px; font-weight: 600; white-space: nowrap; transition: color .2s ease; }
.nav-link:hover, .nav-link.active { color: var(--green-800); }
.header-cta { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 12px 20px; border-radius: 12px; color: white; background: var(--green-800); font-size: 13px; font-weight: 700; transition: transform .2s, background .2s; }
.header-cta:hover, .button-primary:hover { background: var(--green-950); transform: translateY(-2px); }

.hero-section {
    position: relative; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: center; gap: 44px;
    width: min(1200px, calc(100% - 56px)); min-height: 510px; margin: 0 auto; padding: 52px 0 64px;
}
.hero-copy { position: relative; z-index: 1; padding: 8px 0 8px 16px; }
.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--green-700); font-size: 12px; font-weight: 800; letter-spacing: -.1px; }
.eyebrow { padding: 9px 13px; border: 1px solid var(--tb-light); border-radius: 999px; background: var(--green-50); }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 4px var(--tb-light); }
.hero-copy h1 { margin: 22px 0 16px; color: var(--green-950); font-size: clamp(43px, 5.1vw, 66px); font-weight: 900; line-height: 1.28; letter-spacing: -2.4px; }
.hero-copy h1 span { color: var(--green-600); }
.hero-description { max-width: 490px; margin: 0; color: var(--tb-text-muted); font-size: 15px; line-height: 2.25; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 28px; flex-wrap: wrap; }
.button-primary { display: inline-flex; align-items: center; gap: 14px; padding: 15px 22px; border-radius: 13px; color: var(--tb-white); background: var(--green-800); box-shadow: 0 10px 24px rgba(var(--tb-shadow), .17); font-size: 13px; font-weight: 800; transition: transform .2s, background .2s; }
.button-recommend { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 22px; border: 1px solid var(--green-700); border-radius: 13px; color: var(--green-800); background: var(--tb-white); box-shadow: 0 8px 20px rgba(var(--tb-shadow), .08); font-size: 13px; font-weight: 800; transition: transform .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease; }
.button-recommend:hover { color: var(--tb-white); background: var(--green-800); box-shadow: 0 10px 24px rgba(var(--tb-shadow), .17); transform: translateY(-2px); }
.button-recommend:focus-visible { outline: 3px solid var(--green-300); outline-offset: 3px; }
.hero-notes { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 28px; color: var(--tb-text-muted); font-size: 11px; font-weight: 600; }
.hero-notes > span { display: inline-flex; align-items: center; gap: 7px; }
.check-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--green-700); background: var(--green-100); font-size: 11px; font-weight: 900; }

.hero-art { position: relative; display: grid; place-items: center; min-height: 390px; isolation: isolate; }
.hero-art::before { position: absolute; z-index: -2; content: ''; width: 100%; height: 420px; border-radius: 50%; background: radial-gradient(ellipse, var(--tb-light) 0%, var(--tb-light) 58%, rgba(249, 251, 247,0) 72%); }
.hero-orbit { position: absolute; z-index: -1; border: 1px solid rgba(var(--tb-shadow), .18); border-radius: 50%; }
.orbit-one { width: 96%; height: 360px; transform: rotate(-8deg) scaleY(.8); }
.orbit-two { width: 84%; height: 320px; transform: rotate(10deg) scaleY(.8); }
.hero-food-card { width: min(740px, 100%); overflow: hidden; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; background: rgba(255,255,255,.83); box-shadow: 0 25px 65px rgba(var(--tb-shadow), .13); transform: rotate(-1deg); }
.food-illustration { position: relative; aspect-ratio: 740 / 300; background: var(--tb-light); }

/* Hero cooking scene (CookingScene.razor), animated with CSS only. */
.cook-scene { display: block; width: 100%; height: 100%; direction: ltr; }
.cook-scene * { transform-box: fill-box; }
.cook-body { fill: var(--tb-white); stroke: var(--tb-border); stroke-width: 2; }
.cook-apron { fill: var(--tb-secondary); }
.cook-arm-idle, .cook-sleeve { fill: none; stroke: var(--tb-white); stroke-width: 13; stroke-linecap: round; }
.cook-face, .cook-hand { fill: #f2c9a5; }
.cook-hat circle, .cook-hat rect { fill: var(--tb-white); stroke: var(--tb-border); stroke-width: 2; }
.cook-eye, .cook-lash { fill: none; stroke: #3d2c22; stroke-width: 2.6; stroke-linecap: round; }
.cook-lash { stroke-width: 1.8; }
.cook-cheek { fill: #ee9f87; opacity: .55; }
.cook-mouth { fill: #a24b3b; transform-origin: center; animation: cook-sing 1.1s ease-in-out infinite; }
.cook-head { transform-box: view-box; transform-origin: 450px 156px; animation: cook-bob 2.2s ease-in-out infinite; }
.cook-arm { transform-box: view-box; transform-origin: 416px 172px; animation: cook-stir 1.6s ease-in-out infinite; }
.cook-spoon { stroke: #a8794f; stroke-width: 5; stroke-linecap: round; }
.pot-front { fill: url(#cs-pot); }
.curtain { transform-origin: 50% 0; animation: curtain-sway 5s ease-in-out infinite; }
.soup-bubble { fill: #f8cd8c; transform-origin: center; animation: soup-bubble 1.8s ease-in-out infinite; }
.bubble-two { animation-delay: .6s; }.bubble-three { animation-delay: 1.2s; }
.steam { fill: none; stroke: var(--tb-border); stroke-width: 4; stroke-linecap: round; opacity: 0; animation: steam-rise 3s ease-out infinite; }
.steam-two { animation-delay: 1s; }.steam-three { animation-delay: 2s; }
.ingredient { animation: ingredient-x 5s linear infinite; animation-delay: var(--delay); }
.ingredient-fall { opacity: 0; transform-origin: center; animation: ingredient-toss 5s infinite; animation-delay: var(--delay); }
.music-note { fill: var(--green-600); font-size: 24px; font-weight: 700; opacity: 0; animation: note-float 3.3s ease-out infinite; }
.note-two { fill: #d9634f; font-size: 20px; animation-delay: 1.1s; }.note-three { fill: #ec9a3c; animation-delay: 2.2s; }

/* Family visit: one 16s loop. Walk in 10–28%, stay until 64%, walk out 64–82%. */
.family { animation: family-walk 16s linear infinite; }
.walk-bob { animation: family-bob 16s linear infinite; }
.leg { transform-origin: 50% 0; }
.leg-a { animation: leg-a 16s linear infinite; }.leg-b { animation: leg-b 16s linear infinite; }
.dad-arm { transform-origin: 15% 4%; animation: dad-wave 16s ease-in-out infinite; }
.dad-bubble { opacity: 0; transform-origin: 90% 100%; animation: dad-bubble 16s ease-out infinite; }
.bubble-heart { fill: #e2645a; transform-origin: center; animation: heart-beat .8s ease-in-out infinite; }
.kid-jump { animation: kid-jump 16s ease-in-out infinite; }
.kid-heart { fill: #e2645a; opacity: 0; transform-origin: center; animation: kid-heart 16s ease-out infinite; }

@keyframes cook-bob { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes cook-sing { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1.15); } }
@keyframes cook-stir { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(7deg); } }
@keyframes curtain-sway { 0%, 100% { transform: skewX(0); } 50% { transform: skewX(-4deg); } }
@keyframes soup-bubble { 0%, 100% { transform: scale(.2); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }
@keyframes steam-rise { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: .85; } 100% { opacity: 0; transform: translateY(-28px); } }
@keyframes ingredient-x { 0% { transform: translateX(var(--fx)); } 50%, 100% { transform: translateX(0); } }
/* Tossed from the tray: rises to --peak, then falls into the pot. */
@keyframes ingredient-toss {
    0% { opacity: 0; transform: translateY(var(--fy)) rotate(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
    4% { opacity: 1; }
    24% { transform: translateY(var(--peak)) rotate(160deg); animation-timing-function: cubic-bezier(.6, 0, .8, .3); }
    50% { opacity: 1; transform: translateY(0) rotate(340deg) scale(1); }
    60% { opacity: 0; transform: translateY(14px) rotate(360deg) scale(.4); }
    100% { opacity: 0; transform: translateY(14px) scale(.4); }
}
@keyframes note-float {
    0% { opacity: 0; transform: translate(0, 0) rotate(0); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(-30px, -44px) rotate(-18deg); }
}
@keyframes family-walk { 0%, 10% { transform: translateX(230px); } 28%, 64% { transform: translateX(0); } 82%, 100% { transform: translateX(240px); } }
@keyframes family-bob {
    0%, 10%, 14.5%, 19%, 23.5%, 28%, 64%, 68.5%, 73%, 77.5%, 82%, 100% { transform: translateY(0); }
    12.25%, 16.75%, 21.25%, 25.75%, 66.25%, 70.75%, 75.25%, 79.75% { transform: translateY(-5px); }
}
@keyframes leg-a {
    0%, 10%, 14.5%, 19%, 23.5%, 28%, 64%, 68.5%, 73%, 77.5%, 82%, 100% { transform: rotate(0); }
    12.25%, 21.25%, 66.25%, 75.25% { transform: rotate(14deg); }
    16.75%, 25.75%, 70.75%, 79.75% { transform: rotate(-14deg); }
}
@keyframes leg-b {
    0%, 10%, 14.5%, 19%, 23.5%, 28%, 64%, 68.5%, 73%, 77.5%, 82%, 100% { transform: rotate(0); }
    12.25%, 21.25%, 66.25%, 75.25% { transform: rotate(-14deg); }
    16.75%, 25.75%, 70.75%, 79.75% { transform: rotate(14deg); }
}
@keyframes dad-wave {
    0%, 30%, 56%, 100% { transform: rotate(0); }
    34%, 42%, 50% { transform: rotate(-130deg); }
    38%, 46% { transform: rotate(-105deg); }
}
@keyframes dad-bubble {
    0%, 30% { opacity: 0; transform: scale(.6); }
    34%, 56% { opacity: 1; transform: scale(1); }
    60%, 100% { opacity: 0; transform: scale(.9); }
}
@keyframes heart-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes kid-jump {
    0%, 33%, 39%, 45%, 51%, 100% { transform: translateY(0); }
    36%, 42%, 48% { transform: translateY(-16px); }
}
@keyframes kid-heart {
    0%, 34% { opacity: 0; transform: translateY(0) scale(.5); }
    38% { opacity: 1; transform: translateY(-6px) scale(1); }
    58% { opacity: 0; transform: translateY(-40px) scale(1.1); }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cook-scene *, .cook-scene .ingredient { animation: none !important; }
    .ingredient-fall { opacity: 0; }
    .music-note, .dad-bubble { opacity: 1; }
}
.food-card-caption { display: flex; align-items: center; gap: 12px; padding: 18px 20px 21px; }
.caption-icon { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 14px; color: var(--green-700); background: var(--green-100); font-size: 24px; }
.food-card-caption strong, .food-card-caption small { display: block; }
.food-card-caption strong { color: var(--green-950); font-size: 12px; }.food-card-caption small { margin-top: 5px; color: var(--tb-text-muted); font-size: 10px; }
.floating-tag { position: absolute; display: flex; align-items: center; gap: 8px; padding: 11px 15px; border: 1px solid rgba(226, 234, 226, .9); border-radius: 13px; color: var(--green-800); background: rgba(255,255,255,.94); box-shadow: 0 10px 25px rgba(var(--tb-shadow), .09); font-size: 11px; font-weight: 800; }
.tag-top { top: 14px; left: 4px; transform: rotate(-4deg); }
/* Below the picture on the left, so it never covers the cooking scene. */
.tag-bottom { bottom: -16px; left: 40px; transform: rotate(3deg); }

/* ---------- Green band behind the home hero ---------- */
.hero-band { position: relative; overflow: hidden; isolation: isolate; border-radius: 0 0 48px 48px; background: var(--tb-primary); }
.hero-band::before, .hero-band::after { position: absolute; z-index: -1; content: ''; border-radius: 50%; pointer-events: none; }
.hero-band::before { top: -220px; right: -160px; width: 560px; height: 560px; background: rgba(255, 255, 255, .06); }
.hero-band::after { bottom: -260px; left: -180px; width: 620px; height: 620px; background: rgba(var(--tb-shadow), .35); }
.hero-band .hero-section { padding-bottom: 76px; }
.hero-band .eyebrow { border-color: rgba(255, 255, 255, .22); color: var(--tb-white); background: rgba(255, 255, 255, .12); }
.hero-band .eyebrow-dot { background: #a5d6a7; box-shadow: 0 0 0 4px rgba(255, 255, 255, .14); }
.hero-band .hero-copy h1 { color: var(--tb-white); }
.hero-band .hero-copy h1 span { color: #c8e6c9; }
.hero-band .hero-description { color: rgba(255, 255, 255, .86); }
.hero-band .button-primary { color: var(--tb-primary); background: var(--tb-white); box-shadow: 0 12px 26px rgba(var(--tb-shadow), .35); }
.hero-band .button-primary:hover { color: var(--tb-dark); background: var(--tb-light); }
.hero-band .button-recommend { border-color: rgba(255, 255, 255, .6); color: var(--tb-white); background: transparent; box-shadow: none; }
.hero-band .button-recommend:hover { border-color: var(--tb-white); color: var(--tb-primary); background: var(--tb-white); }
.hero-band .button-recommend:focus-visible { outline-color: rgba(255, 255, 255, .7); }
.hero-band .hero-notes { color: rgba(255, 255, 255, .85); }
.hero-band .check-icon { color: var(--tb-white); background: rgba(255, 255, 255, .16); }
.hero-band .hero-art::before { background: radial-gradient(ellipse, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .08) 58%, rgba(255, 255, 255, 0) 72%); }
.hero-band .hero-orbit { border-color: rgba(255, 255, 255, .22); }
.hero-band .hero-food-card { border-color: rgba(255, 255, 255, .5); box-shadow: 0 28px 60px rgba(var(--tb-shadow), .35); }
@media (max-width: 650px) {
    .hero-band { border-radius: 0 0 32px 32px; }
    .hero-band .hero-section { padding-bottom: 46px; }
}

.packages-section { padding: 78px max(28px, calc((100% - 1200px) / 2)) 76px; background: var(--green-50); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.section-heading h2, .how-heading h2 { margin: 10px 0 8px; color: var(--green-950); font-size: clamp(25px, 3vw, 35px); font-weight: 900; letter-spacing: -.8px; }
.section-heading p { margin: 0; color: var(--tb-text-muted); font-size: 13px; line-height: 2; }
.heading-decoration { color: var(--tb-border-strong); font-size: 56px; line-height: 1; }
.package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.package-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 27px 25px 23px; border: 1px solid var(--tb-border); border-radius: 22px; background: var(--tb-white); box-shadow: 0 8px 26px rgba(var(--tb-shadow), .035); transition: transform .22s, box-shadow .22s, border-color .22s; }
.package-card:hover { transform: translateY(-5px); border-color: var(--tb-border-strong); box-shadow: 0 18px 38px rgba(var(--tb-shadow), .09); }
.package-icon { display: grid; place-items: center; width: 51px; height: 51px; margin-bottom: 19px; border-radius: 17px; font-size: 27px; }
.icon-sage { color: var(--tb-primary); background: var(--tb-light); }.icon-green { color: var(--tb-white); background: var(--green-700); }.icon-peach { color: #b87856; background: #fbefe4; }
.package-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.package-title-row h3 { margin: 0; color: var(--green-950); font-size: 18px; font-weight: 900; }
.package-meal-count { padding: 5px 9px; border-radius: 8px; color: var(--green-700); background: var(--green-100); white-space: nowrap; font-size: 10px; font-weight: 800; }
.package-description { min-height: 58px; margin: 12px 0 19px; color: var(--tb-text-muted); font-size: 12px; line-height: 2; }
.package-features { display: grid; gap: 12px; margin: 0; padding: 18px 0 21px; border-top: 1px solid var(--tb-border); list-style: none; }
.package-features li { display: flex; align-items: flex-start; gap: 9px; color: var(--tb-text-muted); font-size: 11px; line-height: 1.8; }
.package-features li span { display: inline-grid; place-items: center; width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; color: var(--green-700); background: var(--green-100); font-size: 10px; font-weight: 900; }
.package-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 19px; border-top: 1px solid var(--tb-border); }
.package-price { display: flex; flex-direction: column; gap: 2px; }.package-price strong { color: var(--green-950); font-size: 20px; font-weight: 900; letter-spacing: -.4px; }.package-price span { color: var(--tb-text-muted); font-size: 10px; }
.package-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--tb-border); border-radius: 11px; color: var(--green-800); background: var(--tb-bg); white-space: nowrap; font-size: 11px; font-weight: 800; transition: color .2s, background .2s; }
.package-button:hover { color: var(--tb-white); background: var(--green-800); }
.package-note { margin: 22px 0 0; color: var(--tb-text-muted); text-align: center; font-size: 10px; line-height: 2; }
.packages-message { padding: 35px; border: 1px dashed var(--tb-border-strong); border-radius: 18px; color: var(--tb-text-muted); background: white; text-align: center; font-size: 13px; }

.how-section { width: min(1200px, calc(100% - 56px)); margin: 0 auto; padding: 76px 0 82px; }
.how-heading { text-align: center; }.how-heading h2 { margin-bottom: 35px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; }
.step-item { display: flex; align-items: flex-start; gap: 15px; padding: 24px 21px; border: 1px solid var(--tb-border); border-radius: 18px; background: var(--tb-white); }
.step-number { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 14px; color: var(--green-800); background: var(--green-100); font-size: 18px; font-weight: 900; }
.step-item h3 { margin: 2px 0 7px; color: var(--green-950); font-size: 14px; font-weight: 900; }.step-item p { margin: 0; color: var(--tb-text-muted); font-size: 11px; line-height: 2; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px max(28px, calc((100% - 1200px) / 2)); border-top: 1px solid var(--tb-border); background: var(--tb-bg); }
.footer-brand .brand-mark { width: 34px; height: 34px; border-radius: 11px 11px 11px 4px; font-size: 19px; }.footer-brand .brand-name { font-size: 19px; }
.site-footer p { margin: 0; color: var(--tb-text-muted); font-size: 11px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: var(--tb-primary); font-size: 12px; font-weight: 800; }
.footer-links a:hover { color: var(--tb-dark); }.site-footer > a:last-child { color: var(--green-800); font-size: 11px; font-weight: 800; }

/* Meal-preference popup: dims and blurs the page behind it. */
.wizard-overlay { position: fixed; inset: 0; z-index: 900; display: flex; padding: 32px 16px; overflow-y: auto; overscroll-behavior: contain; animation: overlay-fade .28s ease both; }
.wizard-backdrop { position: fixed; inset: 0; background: rgba(var(--tb-shadow), .42); backdrop-filter: blur(7px) saturate(.85); -webkit-backdrop-filter: blur(7px) saturate(.85); }
.wizard-dialog { position: relative; width: min(820px, 100%); margin: auto; outline: none; animation: dialog-rise .34s cubic-bezier(.2, .8, .2, 1) both; }
body:has(.wizard-overlay) { overflow: hidden; }
@keyframes overlay-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-rise { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .wizard-overlay, .wizard-dialog { animation: none; }
}
@media (max-width: 650px) {
    .wizard-overlay { padding: 14px 10px; }
}

/* Register / login pages (static Identity pages share these styles). */
.auth-page { display: flex; flex-direction: column; align-items: center; gap: 24px; min-height: 100vh; padding: 40px 16px 56px; background: var(--tb-bg); }
.auth-card { width: min(440px, 100%); padding: clamp(22px, 5vw, 36px); border: 1px solid var(--tb-border); border-radius: 24px; background: var(--tb-white); box-shadow: 0 18px 50px rgba(var(--tb-shadow), .08); }
.auth-card h1 { margin: 0 0 6px; color: var(--green-950); font-size: 24px; font-weight: 900; }
.auth-lead { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 2; }
.auth-field { display: grid; gap: 7px; margin-bottom: 16px; }
.auth-field label { color: var(--tb-text); font-size: 13px; font-weight: 800; }
.auth-field input { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid var(--tb-border); border-radius: 11px; outline: none; color: var(--ink); background: var(--tb-white); text-align: left; }
.auth-field input:focus { border-color: var(--tb-secondary); box-shadow: 0 0 0 3px var(--tb-light); }
.auth-field small { color: var(--muted); font-size: 12px; line-height: 1.8; }
.auth-field-error { color: #b42318; font-size: 12px; font-weight: 700; }
.auth-check { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--tb-text); font-size: 13px; }
.auth-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; border: 0; border-radius: 14px; color: var(--tb-white); background: var(--green-800); font-size: 15px; font-weight: 800; cursor: pointer; transition: background .18s ease; }
.auth-submit:hover { background: var(--green-950); }
.auth-error { margin-bottom: 18px; padding: 12px 14px; border-radius: 11px; color: #8a1c13; background: #fdecea; font-size: 13px; line-height: 1.9; }
.auth-switch { margin: 16px 0 0; color: var(--muted); text-align: center; font-size: 13px; }
.auth-switch a { color: var(--green-800); font-weight: 800; }
.auth-submit:focus-visible, .auth-switch a:focus-visible, .auth-brand:focus-visible { outline: 3px solid var(--green-300); outline-offset: 3px; }

/* Phone menu (MobileMenu.razor): hidden on wider screens, replaces the header links at 650px and below. */
.mobile-menu { display: none; }
.mobile-menu-button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--tb-border); border-radius: 12px; background: var(--tb-white); list-style: none; cursor: pointer; }
.mobile-menu-button::-webkit-details-marker { display: none; }
.mobile-menu-button:focus-visible { outline: 3px solid var(--green-300); outline-offset: 2px; }
.mobile-menu-icon, .mobile-menu-icon span, .mobile-menu-icon::before, .mobile-menu-icon::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--green-950); transition: transform .2s ease, opacity .2s ease; }
.mobile-menu-icon { position: relative; background: none; }
.mobile-menu-icon::before, .mobile-menu-icon::after { position: absolute; left: 0; content: ''; }
.mobile-menu-icon::before { top: -6px; }
.mobile-menu-icon::after { top: 6px; }
.mobile-menu[open] .mobile-menu-icon span { opacity: 0; }
.mobile-menu[open] .mobile-menu-icon::before { transform: translateY(6px) rotate(45deg); }
.mobile-menu[open] .mobile-menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu-panel { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; left: 0; display: grid; gap: 2px; padding: 10px; border: 1px solid var(--tb-border); border-radius: 18px; background: var(--tb-white); box-shadow: 0 20px 44px rgba(var(--tb-shadow), .16); }
.mobile-menu-link { padding: 12px 14px; border-radius: 11px; color: var(--tb-text); font-size: 15px; font-weight: 700; }
.mobile-menu-link:hover, .mobile-menu-link.active { color: var(--green-800); background: var(--green-100); }
.mobile-menu-account { margin-top: 6px; padding: 10px 4px 4px; border-top: 1px solid var(--tb-border); }
.mobile-menu-account .account-menu { display: flex; justify-content: space-between; }
.mobile-menu-account .account-email { max-width: none; font-size: 14px; }
.mobile-menu-cta { display: flex; justify-content: center; gap: 10px; margin-top: 8px; padding: 13px; border-radius: 12px; color: var(--tb-white); background: var(--green-800); font-size: 14px; font-weight: 800; }

/* Blazor marks form inputs that failed validation with .invalid. */
.auth-field input.invalid { border-color: #d0574b; }

@media (max-width: 900px) {
    .site-header { width: min(100% - 36px, 760px); height: 76px; }
    .main-nav { gap: 17px; }.nav-link { font-size: 12px; }
    .hero-section { width: min(100% - 36px, 760px); grid-template-columns: 1fr; gap: 28px; padding: 42px 0 54px; }
    .hero-copy h1 { font-size: 48px; }.hero-description { font-size: 13px; }
    .hero-art { min-height: 0; }.hero-art::before { height: 340px; }
    .floating-tag { font-size: 10px; padding: 9px 11px; }
    .packages-section { padding: 62px 24px; }.package-grid { gap: 13px; }.package-card { padding: 23px 17px 18px; }.package-title-row h3 { font-size: 15px; }.package-meal-count { font-size: 9px; }.package-price strong { font-size: 17px; }.package-button { padding: 10px; font-size: 10px; }
    .how-section { width: calc(100% - 36px); padding: 60px 0; }.steps-grid { gap: 13px; }.step-item { padding: 19px 14px; gap: 10px; }
    .site-footer { padding: 24px; }
}
@media (max-width: 650px) {
    .site-header { width: calc(100% - 32px); height: 70px; gap: 10px; }.brand-mark { width: 35px; height: 35px; font-size: 20px; }.brand-name { font-size: 20px; }
    .main-nav { display: none; }.header-cta { padding: 10px 12px; font-size: 11px; }
    .site-header { position: relative; }
    .site-header .header-actions > .account-menu { display: none; }
    .mobile-menu { display: block; }
    .hero-section { display: flex; flex-direction: column; align-items: stretch; width: calc(100% - 36px); gap: 18px; padding: 42px 0 50px; }
    .hero-copy { padding: 0; }.hero-copy h1 { margin-top: 19px; font-size: clamp(45px, 13vw, 60px); }.hero-description { font-size: 13px; }
    .hero-actions { gap: 16px; margin-top: 23px; }.hero-notes { gap: 13px; margin-top: 22px; font-size: 10px; }
    .hero-art { margin-top: 5px; }.hero-art::before { height: 240px; }.orbit-one, .orbit-two { display: none; }.hero-food-card { transform: none; border-radius: 22px; }
    .floating-tag { display: none; }
    .packages-section { padding: 50px 18px; }.section-heading { align-items: flex-start; margin-bottom: 25px; }.section-heading h2, .how-heading h2 { font-size: 25px; }.section-heading p { font-size: 11px; }.heading-decoration { font-size: 38px; }
    .package-grid { grid-template-columns: 1fr; gap: 15px; }.package-card { padding: 24px 22px 20px; }.package-description { min-height: 0; }.package-title-row h3 { font-size: 17px; }.package-price strong { font-size: 20px; }.package-button { padding: 11px 15px; font-size: 11px; }
    .how-section { width: calc(100% - 36px); padding: 52px 0; }.steps-grid { grid-template-columns: 1fr; gap: 12px; }.step-item { padding: 20px; }
    .site-footer { flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 23px 18px; }.site-footer p { order: 3; width: 100%; }
}