/* --- CSS VARIABLES --- */
:root { --rose: #B7104C; --rose-mid: #FF8FA3; --rose-soft: #FFCDD7; --rose-bg: #FFF5F7; --rose-1: #FFF0F3; --rose-2: #FDDDE4; --rose-5: #FF6B8A; --sky: #5BA4CF; --sky-soft: #C9E3F5; --sky-bg: #F0F7FC; --blue: #005895; --blue-1: #EEF6FC; --blue-2: #D4EAFA; --blue-5: #3A8CC4; --mint: #3CC9A4; --mint-soft: #C0F0E4; --mint-bg: #F0FAF7; --mint-dark: #1F7F6A; --green: #0A6D2A; --peach-bg: #FFF3ED; --warm: #F4EFE8; --dark: #1A2535; --mid: #3D4F66; --muted: #7A8EA8; --light: #F4F7FA; --white: #FFFFFF; --border: rgba(26,37,53,.08); --sh-sm: 0 2px 8px rgba(26,37,53,.06); --sh-md: 0 8px 28px rgba(26,37,53,.09); --sh-lg: 0 20px 60px rgba(26,37,53,.12); --r-sm: 14px; --r-md: 20px; --r-lg: 28px; --r-xl: 36px; --ff-head: 'Lora', Georgia, serif; --ff-body: 'Plus Jakarta Sans', system-ui, sans-serif; --header-h: 68px; --content-w: 1280px; --mg-c1: #0F6E56; --mg-c1-bg: #D8F4DF; --mg-c2: #B55A10; --mg-c2-bg: #FFE8D4; --mg-c3: #9A6210; --mg-c3-bg: #FFF0BC; --mg-c4: #A01848; --mg-c4-bg: #F8D0DF; --mg-c5: #4A5568; --mg-c5-bg: #EAECF0; --mg-c6: #0E6EA8; --mg-c6-bg: #D0EEFF; --mg-c7: #7A4F10; --mg-c7-bg: #F2E4CC; --mg-c8: #6030A8; --mg-c8-bg: #EAE0FF; --mg-c9: #1A6A40; --mg-c9-bg: #CCF0E0; --mg-c10: #5820A0; --mg-c10-bg: #E8D8F8; --mg-c11: #1A5070; --mg-c11-bg: #D8EAF4; }

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--ff-body); color: var(--dark); line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }

/* --- LAYOUT --- */
.site-wrapper { min-height: 100vh; display: flex; flex-direction: column; }
.main-content { flex: 1; }
.page { max-width: var(--content-w); margin: 0 auto; padding: 0 0 20px; }
.section { margin: 50px 0; }
.section-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #495d76; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 12px; }
.section-label::before { content: ''; width: 20px; height: 2px; background: linear-gradient(90deg, var(--rose), var(--sky)); border-radius: 2px; }

/* --- HEADER --- */
.site-header { position: sticky; top: 0; z-index: 1000; height: var(--header-h); background: var(--white); border-bottom: 1px solid var(--border); box-shadow: 0 2px 12px rgba(26,37,53,.06); }
.header-inner { max-width: var(--content-w); margin: 0 auto; padding: 0 20px; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { flex: 0 0 auto; }
.logo a { display: flex; align-items: center; text-decoration: none; }
.logo img { height: 50px; width: auto; display: block; }
.header-right { display: flex; align-items: center; gap: 10px; }
.login-link { display: inline-flex; align-items: center; flex-direction: column; gap: 2px; padding: 6px 7px; border-radius: 12px; background: transparent; border: 1.5px solid transparent; text-decoration: none; font-family: var(--ff-body); font-size: 12px; font-weight: 700; color: var(--blue); transition: all .2s; white-space: nowrap; line-height: 1; }
.login-link:hover { background: var(--sky); border-color: var(--sky); color: #fff; }
.login-icon { width: 22px; height: 22px; flex-shrink: 0; display: block; }
.login-text { line-height: 1; }
.burger-wrapper { display: flex; align-items: center; }
.burger-btn { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: var(--rose-5); border: 1.5px solid var(--rose-5); cursor: pointer; transition: all .2s; padding: 0; flex-shrink: 0; }
.burger-btn:hover { background: transparent; border-color: var(--rose); }
.burger-lines { display: flex; flex-direction: column; align-items: center; gap: 4.5px; flex-shrink: 0; }
.burger-lines span { display: block; border-radius: 2px; transition: background .2s; }
.burger-lines span:nth-child(1), .burger-lines span:nth-child(3) { width: 18px; height: 2px; }
.burger-lines span:nth-child(2) { width: 12px; height: 2px; }
.burger-btn .burger-lines span { background: var(--white); }
.burger-btn:hover .burger-lines span { background: var(--rose); }

/* --- MOBILE DRAWER & OVERLAY --- */
.mobile-menu { position: fixed; top: 0; right: 0; width: 300px; max-width: 85vw; height: 100%; background: var(--white); z-index: 500; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .32s cubic-bezier(.4,0,.2,1); box-shadow: -8px 0 40px rgba(26,37,53,.14); }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: var(--header-h); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.mobile-menu-logo img { height: 50px; width: auto; vertical-align: middle; }
.close-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--border); border-radius: 999px; background: var(--white); cursor: pointer; font-size: 18px; line-height: 1; color: var(--muted); font-family: var(--ff-body); transition: all .18s; padding: 0; }
.close-btn:hover { background: var(--rose-bg); border-color: var(--rose-soft); color: var(--rose); }
.mobile-nav { flex: 1; overflow-y: auto; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.mobile-nav a { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: var(--r-md); font-family: var(--ff-body); font-size: 14px; font-weight: 600; color: var(--mid); text-decoration: none; transition: background .18s, color .18s; }
.mobile-nav a:hover, .mobile-nav a.active { background: var(--rose-bg); color: var(--rose); }
.mobile-nav a.active { font-weight: 700; }
.mobile-nav a::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--rose-soft); flex-shrink: 0; transition: background .18s; }
.mobile-nav a:hover::before, .mobile-nav a.active::before { background: var(--rose); }
.mobile-nav-divider { height: 1px; background: var(--border); margin: 6px 4px; }
.mobile-auth { padding: 12px 12px 24px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); flex-shrink: 0; }
.mobile-auth-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: var(--r-md); font-family: var(--ff-body); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--white); transition: opacity .2s; border: none; }
.mobile-auth-btn:hover { opacity: .88; }
.mobile-auth-btn--rose { background: linear-gradient(135deg, var(--rose-5), var(--rose-mid)); }
.mobile-auth-btn--sky { background: linear-gradient(135deg, var(--sky), #7BBFDF); }
.mobile-auth-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.overlay { position: fixed; inset: 0; background: rgba(26,37,53,.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 400; display: none; }
#mm-overlay { display: none; position: fixed; inset: 0; background: rgba(10,15,25,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(4px); z-index: 1500; cursor: pointer; }
body.mm-dropdown-open #mm-overlay { display: block !important; }
body.mm-dropdown-open { overflow: hidden; }
body.mm-dropdown-open::before { display: none; }

/* --- BREADCRUMBS --- */
.breadcrumbs { padding: 14px 24px; font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; max-width: var(--content-w); margin: 0 auto; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li { display: flex; align-items: center; }
.breadcrumbs li::after { content: "/"; margin: 0 6px; opacity: .5; }
.breadcrumbs li:last-child::after { content: ""; margin: 0; }
.breadcrumbs a { color: var(--rose); text-decoration: none; font-weight: 600; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .active { color: var(--muted); }
@media (max-width: 600px) { .breadcrumbs { padding: 0 20px 20px; } }

/* --- BUTTONS & ICONS --- */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: var(--r-md); font-family: var(--ff-body); font-size: 14px; font-weight: 700; text-decoration: none; cursor: pointer; border: none; transition: all .22s ease; }
.btn::before { font-style: normal; flex-shrink: 0; }
.btn-primary { background: linear-gradient(135deg, var(--rose-5), var(--rose-mid)); color: var(--white); box-shadow: 0 8px 24px rgba(255,107,138,.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,107,138,.45); }
.btn-secondary { background: var(--white); color: var(--dark); border: 1.5px solid var(--border); box-shadow: var(--sh-sm); }
.btn-secondary:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--sky-soft); }
.btn-icon--menu::before { content: '📅'; }
.btn-icon--broccoli::before { content: '🥦'; }
.btn-icon--carrot::before { content: '🥕'; }
.btn-icon--plan::before { content: '📋'; }
.btn-icon--herb::before { content: '🌿'; }
.btn-icon--search::before { content: '🔍'; margin-right: 6px; }
.btn-icon--filter::before { content: '🗂️'; margin-right: 6px; }
.btn-icon--pdf::before { content: '📥'; margin-right: 6px; }

/* --- HERO & STATS --- */
.hero { position: relative; overflow: hidden; border-radius: var(--r-xl); background: linear-gradient(135deg, #FFF1F4 0%, #FFF8F0 40%, #F0F9FF 100%); border: 1px solid var(--border); margin-bottom: 28px; display: grid; grid-template-columns: 1fr 320px; min-height: 420px; }
.hero::before { content: ''; position: absolute; top: -80px; right: -60px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(255,107,138,.15) 0%, transparent 68%); pointer-events: none; z-index: 0; }
.hero::after { content: ''; position: absolute; bottom: -60px; left: 18%; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(91,164,207,.12) 0%, transparent 68%); pointer-events: none; z-index: 0; }
.hero-body { padding: 52px 44px 48px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; }
.hero-aside { position: relative; z-index: 1; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; flex-direction: column; padding: 32px 20px; gap: 10px; justify-content: center; }
.hero h1 { font-family: var(--ff-head); font-size: clamp(36px, 5vw, 54px); font-weight: 500; color: var(--dark); line-height: 1.1; margin-bottom: 18px; }
.hero h1 em { font-style: italic; color: var(--rose); }
.hero-lead { font-size: 15.5px; color: var(--mid); max-width: 520px; line-height: 1.78; margin-bottom: 30px; font-weight: 300; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-tagline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--mint-dark); background: var(--mint-bg); border: 1px solid var(--mint-soft); border-radius: var(--r-sm); padding: 10px 16px; margin-bottom: 28px; width: fit-content; }
.hero-tagline::before { content: '✅ '; font-style: normal; flex-shrink: 0; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--rose-soft); font-size: 11px; font-weight: 700; color: var(--rose); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 20px; box-shadow: var(--sh-sm); width: fit-content; }
.hero-eyebrow::before { content: '🗓'; font-style: normal; }
.hero-eyebrow--herb::before { content: '🍃'; font-style: normal; }
.hero-eyebrow--herb-base::before { content: '🌿'; font-style: normal; }
.hero-stat { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 13px 16px; display: flex; align-items: center; gap: 12px; box-shadow: var(--sh-sm); transition: transform .18s; }
.hero-stat:hover { transform: translateX(3px); }
.hero-stat-icon { width: 50px; height: 50px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.hero-stat-icon::before { font-style: normal; }
.hero-stat-icon--cal { background: var(--rose-bg); } .hero-stat-icon--cal::before { content: '🗓️'; }
.hero-stat-icon--sprout { background: var(--sky-bg); } .hero-stat-icon--sprout::before { content: '🌱'; }
.hero-stat-icon--balance { background: var(--mint-bg); } .hero-stat-icon--balance::before { content: '⚖️'; }
.hero-stat-icon--zen { background: var(--peach-bg); } .hero-stat-icon--zen::before { content: '🧘'; }
.hero-stat-icon--check { background: var(--mint-bg); } .hero-stat-icon--check::before { content: '✅'; }
.hero-stat-icon--feed { background: var(--rose-bg); } .hero-stat-icon--feed::before { content: '🤱'; }
.hero-stat-icon--bowl { background: var(--sky-bg); } .hero-stat-icon--bowl::before { content: '🥣'; }
.hero-stat-icon--drop { background: var(--mint-bg); } .hero-stat-icon--drop::before { content: '💧'; }
.hero-stat-icon--herb { background: var(--peach-bg); } .hero-stat-icon--herb::before { content: '🌿'; }
.hero-stat-icon--broccoli { background: var(--mint-bg); } .hero-stat-icon--broccoli::before { content: '🥦'; }
.hero-stat-icon--caution { background: var(--peach-bg); } .hero-stat-icon--caution::before { content: '⚠️'; }
.hero-stat-icon--forbid { background: var(--rose-bg); } .hero-stat-icon--forbid::before { content: '❌'; }
.hero-stat-label { font-size: 13px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.hero-stat-sub { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 1px; }

/* --- CARDS & PROSE --- */
.card { }
.card-title { font-family: var(--ff-head); font-size: clamp(24px, 3vw, 36px); font-weight: 500; color: var(--dark); margin-bottom: 50px; line-height: 1.25; }
.card-subtitle { font-size: 15px; color: var(--mid); margin-bottom: 24px; line-height: 1.82; font-weight: 300; }
.card-text { margin-top: 4px; }
.card-text p, .prose p { font-size: 15px; color: var(--mid); line-height: 1.82; font-weight: 300; margin-bottom: 12px; }
.card-text p:last-child, .prose p:last-child { margin-bottom: 0; }
.card-text ul { margin: 4px 0 14px 0; padding-left: 20px; }
.card-text ul li { font-size: 15px; color: var(--rose-5); line-height: 1.82; font-weight: 300; margin-bottom: 4px; font-style: italic; }

/* --- AUTHOR BLOCK --- */
.author { background: var(--white); border: 1px solid var(--rose-soft); border-radius: var(--r-xl); overflow: hidden; display: grid; grid-template-columns: 300px 1fr; }
.author-aside { background: linear-gradient(175deg, var(--rose-1) 0%, var(--blue-1) 100%); padding: 32px 28px; display: flex; flex-direction: column; align-items: center; gap: 16px; border-right: 1px solid var(--border); text-align: center; }
.author-img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 4px solid var(--white); box-shadow: 0 8px 32px rgba(183,16,76,.18), 0 2px 8px rgba(26,37,53,.10); flex-shrink: 0; filter: contrast(1.04) saturate(1.08); }
.author-info { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.author-name { font-family: var(--ff-head); font-size: 18px; font-weight: 600; color: var(--dark); line-height: 1.3; }
.author-role { font-size: 12.5px; color: var(--rose); font-weight: 600; line-height: 1.5; }
.author-meta { list-style: none; margin-top: 4px; width: 100%; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255,255,255,.65); border: 1px solid var(--border); }
.author-meta li { font-size: 12.5px; color: var(--mid); font-weight: 500; line-height: 1.4; display: flex; align-items: flex-start; gap: 8px; text-align: left; }
.author-meta li::before { content: '✦'; font-size: 7px; color: var(--rose-5); flex-shrink: 0; margin-top: 4px; font-style: normal; }
.author-link-wrap { width: 100%; display: flex; flex-direction: column; gap: 6px; align-items: center; margin-top: auto; }
.author-link-hint { font-size: 11px; color: var(--muted); font-weight: 400; line-height: 1.4; text-align: center; }
.author-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--rose-5), var(--rose-mid)); color: var(--white); text-decoration: none; font-size: 13px; font-weight: 700; transition: all .2s; width: 100%; box-shadow: 0 6px 18px rgba(255,107,138,.28); }
.author-link::after { content: '→'; }
.author-link:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,107,138,.42); }
.author-badge-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; margin-bottom: 20px; border-radius: 999px; background: var(--white); border: 1px solid var(--rose-soft); font-size: 11px; font-weight: 700; color: var(--rose); text-transform: uppercase; letter-spacing: .07em; box-shadow: var(--sh-sm); width: fit-content; }
.author-main { padding: 36px; display: flex; flex-direction: column; justify-content: space-between; }
.author-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.author-text p { font-size: 15px; color: var(--mid); line-height: 1.82; font-weight: 300; margin-bottom: 10px; }
.author-text p:last-child { margin-bottom: 0; }
.author-footer { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.author-source { font-size: 13.5px; color: var(--dark); line-height: 1.6; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.author-source::before { content: '📋'; font-size: 14px; flex-shrink: 0; font-style: normal; line-height: 1; }
.author-disclaimer { font-size: 11px; color: var(--muted); line-height: 1.65; font-weight: 300; display: flex; align-items: flex-start; gap: 7px; padding: 9px 13px; border-radius: var(--r-sm); background: rgba(244,247,250,.7); border: 1px solid rgba(26,37,53,.05); }
.author-disclaimer::before { content: 'ℹ'; font-size: 11px; flex-shrink: 0; margin-top: 2px; font-style: normal; line-height: 1; color: var(--muted); font-weight: 700; }

/* --- FAQ --- */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: box-shadow .2s, border-color .2s; }
.faq-item:hover { box-shadow: var(--sh-md); }
.faq-item.open { border-color: var(--rose-soft); }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--ff-body); font-size: 15px; font-weight: 700; color: var(--dark); gap: 16px; transition: background .15s; }
.faq-question:hover, .faq-item.open .faq-question { background: var(--rose-bg); }
.faq-question::before { content: '?'; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--rose-soft); color: var(--rose); font-size: 12px; font-weight: 800; font-family: var(--ff-body); flex-shrink: 0; line-height: 1; font-style: normal; transition: background .2s, color .2s; }
.faq-item.open .faq-question::before { background: var(--rose-5); color: var(--white); }
.faq-arrow { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--light); border: 1px solid var(--border); color: var(--muted); transition: transform .3s, background .2s, color .2s; padding: 0; }
.faq-item.open .faq-arrow { transform: rotate(45deg); background: var(--rose-soft); color: var(--rose); border-color: var(--rose-soft); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .38s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-answer { max-height: 800px; }
.faq-answer-inner { padding: 16px 22px 20px; border-top: 1px solid var(--border); font-size: 14.5px; color: var(--mid); line-height: 1.78; font-weight: 300; }
.faq-answer-inner p { margin-bottom: 8px; }
.faq-answer-inner p:last-child, .faq-answer-inner ul:last-child { margin-bottom: 0; }
.faq-answer-inner ul { padding-left: 20px; margin: 6px 0 10px; list-style: disc; }
.faq-answer-inner li { margin-bottom: 4px; }

/* --- STICKY NAV --- */
.sticky-nav { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 950; display: flex; gap: 8px; background: rgba(255,255,255,.9); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); padding: 8px; border-radius: 999px; border: 1px solid var(--border); box-shadow: var(--sh-lg); transition: opacity .25s ease, transform .25s ease; }
.sticky-nav a { display: flex; align-items: center; gap: 7px; padding: 10px 22px; border-radius: 999px; text-decoration: none; font-size: 13.5px; font-weight: 700; transition: all .2s; }
.sticky-nav a::before { font-style: normal; flex-shrink: 0; }
.sticky-nav__menu::before { content: '📅'; }
.sticky-nav__search::before { content: '🔍'; }
.sticky-nav__broccoli::before { content: '🥦'; }
.sticky-nav__carrot::before { content: '🥕'; }
.sticky-nav a:first-child { background: linear-gradient(135deg, var(--rose-5), var(--rose-mid)); color: var(--white); box-shadow: 0 6px 18px rgba(255,107,138,.38); }
.sticky-nav a:first-child:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255,107,138,.48); }
.sticky-nav a:last-child { background: var(--sky-bg); border: 1px solid var(--sky-soft); color: var(--blue); }
.sticky-nav a:last-child:hover { background: var(--sky); color: var(--white); border-color: transparent; }
.sticky-nav--hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(12px); }

/* ══════════════════════════════════════════════════════════════════
   БЛОК «ИЗУЧИТЕ СВЯЗАННЫЕ РАЗДЕЛЫ» — все стили сосредоточены здесь
══════════════════════════════════════════════════════════════════ */

/* Сетка */
.nav-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 50px;}

/* Базовая карточка */
.nav-card { display: flex; flex-direction: column; text-decoration: none; gap: 12px; padding: 22px; border-radius: var(--r-lg); border: 1px solid transparent; transition: transform .22s, box-shadow .22s; }
.nav-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }

/* Иконка — белый кружок с SVG через CSS-маску */
.nav-card-icon-wrap { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.nav-card-icon-img { display: block; width: 2rem; height: 2rem; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }

/* Текст карточки */
.nav-card-title { font-family: var(--ff-head); font-size: 18px; font-weight: 500; color: var(--dark); line-height: 1.3; }
.nav-card-cta { font-size: 12.5px; font-weight: 700; margin-top: auto; display: flex; align-items: center; gap: 4px; }
.nav-card-cta::after { content: '→'; }

/* --- Карточка 1: Основы питания --- */
.nav-card--osnovy { background: #FAF5FF; border-color: rgba(120, 11, 245, 0.06); }
.nav-card--osnovy .nav-card-icon-img { -webkit-mask-image: url('/icons/google_icons/book.svg'); mask-image: url('/icons/google_icons/book.svg'); background-color: #7C3AED; }
.nav-card--osnovy .nav-card-cta { color: #6d3fbb; }

/* --- Карточка 2: Готовое меню --- */
.nav-card--menu { background: #F9FAFB; border-color: rgba(0, 0, 0, 0.06); }
.nav-card--menu .nav-card-icon-img { -webkit-mask-image: url('/icons/google_icons/menu_book.svg'); mask-image: url('/icons/google_icons/menu_book.svg'); background-color: #4B5563; }
.nav-card--menu .nav-card-cta { color: #374151; }

/* --- Карточка 3: Каталог продуктов --- */
.nav-card--katalog { background: #f0fdf4; border-color: rgba(34, 197, 94, 0.1); }
.nav-card--katalog .nav-card-icon-img { -webkit-mask-image: url('/icons/google_icons/nutrition.svg'); mask-image: url('/icons/google_icons/nutrition.svg'); background-color: #16A34A; }
.nav-card--katalog .nav-card-cta { color: #15803D; }

/* --- Карточка 4: Ограничения в питании --- */
.nav-card--ogr { background: #fffae7; border-color: rgba(245, 158, 11, 0.15);}
.nav-card--ogr .nav-card-icon-img { -webkit-mask-image: url('/icons/google_icons/warning.svg'); mask-image: url('/icons/google_icons/warning.svg'); background-color: #d97706; }
.nav-card--ogr .nav-card-cta { color: #B45309; }

/* --- Карточка 5: Питание после родов --- */
.nav-card--posle { background: #FFF1F2; border-color: rgba(239, 68, 68, 0.1);  }
.nav-card--posle .nav-card-icon-img { -webkit-mask-image: url('/icons/google_icons/soup_kitchen.svg'); mask-image: url('/icons/google_icons/soup_kitchen.svg'); background-color: #fd489d; }
.nav-card--posle .nav-card-cta { color: #c7006c; }

/* --- Карточка 6: Питание в первый месяц --- */
.nav-card--pervyj { background: #F0F9FF; border-color: rgba(11, 161, 245, 0.1); }
.nav-card--pervyj .nav-card-icon-img { -webkit-mask-image: url('/icons/google_icons/skillet.svg'); mask-image: url('/icons/google_icons/skillet.svg'); background-color: #0284C7; }
.nav-card--pervyj .nav-card-cta { color: #0369A1; }

/* Адаптив */
@media (max-width: 900px) { .nav-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .nav-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════
   /БЛОК «ИЗУЧИТЕ СВЯЗАННЫЕ РАЗДЕЛЫ»
══════════════════════════════════════════════════════════════════ */
.lc-icon { position: relative; } .lc-icon::before { font-style: normal; }
.lc-icon--menu::before { content: '📅'; } .lc-icon--carrot::before { content: '🥕'; } .lc-icon--stop::before { content: '🚫'; } .lc-icon--broccoli::before { content: '🥦'; } .lc-icon--book::before { content: '📘'; }
.lc-cta::after { content: '→'; }
.links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lc { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background: var(--white); transition: transform .22s, box-shadow .22s; }
.lc:hover { transform: translateY(-5px); box-shadow: var(--sh-md); }
.lc-header { padding: 24px 22px 18px; }
.lc:nth-child(1) .lc-header { background: linear-gradient(135deg, var(--blue-1), var(--blue-2)); } .lc:nth-child(1) .lc-cta { color: var(--blue); background: var(--blue-1); }
.lc:nth-child(2) .lc-header { background: linear-gradient(135deg, var(--mint-bg), #E8F9F4); } .lc:nth-child(2) .lc-cta { color: var(--mint-dark); background: var(--mint-bg); }
.lc:nth-child(3) .lc-header { background: linear-gradient(135deg, var(--rose-1), var(--rose-2)); } .lc:nth-child(3) .lc-cta { color: var(--rose); background: var(--rose-1); }
.lc-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 24px; border: 1px solid rgba(26,37,53,.07); box-shadow: var(--sh-sm); margin-bottom: 14px; }
.lc-title { font-family: var(--ff-head); font-size: 18px; font-weight: 500; color: var(--dark); line-height: 1.2; }
.lc-body { padding: 16px 22px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.lc-text { font-size: 13px; color: var(--mid); line-height: 1.65; font-weight: 300; flex: 1; }
.lc-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 8px; width: fit-content; transition: letter-spacing .18s; }
.lc:hover .lc-cta { letter-spacing: .02em; }

/* --- CTA BANNER --- */
.cta-banner { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 52px 56px; background: linear-gradient(135deg, var(--rose-2) 0%, var(--blue-2) 100%); text-align: center; }
.cta-banner::before { content: ''; position: absolute; top: -60px; right: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.2); pointer-events: none; }
.cta-banner::after { content: ''; position: absolute; bottom: -50px; left: 30%; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.15); pointer-events: none; }
.cta-banner-inner { position: relative; z-index: 1; }
.cta-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 14px; border-radius: 999px; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); font-size: 10.5px; font-weight: 700; color: var(--rose-5); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 18px; }
.cta-tag::before { content: '🌿'; font-style: normal; }
.cta-banner h2 { font-family: var(--ff-head); font-size: clamp(24px, 3vw, 36px); font-weight: 500; color: var(--dark); margin-bottom: 14px; line-height: 1.2; }
.cta-banner h2 em { font-style: italic; color: var(--rose-5); }
.cta-banner p { font-size: 15px; color: var(--mid); line-height: 1.82; max-width: 560px; margin: 0 auto 28px; font-weight: 300; }
.cta-banner-sub { font-size: 13.5px !important; font-weight: 600 !important; color: var(--dark) !important; margin-bottom: 28px !important; opacity: .8; }
.cta-banner .btn { margin: 0 auto; }
.cta-banner-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-bottom: 16px; }
@media (min-width: 640px) { .cta-banner-actions { flex-direction: row; justify-content: center; } }
.cta-banner-trust { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,0.85); }
.cta-urgency, .guide-modal-urgency { margin-top: 14px; font-size: 13px; color: var(--rose); font-weight: 600; text-align: center; }

/* --- INTRO & SEO BLOCKS --- */
.seo-block-lead, .seo-block-text { font-size: 15px; color: var(--mid); line-height: 1.82; font-weight: 300; }
.seo-block-lead { margin: 12px 0 20px; } .seo-block-text { margin: 20px 0 16px; }
.seo-cats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.seo-cat-card { border-radius: 16px; padding: 16px 14px; display: flex; flex-direction: column; gap: 5px; }
.seo-cat-icon { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.seo-cat-name { font-size: 14px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.seo-cat-desc { font-size: 13px; color: var(--mid); line-height: 1.5; }
.seo-cat-card--1 { background: #e0f2fe; } .seo-cat-card--2 { background: #ffe4e6; } .seo-cat-card--3 { background: #dcfce7; } .seo-cat-card--4 { background: #fff7ed; } .seo-cat-card--5 { background: #ede9fe; }
.seo-callout { border-left: 3px solid var(--rose-5); padding: 12px 18px; background: #fff5f7; border-radius: 0 10px 10px 0; font-size: 15px; color: var(--mid); line-height: 1.82; font-weight: 300; }
.seo-callout strong { color: var(--dark); font-weight: 700; }
.intro-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; display: grid; grid-template-columns: 5px 1fr; }
.intro-stripe { background: linear-gradient(175deg, var(--rose-soft), var(--sky-soft)); }
.intro-body { padding: 32px 36px; display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: start; }
.intro-title { font-family: var(--ff-head); font-size: 26px; font-weight: 500; color: var(--dark); line-height: 1.25; }
.intro-title em { font-style: italic; color: var(--rose); }
.intro-accent { margin-top: 20px; padding: 16px 20px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--rose-bg), var(--sky-bg)); border: 1px solid var(--rose-soft); font-size: 14.5px; font-weight: 600; color: var(--dark); line-height: 1.55; display: flex; gap: 10px; align-items: center; }
.intro-accent::before { content: '💡'; font-size: 18px; flex-shrink: 0; font-style: normal; line-height: 1; }

/* --- PRINCIPLES & STAGES & FACTORS --- */
.principles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.principle-card { border-radius: var(--r-md); padding: 22px; border: 1px solid var(--border); overflow: hidden; transition: transform .2s, box-shadow .2s; }
.principle-card:nth-child(1) { background: linear-gradient(135deg, var(--rose-bg), #FFF9F0); } .principle-card:nth-child(2) { background: linear-gradient(135deg, var(--sky-bg), #F5FAFF); } .principle-card:nth-child(3) { background: linear-gradient(135deg, var(--mint-bg), #F5FFFB); } .principle-card:nth-child(4) { background: linear-gradient(135deg, var(--peach-bg), #FFF8F0); }
.principle-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.principle-icon { width: 46px; height: 46px; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; box-shadow: var(--sh-sm); }
.principle-title { font-size: 15.5px; font-weight: 700; color: var(--dark); margin-bottom: 7px; }
.principle-text { font-size: 13.5px; color: var(--mid); line-height: 1.65; font-weight: 300; }
.stages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stage-card { border-radius: var(--r-lg); padding: 26px; border: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.stage-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.stage-card:nth-child(1) { background: linear-gradient(155deg, #FFF2F5 0%, #FFF9F0 100%); } .stage-card:nth-child(2) { background: linear-gradient(155deg, var(--sky-bg) 0%, var(--mint-bg) 100%); }
.stage-card::after { content: attr(data-n); position: absolute; bottom: -12px; right: 14px; font-family: var(--ff-head); font-size: 100px; font-weight: 600; font-style: italic; line-height: 1; color: rgba(26,37,53,.05); pointer-events: none; user-select: none; }
.stage-num { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; width: fit-content; }
.stage-card:nth-child(1) .stage-num { background: var(--rose-soft); color: var(--rose); } .stage-card:nth-child(2) .stage-num { background: var(--sky-soft); color: var(--blue); }
.stage-title { font-family: var(--ff-head); font-size: 20px; font-weight: 500; color: var(--dark); line-height: 1.25; }
.stage-text { font-size: 14px; color: var(--mid); line-height: 1.65; flex: 1; font-weight: 300; }
.stage-link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: var(--r-sm); background: var(--white); border: 1.5px solid var(--border); font-size: 13.5px; font-weight: 700; color: var(--dark); text-decoration: none; transition: all .2s; width: fit-content; }
.stage-link::after { content: '→'; }
.stage-card:nth-child(1) .stage-link:hover { border-color: var(--rose-soft); color: var(--rose); transform: translateX(3px); } .stage-card:nth-child(2) .stage-link:hover { border-color: var(--sky-soft); color: var(--sky); transform: translateX(3px); }
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.step { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: var(--r-md); background: var(--light); border: 1px solid var(--border); transition: all .2s; }
.step:nth-child(1):hover, .step:nth-child(3):hover { background: var(--rose-bg); border-color: var(--rose-soft); } .step:nth-child(2):hover, .step:nth-child(4):hover { background: var(--sky-bg); border-color: var(--sky-soft); }
.step-num { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, var(--rose-soft), var(--sky-soft)); border: 1.5px solid var(--border); font-size: 14px; font-weight: 700; color: var(--dark); flex-shrink: 0; }
.step-text { font-size: 14px; color: var(--mid); line-height: 1.65; font-weight: 300; }
.factors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.factor { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: var(--r-md); transition: transform .18s, box-shadow .18s; }
.factor:nth-child(odd) { background: linear-gradient(135deg, var(--sky-bg), #F5FAFF); border: 1px solid var(--sky-soft); } .factor:nth-child(even) { background: linear-gradient(135deg, var(--rose-bg), var(--rose-1)); border: 1px solid var(--rose-soft); }
.factor:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); }
.factor-dot { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--rose-soft), var(--sky-soft)); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.factor-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--rose), var(--sky)); }
.factor-text { font-size: 14px; color: var(--mid); line-height: 1.68; font-weight: 300; }

/* --- TIMELINE (POSTPARTUM) --- */
.stages-timeline { display: flex; flex-direction: column; gap: 20px; }
.stage-block { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--sh-sm); transition: box-shadow .2s; }
.stage-block:hover { box-shadow: var(--sh-md); }
.stage-block-header { display: flex; align-items: center; gap: 16px; padding: 22px 28px; }
.stage-block:nth-child(1) .stage-block-header { background: linear-gradient(135deg, #FFF2F5, #FFF9F0); } .stage-block:nth-child(2) .stage-block-header { background: linear-gradient(135deg, var(--sky-bg), var(--mint-bg)); } .stage-block:nth-child(3) .stage-block-header { background: linear-gradient(135deg, var(--mint-bg), #F0FFFB); } .stage-block:nth-child(4) .stage-block-header { background: linear-gradient(135deg, var(--peach-bg), #FFF8F0); }
.stage-block-num { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ff-head); font-size: 18px; font-weight: 600; flex-shrink: 0; }
.stage-block:nth-child(1) .stage-block-num { background: var(--rose-soft); color: var(--rose); } .stage-block:nth-child(2) .stage-block-num { background: var(--sky-soft); color: var(--blue); } .stage-block:nth-child(3) .stage-block-num { background: var(--mint-soft); color: var(--mint-dark); } .stage-block:nth-child(4) .stage-block-num { background: #FFE4C8; color: #B86A1A; }
.stage-block-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.stage-block-title { font-family: var(--ff-head); font-size: 20px; font-weight: 500; color: var(--dark); }
.stage-block-body { padding: 24px 28px; background: var(--white); }
.stage-block-accent { font-size: 14px; font-weight: 700; color: var(--dark); padding: 12px 16px; margin-bottom: 14px; border-radius: var(--r-sm); }
.stage-block:nth-child(1) .stage-block-accent { background: var(--rose-1); border-left: 3px solid var(--rose-5); } .stage-block:nth-child(2) .stage-block-accent { background: var(--blue-1); border-left: 3px solid var(--sky); } .stage-block:nth-child(3) .stage-block-accent { background: var(--mint-bg); border-left: 3px solid var(--mint); } .stage-block:nth-child(4) .stage-block-accent { background: var(--peach-bg); border-left: 3px solid #E8904A; }
.stage-block-items { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.stage-tag { padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--mid); background: var(--light); border: 1px solid var(--border); }
.stage-note { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-sm); background: var(--peach-bg); border: 1px solid rgba(255,107,60,.15); font-size: 13.5px; color: var(--mid); line-height: 1.6; }
.stage-note::before { content: '⚠️'; font-size: 16px; flex-shrink: 0; font-style: normal; line-height: 1; }
.stage-note--info::before { content: '💡'; } .stage-note--ok::before { content: '✅'; }
.stage-cta { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--r-sm); background: var(--sky-bg); border: 1.5px solid var(--sky-soft); font-size: 13.5px; font-weight: 700; color: var(--blue); text-decoration: none; transition: all .2s; }
.stage-cta::after { content: '→'; } .stage-cta:hover { background: var(--sky); color: var(--white); border-color: transparent; }
.stage-block--week { opacity: .85; border-style: dashed; } .stage-block--week:hover { opacity: 1; }
.stage-block--week.stage-block:nth-child(1) .stage-block-header, .stage-block--week.stage-block:nth-child(2) .stage-block-header { background: linear-gradient(135deg, var(--light), #F8F9FB) !important; }
.stage-block--week .stage-block-header { background: linear-gradient(135deg, var(--light), #F8F9FB); }
.stage-block--week.stage-block:nth-child(1) .stage-block-num, .stage-block--week.stage-block:nth-child(2) .stage-block-num { background: rgba(26,37,53,.07) !important; color: var(--muted) !important; }
.stage-block-num--ref { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; background: rgba(26,37,53,.07); color: var(--muted); border: 1.5px solid var(--border); }
.stage-block-num--ref::before { content: '↩'; font-style: normal; }
.stage-block-accent--ref { font-size: 14px; font-weight: 400; color: var(--muted); padding: 10px 14px; border-radius: var(--r-sm); background: var(--light); border-left: 3px solid var(--border) !important; margin-bottom: 12px; }
.stage-cta--ref { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--r-sm); background: var(--light); border: 1.5px solid var(--border); font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; transition: all .2s; }
.stage-cta--ref::after { content: '→'; } .stage-cta--ref:hover { background: var(--sky-bg); color: var(--blue); border-color: var(--sky-soft); }

/* --- CONTENT BLOCKS (Split Cols, Mistakes, Checklist, Structure, Quick Answer, Criteria) --- */
.split-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split-col { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.split-col-header { padding: 18px 22px; display: flex; align-items: center; gap: 12px; }
.split-col--yes .split-col-header { background: linear-gradient(135deg, var(--mint-bg), #F0FFFB); border-bottom: 1px solid var(--mint-soft); } .split-col--no .split-col-header { background: linear-gradient(135deg, #FFF7F0, #FFF0F0); border-bottom: 1px solid var(--rose-soft); }
.split-col-icon { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--white); display: flex; align-items: center; justify-content: center; font-size: 20px; border: 1px solid var(--border); box-shadow: var(--sh-sm); flex-shrink: 0; }
.split-col-title { font-family: var(--ff-head); font-size: 17px; font-weight: 500; color: var(--dark); }
.split-col-sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.split-col-body { padding: 20px 22px; background: var(--white); display: flex; flex-direction: column; gap: 6px; }
.split-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); font-size: 13.5px; color: var(--mid); line-height: 1.55; font-weight: 400; border: 1px solid var(--border); background: var(--white); transition: background .18s; }
.split-item:hover { background: var(--light); }
.split-col--yes .split-item-dot { color: var(--mint); font-size: 16px; flex-shrink: 0; } .split-col--no .split-item-dot { color: var(--rose-5); font-size: 16px; flex-shrink: 0; }
.split-col-link { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none; font-size: 13px; font-weight: 700; transition: all .2s; }
.split-col-link::before { content: '👉'; font-style: normal; flex-shrink: 0; } .split-col-link::after { content: '→'; }
.split-col--yes .split-col-link { background: var(--mint-bg); color: var(--mint-dark); border: 1px solid var(--mint-soft); } .split-col--yes .split-col-link:hover { background: var(--mint); color: var(--white); border-color: transparent; }
.split-col--no .split-col-link { background: var(--rose-bg); color: var(--rose); border: 1px solid var(--rose-soft); } .split-col--no .split-col-link:hover { background: var(--rose); color: var(--white); border-color: transparent; }
.split-note { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 14px 20px; border-radius: var(--r-md); background: var(--sky-bg); border: 1px solid var(--sky-soft); font-size: 13.5px; color: var(--mid); line-height: 1.6; font-weight: 400; }
.split-note::before { content: '💡'; font-size: 17px; flex-shrink: 0; font-style: normal; line-height: 1; }
.mistakes-list { display: flex; flex-direction: column; gap: 12px; }
.mistake-item { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; padding: 18px 20px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--white); transition: transform .18s, box-shadow .18s; }
.mistake-item:hover { transform: translateX(4px); box-shadow: var(--sh-sm); }
.mistake-num { width: 52px; height: 52px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-family: var(--ff-head); font-size: 22px; font-weight: 600; font-style: italic; flex-shrink: 0; }
.mistake-item:nth-child(1) .mistake-num { background: var(--rose-1); color: var(--rose); } .mistake-item:nth-child(2) .mistake-num { background: var(--sky-bg); color: var(--blue); } .mistake-item:nth-child(3) .mistake-num { background: var(--peach-bg); color: #C97A40; } .mistake-item:nth-child(4) .mistake-num { background: var(--mint-bg); color: var(--mint); }
.mistake-title { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 5px; }
.mistake-text { font-size: 13.5px; color: var(--mid); line-height: 1.6; font-weight: 300; }
.mistake-arrow { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; background: var(--light); border-radius: 8px; padding: 3px 10px; width: fit-content; margin-top: 6px; }
.mistake-arrow::before { content: '→'; font-style: normal; }
.mistakes-conclusion { margin-top: 20px; padding: 20px 24px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--rose-2), var(--blue-2)); border: 1px solid rgba(255,255,255,.6); box-shadow: var(--sh-sm); font-size: 15px; font-weight: 600; color: var(--dark); line-height: 1.65; display: flex; gap: 12px; align-items: center; }
.mistakes-conclusion::before { content: '💬'; font-size: 20px; flex-shrink: 0; font-style: normal; }
.checklist { display: flex; flex-direction: column; gap: 10px; }
.check-item { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--white); transition: all .18s; }
.check-item:hover { background: var(--mint-bg); border-color: var(--mint-soft); transform: translateX(4px); }
.check-icon { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--mint-soft), #A8F0DC); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.check-text { font-size: 14.5px; font-weight: 500; color: var(--dark); line-height: 1.4; }
.checklist-note { margin-top: 18px; padding: 18px 22px; border-radius: var(--r-md); background: var(--sky-bg); border: 1px solid var(--sky-soft); font-size: 14.5px; color: var(--mid); line-height: 1.7; font-weight: 300; display: flex; gap: 10px; align-items: center; }
.checklist-note::before { content: '🧘'; font-size: 18px; flex-shrink: 0; font-style: normal; line-height: 1; }
.day-structure { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px; align-items: start; }
.day-structure-text p { font-size: 15px; color: var(--mid); line-height: 1.78; font-weight: 300; margin-bottom: 12px; } .day-structure-text p:last-child { margin-bottom: 0; }
.day-meals { display: flex; flex-direction: column; gap: 6px; background: var(--light); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; }
.day-meal { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--dark); transition: background .15s; }
.day-meal:hover { background: var(--rose-bg); border-color: var(--rose-soft); }
.day-meal--light { background: transparent; border-color: transparent; font-weight: 400; color: var(--muted); font-size: 13px; } .day-meal--light:hover { background: var(--light); border-color: var(--border); }
.day-meal::before { font-style: normal; flex-shrink: 0; font-size: 18px; }
.day-meal--breakfast::before { content: '🍳'; } .day-meal--snack::before { content: '🍎'; } .day-meal--lunch::before { content: '🥣'; } .day-meal--tea::before { content: '🫖'; } .day-meal--dinner::before { content: '🌿'; } .day-meal--night::before { content: '🌙'; }
.day-meal-label { line-height: 1.3; }
.day-benefits { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.day-benefit { display: flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; background: var(--mint-bg); border: 1px solid var(--mint-soft); font-size: 13px; font-weight: 600; color: var(--mint-dark); }
.day-benefit::before { content: '✓'; color: var(--mint); font-weight: 700; font-style: normal; }
.day-cta-block { margin-top: 24px; padding: 24px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--rose-1), var(--blue-1)); border: 1px solid var(--rose-soft); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.day-cta-text { font-size: 14.5px; color: var(--mid); line-height: 1.7; font-weight: 300; margin: 0; }
.day-final-note { margin-top: 16px; padding: 14px 20px; border-radius: var(--r-md); background: var(--peach-bg); border: 1px solid rgba(255,107,60,.15); font-size: 14px; font-weight: 600; color: var(--dark); line-height: 1.55; display: flex; align-items: center; gap: 10px; }
.day-final-note::before { content: '💡'; font-size: 17px; flex-shrink: 0; font-style: normal; line-height: 1; }
.quick-answer { background: linear-gradient(135deg, var(--sky-bg), #F5FAFF); border: 1px solid var(--sky-soft); border-radius: var(--r-lg); padding: 28px 32px; }
.quick-answer-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--sky); background: #EBF5FF; border: 1px solid var(--sky-soft); border-radius: 999px; padding: 5px 14px; margin-bottom: 14px; }
.quick-answer h2 { font-size: 20px; margin-bottom: 12px; }
.quick-answer p { font-size: 14.5px; color: var(--mid); line-height: 1.7; font-weight: 300; }
.quick-answer-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 9px; }
.quick-answer-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--mid); line-height: 1.6; padding: 9px 14px; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--border); }
.quick-answer-note { margin-top: 14px; padding: 10px 16px; background: var(--white); border-left: 3px solid var(--sky); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 13.5px; color: var(--dark); font-weight: 600; line-height: 1.5; }
.quick-answer-anchor { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13.5px; font-weight: 600; color: var(--rose); text-decoration: none; } .quick-answer-anchor:hover { text-decoration: underline; }
.quick-answer-rows { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.quick-answer-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--border); font-size: 14.5px; color: var(--mid); line-height: 1.55; }
.qa-icon { flex-shrink: 0; font-style: normal; font-size: 16px; }
.forbid-list { display: flex; flex-direction: column; gap: 16px; }
.forbid-section { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); }
.forbid-section-header { padding: 14px 20px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.forbid-section--absolute .forbid-section-header { background: linear-gradient(135deg, #FFF0F0, #FFF5F0); border-bottom: 1px solid var(--rose-soft); color: var(--rose); } .forbid-section--temp .forbid-section-header { background: linear-gradient(135deg, #FFF8F0, #FFFBF0); border-bottom: 1px solid rgba(255,160,60,.25); color: #B06010; }
.forbid-section-items { padding: 16px 20px; background: var(--white); display: flex; flex-direction: column; gap: 9px; }
.forbid-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--mid); line-height: 1.55; }
.forbid-item-dot { flex-shrink: 0; color: var(--muted); font-weight: 700; }
.pdf-block { margin-top: 24px; padding: 24px; border-radius: var(--r-lg); background: linear-gradient(135deg, #F5F0FF, #EEF5FF); border: 1px solid rgba(100,80,200,.15); }
.pdf-block-title { font-family: var(--ff-head); font-size: 17px; font-weight: 600; color: var(--dark); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.pdf-block-text { font-size: 14px; color: var(--mid); line-height: 1.65; font-weight: 300; margin-bottom: 16px; }
.pdf-block-links { display: flex; flex-wrap: wrap; gap: 10px; }
.pdf-link { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: var(--r-md); background: var(--white); border: 1px solid rgba(100,80,200,.2); font-size: 13.5px; font-weight: 600; color: #5040B0; text-decoration: none; transition: all .2s; }
.pdf-link::before { content: '📄'; font-style: normal; font-size: 15px; } .pdf-link:hover { background: #5040B0; color: var(--white); border-color: transparent; }
.colics-items { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.colics-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--light); border: 1px solid var(--border); font-size: 14px; color: var(--mid); line-height: 1.55; }
.colics-item-icon { flex-shrink: 0; font-style: normal; font-size: 17px; }
.colics-note { padding: 12px 18px; border-radius: var(--r-md); background: var(--mint-bg); border: 1px solid var(--mint-soft); font-size: 14px; color: var(--mint-dark); font-weight: 600; line-height: 1.55; display: flex; align-items: flex-start; gap: 8px; }
.firstmonth-block { padding: 24px 28px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--peach-bg), #FFF9F5); border: 1px solid rgba(255,107,60,.18); }
.firstmonth-block p { font-size: 14.5px; color: var(--mid); line-height: 1.75; font-weight: 300; margin-bottom: 14px; }
.firstmonth-link { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: var(--r-md); background: var(--white); border: 1px solid rgba(255,107,60,.25); font-size: 13.5px; font-weight: 600; color: var(--rose); text-decoration: none; transition: all .2s; }
.firstmonth-link::before { content: '👉'; font-style: normal; } .firstmonth-link:hover { background: var(--rose); color: var(--white); border-color: transparent; }
.insight-banner { position: relative; border-radius: var(--r-xl); padding: 52px 64px; text-align: center; overflow: hidden; background: linear-gradient(135deg, #F0FFF8, #F5FFFC, #EEF8FF); border: 1px solid var(--mint-soft); }
.insight-banner-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mint-dark); margin-bottom: 18px; padding: 6px 16px; border-radius: 999px; background: var(--mint-bg); border: 1px solid var(--mint-soft); }
.insight-banner h2 { font-family: var(--ff-head); font-size: 30px; font-weight: 500; color: var(--dark); line-height: 1.3; margin-bottom: 16px; } .insight-banner h2 em { font-style: italic; color: var(--mint-dark); }
.insight-banner p { font-size: 15.5px; color: var(--mid); line-height: 1.8; font-weight: 300; max-width: 620px; margin: 0 auto 28px; } .insight-banner .btn { margin: 0 auto; }
.clarifier-block { padding: 24px 28px; border-radius: var(--r-lg); background: var(--light); border: 1px solid var(--border); }
.clarifier-block p { font-size: 14.5px; color: var(--mid); line-height: 1.7; font-weight: 300; margin-bottom: 16px; }
.clarifier-links { display: flex; flex-direction: column; gap: 10px; }
.clarifier-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--rose); text-decoration: none; padding: 10px 16px; border-radius: var(--r-sm); background: var(--white); border: 1px solid var(--border); transition: all .2s; } .clarifier-link:hover { border-color: var(--rose-soft); background: var(--rose-bg); }
.criteria-list { display: flex; flex-direction: column; gap: 12px; }
.criteria-item { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--white); transition: box-shadow .2s; }
.criteria-item:hover { box-shadow: var(--sh-md); }
.criteria-item:nth-child(1) { background: linear-gradient(135deg, #FFF5F7, var(--white)); border-color: var(--rose-soft); } .criteria-item:nth-child(2) { background: linear-gradient(135deg, var(--sky-bg), var(--white)); border-color: var(--sky-soft); } .criteria-item:nth-child(3) { background: linear-gradient(135deg, #FFF8F0, var(--white)); border-color: rgba(255,160,60,.25); } .criteria-item:nth-child(4) { background: linear-gradient(135deg, var(--mint-bg), var(--white)); border-color: var(--mint-soft); }
.criteria-icon { width: 52px; height: 52px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--white); border: 1px solid var(--border); flex-shrink: 0; }
.criteria-title { font-size: 15.5px; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.criteria-text { font-size: 14px; color: var(--mid); line-height: 1.65; font-weight: 300; margin: 0; }

/* --- MENU PAGE COMPONENTS --- */
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trust-card { display: flex !important; align-items: flex-start !important; gap: 16px !important; background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 20px; box-shadow: var(--sh-sm); transition: transform .18s, box-shadow .18s; }
.trust-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); }
.trust-card-img { flex-shrink: 0; } .trust-card-img img { width: 64px; height: 64px; object-fit: contain; display: block; }
.trust-card-title { font-family: var(--ff-head); font-size: 14.5px; font-weight: 600; color: var(--dark); line-height: 1.3; margin-bottom: 6px; }
.trust-card-text { font-size: 13px; color: var(--mid); line-height: 1.6; font-weight: 300; margin: 0; }
.menu-card, .menu-card:hover { transform: none !important; box-shadow: var(--sh-sm) !important; padding: 28px 28px 32px; }
.menu-day-title { font-family: var(--ff-head); font-size: 20px; font-weight: 600; color: var(--dark); margin: 22px 0 14px; line-height: 1.3; min-height: 1.5em; }
.accordion { display: flex; flex-direction: column; gap: 8px; max-width: 100%; margin: 0; }
.accordion-item { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); transition: box-shadow .2s, border-color .2s; margin-bottom: 0; }
.accordion-item:hover { box-shadow: var(--sh-md); } .accordion-item.is-open { border-color: var(--rose-soft); box-shadow: var(--sh-md); }
.accordion-toggle { width: 100%; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: none !important; border: none; cursor: pointer; text-align: left; font-family: var(--ff-body); transition: background .15s; min-height: 56px; }
.accordion-toggle:hover { background: var(--rose-bg) !important; } .accordion-item.is-open .accordion-toggle { background: var(--rose-1) !important; }
.accordion-icon { font-size: 20px; flex-shrink: 0; width: 32px; text-align: center; line-height: 1; }
.accordion-title { flex: 1; font-size: 15px; font-weight: 700; color: var(--dark); line-height: 1.3; }
.accordion-chevron { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--light); border: 1px solid var(--border); color: var(--muted); transition: transform .3s, background .2s, color .2s; }
.accordion-chevron svg { width: 14px; height: 14px; transition: transform .3s; }
.accordion-item.is-open .accordion-chevron { background: var(--rose-soft); color: var(--rose); border-color: var(--rose-soft); } .accordion-item.is-open .accordion-chevron svg { transform: rotate(180deg); }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height .38s cubic-bezier(.4,0,.2,1); background: var(--white) !important; display: block !important; padding: 0 !important; }
.accordion-item.is-open .accordion-content { max-height: 3000px !important; }
.accordion-content-inner { padding: 30px; }
.acc-subtitle { font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 10px; line-height: 1.5; }
.acc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; } .acc-list li { font-size: 14px; color: var(--mid); line-height: 1.65; font-weight: 300; padding-left: 18px; position: relative; } .acc-list li::before { content: '•'; position: absolute; left: 0; top: 0; color: var(--rose-mid); font-weight: 700; }
.accordion--locked { opacity: 0.4; pointer-events: none; user-select: none; filter: blur(0.3px); } .accordion-item--lock .accordion-icon { filter: grayscale(1); } .accordion-item--lock .accordion-title { color: var(--muted); } .accordion-item--lock .accordion-toggle { cursor: not-allowed; }
.menu-day-scan { display: flex !important; flex-wrap: wrap !important; align-items: flex-start !important; gap: 8px !important; padding: 12px 16px !important; background: linear-gradient(135deg, #f0f7ff, #e8f5e9) !important; border: 1px solid #c5deff !important; border-radius: 10px !important; margin-bottom: 14px !important; }
.menu-day-scan__label { font-size: 12px !important; font-weight: 700 !important; color: #0056b3 !important; text-transform: uppercase !important; letter-spacing: .04em !important; white-space: nowrap !important; padding-top: 3px !important; }
.menu-day-scan__chips { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
.menu-day-scan__chip { background: #fff !important; border: 1px solid #b8d8ff !important; border-radius: 20px !important; padding: 3px 11px !important; font-size: 13px !important; color: #1a2840 !important; line-height: 1.4 !important; white-space: nowrap !important; }
.menu-day-scan.is-locked { align-items: center !important; cursor: default !important; } .menu-day-scan__chip--ghost { background: rgba(0,0,0,.07) !important; border-color: transparent !important; color: transparent !important; min-width: 56px !important; height: 26px !important; padding: 0 !important; border-radius: 20px !important; flex-shrink: 0 !important; } .menu-day-scan__lock { font-size: 14px !important; opacity: .55 !important; flex-shrink: 0 !important; margin-left: 2px !important; }
.acc-focus-block { background: #f8f9fa !important; border-radius: 8px !important; padding: 16px !important; margin-bottom: 14px !important; } .acc-focus-goal { font-size: 15px !important; font-weight: 700 !important; color: var(--dark) !important; margin-bottom: 8px !important; } .acc-focus-subtitle { font-size: 16px !important; font-weight: 700 !important; color: var(--dark) !important; margin-bottom: 6px !important; line-height: 1.3 !important; } .acc-focus-text { font-size: 14px !important; color: var(--mid) !important; line-height: 1.65 !important; margin: 0 !important; }
.acc-nutritionist-quote { background: #fff !important; border-radius: 6px !important; padding: 12px 14px !important; margin-top: 12px !important; border-left: 3px solid #d1c4e9 !important; } .acc-quote-label { font-size: 13px !important; font-weight: 600 !important; color: var(--dark) !important; margin-bottom: 6px !important; } .acc-nutritionist-quote p { font-size: 13.5px !important; color: var(--mid) !important; font-style: italic !important; line-height: 1.65 !important; margin: 0 0 6px !important; } .acc-quote-author { font-size: 13px !important; color: var(--muted) !important; font-style: normal !important; font-weight: 500 !important; }
.acc-meal-section { margin-bottom: 4px !important; } .acc-meal-label { font-size: 14px !important; font-weight: 700 !important; color: var(--dark) !important; margin-bottom: 8px !important; } .acc-dish { font-size: 15px !important; font-weight: 600 !important; color: var(--dark) !important; margin-bottom: 6px !important; line-height: 1.4 !important; } .acc-dish-portion { font-size: 14px !important; font-weight: 400 !important; color: var(--mid) !important; } .acc-how-to { font-size: 14px !important; color: #555 !important; font-style: italic !important; line-height: 1.6 !important; margin-bottom: 8px !important; }
.acc-badges { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin-top: 6px !important; } .acc-badge { font-size: 13px !important; line-height: 1.4 !important; padding: 4px 9px !important; border-radius: 4px !important; display: inline-block !important; } .acc-badge--ok { color: #2d6a4f !important; background: #d8f3dc !important; } .acc-badge--warn{ color: #856404 !important; background: #fff3cd !important; } .acc-badge-yellow { background: #fff3cd !important; color: #856404 !important; border-radius: 6px !important; padding: 10px 12px !important; font-size: 13.5px !important; line-height: 1.55 !important; margin-top: 10px !important; }
.acc-divider { border: none !important; border-top: 1px solid #e9ecef !important; margin: 14px 0 !important; }
.acc-drink-norm { background: #e8f5e9 !important; border-radius: 6px !important; padding: 10px 14px !important; font-size: 13.5px !important; color: #2d6a4f !important; margin-top: 12px !important; line-height: 1.5 !important; }
.acc-rule-note { font-size: 13.5px !important; color: var(--mid) !important; line-height: 1.6 !important; margin: 12px 0 0 !important; padding: 8px 12px !important; background: #f8f9fa !important; border-radius: 6px !important; }
.acc-lifehack { background: #f0f4f8 !important; border-left: 3px solid #0056b3 !important; border-radius: 0 6px 6px 0 !important; padding: 12px !important; margin-top: 12px !important; font-size: 14px !important; color: var(--mid) !important; line-height: 1.6 !important; } .acc-lifehack strong { color: var(--dark) !important; display: block !important; margin-bottom: 4px !important; } .acc-lifehack p { margin: 0 !important; }
.catalog-bridge { background: linear-gradient(135deg, var(--sky-bg), var(--mint-bg)); border: 1px solid var(--sky-soft); border-radius: var(--r-lg); padding: 32px 36px; display: flex; align-items: center; gap: 32px; justify-content: space-between; } .catalog-bridge-text { flex: 1; } .catalog-bridge-title { font-family: var(--ff-head); font-size: 22px; font-weight: 500; color: var(--dark); margin-bottom: 10px; line-height: 1.3; } .catalog-bridge-text p { font-size: 14.5px; color: var(--mid); line-height: 1.65; font-weight: 300; margin-bottom: 20px; }
.catalog-bridge-badge { flex-shrink: 0; text-align: center; background: var(--white); border: 1px solid var(--sky-soft); border-radius: var(--r-md); padding: 20px 28px; box-shadow: var(--sh-sm); } .catalog-bridge-num { font-family: var(--ff-head); font-size: 40px; font-weight: 700; color: var(--blue-5); line-height: 1; } .catalog-bridge-label { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 400; }
.menu-modal-features { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 8px; text-align: left; } .menu-modal-features li { font-size: 14px; color: var(--mid); line-height: 1.5; font-weight: 300; padding-left: 22px; position: relative; } .menu-modal-features li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--mint-dark); font-weight: 700; font-size: 13px; } .menu-modal-variant--hidden { display: none; }
.mm-sticky { } .mm-sticky.is-stuck .ds-toggle { }
.day-nav { display: flex; align-items: center; gap: 15px; justify-content: center; } .day-nav .day-selector { flex: 0 0 200px; margin: 0; } .day-nav-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 10px 16px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--white); color: var(--dark); font-size: 13px; font-weight: 600; font-family: var(--ff-body); cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s; } .day-nav-btn:hover:not(:disabled) { border-color: var(--rose-soft); background: var(--rose-bg); } .day-nav-btn:disabled { opacity: .4; cursor: not-allowed; } .day-nav-arrow { width: 16px; height: 16px; flex-shrink: 0; }
.ds { position: relative; width: 100%; }
body.mm-dropdown-open .ds.open { position: relative; z-index: 1501; }
.ds-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: var(--r-md); background: var(--white); color: var(--dark); font-size: 13px; font-weight: 600; font-family: var(--ff-body); cursor: pointer; text-align: left; gap: 8px; transition: border-color .15s, background .15s, box-shadow .15s; }
.ds-toggle:hover { border-color: var(--rose-soft); background: var(--rose-bg); }
.ds.open .ds-toggle { border-color: var(--rose-soft); border-bottom-color: var(--white); border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: none; }
.ds-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-caret { flex-shrink: 0; display: flex; align-items: center; width: 18px; height: 18px; transition: transform .2s; }
.ds-caret svg { width: 18px; height: 18px; }
.ds.open .ds-caret { transform: rotate(180deg); }
.ds-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border: 1.5px solid var(--rose-soft); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: 0 8px 24px rgba(26,37,53,.1); max-height: 300px; overflow-y: auto; list-style: none; margin: 0; padding: 6px; z-index: 902; scrollbar-width: thin; scrollbar-color: rgba(26,37,53,.18) transparent; }
.ds-list::-webkit-scrollbar { width: 4px; }
.ds-list::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.ds-list::-webkit-scrollbar-thumb { background: rgba(26,37,53,.18); border-radius: 4px; }
.ds-list::-webkit-scrollbar-thumb:hover { background: rgba(26,37,53,.32); }
.ds-list li { padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--dark); cursor: pointer; transition: background .12s, color .12s; list-style: none; }
.ds-list li:hover { background: var(--rose-bg); color: var(--rose); }
.ds-list li.is-selected { background: var(--rose-bg); color: var(--rose); font-weight: 700; }
.menu-progress { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 16px; font-size: 13px; color: var(--mid); } .menu-progress-labels { display: flex; justify-content: space-between; align-items: baseline; } .menu-progress strong { color: var(--dark); } .menu-progress-track { width: 100%; height: 7px; background: var(--rose-bg); border-radius: 99px; overflow: hidden; } .menu-progress-fill { height: 100%; background: linear-gradient(90deg, var(--rose-5), var(--rose-mid)); border-radius: 99px; transition: width .4s ease; } .menu-progress-left { font-size: 12px !important; color: var(--muted) !important; font-weight: 400 !important; white-space: nowrap; } .menu-progress-viewed { font-size: 12px; color: var(--muted); white-space: nowrap; } .menu-progress-below { text-align: center; margin-top: 2px; }
.menu-locked-cta { margin-top: 20px; padding: 28px 24px; background: var(--rose-bg); border: 1px solid var(--rose-soft); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; text-align: center; } .menu-locked-cta-title { font-family: var(--ff-head); font-size: 17px; font-weight: 700; color: var(--dark); margin-bottom: 6px; } .menu-locked-cta-text { font-size: 14px; color: var(--mid); margin: 0 0 18px; } .menu-locked-cta-header { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 8px; } .menu-locked-cta-icon { font-size: 32px; line-height: 1; margin-bottom: 10px; } .menu-locked-cta-features { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; align-items: flex-start; } .menu-locked-cta-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--mid); padding: 5px 0; line-height: 1.5; } .mlc-feat-icon { flex-shrink: 0; } .menu-locked-cta .btn { display: inline-flex; margin-bottom: 0; } #menuDay1Cta[hidden], #menuLockedCta[hidden] { display: none !important; }
.plan-logic-title { font-family: var(--ff-head); font-size: 22px; font-weight: 700; color: var(--dark); margin-bottom: 24px; line-height: 1.35; text-align: center; } .plan-logic-title em { color: var(--rose); font-style: normal; } .plan-logic-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .plan-logic-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 26px 20px; text-align: center; transition: box-shadow .2s, transform .2s; } .plan-logic-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); } .plan-logic-icon { font-size: 38px; margin-bottom: 14px; line-height: 1; } .plan-logic-card-title { font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 10px; line-height: 1.3; } .plan-logic-card-text { font-size: 13.5px; color: var(--mid); line-height: 1.65; }
.menu-day1-cta { margin-top: 20px; padding: 32px 28px; background: var(--mint-bg, #f0faf4); border: 1px solid var(--mint-border, #c3e8d0); border-radius: var(--r-lg); display: flex; flex-direction: column; align-items: center; text-align: center; } .menu-day1-cta-icon { font-size: 32px; margin-bottom: 10px; line-height: 1; } .menu-day1-cta-title { font-family: var(--ff-head); font-size: 18px; font-weight: 700; color: var(--dark); margin-bottom: 14px; } .menu-day1-cta-text { font-size: 14.5px; color: var(--mid); margin-bottom: 16px; line-height: 1.6; } .menu-day1-cta-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .menu-day1-cta-list li { font-size: 14px; color: var(--mid); padding: 5px 0 5px 22px; position: relative; line-height: 1.5; } .menu-day1-cta-list li::before { content: '✔'; position: absolute; left: 0; top: 5px; color: #38a169; font-size: 12px; } .menu-day1-cta .btn { display: inline-flex; margin-top: 4px; }
.day1-highlight { margin-top: 16px; padding: 14px 16px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: var(--r-md); } .day1-highlight-badge { font-size: 13px; font-weight: 600; color: #92400e; margin-bottom: 8px; } .day1-highlight p { font-size: 13.5px; color: #4a5568; margin: 0 0 7px; line-height: 1.6; } .day1-highlight p:last-of-type { margin-bottom: 8px; } .day1-highlight-note { font-size: 13px; color: #6b7280; font-style: italic; line-height: 1.5; }

/* --- HUB SEARCH & FILTERS --- */
.hub-search-wrap { position: relative; margin-bottom: 14px; }
.hub-search-section { padding-bottom: 0 !important; } .hub-search-wrap-pill { width: 100%; position: relative; }
.hub-search-field-wrap--pill { display: flex; align-items: center; position: relative; background: var(--white); border: 1.5px solid rgba(26,37,53,.18); border-radius: 999px !important; padding: 0 16px 0 44px; transition: border-radius .15s; }
.hub-search-wrap-pill.is-open .hub-search-field-wrap--pill { border-radius: 16px 16px 0 0 !important; }
.hub-search-field-wrap--pill .hub-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.hub-search-input--pill { flex: 1; border: none !important; outline: none !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 0 !important; font-size: 15px; color: var(--dark); font-family: var(--ff-body); }
.hub-search-input--pill::placeholder { color: var(--muted); }
.hub-search-input--pill:focus { outline: none !important; box-shadow: none !important; border-color: transparent !important; }
.hub-search-clear { position: absolute; right: 12px; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 16px; padding: 4px 8px; line-height: 1; } .hub-search-clear:hover { color: var(--dark); }
.hub-search-wrap-pill .hub-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; border-radius: 0 0 16px 16px; border: 1.5px solid rgba(26,37,53,.18); border-top: none; box-shadow: 0 6px 20px rgba(26,37,53,.1); list-style: none; padding: 4px 0; max-height: 280px; overflow-y: auto; background: var(--white); }
.hub-search-dropdown li { padding: 10px 16px; cursor: pointer; font-size: 14px; color: var(--dark); transition: background .15s; border-bottom: 1px solid var(--border); } .hub-search-dropdown li:last-child { border-bottom: none; } .hub-search-dropdown li:hover, .hub-search-dropdown li.active { background: var(--mint-bg); } .hub-search-dropdown .dd-alias { font-size: 12px; color: var(--muted); margin-left: 6px; }
.hub-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; } .hub-chips-label { font-size: 13px; color: var(--muted); font-family: var(--ff-body); } .hub-chip { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 20px; background: var(--mint-bg); border: 1.5px solid var(--mint-soft); color: var(--mint-dark); font-size: 13px; font-weight: 600; text-decoration: none; transition: background .2s, border-color .2s; } .hub-chip:hover { background: var(--mint-soft); border-color: var(--mint); }
.hub-filter-row { display: flex; flex-direction: column; align-items: stretch; margin: 25px 0; }
.hub-filter-btns-row { display: flex; align-items: center; gap: 10px; padding-bottom: 25px; }
.hub-count-inline { margin-left: auto; font-family: var(--ff-body); font-size: 13px; color: var(--muted); white-space: nowrap; }
.hub-filter-sep { border: none; border-top: 1px solid rgba(26,37,53,.09); margin: 0 0 14px; }
.hub-filter-toggle-btn { border-radius: 999px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 9px 20px !important; white-space: nowrap !important; flex-shrink: 0 !important; background: linear-gradient(135deg, var(--rose-5) 0%, #ff8fa3 100%) !important; border: 1.5px solid transparent !important; color: #fff !important; box-shadow: 0 3px 10px rgba(255,107,138,.3) !important; font-size: 14px !important; font-weight: 600 !important; font-family: var(--ff-body) !important; cursor: pointer !important; transition: opacity .18s, box-shadow .18s !important; } .hub-filter-toggle-btn:hover { opacity: .88 !important; box-shadow: 0 5px 16px rgba(255,107,138,.4) !important; } .hub-filter-toggle-btn.has-filters { box-shadow: 0 5px 16px rgba(255,107,138,.45) !important; }
.hub-filter-badge { background: var(--rose-5); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 11px; font-weight: 700; line-height: 18px; display: inline-flex; align-items: center; }
.hub-filter-reset-btn { display: inline-flex; align-items: center; padding: 9px 20px; border-radius: 999px; border: 1.5px solid #9ca3af; background: #fff; color: #6b7280; font-family: var(--ff-body); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background .18s, color .18s, border-color .18s; } .hub-filter-reset-btn:hover { background: #9ca3af; color: #fff; border-color: #9ca3af; }
.hub-active-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 0px; }
.hub-af-label { font-size: 13px; color: var(--muted); font-family: var(--ff-body); white-space: nowrap; } .hub-af-tags { display: flex; flex-wrap: wrap; gap: 6px; } .hub-af-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--rose-bg); border: 1px solid var(--rose-soft); border-radius: 999px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--dark); font-family: var(--ff-body); }
.hub-af-tag--status-1 { background: #dcfce7; border-color: #bbf7d0; color: rgb(21 128 61 / 0.6); } .hub-af-tag--status-2 { background: #fef3c7; border-color: #fde68a; color: rgb(180 83 9 / 0.6); } .hub-af-tag--status-3 { background: #ffe4e6; border-color: #fecdd3; color: rgb(185 28 28 / 0.6); } .hub-af-tag[data-type="letter"] { background: var(--light); border-color: var(--border); color: var(--mid); font-weight: 700; letter-spacing: .03em; }
.hub-af-remove { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 15px; padding: 0; line-height: 1; display: flex; align-items: center; transition: color .15s; } .hub-af-remove:hover { color: var(--rose); }
.hub-count-mobile { display: none; font-family: var(--ff-body); font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.hub-count-bar { font-size: 13px; color: var(--muted); font-family: var(--ff-body); margin-bottom: 0; }
.hub-legend { font-family: var(--ff-body); font-size: 13px; color: var(--muted); padding: 8px 0; margin-bottom: 6px; line-height: 1.6; }
.hub-search-open-btn { border-radius: 999px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; padding: 9px 20px !important; white-space: nowrap !important; flex-shrink: 0 !important; background: linear-gradient(90deg, #00a8ff 0%, #38bdf8 100%) !important; border: 1.5px solid transparent !important; color: #fff !important; box-shadow: 0 3px 10px rgba(14,165,233,.3) !important; font-size: 14px !important; font-weight: 600 !important; font-family: var(--ff-body) !important; cursor: pointer !important; transition: opacity .18s, box-shadow .18s !important; } .hub-search-open-btn:hover { opacity: .88 !important; box-shadow: 0 5px 16px rgba(14,165,233,.45) !important; }
.hub-catalog-intro { margin-bottom: 1.25rem; } .hub-catalog-lead { font-size: 15px; color: #4b5563; font-family: var(--mid); font-weight: 300; line-height: 1.82; margin: .45rem 0 0; }
.hub-catalog-heading { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1rem; padding-top: .25rem; } .hub-catalog-h2 { font-size: 1.35rem; font-weight: 700; color: #1a2535; margin: 0; } .hub-catalog-count { font-size: .85rem; color: #6b7280; }
.hub-tasks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.25rem; } .hub-task-card { display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid rgba(26,37,53,.1); border-radius: 14px; text-decoration: none; color: inherit; transition: border-color .18s, background .18s; } .hub-task-card:hover { border-color: rgba(26,37,53,.25); background: #f4f6f9; text-decoration: none; } .hub-task-icon { font-size: 1.5rem; line-height: 1; } .hub-task-title { font-size: .9rem; font-weight: 700; color: #1a2535; line-height: 1.3; } .hub-task-sub { font-size: .78rem; color: #6b7280; line-height: 1.35; }
.hub-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 4px; } .hub-task-card.active { border-color: var(--green); background: var(--mint-bg); }

/* --- HUB GRID & PRODUCT CARDS --- */
.hub-grid { display: grid; grid-template-columns: repeat(4, 1fr) !important; gap: 1.5rem !important; max-width: var(--content-w); margin: 0 auto; }
.hub-card { display: flex !important; flex-direction: column !important; gap: 0 !important; padding: 16px !important; min-height: 160px; border-radius: 2rem !important; border: 1.5px solid rgba(26,37,53,.07) !important; background: var(--white); text-decoration: none; color: var(--dark); transition: transform .22s, box-shadow .22s; position: relative; }
.hub-card--status-1 { background: #f0fdf4 !important; border: 1px solid rgba(34, 197, 94, 0.1) !important; } .hub-card--status-2 { background: #fffbeb !important; border: 1px solid rgba(245, 158, 11, 0.1) !important; } .hub-card--status-3 { background: #fef2f2 !important; border: 1px solid rgba(239, 68, 68, 0.1) !important; }
.hub-card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(26,37,53,.12) !important; }
.hub-card.hidden { display: none !important; }
.hub-card-header { display: flex; align-items: center; justify-content: space-between; margin: 15px 0; }
.hub-card-status-icon { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 28px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; flex-shrink: 0; }
.hub-card-status-icon--1 { color: rgb(22 163 74); } .hub-card-status-icon--2 { color: rgb(217 119 6); } .hub-card-status-icon--3 { color: rgb(220 38 38); }
.hub-card-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--ff-body); padding: 0.25rem 0.75rem; border-radius: 999px; white-space: nowrap; }
.hub-card-badge--1 { background-color: rgb(220 252 231 / 0.5); color: rgb(21 128 61 / 0.6); } .hub-card-badge--2 { background-color: rgb(254 243 199 / 0.5); color: rgb(180 83 9 / 0.6); } .hub-card-badge--3 { background-color: rgb(254 226 226 / 0.5); color: rgb(185 28 28 / 0.6); }
.hub-card-body { flex: 1; display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.hub-card-name-wrap { height: calc(1.2rem * 1.3 * 2); display: flex; align-items: flex-end; overflow: hidden; }
.hub-card-name { font-family: var(--ff-body) !important; font-size: 1.2rem !important; font-weight: 700 !important; color: rgb(80 80 80); line-height: 1.3 !important; margin: 0 !important; padding: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-card-intro-text { font-family: var(--ff-body); font-size: 12px; color: rgb(91 91 96 / var(--tw-text-opacity, 1)); line-height: 1.4; margin: 6px 0 0 !important; }
.hub-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.hub-card-cat-pill { font-size: 0.6rem; font-weight: 400; font-family: var(--ff-body); color: rgb(118 118 123 / var(--tw-text-opacity, 1)); background: rgb(255 255 255 / 0.4); border-radius: 999px; padding: 2px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px); }
.hub-card-arrow-icon { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 18px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20; color: rgb(149 62 91 / var(--tw-text-opacity, 1)); flex-shrink: 0; transition: transform .15s; }
.hub-card:hover .hub-card-arrow-icon { opacity: 1; transform: translateX(2px); }
.hub-load-more-wrap { text-align: center; padding: 28px 0 6px; }
.hub-load-more-pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 14px 36px; border-radius: 999px; border: none; background: linear-gradient(135deg, var(--rose-5) 0%, #ff8fa3 100%); color: #fff; font-family: var(--ff-body); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(255,107,138,.35); transition: transform .2s, box-shadow .2s, opacity .2s; text-decoration: none; }
.hub-load-more-pill-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,107,138,.45); opacity: .92; }
.hub-load-more-meta { margin-top: 10px; font-family: var(--ff-body); font-size: 12px; color: var(--muted); }
.hub-empty { text-align: center; padding: 40px 20px; color: var(--muted); font-family: var(--ff-body); } .hub-empty p { margin-bottom: 16px; font-size: 16px; }

/* --- PRODUCT PAGE (SINGLE) --- */
.prod-hero-body { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
.prod-hero-left { display: flex; flex-direction: column; gap: 16px; }
.prod-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.prod-verdict-card { background: var(--white); border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-md); position: sticky; top: calc(var(--header-h) + 16px); }
.prod-verdict-title { font-family: var(--ff-head); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 16px; }
.prod-verdict-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.prod-verdict-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--dark); line-height: 1.4; }
.prod-verdict-item--status-1 { color: var(--green); font-weight: 700; font-size: 15px; } .prod-verdict-item--status-2 { color: #c77800; font-weight: 700; font-size: 15px; } .prod-verdict-item--status-3 { color: var(--rose); font-weight: 700; font-size: 15px; }
.prod-verdict-icon { font-size: 18px; flex-shrink: 0; }
.prod-snippet { background: var(--rose-bg); border: 1.5px solid var(--rose-soft); border-left: 4px solid var(--rose); border-radius: var(--r-md); padding: 20px 24px; font-size: 15px; line-height: 1.7; color: var(--dark); }
.prod-snippet-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--rose); margin-bottom: 8px; }
.prod-tiles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.prod-tile { background: var(--light); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; }
.prod-tile-icon { font-size: 22px; margin-bottom: 8px; }
.prod-tile-title { font-family: var(--ff-head); font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
.prod-tile-text { font-size: 13px; color: var(--mid); line-height: 1.6; }
.prod-tile-list { list-style: none; display: flex; flex-direction: column; gap: 5px; padding: 0; } .prod-tile-list li { font-size: 13px; color: var(--mid); line-height: 1.5; padding-left: 14px; position: relative; } .prod-tile-list li::before { content: '·'; position: absolute; left: 0; color: var(--rose); font-weight: 700; }
.prod-menu-link { display: flex; align-items: center; gap: 10px; background: var(--rose-bg); border: 1px solid var(--rose-soft); border-radius: var(--r-sm); padding: 14px 18px; margin-top: 20px; font-size: 14px; color: var(--dark); flex-wrap: wrap; }
.prod-menu-link-btn { color: var(--rose); font-weight: 700; text-decoration: none; white-space: nowrap; } .prod-menu-link-btn:hover { text-decoration: underline; }
.prod-benefits-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; }
.prod-benefits-col { border-radius: var(--r-md); padding: 20px 22px; } .prod-benefits-col--mom { background: var(--rose-bg); border: 1.5px solid var(--rose-soft); } .prod-benefits-col--baby { background: var(--sky-bg); border: 1.5px solid var(--sky-soft); }
.prod-benefits-col-title { font-family: var(--ff-head); font-size: 14px; font-weight: 600; color: var(--dark); margin-bottom: 14px; }
.prod-benefits-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; } .prod-benefits-list li { font-size: 13px; line-height: 1.6; color: var(--mid); padding-left: 16px; position: relative; } .prod-benefits-list li::before { content: '•'; position: absolute; left: 0; color: var(--rose); font-weight: 700; } .prod-benefits-col--baby .prod-benefits-list li::before { color: var(--sky); }
.prod-nutrients-wrap { overflow-x: auto; margin-top: 16px; } .prod-nutrients-table { width: 100%; border-collapse: collapse; font-size: 14px; } .prod-nutrients-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid var(--border); white-space: nowrap; } .prod-nutrients-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--dark); font-weight: 500; } .prod-nutrients-table tr:last-child td { border-bottom: none; } .prod-nutrients-table tr:hover td { background: var(--rose-bg); } .prod-nutrients-pct { color: var(--rose) !important; font-weight: 700 !important; }
.prod-nutrients-note { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.6; padding: 12px 16px; background: var(--light); border-radius: var(--r-sm); }
.prod-checklist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; } .prod-checklist-col { border-radius: var(--r-md); padding: 18px 20px; } .prod-checklist-col--ok { background: #f0faf3; border: 1.5px solid #b2e2c2; } .prod-checklist-col--warn { background: #fff8f0; border: 1.5px solid #f5d6a8; }
.prod-checklist-header { font-size: 13px; font-weight: 700; margin-bottom: 12px; color: var(--dark); } .prod-checklist-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 7px; } .prod-checklist-col li { font-size: 13px; color: var(--mid); line-height: 1.5; padding-left: 16px; position: relative; } .prod-checklist-col--ok li::before { content: '✓'; position: absolute; left: 0; color: #2a9147; font-weight: 700; } .prod-checklist-col--warn li::before { content: '!'; position: absolute; left: 0; color: #c77800; font-weight: 700; }
.prod-checklist-note { margin-top: 16px; background: var(--rose-bg); border: 1px solid var(--rose-soft); border-radius: var(--r-sm); padding: 14px 18px; font-size: 13px; color: var(--mid); line-height: 1.6; }
.prod-paywall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; } .prod-paywall-card { border-radius: var(--r-md); padding: 20px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; border: 1.5px solid var(--border); background: var(--white); } .prod-paywall-card--red { border-color: #f5c2c7; background: #fff5f6; } .prod-paywall-card--blue { border-color: var(--sky-soft); background: var(--sky-bg); } .prod-paywall-card--green{ border-color: var(--mint-soft); background: var(--mint-bg); }
.prod-paywall-card-top { display: flex; align-items: center; gap: 8px; } .prod-paywall-lock { font-size: 14px; opacity: .6; } .prod-paywall-card-title { font-size: 14px; font-weight: 700; color: var(--dark); } .prod-paywall-card-desc { font-size: 12px; color: var(--muted); line-height: 1.5; flex: 1; }
.prod-paywall-btn { margin-top: auto; padding: 9px 14px; border-radius: var(--r-sm); background: var(--dark); color: var(--white); font-size: 12px; font-weight: 700; border: none; cursor: pointer; text-align: center; transition: opacity .18s; font-family: var(--ff-body); } .prod-paywall-btn:hover { opacity: .8; }
.prod-paywall-banner { margin-top: 24px; background: linear-gradient(135deg, var(--rose-bg) 0%, #fff0f8 100%); border: 1.5px solid var(--rose-soft); border-radius: var(--r-lg); padding: 28px 32px; } .prod-paywall-banner-title { font-family: var(--ff-head); font-size: 18px; font-weight: 600; color: var(--dark); margin-bottom: 8px; } .prod-paywall-banner-sub { font-size: 13px; color: var(--muted); margin-bottom: 10px; } .prod-paywall-banner-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; } .prod-paywall-banner-list li { font-size: 14px; color: var(--dark); } .prod-paywall-banner-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .prod-paywall-banner-hint { font-size: 11px; color: var(--muted); }
.prod-related-grid { grid-template-columns: repeat(4, 1fr) !important; } .prod-related-more { display: flex; justify-content: center; margin-top: 20px; }

/* --- MODALS & OVERLAYS --- */
.hub-modal-overlay { position: fixed; inset: 0; background: rgba(10,15,25,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.hub-modal { background: var(--white); border-radius: var(--r-lg); max-width: 520px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--sh-lg); overflow: hidden; }
.hub-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 22px; background: #f8f9fa; border-bottom: 1px solid rgba(26,37,53,.07); flex-shrink: 0; }
.hub-modal-title { font-family: var(--ff-head); font-size: 24px; font-weight: 700; color: var(--dark); }
.hub-modal-close { background: none; border: none; font-size: 22px; color: var(--muted); cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background .15s, color .15s; line-height: 1; padding: 0; } .hub-modal-close:hover { background: var(--rose-bg); color: var(--rose); }
.hub-modal-body { flex: 1; overflow-y: auto; padding: 20px 22px; }
.hub-modal-section { margin-bottom: 22px; } .hub-modal-section:last-child { margin-bottom: 0; }
.hub-modal-section-title { font-family: var(--ff-body); font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; }
.hub-modal-status-pills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .hub-modal-status-pill { cursor: pointer; position: relative; display: block; } .hub-modal-status-pill input { position: absolute; opacity: 0; pointer-events: none; }
.hub-modal-status-pill span { display: flex; align-items: center; justify-content: center; padding: 10px 4px; border-radius: 999px; font-family: var(--ff-body); font-size: 13px; font-weight: 600; text-align: center; border: 1.5px solid; transition: all .15s; white-space: nowrap; }
.hub-modal-status-pill--all span { background: #f3f4f6; border-color: #d1d5db; color: #374151; } .hub-modal-status-pill--all input:checked ~ span { background: #374151; border-color: #374151; color: #fff; }
.hub-modal-status-pill--1 span { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; } .hub-modal-status-pill--1 input:checked ~ span { background: #16a34a; border-color: #16a34a; color: #fff; }
.hub-modal-status-pill--2 span { background: #fffbeb; border-color: #fde68a; color: #b45309; } .hub-modal-status-pill--2 input:checked ~ span { background: #d97706; border-color: #d97706; color: #fff; }
.hub-modal-status-pill--3 span { background: #fff1f2; border-color: #fecdd3; color: #be123c; } .hub-modal-status-pill--3 input:checked ~ span { background: #e11d48; border-color: #e11d48; color: #fff; }
.hub-modal-cats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.hub-modal-check { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(26,37,53,.06); cursor: pointer; font-family: var(--ff-body); font-size: 14px; color: var(--dark); gap: 8px; } .hub-modal-check:last-child, .hub-modal-check:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.hub-modal-check input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #d1d5db; background: #f9fafb; cursor: pointer; flex-shrink: 0; position: relative; transition: border-color .15s; } .hub-modal-check input[type="checkbox"]:checked { background: transparent; border-color: var(--rose-5); } .hub-modal-check input[type="checkbox"]:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 7px; height: 11px; border: 2.5px solid var(--rose-5); border-top: none; border-left: none; transform: rotate(45deg); }
.hub-modal-alphabet { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-modal-alpha-btn { width: 38px; height: 38px; border-radius: 50%; border: none; background: #f3f4f6; font-family: var(--ff-body); font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #4b5563; transition: all .15s; flex-shrink: 0; } .hub-modal-alpha-btn:hover { background: #e5e7eb; } .hub-modal-alpha-btn.active { background: linear-gradient(135deg, var(--rose-5) 0%, #ff8fa3 100%); color: #fff; box-shadow: 0 2px 8px rgba(255,107,138,.35); } .hub-modal-alpha-btn[data-modal-letter=""] { width: auto; padding: 0 16px; border-radius: 999px; }
.hub-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 22px; border-top: 1px solid rgba(26,37,53,.07); flex-shrink: 0; }
.hub-modal-btn-apply { display: flex; align-items: center; justify-content: center; padding: 13px; border-radius: 999px; border: none; background: linear-gradient(135deg, var(--rose-5) 0%, #ff8fa3 100%); color: #fff; font-family: var(--ff-body); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 10px rgba(255,107,138,.3); transition: opacity .18s; } .hub-modal-btn-apply:hover { opacity: .88; }
.hub-modal-btn-reset { display: flex; align-items: center; justify-content: center; padding: 13px; border-radius: 999px; border: 1.5px solid #9ca3af; background: #fff; color: #6b7280; font-family: var(--ff-body); font-size: 15px; font-weight: 600; cursor: pointer; transition: background .18s, color .18s; } .hub-modal-btn-reset:hover { background: #9ca3af; color: #fff; }
.hub-search-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(10,15,25,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; padding: 16px; }
.hub-search-modal-dialog { max-width: 560px; overflow: visible !important; } .hub-search-modal-dialog .hub-modal-header { border-radius: var(--r-lg) var(--r-lg) 0 0; } .hub-search-modal-dialog .hub-search-modal-body { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.hub-search-modal-body { padding: 20px 24px 28px; overflow: visible; display: flex; flex-direction: column; gap: 20px; }
.hub-search-recs-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.hub-search-recs-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hub-search-rec-btn { display: flex; align-items: center; padding: 13px 18px; background: #f8f9fb; border: 1px solid rgba(26,37,53,.09); border-radius: 14px; font-size: 15px; font-weight: 500; color: #1a2535; text-decoration: none; transition: background .15s, border-color .15s; font-family: var(--ff-body); } .hub-search-rec-btn:hover { background: #eef1f6; border-color: rgba(26,37,53,.18); text-decoration: none; color: #1a2535; } .hub-rec-emoji { margin-right: 8px; font-style: normal; line-height: 1; }
.guide-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 20px; } .guide-modal[hidden] { display: none; }
.guide-modal-overlay { position: absolute; inset: 0; background: rgba(26,37,53,.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); cursor: pointer; }
.guide-modal-box { position: relative; z-index: 1; background: var(--white); border-radius: var(--r-lg); padding: 40px 36px 36px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(26,37,53,.2); animation: guideModalIn .22s ease; }
@keyframes guideModalIn { from { opacity: 0; transform: scale(.93) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.guide-modal-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--light); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--muted); transition: background .15s, color .15s; padding: 0; } .guide-modal-close svg { width: 14px; height: 14px; } .guide-modal-close:hover { background: var(--rose-2); color: var(--rose); }
.guide-modal-icon { margin-bottom: 16px; } .guide-modal-icon svg { width: 48px; height: 48px; } .guide-modal-icon--emoji { font-size: 42px; line-height: 1; }
.guide-modal-title { font-family: var(--ff-head); font-size: 19px; font-weight: 700; color: var(--dark); line-height: 1.35; margin-bottom: 30px; } .guide-modal-subtitle { font-size: 13.5px; font-weight: 600; color: var(--dark); margin-bottom: 10px; line-height: 1.45; } .guide-modal-text { font-size: 14px; color: var(--mid); line-height: 1.65; font-weight: 300; margin-bottom: 20px; }
.guide-modal-btn { display: block; width: 100%; padding: 14px 20px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--rose-5), var(--rose-mid)); color: var(--white); font-size: 14.5px; font-weight: 700; text-decoration: none; text-align: center; box-shadow: 0 8px 24px rgba(255,107,138,.35); transition: transform .22s ease, box-shadow .22s ease; margin: 30px 0; } .guide-modal-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255,107,138,.45); }
.guide-modal-login { font-size: 13px; color: var(--muted); } .guide-modal-login a { color: var(--blue-5); font-weight: 600; text-decoration: none; } .guide-modal-login a:hover { text-decoration: underline; }
.guide-modal-pain, .guide-modal-solution { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; text-align: left; } .guide-modal-pain-item { font-size: 14px; color: #c53030; line-height: 1.4; } .guide-modal-solution-item { font-size: 14px; color: #276749; line-height: 1.4; }
.guide-modal-arrow { text-align: center; font-size: 22px; color: var(--muted); margin: 6px 0; line-height: 1; }
.guide-modal-trust { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 10px; margin-bottom: 4px; font-size: 12px; color: #38a169; font-weight: 500; }
.guide-modal-pricing-hint { margin: 12px 0; font-size: 14px; color: #2c5282; background: #ebf8ff; border-radius: var(--r-sm); padding: 8px 14px; text-align: center; }

/* --- MINI GUIDES --- */
.guides-section { margin-top: 0; } .guides-section-header { margin-bottom: 20px; }
.guides-section-title { display: flex; align-items: center; gap: 10px; font-family: var(--ff-head); font-size: 17px; font-weight: 600; color: var(--dark); margin-bottom: 6px; }
.guides-section-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--rose); stroke: var(--rose); } .guides-section-icon--green { color: var(--green); stroke: var(--green); }
.guides-section-sub { font-size: 13.5px; color: var(--muted); line-height: 1.55; font-weight: 300; }
.guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .guides-grid--4 { grid-template-columns: repeat(4, 1fr); }
.guide-tile { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1.5px solid transparent; padding: 20px 18px 16px; display: flex; flex-direction: column; gap: 0; text-decoration: none; color: inherit; cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; min-height: 175px; } .guide-tile:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.guide-tile-bg { position: absolute; bottom: -8px; right: 10px; font-size: 54px; font-weight: 900; letter-spacing: -1px; opacity: .07; line-height: 1; pointer-events: none; font-family: var(--ff-body); user-select: none; }
.guide-tile-body { flex: 1; }
.guide-tile-cat { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; opacity: .65; }
.guide-tile-name { font-family: var(--ff-head); font-size: 14px; font-weight: 700; line-height: 1.35; margin-bottom: 7px; color: var(--dark); }
.guide-tile-desc { font-size: 12.5px; color: var(--mid); line-height: 1.55; font-weight: 300; margin: 0; }
.guide-tile-foot { display: flex; align-items: center; gap: 5px; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.07); }
.guide-tile-dl { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .guide-tile-dl-icon { width: 14px; height: 14px; flex-shrink: 0; }
.guide-tile--rose { background: linear-gradient(145deg, #FFF0F3, #FFE0E8); border-color: rgba(183,16,76,.12); } .guide-tile--rose .guide-tile-cat, .guide-tile--rose .guide-tile-dl { color: var(--rose); } .guide-tile--rose .guide-tile-dl-icon { stroke: var(--rose); } .guide-tile--rose:hover { border-color: rgba(183,16,76,.28); }
.guide-tile--peach { background: linear-gradient(145deg, #FFF3ED, #FFE6D6); border-color: rgba(210,100,40,.12); } .guide-tile--peach .guide-tile-cat, .guide-tile--peach .guide-tile-dl { color: #C05A20; } .guide-tile--peach .guide-tile-dl-icon { stroke: #C05A20; } .guide-tile--peach:hover { border-color: rgba(210,100,40,.28); }
.guide-tile--mint { background: linear-gradient(145deg, #F0FAF7, #D8F4EC); border-color: rgba(31,127,106,.12); } .guide-tile--mint .guide-tile-cat, .guide-tile--mint .guide-tile-dl { color: var(--mint-dark); } .guide-tile--mint .guide-tile-dl-icon { stroke: var(--mint-dark); } .guide-tile--mint:hover { border-color: rgba(31,127,106,.28); }
.guide-tile--sky { background: linear-gradient(145deg, #EEF6FC, #D6EBF8); border-color: rgba(58,140,196,.12); } .guide-tile--sky .guide-tile-cat, .guide-tile--sky .guide-tile-dl { color: var(--blue-5); } .guide-tile--sky .guide-tile-dl-icon { stroke: var(--blue-5); } .guide-tile--sky:hover { border-color: rgba(58,140,196,.28); }
.guide-tile--violet { background: linear-gradient(145deg, #F5F0FF, #E8DFFF); border-color: rgba(100,60,200,.12); } .guide-tile--violet .guide-tile-cat, .guide-tile--violet .guide-tile-dl { color: #6030B0; } .guide-tile--violet .guide-tile-dl-icon { stroke: #6030B0; } .guide-tile--violet:hover { border-color: rgba(100,60,200,.28); }
.guide-tile--amber { background: linear-gradient(145deg, #FFF8EC, #FDEDC8); border-color: rgba(180,120,20,.12); } .guide-tile--amber .guide-tile-cat, .guide-tile--amber .guide-tile-dl { color: #9A6210; } .guide-tile--amber .guide-tile-dl-icon { stroke: #9A6210; } .guide-tile--amber:hover { border-color: rgba(180,120,20,.28); }
.guide-tile-emoji { position: absolute; top: 16px; right: 14px; font-size: 26px; line-height: 1; pointer-events: none; }
.guide-tile--neutral { background: var(--white); border-color: var(--border); } .guide-tile--neutral .guide-tile-name { padding-right: 36px; } .guide-tile--neutral .guide-tile-dl { color: #1a2535 !important; font-weight: 700; } .guide-tile--neutral .guide-tile-dl-icon { stroke: #1a2535 !important; } .guide-tile--neutral:hover { border-color: rgba(26,37,53,.25) !important; box-shadow: none !important; transform: none !important; }
.guide-tile--soon { opacity: 0.55; cursor: default; pointer-events: none; } .guide-tile-dl--soon { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.how-to-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 16px 0 12px; }
.how-to-card { background: #fff !important; border: 1px solid rgba(26,37,53,.08) !important; border-radius: var(--r-sm); padding: 18px 16px; box-shadow: none !important; } .how-to-card-icon { font-size: 22px; margin-bottom: 10px; line-height: 1; } .how-to-card-title { font-family: var(--ff-head); font-size: 15px; font-weight: 700; color: var(--dark); margin-bottom: 10px; line-height: 1.3; }
.how-to-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; } .how-to-list li, .how-to-card p { font-family: var(--ff-body); font-size: 14px; color: var(--mid); line-height: 1.55; margin: 0; } .how-to-card p + p { margin-top: 6px; } .how-to-note { font-family: var(--ff-body); font-size: 12px; color: var(--muted); text-align: center; }
.guides-section-seo { font-family: var(--ff-body); font-size: 12px; color: var(--muted); margin-top: 14px; text-align: center; }
.mg-top { display: grid; grid-template-columns: 1fr 130px; gap: 32px; align-items: start; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(26,37,53,.07); } .mg-stat { text-align: center; padding: 20px 16px; border: 1px solid rgba(26,37,53,.08); border-radius: 16px; background: #FFF5F7; flex-shrink: 0; } .mg-stat-num { font-family: var(--ff-head); font-size: 52px; font-weight: 500; color: var(--rose-5); line-height: 1; } .mg-stat-label { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.4; }
.mg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; } .mg-last-row { grid-column: span 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mg-tile { border-radius: 14px; border: 1px solid rgba(26,37,53,.09); background: #fff; padding: 18px 16px 14px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: border-color .18s, transform .18s; text-decoration: none; color: inherit; } a.mg-tile:hover { transform: translateY(-2px); border-color: rgba(26,37,53,.2); text-decoration: none; } .mg-tile--soon { cursor: default; }
.mg-tile-bg { position: absolute; bottom: -6px; right: 8px; font-size: 50px; font-weight: 900; opacity: .05; line-height: 1; pointer-events: none; font-family: system-ui; color: #1A2535; } .mg-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; margin-bottom: 10px; } .mg-tile-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; } .mg-tile-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; } .mg-tile-name { font-size: 13px; font-weight: 700; color: var(--dark); line-height: 1.3; margin-bottom: 5px; } .mg-tile-desc { font-size: 12px; color: var(--muted); line-height: 1.5; font-weight: 300; flex: 1; } .mg-tile-foot { display: flex; align-items: center; gap: 5px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(26,37,53,.06); } .mg-tile-dl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .mg-tile-ic { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .mg-tile-soon { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mg-tile--c1 .mg-tile-badge { background: var(--mg-c1-bg); color: var(--mg-c1); } .mg-tile--c1 .mg-tile-dl { color: var(--mg-c1); } .mg-tile--c1 .mg-tile-ic { stroke: var(--mg-c1); } .mg-tile--c2 .mg-tile-badge { background: var(--mg-c2-bg); color: var(--mg-c2); } .mg-tile--c2 .mg-tile-dl { color: var(--mg-c2); } .mg-tile--c2 .mg-tile-ic { stroke: var(--mg-c2); } .mg-tile--c3 .mg-tile-badge { background: var(--mg-c3-bg); color: var(--mg-c3); } .mg-tile--c3 .mg-tile-dl { color: var(--mg-c3); } .mg-tile--c3 .mg-tile-ic { stroke: var(--mg-c3); } .mg-tile--c4 .mg-tile-badge { background: var(--mg-c4-bg); color: var(--mg-c4); } .mg-tile--c4 .mg-tile-dl { color: var(--mg-c4); } .mg-tile--c4 .mg-tile-ic { stroke: var(--mg-c4); } .mg-tile--c5 .mg-tile-badge { background: var(--mg-c5-bg); color: var(--mg-c5); } .mg-tile--c5 .mg-tile-dl { color: var(--mg-c5); } .mg-tile--c5 .mg-tile-ic { stroke: var(--mg-c5); } .mg-tile--c6 .mg-tile-badge { background: var(--mg-c6-bg); color: var(--mg-c6); } .mg-tile--c6 .mg-tile-dl { color: var(--mg-c6); } .mg-tile--c6 .mg-tile-ic { stroke: var(--mg-c6); } .mg-tile--c7 .mg-tile-badge { background: var(--mg-c7-bg); color: var(--mg-c7); } .mg-tile--c7 .mg-tile-dl { color: var(--mg-c7); } .mg-tile--c7 .mg-tile-ic { stroke: var(--mg-c7); } .mg-tile--c8 .mg-tile-badge { background: var(--mg-c8-bg); color: var(--mg-c8); } .mg-tile--c8 .mg-tile-dl { color: var(--mg-c8); } .mg-tile--c8 .mg-tile-ic { stroke: var(--mg-c8); } .mg-tile--c9 .mg-tile-badge { background: var(--mg-c9-bg); color: var(--mg-c9); } .mg-tile--c9 .mg-tile-dl { color: var(--mg-c9); } .mg-tile--c9 .mg-tile-ic { stroke: var(--mg-c9); } .mg-tile--c10 .mg-tile-badge { background: var(--mg-c10-bg); color: var(--mg-c10); } .mg-tile--c10 .mg-tile-dl { color: var(--mg-c10); } .mg-tile--c10 .mg-tile-ic { stroke: var(--mg-c10); } .mg-tile--c11 .mg-tile-badge { background: var(--mg-c11-bg); color: var(--mg-c11); } .mg-tile--c11 .mg-tile-dl { color: var(--mg-c11); } .mg-tile--c11 .mg-tile-ic { stroke: var(--mg-c11); }
.mg-bottom-note { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; margin-top: 4px; }

/* --- BUTTON TO TOP --- */
.hub-scroll-top { position: fixed; bottom: 80px; right: 20px; z-index: 300; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: var(--white); border: none; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-md); transition: opacity .2s, transform .2s; } .hub-scroll-top:hover { transform: translateY(-2px); }

/* --- FOOTER --- */
.gvf { --gvf-bg: #1C2333; --gvf-bg2: #161D2C; --gvf-line: rgba(255,255,255,.07); --gvf-text: rgba(255,255,255,.55); --gvf-text-hi: rgba(255,255,255,.85); --gvf-rose: #FF6B8A; --gvf-sky: #5BA4CF; --gvf-inner-w: var(--content-w); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: var(--gvf-bg); color: var(--gvf-text); -webkit-font-smoothing: antialiased; }
.gvf-inner { max-width: var(--gvf-inner-w); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 280px 1fr 1fr; gap: 48px; align-items: start; }
.gvf-main { padding: 52px 0 40px; }
.gvf-logo { height: 50px; width: auto; display: block; margin-bottom: 16px; }
.gvf-tagline { font-size: 13px; line-height: 1.7; color: var(--gvf-text); font-weight: 300; margin-bottom: 24px; max-width: 260px; }
.gvf-contacts { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; }
.gvf-phone { font-size: 18px; font-weight: 700; color: var(--gvf-text-hi); text-decoration: none; line-height: 1.3; transition: color .18s; } .gvf-phone:hover { color: var(--gvf-rose); }
.gvf-phone-sub { font-size: 11px; color: var(--gvf-text); margin-bottom: 12px; font-weight: 400; }
.gvf-email { font-size: 15px; font-weight: 700; color: var(--gvf-sky); text-decoration: none; transition: opacity .18s; line-height: 1.3; } .gvf-email:hover { opacity: .8; }
.gvf-email-sub { font-size: 11px; color: var(--gvf-text); font-weight: 400; }
.gvf-socials { display: flex; gap: 8px; } .gvf-social { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid var(--gvf-line); display: flex; align-items: center; justify-content: center; color: var(--gvf-text); text-decoration: none; transition: all .18s; } .gvf-social img { height: 20px; } .gvf-social:hover { background: var(--gvf-rose); border-color: var(--gvf-rose); color: #fff; }
.gvf-nav-col { display: flex; flex-direction: column; }
.gvf-col-title { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sky-soft); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--gvf-line); }
.gvf-nav { display: flex; flex-direction: column; gap: 2px; } .gvf-nav a { font-size: 14px; font-weight: 500; color: var(--gvf-text); text-decoration: none; padding: 6px 0; border-radius: 6px; transition: color .18s, padding-left .18s; line-height: 1.4; } .gvf-nav a:hover { color: var(--gvf-text-hi); padding-left: 4px; } .gvf-nav--docs a { font-size: 12.5px; color: var(--gvf-text); font-weight: 400; } .gvf-nav--docs a:hover { color: var(--gvf-text-hi); }
.gvf-bottom { background: var(--gvf-bg2); border-top: 1px solid var(--gvf-line); padding: 16px 0; }
.gvf-bottom-inner { display: flex !important; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gvf-bottom-left { display: flex; flex-direction: column; gap: 4px; }
.gvf-copy { font-size: 12px; color: rgba(255,255,255,.6); font-weight: 500; } .gvf-cookie { font-size: 11px; color: rgba(255,255,255,.5); font-weight: 300; max-width: 680px; line-height: 1.5; }

/* --- RESPONSIVE MEDIA QUERIES --- */
@media (max-width: 1024px) {
  .prod-hero-body { grid-template-columns: 1fr; }
  .prod-verdict-card { position: static; }
}
@media (max-width: 900px) {
  .header-nav { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-aside { display: none; }
  .links { grid-template-columns: 1fr 1fr; }
  .principles-grid { grid-template-columns: 1fr 1fr; }
  .intro-body { grid-template-columns: 1fr; gap: 16px; }
  .split-cols, .day-structure { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; gap: 10px; }
  .trust-card { padding: 18px 16px; }
  .catalog-bridge { flex-direction: column; gap: 20px; padding: 24px; }
  .catalog-bridge-badge { width: 100%; }
  .guides-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .seo-cats-grid { grid-template-columns: repeat(3, 1fr); }
  .gvf-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .gvf-brand { grid-column: 1 / -1; }
  .gvf-tagline { max-width: 100%; }
  .mg-top { grid-template-columns: 1fr; }
  .mg-stat { display: flex; align-items: center; gap: 16px; text-align: left; }
  .mg-stat-num { font-size: 40px; }
  .mg-grid { grid-template-columns: repeat(2, 1fr); }
  .mg-last-row { grid-column: span 2; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .plan-logic-cards { grid-template-columns: 1fr; gap: 12px; }
  .plan-logic-title { font-size: 19px; text-align: left; }
  .hub-card-name { font-size: 1rem !important; }
  .hub-card-name-wrap { height: calc(1rem * 1.3 * 2); }
  .hub-count-inline { display: none; }
  .hub-filter-btns-row { justify-content: space-between; }
  .hub-count-mobile { display: block; }
  .hub-af-label { display: none !important; }
  .hub-active-filters { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .hub-active-filters::-webkit-scrollbar { display: none; }
  .hub-af-tag { flex-shrink: 0; }
  .how-to-cards { grid-template-columns: 1fr; }
  .guides-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .prod-tiles-grid, .prod-benefits-grid, .prod-checklist-grid, .prod-paywall-grid { grid-template-columns: 1fr; }
  .prod-paywall-banner { padding: 20px; }
}
@media (max-width: 640px) {
  .hero-body { padding: 32px 24px 36px; }
  .hero-actions { flex-direction: column; } .hero-actions .btn { justify-content: center; }
  .card { padding: 22px 18px; }
  .author { grid-template-columns: 1fr; } .author-aside { border-right: none; border-bottom: 1px solid var(--border); } .author-meta { align-items: flex-start; } .author-link, .author-link-wrap { width: auto; align-self: center; } .author-main { padding: 26px 24px; } .author-footer { justify-content: flex-start; }
  .sticky-nav { width: calc(100% - 32px); border-radius: var(--r-lg); } .sticky-nav a { flex: 1; justify-content: center; }
  .cta-banner { padding: 36px 28px; }
  .hero-tagline { font-size: 13px; }
  .stages-grid, .links, .principles-grid, .factors, .steps { grid-template-columns: 1fr; }
  .intro-body { padding: 24px; }
  .stage-block-header { padding: 18px 20px; } .stage-block-body { padding: 20px; } .stage-block-title { font-size: 17px; }
  .mistakes-list .mistake-item { grid-template-columns: 42px 1fr; gap: 12px; } .mistake-num { width: 42px; height: 42px; font-size: 18px; }
  .day-cta-block { padding: 18px; } .day-cta-block .btn { width: 100%; justify-content: center; } .day-benefits { flex-direction: column; }
  .quick-answer { padding: 20px; } .insight-banner { padding: 36px 24px; } .insight-banner h2 { font-size: 22px; } .pdf-block-links { flex-direction: column; } .forbid-section-header { font-size: 14px; }
  .trust-grid { grid-template-columns: 1fr; } .menu-card { padding: 20px 16px; } .accordion-content-inner { padding: 14px 16px 18px 16px; } .catalog-bridge { padding: 20px 18px; } .accordion-toggle { padding: 14px 14px; min-height: 52px; } .accordion-icon { width: 26px; font-size: 18px; }
  .day-nav-btn { padding: 10px 11px; } .day-nav-label { display: none; }
}
@media (max-width: 600px) {
  .hub-modal-overlay, .hub-search-modal { align-items: stretch; padding: 0; }
  .hub-modal, .hub-search-modal-dialog { border-radius: 0 !important; max-height: 100dvh; height: 100%; max-width: 100%; }
}
@media (max-width: 580px) {
  .seo-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .gvf-main { padding: 36px 0 28px; } .gvf-inner { grid-template-columns: 1fr; gap: 28px; } .gvf-brand { grid-column: auto; }
  .gvf-docs-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; } .gvf-docs-toggle::-webkit-details-marker { display: none; } .gvf-docs-toggle::after { content: '+'; font-size: 18px; color: rgba(255,255,255,.3); line-height: 1; } details[open] .gvf-docs-toggle::after { content: '−'; }
  .gvf-bottom-inner { flex-direction: column; align-items: flex-start; gap: 12px; } .gvf-support { width: 100%; justify-content: center; } .gvf-cookie { max-width: 100%; }
}
@media (max-width: 480px) {
  .guides-grid, .guides-grid--4 { grid-template-columns: 1fr; gap: 10px; }
  .guide-tile { min-height: auto; } .guide-modal-box { padding: 32px 24px 28px; } .guide-modal-title { font-size: 17px; }
  .mg-grid { grid-template-columns: repeat(2, 1fr); } .mg-last-row { grid-template-columns: 1fr 1fr; }
  .hub-search-row { flex-direction: column; } .hub-search-row .hub-filter-toggle-btn { width: 100%; justify-content: center; }
  .prod-related-grid { grid-template-columns: 1fr !important; } .prod-hero-actions { flex-direction: column; } .prod-paywall-banner-btns { flex-direction: column; }
}