@charset "utf-8";

.wp-hero { background: linear-gradient(150deg, rgb(247, 248, 246) 0%, rgb(250, 250, 248) 50%, rgb(238, 243, 251) 100%); padding: var(--section-gap) var(--content-pad) var(--section-gap); position: relative; overflow: hidden; }

.wp-hero::before { content: ""; position: absolute; top: -100px; right: -80px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(36, 52, 71, 0.1) 0%, transparent 65%); pointer-events: none; }

.wp-hero::after { content: ""; position: absolute; bottom: -60px; left: -60px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(181, 167, 212, 0.09) 0%, transparent 65%); pointer-events: none; }

.wp-hero-inner { max-width: 960px; margin: 0px auto; text-align: center; position: relative; z-index: 1; }

.wp-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--sage-lt); border: 1px solid rgba(36, 52, 71, 0.25); border-radius: 50px; padding: 5px 16px 5px 12px; font-size: 0.71rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-dk); margin-bottom: 22px; }

.wp-hero h1 { font-family: Georgia, serif; font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; color: rgb(30, 45, 61); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 18px; }

.wp-hero h1 em { font-style: normal; -webkit-text-fill-color: transparent; background-clip: text; }

.wp-hero-sub { font-size: 1.05rem; color: var(--brown); line-height: 1.8; max-width: 600px; margin: 0px auto 36px; font-weight: 300; }

.wp-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.wp-btn-primary { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 13px 28px; border-radius: 50px; font-size: 0.92rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: rgba(36, 52, 71, 0.1) 0px 4px 18px; transition: 0.22s; }

.wp-btn-primary:hover { transform: translateY(-2px); box-shadow: rgba(36, 52, 71, 0.15) 0px 7px 26px; }

.wp-btn-outline { display: inline-flex; align-items: center; gap: 7px; background: rgb(255, 255, 255); color: rgb(30, 45, 61); border: 1.5px solid rgba(30, 45, 61, 0.16); padding: 11px 24px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.22s; }

.wp-btn-outline:hover { background: var(--sage-lt); border-color: var(--navy-primary); color: var(--sage-dk); }

.wp-btn-ghost { display: inline-flex; align-items: center; gap: 7px; background: rgba(36, 52, 71, 0.1); color: var(--sage-dk); border: 1.5px solid rgba(36, 52, 71, 0.25); padding: 11px 24px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.22s; }

.wp-btn-ghost:hover { background: var(--sage-lt); }

.wp-section { padding: var(--section-gap) var(--content-pad); }

.wp-inner { max-width: 1100px; margin: 0px auto; }

.wp-eyebrow-sm { font-size: 0.69rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-primary); text-align: center; margin-bottom: 9px; }

.wp-section-title { font-family: Georgia, serif; font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 700; color: rgb(30, 45, 61); text-align: center; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 10px; }

.wp-section-sub { font-size: 0.96rem; color: var(--brown); line-height: 1.78; text-align: center; max-width: 540px; margin: 0px auto 48px; font-weight: 300; }

.wp-who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.wp-who-card { background: rgb(255, 255, 255); border-radius: 20px; padding: 24px 20px; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 16px; border: 1px solid rgba(30, 45, 61, 0.05); text-align: center; cursor: default; transition: 0.22s; }

.wp-who-card:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.1) 0px 8px 28px; }

.wp-who-icon { font-size: 2rem; margin-bottom: 10px; }

.wp-who-card h4 { font-size: 0.94rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 5px; }

.wp-who-card p { font-size: 0.79rem; color: var(--brown); line-height: 1.6; }

.wp-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.wp-benefit-card { background: rgb(255, 255, 255); border-radius: 18px; padding: 22px 18px; box-shadow: rgba(30, 45, 61, 0.06) 0px 2px 14px; border: 1px solid rgba(30, 45, 61, 0.05); }

.wp-benefit-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 12px; }

.wp-benefit-card h4 { font-size: 0.88rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 5px; }

.wp-benefit-card p { font-size: 0.78rem; color: var(--brown); line-height: 1.6; }

.wp-steps { display: flex; gap: 0px; align-items: flex-start; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

.wp-step { flex: 1 1 0%; min-width: 180px; max-width: 240px; text-align: center; position: relative; padding: 0px 12px; }

.wp-step:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 22px; font-size: 1.3rem; color: var(--navy-primary); font-weight: 700; }

.wp-step-num { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; margin: 0px auto 14px; box-shadow: rgba(74, 122, 78, 0.28) 0px 4px 16px; font-family: Georgia, serif; }

.wp-step h4 { font-size: 0.9rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 6px; }

.wp-step p { font-size: 0.77rem; color: var(--brown); line-height: 1.6; }

.wp-partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.wp-partner-card { background: rgb(255, 255, 255); border-radius: 22px; padding: 26px 22px; box-shadow: rgba(30, 45, 61, 0.08) 0px 3px 20px; border: 1px solid rgba(30, 45, 61, 0.06); transition: 0.24s; display: flex; flex-direction: column; }

.wp-partner-card:hover { transform: translateY(-4px); box-shadow: rgba(30, 45, 61, 0.12) 0px 10px 36px; }

.wp-partner-badge { display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 3px 11px; border-radius: 50px; background: var(--sage-lt); color: var(--sage-dk); margin-bottom: 12px; letter-spacing: 0.05em; text-transform: uppercase; }

.wp-partner-icon { font-size: 1.8rem; margin-bottom: 10px; }

.wp-partner-card h3 { font-family: Georgia, serif; font-size: 1rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 8px; }

.wp-partner-card p { font-size: 0.81rem; color: var(--brown); line-height: 1.65; flex: 1 1 0%; margin-bottom: 16px; }

.wp-learn-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 18px; border-radius: 50px; font-size: 0.77rem; font-weight: 600; background: var(--sage-lt); color: var(--sage-dk); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; transition: 0.18s; }

.wp-learn-btn:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.wp-usecase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.wp-usecase-card { background: linear-gradient(145deg, rgb(250, 248, 245), rgb(247, 248, 246)); border-radius: 18px; padding: 22px 20px; box-shadow: rgba(30, 45, 61, 0.06) 0px 2px 14px; border: 1px solid rgba(30, 45, 61, 0.05); }

.wp-usecase-icon { font-size: 1.6rem; margin-bottom: 10px; }

.wp-usecase-card p { font-size: 0.87rem; color: rgb(30, 45, 61); line-height: 1.72; font-style: italic; }

.wp-usecase-tag { display: inline-block; font-size: 0.66rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; background: var(--sage-lt); color: var(--sage-dk); margin-top: 10px; }

.wp-privacy-band { background: linear-gradient(145deg, rgb(238, 243, 251), rgb(247, 248, 246)); padding: 56px 24px; border-top: 1px solid rgba(30, 45, 61, 0.06); border-bottom: 1px solid rgba(30, 45, 61, 0.06); }

.wp-privacy-inner { max-width: 700px; margin: 0px auto; text-align: center; }

.wp-lock-icon { font-size: 2.5rem; margin-bottom: 16px; }

.wp-privacy-inner h2 { font-family: Georgia, serif; font-size: 1.7rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 14px; }

.wp-privacy-inner p { font-size: 0.95rem; color: var(--brown); line-height: 1.8; max-width: 560px; margin: 0px auto; }

.wp-cta-band { background: linear-gradient(145deg, rgb(30, 45, 61), rgb(45, 61, 90), rgb(30, 48, 64)); padding: var(--section-gap) var(--content-pad); text-align: center; position: relative; overflow: hidden; }

.wp-cta-band::before { content: ""; position: absolute; top: -60px; right: -60px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(36, 52, 71, 0.14) 0%, transparent 70%); pointer-events: none; }

.wp-cta-band::after { content: ""; position: absolute; bottom: -40px; left: -40px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(181, 167, 212, 0.1) 0%, transparent 70%); pointer-events: none; }

.wp-cta-band h2 { font-family: Georgia, serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; color: rgb(255, 255, 255); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 14px; position: relative; z-index: 1; }

.wp-cta-band p { font-size: 1rem; color: rgba(255, 255, 255, 0.72); line-height: 1.75; max-width: 520px; margin: 0px auto 36px; position: relative; z-index: 1; }

.wp-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }

.wp-btn-white { display: inline-flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); color: rgb(30, 45, 61); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 13px 28px; border-radius: 50px; font-size: 0.92rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.22s; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 18px; }

.wp-btn-white:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 28px; }

.wp-btn-ghost-white { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); border: 1.5px solid rgba(255, 255, 255, 0.25); padding: 11px 24px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.22s; }

.wp-btn-ghost-white:hover { background: rgba(255, 255, 255, 0.2); }

@media (max-width: 900px) {
  .wp-who-grid { grid-template-columns: 1fr 1fr 1fr; }
  .wp-benefit-grid { grid-template-columns: 1fr 1fr; }
  .wp-partner-grid { grid-template-columns: 1fr 1fr; }
  .wp-usecase-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .wp-section { padding: 52px 18px; }
  .wp-hero { padding: 64px 18px 60px; }
  .wp-who-grid { grid-template-columns: 1fr 1fr; }
  .wp-benefit-grid { grid-template-columns: 1fr 1fr; }
  .wp-partner-grid { grid-template-columns: 1fr; }
  .wp-steps { flex-direction: column; align-items: center; gap: 32px; }
  .wp-step { max-width: 280px; }
  .wp-step:not(:last-child)::after { content: "↓"; inset: auto auto -22px 50%; transform: translateX(-50%); font-size: 1.1rem; }
  .wp-hero-btns { flex-direction: column; align-items: center; }
  .wp-cta-btns { flex-direction: column; align-items: center; }
}

.fl-fab { position: fixed; bottom: 28px; right: 24px; z-index: 8000; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, rgb(36, 52, 71), rgb(49, 70, 95)); box-shadow: rgba(74, 122, 78, 0.38) 0px 5px 22px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; transition: 0.25s; color: rgb(255, 255, 255); font-family: inherit; }

.fl-fab:hover { transform: scale(1.1) translateY(-2px); box-shadow: rgba(74, 122, 78, 0.48) 0px 9px 30px; }

.fl-fab-label { position: absolute; right: 66px; top: 50%; transform: translateY(-50%); background: rgb(30, 45, 61); color: rgb(255, 255, 255); font-size: 0.76rem; font-weight: 700; padding: 5px 11px; border-radius: 50px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.22s; }

.fl-fab:hover .fl-fab-label, .fl-fab:focus .fl-fab-label { opacity: 1; }

@media (max-width: 600px) {
  .fl-fab { bottom: 82px; right: 18px; }
}

.fl-modal-bg { position: fixed; inset: 0px; background: rgba(10, 18, 28, 0.52); z-index: 9000; display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(6px); }

.fl-modal-bg.fl-open { display: flex; }

.fl-modal { background: rgb(255, 255, 255); border-radius: 26px; max-width: 680px; width: 100%; max-height: 92vh; overflow-y: auto; box-shadow: rgba(10, 18, 28, 0.22) 0px 28px 90px; position: relative; animation: 0.3s ease 0s 1 normal none running flSlideUp; }

@keyframes flSlideUp { 
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.fl-modal-head { padding: 30px 30px 0px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.fl-modal-close { width: 34px; height: 34px; border-radius: 50%; background: rgb(244, 244, 244); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgb(91, 100, 112); flex-shrink: 0; transition: background 0.18s; font-family: inherit; }

.fl-modal-close:hover { background: rgb(255, 224, 224); color: rgb(192, 57, 43); }

.fl-modal-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(36, 52, 71); margin-bottom: 6px; }

.fl-modal-title { font-family: Georgia, serif; font-size: 1.55rem; font-weight: 700; color: rgb(30, 45, 61); line-height: 1.15; margin-bottom: 6px; letter-spacing: -0.02em; }

.fl-modal-sub { font-size: 0.87rem; color: rgb(91, 100, 112); line-height: 1.7; max-width: 460px; font-weight: 300; }

.fl-modal-body { padding: 24px 30px 32px; }

.fl-scan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 28px; }

.fl-scan-card { border-radius: 18px; padding: 22px 16px; text-align: center; cursor: pointer; border: 2px solid transparent; transition: 0.22s; background: rgb(250, 248, 245); }

.fl-scan-card:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.1) 0px 7px 26px; }

.fl-scan-card.active { border-color: rgb(36, 52, 71); background: rgb(240, 248, 241); }

.fl-scan-emoji { font-size: 2rem; margin-bottom: 10px; display: block; }

.fl-scan-name { font-size: 0.9rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 5px; }

.fl-scan-desc { font-size: 0.76rem; color: rgb(91, 100, 112); line-height: 1.55; }

.fl-upload-zone { border: 2px dashed rgba(36, 52, 71, 0.4); border-radius: 18px; padding: 36px 24px; text-align: center; cursor: pointer; transition: 0.22s; background: rgb(250, 251, 250); margin-bottom: 20px; }

.fl-upload-zone:hover { border-color: rgb(36, 52, 71); background: rgb(240, 248, 241); }

.fl-upload-icon { font-size: 2.4rem; margin-bottom: 10px; }

.fl-upload-text { font-size: 0.9rem; font-weight: 600; color: rgb(30, 45, 61); margin-bottom: 4px; }

.fl-upload-sub { font-size: 0.77rem; color: rgb(168, 157, 148); }

.fl-result { background: linear-gradient(135deg, rgb(240, 248, 241), rgb(250, 250, 248)); border-radius: 18px; padding: 22px; display: none; margin-bottom: 20px; }

.fl-result.shown { display: block; animation: 0.3s ease 0s 1 normal none running flSlideUp; }

.fl-result-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(36, 52, 71); margin-bottom: 12px; }

.fl-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }

.fl-result-chip { background: rgb(255, 255, 255); border-radius: 12px; padding: 10px 12px; box-shadow: rgba(30, 45, 61, 0.06) 0px 1px 8px; border: 1px solid rgba(30, 45, 61, 0.05); }

.fl-rc-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgb(168, 157, 148); margin-bottom: 3px; }

.fl-rc-value { font-size: 0.84rem; font-weight: 600; color: rgb(30, 45, 61); }

.fl-result-actions { display: flex; gap: 9px; flex-wrap: wrap; }

.fl-res-btn { padding: 8px 16px; border-radius: 50px; font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.18s; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }

.fl-res-btn-primary { background: linear-gradient(135deg, rgb(36, 52, 71), rgb(49, 70, 95)); color: rgb(255, 255, 255); box-shadow: rgba(36, 52, 71, 0.3) 0px 3px 12px; }

.fl-res-btn-outline { background: rgb(255, 255, 255); color: rgb(30, 45, 61); border: 1.5px solid rgba(30, 45, 61, 0.15); }

.fl-res-btn:hover { transform: translateY(-1px); }

.fl-modal-foot { text-align: center; padding: 0px 30px 28px; }

.fl-modal-foot-note { font-size: 0.76rem; color: rgb(176, 168, 158); }

@media (max-width: 560px) {
  .fl-modal-head, .fl-modal-body, .fl-modal-foot { padding-left: 18px; padding-right: 18px; }
  .fl-scan-grid { grid-template-columns: 1fr; }
  .fl-result-grid { grid-template-columns: 1fr; }
}

.sa-section, .sa-card, .sa-card-header, .sa-card-body, .sa-card-title, .sa-card-sub, .sa-eyebrow, .sa-title, .sa-sub, .sa-chevron, .sa-icon-wrap, .sa-card-text, .sa-blob-gold, .sa-blob-blue { color-scheme: unset; forced-color-adjust: unset; math-depth: unset; position: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; color: unset; font: unset; font-palette: unset; font-synthesis: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; animation-trigger: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-shape: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-decoration-break: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; caret-shape: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; column-rule: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: unset; cx: unset; cy: unset; d: unset; dominant-baseline: unset; dynamic-range-limit: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interactivity: unset; interest-delay: unset; interpolate-size: unset; isolation: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; list-style: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-justify: unset; text-overflow: unset; text-shadow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; text-wrap: unset; timeline-scope: unset; timeline-trigger: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; trigger-scope: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; view-transition-scope: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; display: none !important; }

#settings-section { width: 100%; background: rgb(240, 242, 245); padding: 36px 24px 64px; box-sizing: border-box; font-family: Inter, -apple-system, sans-serif; }

#settings-section .settings-inner { max-width: 760px; margin: 0px auto; }

#settings-section .settings-eyebrow { display: block; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.7rem; font-weight: 700; color: rgb(160, 174, 192); margin-bottom: 10px; }

#settings-section .settings-heading { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: rgb(30, 45, 61); margin: 0px 0px 6px; line-height: 1.1; }

#settings-section .settings-sub { font-size: 0.9rem; color: rgb(160, 174, 192); margin: 0px 0px 36px; }

#settings-section .set-card { background: rgb(255, 255, 255); border-radius: 20px; margin-bottom: 14px; overflow: hidden; cursor: pointer; }

#settings-section .set-card:last-child { margin-bottom: 0px; }

#settings-section .set-card-btn { width: 100%; display: flex; align-items: center; gap: 18px; padding: 22px 24px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; text-align: left; box-sizing: border-box; }

#settings-section .set-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }

#settings-section .set-text { flex: 1 1 0%; min-width: 0px; }

#settings-section .set-title { display: block; font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 4px; line-height: 1.2; }

#settings-section .set-sub { display: block; font-size: 0.8rem; color: rgb(160, 174, 192); line-height: 1.4; }

#settings-section .set-chevron { font-size: 0.75rem; color: rgb(192, 200, 212); flex-shrink: 0; transition: transform 0.25s; }

#settings-section .set-card.open .set-chevron { transform: rotate(180deg); }

#settings-section .set-body { display: none; padding: 0px 24px 22px 94px; font-size: 0.85rem; color: rgb(107, 122, 141); line-height: 1.65; border-top: 1px solid rgb(240, 242, 245); }

#settings-section .set-card.open .set-body { display: block; }

.sl-log-row { display: flex; align-items: center; gap: 12px; padding: 13px 0px; border-bottom: 1px solid rgb(240, 242, 245); font-size: 0.88rem; color: rgb(30, 45, 61); font-weight: 500; }

.sl-last { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.sl-log-icon { font-size: 1.1rem; flex-shrink: 0; width: 24px; text-align: center; }

.sl-log-label { flex: 1 1 0%; }

.sl-log-date { font-size: 0.75rem; color: rgb(160, 174, 192); flex-shrink: 0; }

.sl-cta { display: inline-block; margin-top: 16px; background: rgb(74, 124, 89); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 13px 26px; font-size: 0.88rem; font-weight: 700; cursor: pointer; letter-spacing: 0.01em; transition: background 0.2s; }

.sl-cta:hover { background: rgb(61, 107, 74); }

.mj-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0px; border-bottom: 1px solid rgb(240, 242, 245); }

.mj-last { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.mj-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }

.mj-content { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0%; }

.mj-title { font-size: 0.9rem; font-weight: 700; color: rgb(30, 45, 61); }

.mj-date { font-size: 0.75rem; color: rgb(160, 174, 192); }

.mj-actions { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

.mj-btn-primary { background: rgb(74, 124, 89); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 13px 26px; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: background 0.2s; }

.mj-btn-primary:hover { background: rgb(61, 107, 74); }

.mj-btn-ghost { background: transparent; color: rgb(74, 124, 89); border: 2px solid rgb(200, 216, 224); border-radius: 50px; padding: 13px 26px; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: border-color 0.2s, color 0.2s; }

.mj-btn-ghost:hover { border-color: rgb(74, 124, 89); }

.fp-members { display: flex; gap: 24px; padding: 8px 0px 20px; flex-wrap: wrap; }

.fp-member { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.fp-avatar { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; }

.fp-add { background: transparent; border: 2px dashed rgb(200, 212, 224); color: rgb(160, 174, 192); font-size: 1.6rem; font-weight: 300; cursor: pointer; }

.fp-name { font-size: 0.88rem; font-weight: 700; color: rgb(30, 45, 61); }

.fp-age { font-size: 0.75rem; color: rgb(160, 174, 192); }

.sr-section { margin-bottom: 4px; }

.sr-label { font-size: 0.92rem; font-weight: 700; color: rgb(30, 45, 61); margin: 0px 0px 6px; }

.sr-points { font-size: 0.82rem; color: rgb(107, 122, 141); margin: 0px 0px 10px; }

.sr-bar-wrap { height: 10px; background: rgb(229, 233, 238); border-radius: 999px; overflow: hidden; margin-bottom: 12px; }

.sr-bar { height: 100%; background: rgb(74, 124, 89); border-radius: 999px; transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); }

.sr-hint { font-size: 0.84rem; font-weight: 600; color: rgb(61, 107, 74); margin: 0px 0px 4px; }

.pref-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0px; border-bottom: 1px solid rgb(240, 242, 245); cursor: pointer; gap: 16px; }

.pref-last { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.pref-info { display: flex; flex-direction: column; gap: 3px; flex: 1 1 0%; }

.pref-title { font-size: 0.9rem; font-weight: 600; color: rgb(30, 45, 61); }

.pref-sub { font-size: 0.75rem; color: rgb(160, 174, 192); }

.pref-toggle { position: relative; flex-shrink: 0; }

.pref-toggle input { position: absolute; opacity: 0; width: 0px; height: 0px; }

.pref-track { display: block; width: 48px; height: 28px; border-radius: 999px; background: rgb(209, 213, 219); position: relative; transition: background 0.25s; }

.pref-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.18) 0px 1px 4px; transition: transform 0.25s; }

.pref-track.on { background: rgb(74, 124, 89); }

.pref-track.on::after { transform: translateX(20px); }

.week-section { background: radial-gradient(circle at right top, rgb(31, 49, 84), rgb(7, 23, 43) 70%); padding: 60px 5vw 50px; color: white; font-family: Inter, sans-serif; border-radius: 28px; margin-bottom: 0px; }

.week-section .wk-eyebrow { letter-spacing: 4px; font-weight: 700; color: rgb(184, 199, 217); font-size: 0.75rem; margin-bottom: 8px; }

.week-section .wk-title { font-family: Georgia, serif; font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0px 0px 10px; font-weight: 700; line-height: 1.1; color: rgb(255, 255, 255) !important; }

.week-section .wk-sub { color: rgb(201, 211, 223); font-size: 1rem; margin: 0px 0px 36px; }

.wk-insight-card { margin-bottom: 28px; padding: 32px 36px; border-radius: 22px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); display: flex; align-items: center; gap: 28px; box-shadow: rgba(0, 0, 0, 0.22) 0px 20px 60px; }

.wk-insight-icon { width: 80px; height: 80px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; flex-shrink: 0; }

.wk-insight-card h2 { margin: 0px 0px 10px; font-size: 1.3rem; font-weight: 700; color: rgb(255, 255, 255) !important; }

.wk-insight-card p { margin: 0px; color: rgb(215, 222, 232); line-height: 1.6; font-size: 0.9rem; }

.wk-mood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.wk-mood-card { background: rgb(255, 255, 255); color: rgb(15, 32, 56); border-radius: 22px; padding: 26px 24px 22px; box-shadow: rgba(0, 0, 0, 0.2) 0px 14px 40px; }

.wk-mood-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }

.wk-mood-icon { width: 52px; height: 52px; border-radius: 50%; background: rgb(243, 246, 248); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; }

.wk-mood-card h3 { font-size: 1.1rem; font-weight: 700; color: rgb(15, 32, 56); margin: 0px; }

.wk-bar { height: 7px; background: rgb(225, 229, 234); border-radius: 999px; overflow: hidden; margin-bottom: 16px; }

.wk-bar i { display: block; height: 100%; border-radius: 999px; }

.wk-card-green .wk-bar i { background: rgb(127, 170, 114); }

.wk-card-blue .wk-bar i { background: rgb(111, 169, 222); }

.wk-card-pink .wk-bar i { background: rgb(237, 120, 150); }

.wk-card-purple .wk-bar i { background: rgb(181, 139, 229); }

.wk-card-yellow .wk-bar i { background: rgb(245, 181, 50); }

.wk-card-navy .wk-bar i { background: rgb(29, 75, 130); }

.wk-card-green .wk-pct { color: rgb(127, 170, 114); }

.wk-card-blue .wk-pct { color: rgb(111, 169, 222); }

.wk-card-pink .wk-pct { color: rgb(237, 120, 150); }

.wk-card-purple .wk-pct { color: rgb(181, 139, 229); }

.wk-card-yellow .wk-pct { color: rgb(245, 181, 50); }

.wk-card-navy .wk-pct { color: rgb(29, 75, 130); }

.wk-card-bottom { display: flex; justify-content: space-between; align-items: center; }

.wk-pct { font-size: 1.35rem; font-weight: 800; }

.wk-mood-label { font-size: 0.78rem; color: rgb(109, 119, 136); margin: 0px; text-align: right; }

.wk-footer { text-align: center; color: rgb(203, 214, 227); margin-top: 32px; font-size: 0.95rem; }

@media (max-width: 768px) {
  .wk-mood-grid { grid-template-columns: 1fr; }
  .wk-insight-card { flex-direction: column; align-items: flex-start; }
}

#page-profile { background: var(--hu-white-mist); min-height: 100vh; padding-bottom: 80px; }

@keyframes prf-grad-shift { 
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes prf-float { 
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-8px) rotate(1deg); }
  66% { transform: translateY(-4px) rotate(-1deg); }
}

@keyframes prf-pulse-glow { 
  0%, 100% { box-shadow: rgba(36, 52, 71, 0) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(36, 52, 71, 0.12) 0px 0px 0px 12px; }
}

@keyframes prf-fade-up { 
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0px); }
}

@keyframes prf-counter { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes prf-sparkle { 
  0% { transform: scale(0) rotate(0deg); opacity: 0; }
  50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes prf-energy-pulse { 
  0%, 100% { opacity: 0.6; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.02); }
}

@keyframes prf-bloom { 
  0% { opacity: 0; transform: scale(0.94) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}

.prf-hero { padding: 48px 24px 40px; text-align: center; border-radius: 0px 0px 32px 32px; }

.prf-hero-blur-1 { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(36, 52, 71, 0.22) 0%, transparent 70%); top: -60px; left: -60px; pointer-events: none; animation: 8s ease-in-out 0s infinite normal none running prf-float; }

.prf-hero-blur-2 { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(123, 191, 212, 0.2) 0%, transparent 70%); bottom: -40px; right: -40px; pointer-events: none; animation: 11s ease-in-out 0s infinite reverse none running prf-float; }

.prf-hero-blur-3 { position: absolute; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(181, 167, 212, 0.18) 0%, transparent 70%); top: 30%; left: 65%; pointer-events: none; animation: 9s ease-in-out 2s infinite normal none running prf-float; }

.prf-avatar-ring { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; animation: 3s ease-in-out 0s infinite normal none running prf-pulse-glow; }

.prf-avatar { width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(135deg, rgb(221, 229, 216), rgb(232, 240, 245)); border: 3px solid rgba(255, 255, 255, 0.9); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 32px; cursor: pointer; transition: 0.3s; position: relative; overflow: hidden; }

.prf-avatar:hover { transform: scale(1.04); }

.prf-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.prf-avatar-edit { position: absolute; bottom: 2px; right: 2px; width: 26px; height: 26px; border-radius: 50%; background: var(--navy-primary); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; border: 2px solid rgb(255, 255, 255); }

.prf-welcome { font-family: Georgia, serif; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; color: rgb(45, 61, 90); margin-bottom: 6px; line-height: 1.15; animation: 0.6s ease 0s 1 normal both running prf-fade-up; }

.prf-welcome-sub { font-size: 0.95rem; color: rgb(106, 122, 138); line-height: 1.7; margin-bottom: 22px; animation: 0.7s ease 0.1s 1 normal both running prf-fade-up; }

.prf-membership { display: inline-flex; align-items: center; gap: 6px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; padding: 4px 0px; font-size: 0.76rem; font-weight: 700; color: rgba(255, 255, 255, 0.8); margin-bottom: 22px; box-shadow: none; }

.prf-hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 24px; animation: 0.8s ease 0.2s 1 normal both running prf-fade-up; }

.prf-stat-pill { background: none; backdrop-filter: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; padding: 4px 0px; font-size: 0.82rem; font-weight: 700; color: rgba(255, 255, 255, 0.9); box-shadow: none; display: flex; align-items: center; gap: 6px; }

.prf-stat-n { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--sage-dk); }

.prf-hero-btn { background: rgba(255, 255, 255, 0.15); backdrop-filter: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; padding: 10px 24px; font-size: 0.88rem; font-weight: 700; color: rgb(255, 255, 255); cursor: pointer; font-family: inherit; transition: 0.22s; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px; }

.prf-hero-btn:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); box-shadow: none; }

.prf-content { max-width: 860px; margin: 0px auto; padding: 28px 18px 0px; display: flex; flex-direction: column; gap: 20px; }

.prf-glass { background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 28px; box-shadow: rgba(0, 0, 0, 0.07) 0px 8px 32px; overflow: hidden; transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1); animation: 0.55s ease 0s 1 normal both running prf-bloom; }

.prf-glass:hover { box-shadow: rgba(0, 0, 0, 0.1) 0px 16px 48px; transform: translateY(-2px); }

.prf-glass-body { padding: 26px 24px; }

.prf-week-card { background: rgb(30, 45, 61); position: relative; overflow: hidden; }

.prf-week-card::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(at 20% 50%, rgba(36, 52, 71, 0.18) 0%, transparent 60%), radial-gradient(at 80% 20%, rgba(123, 191, 212, 0.14) 0%, transparent 50%), radial-gradient(at 60% 80%, rgba(181, 167, 212, 0.12) 0%, transparent 40%); pointer-events: none; }

.prf-week-header { padding: 28px 26px 20px; position: relative; }

.prf-week-eyebrow { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 6px; }

.prf-week-title { font-family: Georgia, serif; font-size: clamp(1.6rem, 3.5vw, 2rem); font-weight: 700; color: rgb(255, 255, 255); line-height: 1.12; margin-bottom: 6px; }

.prf-week-sub { font-size: 0.88rem; color: rgba(255, 255, 255, 0.65); line-height: 1.6; }

.prf-mood-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0px 26px 20px; position: relative; }

.prf-mood-chip { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; padding: 14px 12px; text-align: center; transition: 0.22s; cursor: pointer; position: relative; overflow: hidden; }

.prf-mood-chip::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%); }

.prf-mood-chip:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.02); }

.prf-mood-emoji { font-size: 1.4rem; margin-bottom: 4px; }

.prf-mood-name { font-size: 0.68rem; font-weight: 700; color: rgba(30, 45, 61, 0.75); margin-bottom: 6px; }

.prf-mood-bar-wrap { height: 4px; background: rgba(30, 45, 61, 0.12); border-radius: 2px; overflow: hidden; }

.prf-mood-bar { height: 100%; border-radius: 2px; transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); width: 0px; }

.prf-mood-pct { font-size: 0.7rem; font-weight: 800; color: rgb(30, 45, 61); margin-top: 4px; }

.prf-week-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 255, 255, 0.06); border-top: 1px solid rgba(255, 255, 255, 0.1); }

.prf-week-stat { padding: 16px 14px; text-align: center; }

.prf-week-stat-n { font-family: Georgia, serif; font-size: 1.5rem; font-weight: 700; color: rgb(255, 255, 255); display: block; line-height: 1; margin-bottom: 3px; }

.prf-week-stat-l { font-size: 0.68rem; font-weight: 700; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.07em; }

.prf-insight-strip { padding: 16px 26px 20px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); position: relative; }

.prf-insight-line { display: flex; align-items: flex-start; gap: 8px; font-size: 0.84rem; color: rgba(255, 255, 255, 0.78); line-height: 1.55; animation: 0.5s ease 0s 1 normal both running prf-fade-up; }

.prf-insight-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }

.prf-week-actions { padding: 14px 26px 26px; display: flex; gap: 10px; flex-wrap: wrap; position: relative; }

.prf-week-btn-primary { flex: 1 1 0%; min-width: 140px; padding: 12px 20px; border-radius: 50px; background: rgba(255, 255, 255, 0.95); color: rgb(45, 61, 90); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-weight: 800; font-size: 0.86rem; font-family: inherit; transition: 0.22s; box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 16px; }

.prf-week-btn-primary:hover { background: rgb(255, 255, 255); transform: translateY(-2px); }

.prf-week-btn-ghost { flex: 1 1 0%; min-width: 120px; padding: 12px 18px; border-radius: 50px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.25); cursor: pointer; font-weight: 700; font-size: 0.82rem; font-family: inherit; transition: 0.22s; }

.prf-week-btn-ghost:hover { background: rgba(255, 255, 255, 0.2); }

.prf-section-card { background: rgb(255, 255, 255); border-radius: 22px; padding: 24px 22px; box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 20px; border: 1px solid rgba(0, 0, 0, 0.04); transition: 0.24s; }

.prf-section-card:hover { box-shadow: rgba(0, 0, 0, 0.09) 0px 10px 36px; }

.prf-section-eyebrow { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }

.prf-section-title { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 700; color: rgb(45, 61, 90); margin-bottom: 6px; line-height: 1.25; }

.prf-section-desc { font-size: 0.84rem; color: rgb(138, 144, 152); line-height: 1.65; margin-bottom: 16px; }

.prf-spectrum { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.prf-spectrum-pill { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: 0.2s; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }

.prf-spectrum-pill:hover { transform: scale(1.04); border-color: rgba(0, 0, 0, 0.1); }

.prf-spectrum-pill.prf-active { transform: scale(1.06); border-color: rgba(0, 0, 0, 0.15); }

.prf-quote-card { background: linear-gradient(135deg, rgb(234, 244, 235), rgb(232, 240, 245)); border-radius: 16px; padding: 16px 18px; border-left: 3px solid var(--sage); margin-bottom: 10px; font-style: italic; color: rgb(45, 61, 90); font-size: 0.88rem; line-height: 1.65; }

.prf-food-cards { display: flex; flex-direction: column; gap: 10px; }

.prf-food-card { display: flex; align-items: center; gap: 14px; background: rgb(248, 246, 242); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: 0.2s; }

.prf-food-card:hover { background: rgb(234, 244, 235); transform: translateX(3px); }

.prf-food-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }

.prf-food-name { font-weight: 700; font-size: 0.88rem; color: rgb(45, 61, 90); margin-bottom: 2px; }

.prf-food-note { font-size: 0.76rem; color: rgb(138, 144, 152); line-height: 1.4; }

.prf-wins-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

@media (max-width: 480px) {
  .prf-wins-grid { grid-template-columns: 1fr; }
}

.prf-win { background: linear-gradient(135deg, rgb(253, 252, 250), rgb(245, 248, 255)); border-radius: 16px; padding: 18px 16px; border: 1px solid rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; cursor: pointer; transition: 0.22s; }

.prf-win:hover { transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 28px; }

.prf-win-icon { font-size: 1.6rem; margin-bottom: 8px; }

.prf-win-n { font-family: Georgia, serif; font-size: 1.4rem; font-weight: 700; color: rgb(45, 61, 90); line-height: 1; margin-bottom: 3px; }

.prf-win-label { font-size: 0.72rem; font-weight: 700; color: rgb(138, 144, 152); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; }

.prf-win-text { font-size: 0.8rem; color: rgb(106, 122, 138); line-height: 1.5; }

.prf-win-sparkle { position: absolute; top: 12px; right: 12px; font-size: 0.9rem; animation: 2.5s ease-in-out 0s infinite normal none running prf-sparkle; }

.prf-energy-timeline { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }

.prf-energy-row { display: flex; align-items: center; gap: 12px; }

.prf-energy-time { font-size: 0.72rem; font-weight: 700; color: rgb(138, 144, 152); width: 54px; flex-shrink: 0; text-align: right; }

.prf-energy-bar-wrap { flex: 1 1 0%; height: 10px; background: rgb(240, 236, 232); border-radius: 5px; overflow: hidden; }

.prf-energy-bar { height: 100%; border-radius: 5px; animation: 3s ease-in-out 0s infinite normal none running prf-energy-pulse; transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1); width: 0px; }

.prf-energy-label { font-size: 0.7rem; font-weight: 700; color: rgb(45, 61, 90); width: 60px; flex-shrink: 0; }

.prf-support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

@media (max-width: 480px) {
  .prf-support-grid { grid-template-columns: repeat(2, 1fr); }
}

.prf-support-tile { background: rgb(248, 246, 242); border-radius: 16px; padding: 16px 12px; text-align: center; cursor: pointer; transition: 0.22s; border: 2px solid transparent; }

.prf-support-tile:hover { background: rgb(234, 244, 235); border-color: rgba(36, 52, 71, 0.3); transform: scale(1.03); }

.prf-support-tile.prf-support-open { background: rgb(234, 244, 235); border-color: var(--navy-primary); border-radius: 16px 16px 0px 0px; }

.prf-support-icon { font-size: 1.6rem; margin-bottom: 6px; }

.prf-support-name { font-size: 0.74rem; font-weight: 700; color: rgb(45, 61, 90); }

.prf-support-detail { display: none; background: rgb(234, 244, 235); border-radius: 0px 0px 16px 16px; padding: 14px; font-size: 0.8rem; color: rgb(49, 70, 95); line-height: 1.6; border-top-width: medium; border-top-style: none; border-top-color: currentcolor; margin-top: -2px; }

.prf-support-detail.prf-show { display: block; animation: 0.3s ease 0s 1 normal both running prf-bloom; }

.prf-suggestion { display: flex; align-items: flex-start; gap: 12px; background: rgb(248, 246, 242); border-radius: 16px; padding: 16px 14px; margin-bottom: 10px; cursor: pointer; transition: 0.2s; border: 1.5px solid transparent; }

.prf-suggestion:hover { background: rgb(234, 244, 235); border-color: rgba(36, 52, 71, 0.25); }

.prf-suggestion-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

.prf-suggestion-body { flex: 1 1 0%; }

.prf-suggestion-text { font-size: 0.86rem; color: rgb(45, 61, 90); line-height: 1.55; font-weight: 600; margin-bottom: 8px; }

.prf-suggestion-actions { display: flex; gap: 7px; flex-wrap: wrap; }

.prf-sug-btn { padding: 6px 14px; border-radius: 6px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 0.74rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.18s; }

.prf-sug-btn-sage { background: var(--sage-lt); color: var(--sage-dk); }

.prf-sug-btn-sage:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.prf-sug-btn-outline { background: transparent; border: 1.5px solid rgb(224, 219, 212); color: rgb(106, 122, 138); }

.prf-sug-btn-outline:hover { border-color: var(--navy-primary); color: var(--sage-dk); }

.prf-journal-prompt { font-size: 1rem; color: rgb(45, 61, 90); font-weight: 600; line-height: 1.6; margin-bottom: 14px; font-style: italic; }

.prf-journal-input { width: 100%; padding: 14px 16px; border-radius: 16px; border: 1.5px solid rgb(232, 228, 222); font-size: 0.88rem; font-family: inherit; color: rgb(45, 61, 90); background: rgb(250, 248, 245); resize: vertical; outline: none; line-height: 1.65; transition: border-color 0.18s; min-height: 90px; box-sizing: border-box; }

.prf-journal-input:focus { border-color: var(--navy-primary); background: rgb(255, 255, 255); }

.prf-journal-tools { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.prf-journal-tool { display: flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 50px; border: 1.5px solid rgb(232, 228, 222); background: transparent; font-size: 0.76rem; font-weight: 700; color: rgb(106, 122, 138); cursor: pointer; font-family: inherit; transition: 0.18s; }

.prf-journal-tool:hover { border-color: var(--navy-primary); color: var(--sage-dk); }

.prf-card-accordion { background: radial-gradient(circle at right top, rgb(31, 49, 84), rgb(7, 23, 43) 70%); border-radius: 22px; box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 32px; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; }

.prf-card-acc-header { display: flex; align-items: center; gap: 14px; padding: 20px 22px; cursor: pointer; transition: background 0.2s; user-select: none; }

.prf-card-acc-header:hover { background: rgba(255, 255, 255, 0.06); }

.prf-card-acc-icon { width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }

.prf-card-acc-text { flex: 1 1 0%; }

.prf-card-acc-title { font-family: Georgia, serif; font-size: 1rem; font-weight: 700; color: rgb(255, 255, 255); margin-bottom: 2px; }

.prf-card-acc-sub { font-size: 0.78rem; color: rgba(255, 255, 255, 0.55); line-height: 1.4; }

.prf-card-acc-chev { font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); transition: transform 0.25s; }

.prf-card-acc-header.prf-acc-open .prf-card-acc-chev { transform: rotate(180deg); }

.prf-card-acc-body { display: none; padding: 0px 22px 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); }

.prf-card-acc-body.prf-acc-open { display: block; animation: 0.3s ease 0s 1 normal both running prf-bloom; }

.prf-log-item { display: flex; align-items: center; gap: 10px; padding: 10px 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.84rem; color: rgba(255, 255, 255, 0.85); }

.prf-log-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.prf-log-icon { font-size: 1.1rem; width: 28px; text-align: center; }

.prf-log-text { flex: 1 1 0%; color: rgb(45, 61, 90); font-weight: 600; }

.prf-log-date { font-size: 0.7rem; color: rgb(187, 187, 187); }

.prf-milestone { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0px; border-bottom: 1px solid rgb(245, 240, 235); }

.prf-milestone:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.prf-milestone-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }

.prf-milestone-body { flex: 1 1 0%; }

.prf-milestone-title { font-size: 0.86rem; font-weight: 700; color: rgb(45, 61, 90); margin-bottom: 2px; }

.prf-milestone-date { font-size: 0.72rem; color: rgb(154, 158, 164); }

.prf-rewards-bar-wrap { height: 8px; background: rgb(240, 236, 232); border-radius: 4px; overflow: hidden; margin: 8px 0px; }

.prf-rewards-bar { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--sage), var(--sage-dk)); transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1); width: 0px; }

.prf-pref-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0px; border-bottom: 1px solid rgb(245, 240, 235); }

.prf-pref-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.prf-pref-label { font-size: 0.86rem; font-weight: 600; color: rgb(45, 61, 90); }

.prf-pref-sub { font-size: 0.74rem; color: rgb(154, 158, 164); margin-top: 2px; }

.prf-toast-success { display: none; align-items: center; gap: 10px; background: var(--sage-lt); border: 1.5px solid rgba(36, 52, 71, 0.25); border-radius: 14px; padding: 12px 16px; margin-top: 12px; font-size: 0.84rem; color: var(--sage-dk); font-weight: 600; }

.prf-toast-success.prf-show { display: flex; animation: 0.3s ease 0s 1 normal both running prf-fade-up; }

@media (max-width: 640px) {
  .prf-mood-grid { grid-template-columns: repeat(3, 1fr); }
  .prf-week-stats { grid-template-columns: repeat(3, 1fr); }
  .prf-support-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 380px) {
  .prf-mood-grid { grid-template-columns: repeat(2, 1fr); }
  .prf-week-stats { grid-template-columns: 1fr 1fr; }
}

.rhy-tabs { display: flex; gap: 0px; overflow-x: auto; padding: 0px 20px; background: rgb(255, 255, 255); border-bottom: 1px solid rgba(0, 0, 0, 0.06); position: sticky; top: 68px; z-index: 90; justify-content: center; flex-wrap: wrap; }

.rhy-tabs::-webkit-scrollbar { display: none; }

.rhy-tab { flex-shrink: 0; padding: 14px 16px; background: none; border-width: medium medium 3px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: initial; font-size: 0.8rem; font-weight: 700; color: var(--rhy-grey-dk); cursor: pointer; font-family: inherit; white-space: nowrap; transition: var(--rhy-tr); }

.rhy-tab:hover { color: var(--rhy-navy); }

.rhy-tab.rhy-tab-active { color: var(--rhy-sage-dk); border-bottom-color: var(--rhy-sage); }

.rhy-panel { display: none; }

.rhy-panel.rhy-panel-active { display: block; }

.rhy-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

@media (max-width: 640px) {
  .rhy-2col { grid-template-columns: 1fr; }
}

.rhy-scale-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }

.rhy-scale-row input[type="range"] { flex: 1 1 0%; accent-color: var(--rhy-sage); }

.rhy-scale-val { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--rhy-sage-lt); color: var(--rhy-sage-dk); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; }

.rhy-supp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 4px; }

@media (max-width: 480px) {
  .rhy-supp-grid { grid-template-columns: repeat(2, 1fr); }
}

.rhy-supp-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--rhy-grey); border: 2px solid transparent; border-radius: 12px; padding: 12px 6px; cursor: pointer; font-family: inherit; transition: var(--rhy-tr); font-size: 0.72rem; font-weight: 700; color: rgb(90, 96, 104); }

.rhy-supp-btn span:first-child { font-size: 1.4rem; line-height: 1; }

.rhy-supp-btn:hover { border-color: var(--rhy-sage-lt); }

.rhy-supp-btn.rhy-on { background: var(--rhy-sage-lt); border-color: var(--rhy-sage); color: var(--rhy-sage-dk); }

.rhy-move-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 6px; }

@media (max-width: 480px) {
  .rhy-move-grid { grid-template-columns: repeat(2, 1fr); }
}

.rhy-move-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--rhy-blue); border: 2px solid transparent; border-radius: 14px; padding: 14px 6px; cursor: pointer; font-family: inherit; transition: var(--rhy-tr); font-size: 0.72rem; font-weight: 700; color: var(--rhy-blue-dk); }

.rhy-move-btn span:first-child { font-size: 1.5rem; line-height: 1; }

.rhy-move-btn:hover { border-color: var(--rhy-blue-dk); }

.rhy-move-btn.rhy-on { background: var(--rhy-blue-dk); color: rgb(255, 255, 255); border-color: var(--rhy-blue-dk); }

.rhy-streak-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }

.rhy-streak-stat { background: var(--rhy-sage-lt); border-radius: 14px; padding: 14px 10px; text-align: center; }

.rhy-streak-stat-n { font-family: Georgia, serif; font-size: 1.6rem; font-weight: 700; color: var(--rhy-sage-dk); line-height: 1; }

.rhy-streak-stat-l { font-size: 0.65rem; font-weight: 700; color: var(--rhy-grey-dk); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 3px; }

.rhy-insight-example { background: linear-gradient(135deg, var(--rhy-sage-lt), #edf5ff); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px; font-size: 0.88rem; color: var(--rhy-navy); line-height: 1.65; border-left: 3px solid var(--rhy-sage); font-style: italic; }

.rhy-snapshot-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }

@media (max-width: 480px) {
  .rhy-snapshot-checks { grid-template-columns: 1fr; }
}

.rhy-check-label { display: flex; align-items: center; gap: 9px; background: var(--rhy-grey); border-radius: 10px; padding: 10px 12px; cursor: pointer; font-size: 0.83rem; font-weight: 600; color: rgb(90, 96, 104); transition: var(--rhy-tr); }

.rhy-check-label input { accent-color: var(--rhy-sage); width: 16px; height: 16px; flex-shrink: 0; }

.rhy-check-label:hover { background: var(--rhy-sage-lt); color: var(--rhy-sage-dk); }

.rhy-select { width: 100%; padding: 11px 16px; border-radius: 50px; border: 1.5px solid rgb(232, 228, 222); font-size: 0.88rem; font-family: inherit; background: var(--rhy-mist); color: var(--rhy-navy); outline: none; cursor: pointer; transition: border-color 0.18s; margin-top: 6px; }

.rhy-select:focus { border-color: var(--rhy-sage); }

.rhy-challenge-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }

.rhy-challenge { display: flex; align-items: center; gap: 14px; background: var(--rhy-grey); border-radius: 14px; padding: 14px 16px; cursor: pointer; transition: var(--rhy-tr); }

.rhy-challenge:hover { background: var(--rhy-sage-lt); transform: translateX(3px); }

.rhy-challenge-icon { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

.rhy-challenge-body { flex: 1 1 0%; min-width: 0px; }

.rhy-challenge-name { font-weight: 700; font-size: 0.88rem; color: var(--rhy-navy); margin-bottom: 2px; }

.rhy-challenge-desc { font-size: 0.74rem; color: var(--rhy-grey-dk); line-height: 1.4; }

.rhy-challenge-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgb(255, 255, 255); padding: 3px 8px; border-radius: 50px; color: var(--rhy-sage-dk); flex-shrink: 0; }

.rhy-family-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }

@media (max-width: 480px) {
  .rhy-family-grid { grid-template-columns: repeat(2, 1fr); }
}

.rhy-family-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--rhy-pink); border: 2px solid transparent; border-radius: 14px; padding: 14px 8px; cursor: pointer; font-family: inherit; transition: var(--rhy-tr); font-size: 0.74rem; font-weight: 700; color: var(--rhy-pink-dk); }

.rhy-family-btn span:first-child { font-size: 1.4rem; line-height: 1; }

.rhy-family-btn:hover { border-color: var(--rhy-pink-dk); transform: translateY(-2px); }

.rhy-family-btn.rhy-on { background: var(--rhy-pink-dk); color: rgb(255, 255, 255); }

.rhy-voice-card { background: linear-gradient(135deg, rgb(240, 246, 241) 0%, rgb(245, 240, 251) 100%); border: 1.5px dashed rgba(36, 52, 71, 0.4); }

.rhy-voice-prompt { background: rgba(255, 255, 255, 0.7); border-radius: 12px; padding: 14px 16px; font-size: 0.88rem; color: var(--rhy-grey-dk); line-height: 1.65; font-style: italic; margin-bottom: 14px; }

.rhy-card-success { display: none; align-items: center; gap: 8px; background: var(--rhy-sage-lt); border-radius: 10px; padding: 10px 14px; margin-top: 12px; font-size: 0.82rem; color: var(--rhy-sage-dk); font-weight: 600; }

.rhy-card-success.show { display: flex; }

.rhy-toggle-row { display: flex; align-items: center; justify-content: space-between; background: var(--rhy-grey); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }

.rhy-toggle-label { font-size: 0.84rem; font-weight: 600; color: rgb(90, 96, 104); }

.rhy-toggle { position: relative; width: 44px; height: 24px; cursor: pointer; }

.rhy-toggle input { opacity: 0; width: 0px; height: 0px; }

.rhy-toggle-slider { position: absolute; inset: 0px; background: rgb(204, 204, 204); border-radius: 24px; transition: 0.25s; }

.rhy-toggle-slider::before { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgb(255, 255, 255); left: 3px; top: 3px; transition: 0.25s; }

.rhy-toggle input:checked + .rhy-toggle-slider { background: var(--rhy-sage); }

.rhy-toggle input:checked + .rhy-toggle-slider::before { transform: translateX(20px); }

.prt-step4 { background: linear-gradient(135deg, rgb(244, 249, 244), rgb(237, 245, 255)); border: 1.5px solid rgba(36, 52, 71, 0.15); }

.ws-step-badge { display: inline-flex; align-items: center; background: var(--rhy-navy); color: rgb(255, 255, 255); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 50px; padding: 3px 10px; margin-bottom: 10px; }

.ws-recipient-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 6px; }

@media (max-width: 600px) {
  .ws-recipient-grid { grid-template-columns: repeat(2, 1fr); }
}

.ws-recipient-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--rhy-grey); border: 2px solid transparent; border-radius: 14px; padding: 16px 8px; cursor: pointer; font-family: inherit; transition: var(--rhy-tr); text-align: center; }

.ws-recipient-btn:hover { border-color: var(--rhy-navy); background: rgb(238, 240, 245); }

.ws-recipient-btn.ws-selected { background: var(--rhy-navy); border-color: var(--rhy-navy); }

.ws-recipient-btn.ws-selected .ws-recipient-name { color: rgb(255, 255, 255); }

.ws-recipient-icon { font-size: 1.6rem; line-height: 1; }

.ws-recipient-name { font-size: 0.74rem; font-weight: 700; color: var(--rhy-navy); line-height: 1.3; }

.ws-timeframe-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 6px; }

@media (max-width: 480px) {
  .ws-timeframe-grid { grid-template-columns: repeat(2, 1fr); }
}

.ws-timeframe-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--rhy-blue); border: 2px solid transparent; border-radius: 14px; padding: 16px 8px; cursor: pointer; font-family: inherit; transition: var(--rhy-tr); }

.ws-timeframe-btn:hover { border-color: var(--rhy-blue-dk); }

.ws-timeframe-btn.ws-tf-active { background: var(--rhy-blue-dk); border-color: var(--rhy-blue-dk); }

.ws-timeframe-btn.ws-tf-active .ws-tf-n, .ws-timeframe-btn.ws-tf-active .ws-tf-l { color: rgb(255, 255, 255); }

.ws-tf-n { font-family: Georgia, serif; font-size: 1.4rem; font-weight: 700; color: var(--rhy-blue-dk); line-height: 1; }

.ws-tf-l { font-size: 0.7rem; font-weight: 700; color: var(--rhy-blue-dk); }

.ws-custom-range { background: var(--rhy-mist); border-radius: 14px; padding: 14px; margin-top: 12px; border: 1.5px solid rgb(232, 228, 222); }

.ws-text-btn { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; font-size: 0.78rem; font-weight: 700; color: var(--rhy-sage-dk); padding: 4px 0px; text-decoration: underline; transition: var(--rhy-tr); }

.ws-text-btn:hover { color: var(--rhy-sage); }

.ws-create-btn { width: 100%; padding: 16px 24px; border-radius: 50px; background: linear-gradient(135deg, var(--rhy-navy), #3d5070); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: rgba(45, 61, 90, 0.3) 0px 5px 20px; transition: var(--rhy-tr); margin-bottom: 16px; }

.ws-create-btn:hover { transform: translateY(-2px); box-shadow: rgba(45, 61, 90, 0.4) 0px 8px 28px; }

.ws-share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }

@media (max-width: 400px) {
  .ws-share-row { grid-template-columns: 1fr; }
}

.ws-share-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 16px; border-radius: 50px; font-size: 0.84rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: var(--rhy-tr); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }

.ws-share-download { background: var(--rhy-sage-lt); color: var(--rhy-sage-dk); }

.ws-share-download:hover { background: var(--rhy-sage); color: rgb(255, 255, 255); }

.ws-share-email { background: rgb(238, 240, 245); color: var(--rhy-navy); }

.ws-share-email:hover { background: var(--rhy-navy); color: rgb(255, 255, 255); }

.ws-share-copy { background: var(--rhy-blue); color: var(--rhy-blue-dk); }

.ws-share-copy:hover { background: var(--rhy-blue-dk); color: rgb(255, 255, 255); }

.ws-share-print { background: var(--rhy-grey); color: var(--rhy-grey-dk); }

.ws-share-print:hover { background: var(--rhy-grey-dk); color: rgb(255, 255, 255); }

.ws-preview-card { background: linear-gradient(135deg, rgb(253, 252, 250), rgb(245, 248, 255)); border: 1.5px solid rgba(45, 61, 90, 0.1); }

.ws-doc { background: rgb(255, 255, 255); border-radius: 16px; padding: 24px; margin: 12px 0px; border: 1px solid rgba(0, 0, 0, 0.06); font-size: 0.88rem; }

.ws-doc-header { text-align: center; padding-bottom: 18px; border-bottom: 1.5px solid rgba(36, 52, 71, 0.2); margin-bottom: 18px; }

.ws-doc-title { font-family: Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--rhy-navy); margin-bottom: 4px; }

.ws-doc-meta { font-size: 0.75rem; color: var(--rhy-grey-dk); }

.ws-doc-section { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid rgb(240, 236, 232); }

.ws-doc-section:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; margin-bottom: 0px; padding-bottom: 0px; }

.ws-doc-section-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rhy-sage-dk); margin-bottom: 6px; }

.ws-doc-section-content { color: var(--rhy-navy); line-height: 1.65; font-size: 0.84rem; }

.ws-doc-insight { background: var(--rhy-sage-lt); border-left: 3px solid var(--rhy-sage); border-radius: 0px 10px 10px 0px; padding: 10px 14px; font-style: italic; color: var(--rhy-sage-dk); font-size: 0.83rem; line-height: 1.6; margin-top: 6px; }

.ws-privacy-note { background: var(--rhy-grey); border-radius: 12px; padding: 12px 14px; font-size: 0.8rem; color: var(--rhy-grey-dk); line-height: 1.6; margin-top: 12px; }

.ws-modal-overlay { display: none; position: fixed; inset: 0px; z-index: 9900; background: rgba(30, 40, 55, 0.48); backdrop-filter: blur(6px); align-items: center; justify-content: center; padding: 20px; }

.ws-modal-overlay.ws-open { display: flex; }

.ws-modal { background: rgb(255, 255, 255); border-radius: 24px; padding: 28px 26px; max-width: 480px; width: 100%; box-shadow: rgba(0, 0, 0, 0.18) 0px 24px 64px; position: relative; max-height: 90vh; overflow-y: auto; }

.ws-modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--rhy-grey); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-size: 0.9rem; color: var(--rhy-grey-dk); display: flex; align-items: center; justify-content: center; transition: var(--rhy-tr); }

.ws-modal-close:hover { background: var(--rhy-navy); color: rgb(255, 255, 255); }

.ws-step-card { border-top: 3px solid var(--rhy-sage-lt); }

.ws-step-card:nth-child(2) { border-top-color: var(--rhy-blue); }

.ws-step-card:nth-child(3) { border-top-color: rgb(221, 229, 216); }

.ws-step-card:nth-child(5) { border-top-color: var(--rhy-navy); }

@media print {
  body > :not(#ws-printframe) { display: none !important; }
  #ws-printframe { display: block !important; }
}

.prt-commission-example { background: linear-gradient(135deg, var(--rhy-navy), #3d5070); border-radius: 18px; padding: 24px 22px; color: rgb(255, 255, 255); margin-top: 24px; }

.prt-commission-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 8px; }

.prt-commission-title { font-family: Georgia, serif; font-size: 1.15rem; font-weight: 700; color: rgb(255, 255, 255); margin-bottom: 8px; line-height: 1.3; }

.prt-commission-body { font-size: 0.84rem; color: rgba(255, 255, 255, 0.78); line-height: 1.65; }

:root { --rhy-mist: #f6f8f7; --rhy-sage: #243447; --rhy-sage-lt: #eaf4eb; --rhy-sage-dk: #31465F; --rhy-pink: #f9e8ed; --rhy-pink-dk: #d4708a; --rhy-navy: #2d3d5a; --rhy-blue: #dff0f8; --rhy-blue-dk: #4a82a4; --rhy-grey: #f0f0ef; --rhy-grey-dk: #7a8085; --rhy-cream: #fdfcfa; --rhy-r: 20px; --rhy-sh: 0 2px 20px rgba(0,0,0,0.055); --rhy-sh-h: 0 8px 32px rgba(0,0,0,0.1); --rhy-tr: all 0.22s cubic-bezier(.4,0,.2,1); }

#page-rhythm { background: var(--hu-white-mist); min-height: 100vh; }

.rhy-header { background: linear-gradient(135deg, rgb(18, 33, 58) 0%, rgb(27, 46, 74) 100%); padding: 48px 24px 40px; text-align: center; color: rgb(255, 255, 255); border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-radius: 0px 0px 32px 32px; }

.rhy-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(36, 52, 71, 0.12); border: 1px solid rgba(36, 52, 71, 0.22); border-radius: 50px; padding: 5px 15px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rhy-sage-dk); margin-bottom: 16px; }

.rhy-title { font-family: Georgia, serif; font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 700; color: var(--rhy-navy); line-height: 1.12; margin-bottom: 12px; letter-spacing: -0.02em; }

.rhy-subtitle { font-size: 1rem; color: var(--rhy-grey-dk); line-height: 1.75; max-width: 560px; margin: 0px auto; }

.rhy-grid { max-width: 780px; margin: 0px auto; padding: 32px 20px 100px; display: flex; flex-direction: column; gap: 18px; }

.rhy-card { background: rgb(255, 255, 255); border-radius: var(--rhy-r); padding: 26px 24px; box-shadow: var(--rhy-sh); border: 1px solid rgba(0, 0, 0, 0.04); transition: var(--rhy-tr); }

.rhy-card:hover { box-shadow: var(--rhy-sh-h); transform: translateY(-2px); }

.rhy-card-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px; }

.rhy-card-label.sage { color: var(--rhy-sage-dk); }

.rhy-card-label.pink { color: var(--rhy-pink-dk); }

.rhy-card-label.navy { color: var(--rhy-navy); }

.rhy-card-label.blue { color: var(--rhy-blue-dk); }

.rhy-card-label.grey { color: var(--rhy-grey-dk); }

.rhy-card-title { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: var(--rhy-navy); margin-bottom: 6px; line-height: 1.25; }

.rhy-card-desc { font-size: 0.83rem; color: rgb(138, 144, 152); line-height: 1.6; margin-bottom: 18px; }

.rhy-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.rhy-pill { padding: 9px 17px; border-radius: 50px; font-size: 0.84rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: var(--rhy-tr); user-select: none; font-family: inherit; }

.rhy-pill-sage { background: var(--rhy-sage-lt); color: var(--rhy-sage-dk); }

.rhy-pill-sage.rhy-on { background: var(--rhy-sage); color: rgb(255, 255, 255); border-color: var(--rhy-sage-dk); }

.rhy-pill-pink { background: var(--rhy-pink); color: var(--rhy-pink-dk); }

.rhy-pill-pink.rhy-on { background: var(--rhy-pink-dk); color: rgb(255, 255, 255); }

.rhy-pill-navy { background: rgb(238, 240, 245); color: var(--rhy-navy); }

.rhy-pill-navy.rhy-on { background: var(--rhy-navy); color: rgb(255, 255, 255); }

.rhy-pill-blue { background: var(--rhy-blue); color: var(--rhy-blue-dk); }

.rhy-pill-blue.rhy-on { background: var(--rhy-blue-dk); color: rgb(255, 255, 255); }

.rhy-pill-grey { background: var(--rhy-grey); color: var(--rhy-grey-dk); }

.rhy-pill-grey.rhy-on { background: var(--rhy-grey-dk); color: rgb(255, 255, 255); }

.rhy-input { width: 100%; padding: 12px 16px; border-radius: 14px; border: 1.5px solid rgb(232, 228, 222); font-size: 0.88rem; font-family: inherit; color: var(--rhy-navy); background: var(--rhy-mist); resize: vertical; outline: none; line-height: 1.6; transition: border-color 0.18s; box-sizing: border-box; }

.rhy-input:focus { border-color: var(--rhy-sage); }

.rhy-input::placeholder { color: rgb(187, 187, 187); font-style: italic; }

.rhy-field-label { font-size: 0.72rem; font-weight: 700; color: rgb(154, 158, 164); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 7px; margin-top: 14px; display: block; }

.rhy-hydration-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 4px; }

.rhy-hydration-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; background: var(--rhy-blue); border: 2px solid transparent; border-radius: 14px; padding: 14px 8px; cursor: pointer; font-family: inherit; transition: var(--rhy-tr); font-size: 0.72rem; font-weight: 700; color: var(--rhy-blue-dk); }

.rhy-hydration-btn span:first-child { font-size: 1.8rem; line-height: 1; }

.rhy-hydration-btn:hover { border-color: var(--rhy-blue-dk); transform: translateY(-2px); }

.rhy-hydration-btn.rhy-on { background: var(--rhy-blue-dk); color: rgb(255, 255, 255); border-color: var(--rhy-blue-dk); transform: translateY(-2px); }

.rhy-streaks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }

@media (max-width: 480px) {
  .rhy-streaks { grid-template-columns: 1fr; }
}

.rhy-streak-btn { display: flex; align-items: center; gap: 10px; background: var(--rhy-grey); border: 2px solid transparent; border-radius: 12px; padding: 12px 14px; cursor: pointer; font-family: inherit; transition: var(--rhy-tr); font-size: 0.85rem; font-weight: 600; color: rgb(90, 96, 104); text-align: left; }

.rhy-streak-tick { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgb(204, 204, 204); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; transition: var(--rhy-tr); }

.rhy-streak-btn:hover { border-color: var(--rhy-sage-lt); }

.rhy-streak-btn.rhy-on { background: var(--rhy-sage-lt); border-color: var(--rhy-sage); color: var(--rhy-sage-dk); }

.rhy-streak-btn.rhy-on .rhy-streak-tick { background: var(--rhy-sage); border-color: var(--rhy-sage); color: rgb(255, 255, 255); }

.rhy-partner-card { background: linear-gradient(135deg, rgb(246, 240, 252) 0%, rgb(237, 245, 255) 100%); border: 1.5px solid rgba(90, 110, 180, 0.14); }

.rhy-partner-icon { width: 46px; height: 46px; border-radius: 14px; background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; box-shadow: rgba(90, 110, 180, 0.14) 0px 2px 8px; margin-bottom: 14px; }

.rhy-code-row { display: flex; gap: 8px; margin-top: 12px; }

.rhy-code-input { flex: 1 1 0%; padding: 11px 16px; border-radius: 50px; border: 1.5px solid rgba(90, 110, 180, 0.25); font-size: 0.88rem; font-family: inherit; background: rgb(255, 255, 255); outline: none; letter-spacing: 0.06em; text-transform: uppercase; transition: border-color 0.18s; }

.rhy-code-input:focus { border-color: rgb(106, 122, 200); }

.rhy-btn { padding: 11px 20px; border-radius: 50px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 0.84rem; transition: var(--rhy-tr); }

.rhy-btn-sage { background: linear-gradient(135deg, var(--rhy-sage), var(--rhy-sage-dk)); color: rgb(255, 255, 255); box-shadow: rgba(36, 52, 71, 0.1) 0px 3px 12px; }

.rhy-btn-sage:hover { transform: translateY(-2px); box-shadow: rgba(36, 52, 71, 0.15) 0px 6px 18px; }

.rhy-btn-outline { background: transparent; color: rgb(106, 122, 200); border: 1.5px solid rgba(90, 110, 180, 0.3); }

.rhy-btn-outline:hover { background: rgba(90, 110, 180, 0.07); }

.rhy-partner-btns { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.rhy-insight-card { background: linear-gradient(135deg, rgb(244, 249, 244) 0%, rgb(248, 244, 252) 100%); }

.rhy-insight-empty { font-size: 0.88rem; color: var(--rhy-grey-dk); line-height: 1.7; margin-bottom: 20px; padding: 16px; background: rgba(255, 255, 255, 0.7); border-radius: 12px; }

.rhy-insight-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }

@media (max-width: 480px) {
  .rhy-insight-chips { grid-template-columns: 1fr; }
}

.rhy-insight-chip { background: rgb(255, 255, 255); border-radius: 14px; padding: 14px 16px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 8px; }

.rhy-insight-chip-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rhy-grey-dk); margin-bottom: 4px; }

.rhy-insight-chip-val { font-family: Georgia, serif; font-size: 0.92rem; font-weight: 700; color: var(--rhy-navy); line-height: 1.3; }

.rhy-save-wrap { text-align: center; padding: 8px 0px; }

.rhy-save-btn { width: 100%; max-width: 400px; padding: 16px 32px; border-radius: 50px; background: linear-gradient(135deg, var(--rhy-sage), var(--rhy-sage-dk)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; box-shadow: rgba(36, 52, 71, 0.4) 0px 5px 20px; transition: var(--rhy-tr); }

.rhy-save-btn:hover { transform: translateY(-2px); box-shadow: rgba(36, 52, 71, 0.5) 0px 8px 28px; }

.rhy-success { display: none; align-items: center; gap: 12px; background: var(--rhy-sage-lt); border: 1.5px solid rgba(36, 52, 71, 0.3); border-radius: 16px; padding: 16px 20px; margin-top: 14px; font-size: 0.9rem; color: var(--rhy-sage-dk); font-weight: 600; }

.rhy-success.show { display: flex; }

.rhy-success-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--rhy-sage); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }

#page-partner { background: rgb(255, 255, 255); min-height: 100vh; }

.prt-hero { background: linear-gradient(150deg, rgb(30, 45, 61) 0%, rgb(45, 61, 90) 60%, rgb(61, 77, 106) 100%); padding: 64px 24px 56px; text-align: center; color: rgb(255, 255, 255); }

.prt-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; padding: 5px 15px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); margin-bottom: 18px; }

.prt-title { font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: rgb(255, 255, 255); line-height: 1.12; margin-bottom: 14px; letter-spacing: -0.02em; }

.prt-subtitle { font-size: 1rem; color: rgba(255, 255, 255, 0.72); line-height: 1.75; max-width: 580px; margin: 0px auto 32px; }

.prt-hero-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.prt-btn-primary { padding: 14px 28px; border-radius: 50px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: var(--rhy-sage); color: rgb(255, 255, 255); font-size: 0.92rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: var(--rhy-tr); box-shadow: rgba(36, 52, 71, 0.5) 0px 4px 16px; }

.prt-btn-primary:hover { transform: translateY(-2px); background: var(--rhy-sage-dk); }

.prt-btn-ghost { padding: 13px 26px; border-radius: 50px; border: 1.5px solid rgba(255, 255, 255, 0.35); background: transparent; color: rgb(255, 255, 255); font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: var(--rhy-tr); }

.prt-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

.prt-section { padding: 56px 24px; }

.prt-section-alt { background: var(--rhy-mist); }

.prt-content { max-width: 960px; margin: 0px auto; }

.prt-section-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rhy-sage-dk); margin-bottom: 8px; }

.prt-section-title { font-family: Georgia, serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--rhy-navy); line-height: 1.2; margin-bottom: 10px; }

.prt-section-sub { font-size: 0.95rem; color: var(--rhy-grey-dk); line-height: 1.75; max-width: 560px; margin-bottom: 40px; }

.prt-who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 32px; }

@media (max-width: 760px) {
  .prt-who-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .prt-who-grid { grid-template-columns: 1fr; }
}

.prt-who-card { background: rgb(255, 255, 255); border-radius: 18px; padding: 22px 18px; text-align: center; box-shadow: var(--rhy-sh); border: 1px solid rgba(0, 0, 0, 0.04); transition: var(--rhy-tr); }

.prt-who-card:hover { transform: translateY(-3px); box-shadow: var(--rhy-sh-h); }

.prt-who-icon { font-size: 2rem; margin-bottom: 10px; }

.prt-who-name { font-weight: 700; font-size: 0.88rem; color: var(--rhy-navy); line-height: 1.3; }

.prt-steps { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; }

.prt-step { display: flex; align-items: flex-start; gap: 16px; background: rgb(255, 255, 255); border-radius: 18px; padding: 22px 20px; box-shadow: var(--rhy-sh); }

.prt-step-num { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--rhy-sage), var(--rhy-sage-dk)); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; }

.prt-step-body h4 { font-weight: 800; font-size: 0.95rem; color: var(--rhy-navy); margin-bottom: 4px; }

.prt-step-body p { font-size: 0.84rem; color: var(--rhy-grey-dk); line-height: 1.65; }

.prt-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }

@media (max-width: 640px) {
  .prt-benefits { grid-template-columns: 1fr 1fr; }
}

.prt-benefit { background: rgb(255, 255, 255); border-radius: 16px; padding: 20px 16px; box-shadow: var(--rhy-sh); display: flex; flex-direction: column; gap: 7px; }

.prt-benefit-icon { font-size: 1.5rem; }

.prt-benefit-title { font-weight: 700; font-size: 0.85rem; color: var(--rhy-navy); line-height: 1.3; }

.prt-benefit-desc { font-size: 0.78rem; color: var(--rhy-grey-dk); line-height: 1.6; }

.prt-cta { background: linear-gradient(135deg, var(--rhy-sage-lt), #eaf5f0); padding: 56px 24px; text-align: center; }

.prt-cta-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

.footer-col.professionals button { color: rgba(200, 220, 255, 0.75); }

.footer-col.professionals button:hover { color: rgb(160, 200, 255); }

.hvl-btn { display: inline-flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); border: 1.5px solid rgba(36, 52, 71, 0.1); color: rgb(49, 70, 95); border-radius: 50px; padding: 9px 18px 9px 14px; font-size: 0.78rem; font-weight: 700; font-family: inherit; cursor: pointer; box-shadow: rgba(36, 52, 71, 0.18) 0px 2px 12px; transition: 0.2s; white-space: nowrap; position: relative; z-index: 10; }

.hvl-btn:hover { background: rgb(240, 248, 240); border-color: rgb(36, 52, 71); transform: translateY(-1px); box-shadow: rgba(36, 52, 71, 0.26) 0px 4px 18px; }

.hvl-btn:active { transform: translateY(0px); }

.hvl-btn-icon { width: 26px; height: 26px; background: linear-gradient(135deg, rgb(36, 52, 71), rgb(49, 70, 95)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }

.hvl-btn.hvl-kids { border-color: rgba(181, 167, 212, 0.45); color: rgb(90, 74, 138); }

.hvl-btn.hvl-kids .hvl-btn-icon { background: linear-gradient(135deg, rgb(188, 200, 180), rgb(122, 106, 176)); }

.hvl-btn.hvl-kids:hover { border-color: rgb(188, 200, 180); background: rgb(245, 242, 252); }

.hvl-btn.hvl-pmf { border-color: rgba(90, 110, 138, 0.35); color: rgb(61, 82, 104); }

.hvl-btn.hvl-pmf .hvl-btn-icon { background: linear-gradient(135deg, rgb(122, 150, 176), rgb(61, 82, 104)); }

.hvl-btn.hvl-pmf:hover { border-color: rgb(122, 150, 176); background: rgb(240, 244, 248); }

.hvl-btn.hvl-places { border-color: rgba(244, 169, 127, 0.4); color: rgb(176, 96, 48); }

.hvl-btn.hvl-places .hvl-btn-icon { background: linear-gradient(135deg, rgb(231, 201, 201), rgb(192, 104, 48)); }

.hvl-btn.hvl-places:hover { border-color: rgb(231, 201, 201); background: rgb(253, 245, 239); }

.hvl-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.48); backdrop-filter: blur(4px); z-index: 99990; display: flex; align-items: flex-end; justify-content: center; padding: 0px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }

.hvl-overlay.open { opacity: 1; pointer-events: all; }

@media (min-width: 600px) {
  .hvl-overlay { align-items: center; padding: 20px; }
}

.hvl-panel { background: rgb(250, 250, 248); border-radius: 28px 28px 0px 0px; width: 100%; max-width: 560px; padding: 0 0 env(safe-area-inset-bottom,0); box-shadow: rgba(0, 0, 0, 0.18) 0px -8px 48px; transform: translateY(32px); transition: transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1); max-height: 92vh; overflow-y: auto; }

.hvl-overlay.open .hvl-panel { transform: translateY(0px); }

@media (min-width: 600px) {
  .hvl-panel { border-radius: 24px; max-height: 88vh; }
}

.hvl-panel::-webkit-scrollbar { width: 0px; }

.hvl-handle { width: 38px; height: 4px; background: rgb(221, 216, 208); border-radius: 2px; margin: 14px auto 0px; }

.hvl-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }

.hvl-title-wrap { display: flex; align-items: center; gap: 10px; }

.hvl-title-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }

.hvl-title { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: rgb(43, 43, 43); line-height: 1.2; }

.hvl-section-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(36, 52, 71); display: block; margin-top: 1px; }

.hvl-close { background: rgb(240, 236, 230); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; cursor: pointer; color: rgb(91, 100, 112); flex-shrink: 0; transition: background 0.15s; }

.hvl-close:hover { background: rgb(232, 224, 216); }

.hvl-body { padding: 18px 22px 22px; }

.hvl-prompts { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }

.hvl-prompt { background: rgb(255, 255, 255); border: 1.5px solid rgb(232, 224, 214); border-radius: 50px; padding: 5px 12px; font-size: 0.71rem; color: rgb(91, 100, 112); cursor: pointer; font-family: inherit; transition: 0.15s; white-space: nowrap; }

.hvl-prompt:hover { border-color: rgb(36, 52, 71); color: rgb(49, 70, 95); background: rgb(240, 248, 240); }

.hvl-rec-area { background: rgb(255, 255, 255); border: 1.5px solid rgb(232, 224, 214); border-radius: 18px; padding: 18px; margin-bottom: 16px; }

.hvl-mic-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

.hvl-mic-btn { width: 52px; height: 52px; border-radius: 50%; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; transition: 0.2s; background: rgb(221, 229, 216); color: rgb(49, 70, 95); }

.hvl-mic-btn:hover { background: rgb(36, 52, 71); color: rgb(255, 255, 255); transform: scale(1.06); }

.hvl-mic-btn.hvl-listening { background: rgb(49, 70, 95); color: rgb(255, 255, 255); animation: 1.4s ease-in-out 0s infinite normal none running hvl-pulse; }

@keyframes hvl-pulse { 
  0% { box-shadow: rgba(74, 122, 78, 0.6) 0px 0px 0px 0px; }
  70% { box-shadow: rgba(74, 122, 78, 0) 0px 0px 0px 14px; }
  100% { box-shadow: rgba(74, 122, 78, 0) 0px 0px 0px 0px; }
}

.hvl-rec-btns { display: flex; flex-direction: column; gap: 5px; }

.hvl-rec-status { font-size: 0.72rem; font-weight: 700; color: rgb(36, 52, 71); letter-spacing: 0.04em; }

.hvl-rec-hint { font-size: 0.68rem; color: rgb(160, 144, 128); }

.hvl-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 36px; margin-bottom: 12px; }

.hvl-bar { width: 3px; border-radius: 2px; background: rgb(216, 208, 200); transition: height 0.1s, background 0.15s; }

.hvl-bar.hvl-active { background: rgb(36, 52, 71); }

.hvl-transcript-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(160, 144, 128); margin-bottom: 6px; }

.hvl-transcript { width: 100%; min-height: 72px; background: rgb(250, 250, 248); border: 1.5px solid rgb(232, 224, 214); border-radius: 12px; padding: 10px 14px; font-size: 0.88rem; color: rgb(43, 43, 43); font-family: inherit; line-height: 1.6; resize: vertical; outline: none; transition: border-color 0.2s; box-sizing: border-box; }

.hvl-transcript:focus { border-color: rgb(36, 52, 71); }

.hvl-transcript::placeholder { color: rgb(192, 184, 176); font-style: italic; }

.hvl-tags-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(160, 144, 128); margin: 14px 0px 7px; }

.hvl-tags { display: flex; gap: 7px; flex-wrap: wrap; }

.hvl-tag { background: rgb(255, 255, 255); border: 1.5px solid rgb(232, 224, 214); border-radius: 50px; padding: 5px 13px; font-size: 0.73rem; font-weight: 600; color: rgb(91, 100, 112); cursor: pointer; font-family: inherit; transition: 0.15s; user-select: none; }

.hvl-tag:hover { border-color: rgb(36, 52, 71); color: rgb(49, 70, 95); }

.hvl-tag.hvl-tag-on { background: rgb(221, 229, 216); border-color: rgb(36, 52, 71); color: rgb(49, 70, 95); }

.hvl-dest-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(160, 144, 128); margin: 14px 0px 7px; }

.hvl-dest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.hvl-dest { background: rgb(255, 255, 255); border: 1.5px solid rgb(232, 224, 214); border-radius: 12px; padding: 10px 12px; font-size: 0.76rem; font-weight: 700; color: rgb(91, 100, 112); cursor: pointer; font-family: inherit; text-align: left; display: flex; align-items: center; gap: 7px; transition: 0.15s; }

.hvl-dest:hover { border-color: rgb(36, 52, 71); background: rgb(240, 248, 240); color: rgb(49, 70, 95); }

.hvl-dest.hvl-dest-on { background: rgb(221, 229, 216); border-color: rgb(36, 52, 71); color: rgb(49, 70, 95); }

.hvl-dest-icon { font-size: 1rem; flex-shrink: 0; }

.hvl-actions { display: flex; gap: 10px; margin-top: 18px; }

.hvl-save-btn { flex: 1 1 0%; background: linear-gradient(135deg, rgb(36, 52, 71), rgb(49, 70, 95)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 13px 20px; font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.2s; box-shadow: rgba(74, 122, 78, 0.3) 0px 3px 12px; }

.hvl-save-btn:hover { transform: translateY(-1px); box-shadow: rgba(74, 122, 78, 0.4) 0px 5px 18px; }

.hvl-save-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.hvl-cancel-btn { background: rgb(240, 236, 230); color: rgb(91, 100, 112); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 13px 20px; font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.15s; }

.hvl-cancel-btn:hover { background: rgb(232, 224, 216); }

.hvl-drawer-btn { position: fixed; bottom: calc(var(--nav-total,68px) + 16px); right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgb(255, 255, 255); border: 1.5px solid rgba(36, 52, 71, 0.1); box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; z-index: 99980; transition: 0.2s; color: rgb(49, 70, 95); }

.hvl-drawer-btn:hover { transform: scale(1.08); box-shadow: rgba(0, 0, 0, 0.16) 0px 4px 18px; }

.hvl-drawer-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.45); z-index: 99985; opacity: 0; pointer-events: none; transition: opacity 0.25s; }

.hvl-drawer-overlay.open { opacity: 1; pointer-events: all; }

.hvl-drawer { position: absolute; bottom: 0px; left: 0px; right: 0px; background: rgb(250, 250, 248); border-radius: 24px 24px 0px 0px; max-height: 72vh; overflow-y: auto; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.34, 1.1, 0.64, 1); padding-bottom: env(safe-area-inset-bottom,0); }

.hvl-drawer.open { transform: translateY(0px); }

@media (min-width: 600px) {
  .hvl-drawer { max-width: 480px; left: auto; right: 16px; bottom: 16px; border-radius: 20px; max-height: 60vh; }
}

.hvl-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); position: sticky; top: 0px; background: rgb(250, 250, 248); }

.hvl-drawer-title { font-family: Georgia, serif; font-size: 0.95rem; font-weight: 700; color: rgb(43, 43, 43); }

.hvl-drawer-close { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 1rem; color: rgb(91, 100, 112); cursor: pointer; padding: 4px; }

.hvl-log-list { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; }

.hvl-log-entry { background: rgb(255, 255, 255); border: 1px solid rgb(236, 232, 226); border-radius: 14px; padding: 12px 14px; }

.hvl-log-entry-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }

.hvl-log-section-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 2px 9px; border-radius: 50px; background: rgb(221, 229, 216); color: rgb(49, 70, 95); }

.hvl-log-time { font-size: 0.62rem; color: rgb(160, 144, 128); }

.hvl-log-text { font-size: 0.82rem; color: rgb(43, 43, 43); line-height: 1.5; margin-bottom: 6px; }

.hvl-log-meta { font-size: 0.68rem; color: rgb(160, 144, 128); }

.hvl-log-empty { text-align: center; padding: 32px 20px; color: rgb(160, 144, 128); font-size: 0.85rem; }

.hvl-badge-places { background: rgb(242, 223, 223); color: rgb(176, 96, 48); }

.hvl-badge-journal { background: rgb(221, 229, 216); color: rgb(90, 74, 138); }

.hvl-badge-discover { background: rgb(232, 240, 245); color: rgb(26, 95, 122); }

.hvl-badge-kids { background: rgb(241, 239, 237); color: rgb(138, 98, 0); }

.hvl-badge-pmf { background: rgb(220, 232, 240); color: rgb(61, 82, 104); }

@media (max-width: 400px) {
  .hvl-dest-grid { grid-template-columns: 1fr; }
  .hvl-prompts { gap: 5px; }
}

#page-rhythm { background: var(--hu-white-mist); font-family: system-ui, -apple-system, sans-serif; }

.pmf-hero { background: linear-gradient(135deg, rgb(18, 33, 58) 0%, rgb(27, 46, 74) 100%); padding: 48px 24px 40px; text-align: center; color: rgb(255, 255, 255); border-radius: 0px 0px 32px 32px; position: relative; }

.pmf-hero::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(70% 55% at 52% 28%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.18) 55%, transparent 100%), linear-gradient(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.18)); pointer-events: none; }

.pmf-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(122, 150, 176); margin-bottom: 10px; }

.pmf-title { font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: rgb(45, 61, 78); line-height: 1.18; margin-bottom: 10px; letter-spacing: -0.02em; }

.pmf-sub { font-size: 1rem; font-weight: 300; color: rgb(90, 110, 130); max-width: 540px; margin: 0px auto 20px; line-height: 1.72; }

.pmf-goal-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; }

.pmf-chip { padding: 8px 18px; border-radius: 50px; background: rgba(255, 255, 255, 0.85); border: 1.5px solid rgba(90, 110, 138, 0.18); font-size: 0.8rem; font-weight: 600; color: rgb(74, 100, 128); cursor: pointer; transition: 0.2s; font-family: inherit; }

.pmf-chip:hover, .pmf-chip.active { background: rgb(74, 100, 128); color: rgb(255, 255, 255); border-color: rgb(74, 100, 128); }

.pmf-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.pmf-btn-primary { padding: 13px 28px; border-radius: 50px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: linear-gradient(135deg, rgb(58, 90, 120), rgb(45, 74, 100)); color: rgb(255, 255, 255); font-size: 0.9rem; font-weight: 700; cursor: pointer; font-family: inherit; letter-spacing: 0.01em; box-shadow: rgba(58, 90, 120, 0.28) 0px 4px 18px; transition: transform 0.2s, box-shadow 0.2s; }

.pmf-btn-primary:hover { transform: translateY(-2px); box-shadow: rgba(58, 90, 120, 0.36) 0px 8px 28px; }

.pmf-btn-ghost { padding: 12px 26px; border-radius: 50px; background: transparent; border: 1.5px solid rgba(90, 110, 138, 0.3); color: rgb(74, 100, 128); font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.2s; }

.pmf-btn-ghost:hover { border-color: rgb(74, 100, 128); background: rgba(90, 110, 138, 0.06); }

.pmf-hero-mic { display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }

.pmf-hero-mic button { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.82)); border: 1.5px solid rgba(90, 110, 138, 0.14); box-shadow: rgba(58, 90, 120, 0.1) 0px 2px 16px, rgba(255, 255, 255, 0.6) 0px 1px 2px inset; cursor: pointer; transition: 0.25s; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: rgb(90, 122, 150); backdrop-filter: blur(6px); }

.pmf-hero-mic button:hover { transform: translateY(-2px) scale(1.06); box-shadow: rgba(58, 90, 120, 0.18) 0px 6px 24px, rgba(255, 255, 255, 0.6) 0px 1px 2px inset; border-color: rgba(90, 110, 138, 0.28); }

.pmf-hero-mic button:active { transform: translateY(0px) scale(0.97); }

.pmf-hero-mic-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(143, 164, 181); margin-top: 6px; }

.pmf-hero > * { position: relative; z-index: 1; }

.pmf-hero .pmf-eyebrow { text-shadow: rgba(255, 255, 255, 0.75) 0px 1px 12px; }

.pmf-hero .pmf-title { text-shadow: rgba(255, 255, 255, 0.72) 0px 2px 22px; }

.pmf-hero .pmf-sub { background: rgba(255, 255, 255, 0.28); border-radius: 24px; padding: 4px 10px; }

@media (max-width: 768px) {
  .pmf-hero { min-height: auto; padding: 28px var(--content-pad) 20px; background-position: 34% center; }
  .pmf-goal-chips { gap: 8px; }
  .pmf-chip { padding: 8px 14px; }
}

.pmf-today-banner { background: rgb(255, 255, 255); padding: 24px 28px; border-radius: 20px; margin-bottom: 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; color: rgb(255, 255, 255); }

.pmf-today-icon { font-size: 2.4rem; flex-shrink: 0; }

.pmf-today-text h3 { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }

.pmf-today-text p { font-size: 0.83rem; opacity: 0.82; line-height: 1.5; }

.pmf-today-btn { margin-left: auto; padding: 9px 20px; border-radius: 50px; background: rgba(255, 255, 255, 0.18); border: 1.5px solid rgba(255, 255, 255, 0.35); color: rgb(255, 255, 255); font-size: 0.8rem; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.18s; }

.pmf-today-btn:hover { background: rgba(255, 255, 255, 0.28); }

.pmf-worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-bottom: 40px; }

.pmf-world-card { background: rgb(255, 255, 255); border-radius: 20px; padding: 26px 22px; box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 20px; border: 1px solid rgba(0, 0, 0, 0.05); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; }

.pmf-world-card:hover { transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.09) 0px 10px 36px; }

.pmf-world-card::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 3px; border-radius: 20px 20px 0px 0px; }

.pmf-world-card.brain::before { background: rgb(255, 255, 255); }

.pmf-world-card.strength::before { background: rgb(255, 255, 255); }

.pmf-world-card.hormone::before { background: rgb(255, 255, 255); }

.pmf-world-card.pantry::before { background: rgb(255, 255, 255); }

.pmf-world-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 14px; }

.pmf-world-card.brain .pmf-world-icon { background: rgb(255, 255, 255); }

.pmf-world-card.strength .pmf-world-icon { background: rgb(255, 255, 255); }

.pmf-world-card.hormone .pmf-world-icon { background: rgb(255, 255, 255); }

.pmf-world-card.pantry .pmf-world-icon { background: rgb(255, 255, 255); }

.pmf-world-title { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: rgb(45, 61, 78); margin-bottom: 6px; }

.pmf-world-desc { font-size: 0.8rem; color: rgb(106, 126, 146); line-height: 1.6; margin-bottom: 14px; }

.pmf-world-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.pmf-world-tag { font-size: 0.66rem; font-weight: 700; padding: 3px 9px; border-radius: 50px; background: rgba(90, 110, 138, 0.08); color: rgb(74, 100, 128); }

.pmf-world-arrow { position: absolute; top: 22px; right: 20px; font-size: 0.75rem; color: rgba(90, 110, 138, 0.35); transition: transform 0.2s, color 0.2s; }

.pmf-world-card:hover .pmf-world-arrow { transform: translateX(3px); color: rgb(74, 100, 128); }

.pmf-dashboard { background: rgb(255, 255, 255); border-radius: 0px; padding: 28px 26px; box-shadow: none; margin-bottom: 32px; }

.pmf-dash-title { font-family: Georgia, serif; font-size: 1.15rem; font-weight: 700; color: rgb(45, 61, 78); margin-bottom: 6px; }

.pmf-dash-sub { font-size: 0.82rem; color: rgb(122, 142, 158); margin-bottom: 22px; }

.pmf-score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 24px; }

.pmf-score-card { background: transparent; border-radius: 0px; padding: 18px 14px; text-align: center; box-shadow: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }

.pmf-score-n { font-family: Georgia, serif; font-size: 2rem; font-weight: 700; color: rgb(45, 61, 78); line-height: 1; }

.pmf-score-label { font-size: 0.7rem; font-weight: 700; color: rgb(122, 142, 158); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }

.pmf-score-bar { height: 4px; border-radius: 2px; background: rgb(228, 234, 238); margin-top: 10px; overflow: hidden; }

.pmf-score-fill { height: 100%; border-radius: 2px; background: rgb(255, 255, 255); }

.pmf-habits { display: flex; flex-direction: column; gap: 10px; }

.pmf-habit { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--hu-white-mist); border: 1px solid rgba(0, 0, 0, 0.05); }

.pmf-habit-icon { font-size: 1.2rem; flex-shrink: 0; }

.pmf-habit-text { flex: 1 1 0%; font-size: 0.82rem; color: rgb(61, 78, 90); font-weight: 500; line-height: 1.4; }

.pmf-habit-check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgb(196, 212, 224); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.18s; flex-shrink: 0; background: rgb(255, 255, 255); font-size: 0.7rem; }

.pmf-habit-check.done { background: rgb(74, 100, 128); border-color: rgb(74, 100, 128); color: rgb(255, 255, 255); }

.pmf-section-label { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(122, 150, 176); margin-bottom: 14px; }

.pmf-content { max-width: 1060px; margin: 0px auto; padding: 0px 24px 56px; }

@media (max-width: 680px) {
  .pmf-worlds { grid-template-columns: 1fr; }
  .pmf-score-grid { grid-template-columns: 1fr 1fr; }
  .pmf-today-banner { flex-direction: column; gap: 12px; }
  .pmf-today-btn { margin-left: 0px; width: 100%; text-align: center; }
}

.pmf-plan-panel { background: rgb(255, 255, 255); border-top: 2px solid rgba(90, 110, 138, 0.1); animation: 0.38s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 normal none running pmfSlideIn; overflow: hidden; }

@keyframes pmfSlideIn { 
  0% { opacity: 0; transform: translateY(-16px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.pmf-plan-content { max-width: 1100px; margin: 0px auto; padding: 40px 24px 56px; }

.pmf-plan-header { display: flex; align-items: flex-start; gap: 20px; background: rgb(255, 255, 255); border-radius: 22px; padding: 32px 28px; margin-bottom: 36px; color: rgb(255, 255, 255); position: relative; }

.pmf-plan-header-icon { font-size: 2.8rem; flex-shrink: 0; background: rgba(255, 255, 255, 0.15); width: 68px; height: 68px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }

.pmf-plan-eyebrow { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.7; margin-bottom: 6px; }

.pmf-plan-title { font-family: Georgia, serif; font-size: 1.8rem; font-weight: 700; margin-bottom: 8px; line-height: 1.15; }

.pmf-plan-subtitle { font-size: 0.88rem; opacity: 0.82; line-height: 1.65; max-width: 520px; }

.pmf-plan-close { position: absolute; top: 18px; right: 18px; background: rgba(255, 255, 255, 0.15); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(255, 255, 255); width: 34px; height: 34px; border-radius: 50%; font-size: 0.85rem; cursor: pointer; transition: background 0.18s; display: flex; align-items: center; justify-content: center; }

.pmf-plan-close:hover { background: rgba(255, 255, 255, 0.28); }

.pmf-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }

.pmf-plan-card { background: rgb(255, 255, 255); border-radius: 20px; padding: 24px 22px; box-shadow: rgba(0, 0, 0, 0.055) 0px 3px 20px; border: 1px solid rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; }

.pmf-plan-card::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 3px; border-radius: 20px 20px 0px 0px; }

.mood-card::before { background: rgb(255, 255, 255); }

.food-card::before { background: rgb(255, 255, 255); }

.hydration-card::before { background: rgb(255, 255, 255); }

.movement-card::before { background: rgb(255, 255, 255); }

.meal-planner-card::before { background: rgb(255, 255, 255); }

.pantry-card-plan::before { background: rgb(255, 255, 255); }

.habit-prompts-card::before { background: rgb(255, 255, 255); }

.save-card::before { background: rgb(255, 255, 255); }

.pmf-pc-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(122, 150, 176); margin-bottom: 10px; }

.pmf-pc-title { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: rgb(45, 61, 78); margin-bottom: 8px; line-height: 1.35; }

.pmf-pc-sub { font-size: 0.78rem; color: rgb(122, 142, 158); line-height: 1.55; margin-bottom: 14px; }

.pmf-mood-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.pmf-mood-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid rgba(90, 110, 138, 0.14); background: var(--hu-white-mist); font-size: 0.7rem; font-weight: 600; color: rgb(74, 100, 128); cursor: pointer; transition: 0.18s; font-family: inherit; flex: 1 1 0%; min-width: 52px; }

.pmf-mood-btn span { font-size: 1.4rem; }

.pmf-mood-btn:hover, .pmf-mood-btn.selected { background: rgb(74, 100, 128); color: rgb(255, 255, 255); border-color: rgb(74, 100, 128); }

.pmf-mood-note { background: rgb(255, 255, 255); border-radius: 12px; padding: 10px 14px; font-size: 0.8rem; color: rgb(58, 90, 62); font-weight: 500; margin-bottom: 10px; }

.pmf-streak-row { display: flex; align-items: center; gap: 5px; margin-top: 10px; }

.pmf-streak-dot { width: 10px; height: 10px; border-radius: 50%; background: rgb(224, 232, 238); }

.pmf-streak-dot.done { background: rgb(74, 100, 128); }

.pmf-check-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }

.pmf-check-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }

.pmf-check-item input { position: absolute; opacity: 0; width: 0px; height: 0px; }

.pmf-check-box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid rgb(192, 205, 216); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: 0.18s; margin-top: 1px; background: rgb(255, 255, 255); }

.pmf-check-item input:checked + .pmf-check-box { background: rgb(74, 100, 128); border-color: rgb(74, 100, 128); }

.pmf-check-item input:checked + .pmf-check-box::after { content: "✓"; color: rgb(255, 255, 255); font-size: 0.7rem; font-weight: 700; }

.pmf-check-item div { flex: 1 1 0%; }

.pmf-check-item strong { font-size: 0.84rem; color: rgb(45, 61, 78); display: block; }

.pmf-check-item small { font-size: 0.72rem; color: rgb(122, 142, 158); }

.pmf-food-progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

.pmf-fp-bar { flex: 1 1 0%; height: 5px; background: rgb(228, 234, 238); border-radius: 3px; overflow: hidden; }

.pmf-fp-fill { height: 100%; background: rgb(255, 255, 255); border-radius: 3px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

.pmf-fp-label { font-size: 0.7rem; font-weight: 700; color: rgb(122, 150, 176); white-space: nowrap; }

.pmf-glass-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0px; }

.pmf-glass { background: rgb(240, 247, 250); border: 1.5px solid rgba(123, 191, 212, 0.25); border-radius: 12px; font-size: 1.4rem; padding: 10px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }

.pmf-glass.filled { background: rgb(255, 255, 255); border-color: rgb(80, 101, 125); }

.pmf-glass:hover { transform: scale(1.08); }

.pmf-hydration-msg { font-size: 0.78rem; color: rgb(74, 122, 144); font-weight: 500; text-align: center; padding: 8px 12px; background: rgb(240, 247, 250); border-radius: 10px; }

.pmf-move-list { display: flex; flex-direction: column; gap: 9px; }

.pmf-move-btn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid rgba(90, 110, 138, 0.12); background: var(--hu-white-mist); cursor: pointer; font-family: inherit; transition: 0.18s; text-align: left; }

.pmf-move-btn:hover, .pmf-move-btn.done { background: rgb(255, 255, 255); border-color: rgb(188, 200, 180); }

.pmf-move-btn.done .pmf-move-tick { background: rgb(138, 120, 176); color: rgb(255, 255, 255); border-color: rgb(138, 120, 176); }

.pmf-move-icon { font-size: 1.4rem; flex-shrink: 0; }

.pmf-move-btn div { flex: 1 1 0%; }

.pmf-move-btn strong { font-size: 0.84rem; color: rgb(45, 61, 78); display: block; }

.pmf-move-btn small { font-size: 0.72rem; color: rgb(122, 142, 158); }

.pmf-move-tick { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid rgb(192, 205, 216); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: rgb(122, 150, 176); transition: 0.18s; }

.pmf-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.pmf-day-slot { display: flex; flex-direction: column; gap: 4px; }

.pmf-day-name { font-size: 0.6rem; font-weight: 700; color: rgb(122, 150, 176); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; }

.pmf-day-meal { min-height: 52px; background: var(--hu-white-mist); border: 1.5px solid rgba(90, 110, 138, 0.12); border-radius: 10px; padding: 7px 6px; font-size: 0.7rem; color: rgb(61, 78, 90); font-family: inherit; outline: none; transition: border-color 0.18s; cursor: text; line-height: 1.4; }

.pmf-day-meal:empty::before { content: attr(placeholder); color: rgb(176, 190, 200); font-style: italic; }

.pmf-day-meal:focus { border-color: rgb(122, 150, 176); background: rgb(255, 255, 255); }

.pmf-pantry-list { display: flex; flex-direction: column; gap: 8px; }

.pmf-pantry-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--hu-white-mist); border: 1px solid rgba(0, 0, 0, 0.05); }

.pmf-pantry-row > span { font-size: 1.2rem; flex-shrink: 0; }

.pmf-pantry-row div { flex: 1 1 0%; }

.pmf-pantry-row strong { font-size: 0.82rem; color: rgb(45, 61, 78); display: block; }

.pmf-pantry-row small { font-size: 0.7rem; color: rgb(122, 142, 158); }

.pmf-pantry-add { padding: 5px 11px; border-radius: 50px; border: 1.5px solid rgba(36, 52, 71, 0.1); background: transparent; color: rgb(90, 138, 94); font-size: 0.7rem; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: 0.18s; flex-shrink: 0; }

.pmf-pantry-add:hover { background: rgb(90, 138, 94); color: rgb(255, 255, 255); border-color: rgb(90, 138, 94); }

.pmf-pantry-add.added { background: rgb(255, 255, 255); color: rgb(255, 255, 255); border-color: transparent; }

.pmf-habit-textarea { width: 100%; border: 1.5px solid rgba(90, 110, 138, 0.18); border-radius: 12px; padding: 12px 14px; font-family: inherit; font-size: 0.84rem; color: rgb(45, 61, 78); background: var(--hu-white-mist); outline: none; resize: vertical; transition: border-color 0.18s; margin-bottom: 12px; }

.pmf-habit-textarea:focus { border-color: rgb(36, 52, 71); background: rgb(255, 255, 255); }

.pmf-prompt-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.pmf-prompt-chip { padding: 7px 14px; border-radius: 50px; border: 1.5px solid rgba(36, 52, 71, 0.3); background: rgba(36, 52, 71, 0.06); color: rgb(49, 70, 95); font-size: 0.76rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.18s; }

.pmf-prompt-chip:hover { background: rgb(49, 70, 95); color: rgb(255, 255, 255); border-color: rgb(49, 70, 95); }

.pmf-habit-prompts-list { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

.pmf-habit-prompt-item { font-size: 0.78rem; color: rgb(74, 100, 128); background: rgb(240, 245, 248); padding: 10px 12px; border-radius: 10px; line-height: 1.5; }

.pmf-kitchen-saved { background: var(--hu-white-mist); border: 1.5px dashed rgba(90, 110, 138, 0.2); border-radius: 14px; padding: 14px; margin-bottom: 16px; min-height: 70px; }

.pmf-kitchen-empty { font-size: 0.78rem; color: rgb(154, 172, 186); text-align: center; padding: 8px 0px; }

.pmf-kitchen-items { display: flex; flex-wrap: wrap; gap: 7px; }

.pmf-kitchen-tag { background: rgb(255, 255, 255); color: rgb(58, 90, 62); padding: 4px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }

.pmf-kitchen-tag .remove { cursor: pointer; opacity: 0.5; font-size: 0.75rem; }

.pmf-kitchen-tag .remove:hover { opacity: 1; }

.pmf-save-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.pmf-save-btn { flex: 1 1 0%; padding: 13px 20px; border-radius: 50px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: rgb(255, 255, 255); color: rgb(255, 255, 255); font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 7px; box-shadow: rgba(58, 90, 120, 0.24) 0px 4px 16px; transition: 0.2s; }

.pmf-save-btn:hover { transform: translateY(-2px); box-shadow: rgba(58, 90, 120, 0.3) 0px 7px 24px; }

.pmf-kitchen-btn { flex: 1 1 0%; padding: 12px 20px; border-radius: 50px; border: 1.5px solid rgba(90, 110, 138, 0.28); background: transparent; color: rgb(74, 100, 128); font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; justify-content: center; gap: 7px; transition: 0.2s; }

.pmf-kitchen-btn:hover { background: rgba(90, 110, 138, 0.07); border-color: rgb(74, 100, 128); }

.pmf-save-confirm { margin-top: 14px; background: rgb(255, 255, 255); border-radius: 12px; padding: 13px 16px; font-size: 0.84rem; color: rgb(58, 90, 62); font-weight: 500; display: flex; align-items: center; gap: 8px; }

.travel-mood-card::before { background: rgb(255, 255, 255); }

.travel-food-card::before { background: rgb(255, 255, 255); }

.travel-move-card::before { background: rgb(255, 255, 255); }

.memory-mood-card::before { background: rgb(255, 255, 255); }

.memory-food-card::before { background: rgb(255, 255, 255); }

.memory-planner-card::before { background: rgb(255, 255, 255); }

.memory-prompt-card::before { background: rgb(255, 255, 255); }

.energy-mood-card::before { background: rgb(255, 255, 255); }

.energy-food-card::before { background: rgb(255, 255, 255); }

.energy-planner-card::before { background: rgb(255, 255, 255); }

.energy-prompt-card::before { background: rgb(255, 255, 255); }

.active-mood-card::before { background: rgb(255, 255, 255); }

.active-food-card::before { background: rgb(255, 255, 255); }

.active-planner-card::before { background: rgb(255, 255, 255); }

.active-prompt-card::before { background: rgb(255, 255, 255); }

.pmf-quiz-overlay { display: none; position: fixed; inset: 0px; z-index: 99999; background: rgba(34, 45, 52, 0.48); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 18px; }

.pmf-quiz-overlay.open { display: flex; }

.pmf-quiz-modal { background: rgb(255, 255, 255); border-radius: 28px; max-width: 620px; width: 100%; max-height: 88vh; overflow: auto; box-shadow: rgba(20, 30, 40, 0.24) 0px 30px 90px; border: 1px solid rgba(90, 110, 138, 0.15); }

.pmf-quiz-head { padding: 26px 28px 18px; border-bottom: 1px solid rgba(90, 110, 138, 0.14); display: flex; gap: 14px; align-items: flex-start; }

.pmf-quiz-icon { width: 50px; height: 50px; border-radius: 16px; background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 1.55rem; flex-shrink: 0; }

.pmf-quiz-title { font-family: Georgia, serif; font-size: 1.55rem; color: rgb(45, 61, 78); margin: 0px 34px 4px 0px; line-height: 1.2; }

.pmf-quiz-sub { font-size: 0.88rem; color: rgb(107, 119, 132); line-height: 1.55; margin: 0px; }

.pmf-quiz-close { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(90, 110, 138, 0.18); background: var(--hu-white-mist); color: rgb(90, 110, 138); cursor: pointer; font-weight: 800; }

.pmf-quiz-body { padding: 24px 28px 28px; }

.pmf-quiz-progress { height: 6px; background: rgb(238, 242, 246); border-radius: 999px; overflow: hidden; margin-bottom: 18px; }

.pmf-quiz-progress-fill { height: 100%; background: rgb(255, 255, 255); border-radius: 999px; transition: width 0.25s; }

.pmf-quiz-step-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(122, 150, 176); font-weight: 800; margin-bottom: 8px; }

.pmf-quiz-question { font-family: Georgia, serif; font-size: 1.28rem; color: rgb(45, 61, 78); margin-bottom: 16px; line-height: 1.3; }

.pmf-quiz-options { display: flex; flex-wrap: wrap; gap: 9px; }

.pmf-quiz-option { border: 1.5px solid rgba(90, 110, 138, 0.2); background: var(--hu-white-mist); color: rgb(45, 61, 78); border-radius: 999px; padding: 10px 16px; font: 700 0.86rem system-ui, -apple-system, sans-serif; cursor: pointer; transition: 0.2s; }

.pmf-quiz-option:hover, .pmf-quiz-option.selected { background: rgb(74, 100, 128); color: rgb(255, 255, 255); border-color: rgb(74, 100, 128); transform: translateY(-1px); }

.pmf-quiz-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }

.pmf-quiz-back, .pmf-quiz-next { border-radius: 999px; padding: 11px 22px; font-weight: 800; font-family: inherit; cursor: pointer; }

.pmf-quiz-back { border: 1.5px solid rgba(90, 110, 138, 0.25); background: transparent; color: rgb(90, 110, 138); }

.pmf-quiz-next { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: rgb(255, 255, 255); color: rgb(255, 255, 255); }

.pmf-result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 8px; }

.pmf-result-item { background: var(--hu-white-mist); border: 1px solid rgba(90, 110, 138, 0.14); border-radius: 16px; padding: 13px 14px; }

.pmf-result-item small { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: rgb(122, 150, 176); margin-bottom: 4px; }

.pmf-result-item strong { font-size: 0.9rem; color: rgb(45, 61, 78); line-height: 1.35; }

@media (max-width: 620px) {
  .pmf-result-grid { grid-template-columns: 1fr; }
  .pmf-quiz-head { padding: 22px 20px 16px; }
  .pmf-quiz-body { padding: 20px; }
  .pmf-quiz-title { font-size: 1.35rem; }
}

@media (max-width: 760px) {
  .pmf-plan-grid { grid-template-columns: 1fr; }
  .pmf-week-grid { grid-template-columns: repeat(4, 1fr); }
  .pmf-plan-header { flex-direction: column; gap: 14px; }
  .pmf-plan-title { font-size: 1.4rem; }
  .pmf-glass-grid { grid-template-columns: repeat(4, 1fr); }
}

.wg-tabs-wrap { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 44px; }

.wg-tab { display: flex; align-items: center; gap: 7px; padding: 10px 22px; border-radius: 50px; border: 1.5px solid rgb(224, 219, 212); background: rgb(255, 255, 255); color: var(--brown); font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.2s; }

.wg-tab:hover { border-color: var(--navy-primary); color: var(--navy-primary); }

.wg-tab.on { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); box-shadow: rgba(36, 52, 71, 0.3) 0px 4px 16px; }

.wg-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: currentcolor; opacity: 0.6; flex-shrink: 0; }

.wg-cat-title { text-align: center; margin-bottom: 36px; font-family: Georgia, serif; font-size: 1.15rem; font-weight: 700; color: var(--char); opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s; }

.wg-cat-title.visible { opacity: 1; transform: translateY(0px); }

.wg-card { display: none; flex-direction: column; }

.wg-card.show { display: flex; animation: 0.35s ease 0s 1 normal none running wg-pop; }

@keyframes wg-pop { 
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.wg-section { background: rgb(255, 255, 255); padding: var(--section-gap) 0; }

.wg-header { text-align: center; margin-bottom: 52px; }

.wg-eyebrow { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--navy-primary); margin-bottom: 10px; }

.wg-title { font-family: Georgia, serif; font-size: clamp(1.9rem, 3.5vw, 2.7rem); font-weight: 700; color: var(--char); margin-bottom: 12px; line-height: 1.15; }

.wg-sub { font-size: 0.92rem; color: var(--brown); max-width: 520px; margin: 0px auto; line-height: 1.8; }

.wg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 900px) {
  .wg-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .wg-grid { grid-template-columns: 1fr; }
}

.wg-card { background: rgb(255, 255, 255); border-radius: 24px; overflow: hidden; border: 1.5px solid rgba(0, 0, 0, 0.06); box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 24px; cursor: pointer; transition: transform 0.22s, box-shadow 0.22s; display: flex; flex-direction: column; }

.wg-card:hover { transform: translateY(-6px); box-shadow: rgba(0, 0, 0, 0.12) 0px 16px 48px; }

.wg-card-banner { height: 148px; display: flex; align-items: center; justify-content: center; font-size: 3.8rem; position: relative; overflow: hidden; }

.wg-card-banner::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(transparent 60%, rgba(0, 0, 0, 0.08)); }

.wg-card-badge { position: absolute; top: 14px; right: 14px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(8px); border-radius: 50px; padding: 4px 11px; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--char); z-index: 1; }

.wg-card-body { padding: 20px 22px 22px; flex: 1 1 0%; display: flex; flex-direction: column; }

.wg-card-cat { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--navy-primary); margin-bottom: 7px; }

.wg-card-title { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: var(--char); margin-bottom: 8px; line-height: 1.35; }

.wg-card-desc { font-size: 0.78rem; color: var(--brown); line-height: 1.65; flex: 1 1 0%; margin-bottom: 16px; }

.wg-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }

.wg-card-meta-item { font-size: 0.68rem; color: var(--brown); display: flex; align-items: center; gap: 4px; }

.wg-card-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }

.wg-chip { padding: 3px 10px; border-radius: 50px; font-size: 0.63rem; font-weight: 700; background: var(--sage-lt); color: var(--sage-dk); }

.wg-card-btn { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 9px 20px; font-size: 0.78rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.18s; align-self: flex-start; box-shadow: rgba(36, 52, 71, 0.3) 0px 3px 12px; }

.wg-card-btn:hover { transform: translateY(-1px); box-shadow: rgba(36, 52, 71, 0.4) 0px 6px 18px; }

.gd-page { background: var(--hu-white-mist); }

.gd-hero { padding: var(--section-gap) 0 var(--section-gap-sm); position: relative; overflow: hidden; }

.gd-hero::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(135deg,var(--sage-lt) 0%,var(--yel-lt) 100%); z-index: 0; }

.gd-hero > .container { position: relative; z-index: 1; }

.gd-hero-inner { max-width: 700px; }

.gd-back { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.7); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 7px 16px; font-size: 0.78rem; font-weight: 700; color: var(--char); cursor: pointer; font-family: inherit; transition: 0.18s; margin-bottom: 28px; backdrop-filter: blur(8px); }

.gd-back:hover { background: rgba(255, 255, 255, 0.95); }

.gd-hero-eyebrow { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--navy-primary); margin-bottom: 12px; }

.gd-hero-emoji { font-size: 4.5rem; margin-bottom: 18px; display: block; }

.gd-hero-title { font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--char); line-height: 1.1; margin-bottom: 16px; }

.gd-hero-sub { font-size: 0.97rem; color: var(--brown); line-height: 1.85; max-width: 580px; margin-bottom: 28px; }

.gd-hero-meta { display: flex; gap: 16px; flex-wrap: wrap; }

.gd-hero-meta-pill { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.75); border-radius: 50px; padding: 7px 16px; font-size: 0.75rem; font-weight: 700; color: var(--char); backdrop-filter: blur(8px); }

.gd-body { max-width: 780px; margin: 0px auto; padding: 64px 24px; }

.gd-intro { font-size: 1.05rem; color: var(--char); line-height: 1.9; margin-bottom: 48px; font-style: italic; border-left: 3px solid var(--sage); padding-left: 20px; }

.gd-section { margin-bottom: 52px; }

.gd-section-label { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: var(--navy-primary); margin-bottom: 10px; }

.gd-section-title { font-family: Georgia, serif; font-size: 1.45rem; font-weight: 700; color: var(--char); margin-bottom: 16px; }

.gd-section-text { font-size: 0.9rem; color: var(--brown); line-height: 1.85; margin-bottom: 16px; }

.gd-tip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 24px 0px; }

@media (max-width: 580px) {
  .gd-tip-grid { grid-template-columns: 1fr; }
}

.gd-tip { background: rgb(255, 255, 255); border-radius: 18px; padding: 20px 20px 18px; border: 1.5px solid rgba(0, 0, 0, 0.05); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 12px; }

.gd-tip-icon { font-size: 1.6rem; margin-bottom: 10px; display: block; }

.gd-tip-title { font-weight: 800; font-size: 0.87rem; color: var(--char); margin-bottom: 6px; }

.gd-tip-text { font-size: 0.8rem; color: var(--brown); line-height: 1.65; }

.gd-highlight { background: linear-gradient(135deg,var(--sage-lt),var(--yel-lt)); border-radius: 20px; padding: 28px 28px 24px; margin: 28px 0px; }

.gd-highlight-label { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--navy-primary); margin-bottom: 8px; }

.gd-highlight-text { font-family: Georgia, serif; font-size: 1.1rem; color: var(--char); line-height: 1.65; font-style: italic; }

.gd-steps { display: flex; flex-direction: column; gap: 16px; margin: 24px 0px; }

.gd-step { display: flex; gap: 16px; align-items: flex-start; }

.gd-step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--navy-primary); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 0.82rem; font-weight: 800; flex-shrink: 0; margin-top: 2px; }

.gd-step-body { }

.gd-step-title { font-weight: 800; font-size: 0.88rem; color: var(--char); margin-bottom: 5px; }

.gd-step-text { font-size: 0.82rem; color: var(--brown); line-height: 1.65; }

.gd-cta { background: linear-gradient(135deg, rgb(26, 42, 28), rgb(45, 74, 48)); border-radius: 24px; padding: 40px 36px; text-align: center; margin-top: 56px; }

.gd-cta-title { font-family: Georgia, serif; font-size: 1.4rem; font-weight: 700; color: rgb(255, 255, 255); margin-bottom: 10px; }

.gd-cta-sub { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); line-height: 1.7; margin-bottom: 22px; }

.gd-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.mdm-section { background: rgb(255, 255, 255); padding: var(--section-gap) 0; }

.mdm-header { text-align: center; margin-bottom: 48px; }

.mdm-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.5); margin-bottom: 10px; }

.mdm-title { font-family: Georgia, serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; color: rgb(255, 255, 255); margin-bottom: 10px; }

.mdm-sub { font-size: 0.92rem; color: rgba(255, 255, 255, 0.65); max-width: 480px; margin: 0px auto; line-height: 1.8; }

.mdm-mood-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; }

.mdm-mood-pill { display: flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 50px; border: 2px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.8); font-size: 0.84rem; font-weight: 700; cursor: pointer; transition: 0.2s; font-family: inherit; backdrop-filter: blur(6px); }

.mdm-mood-pill:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); }

.mdm-mood-pill.active { border-color: rgb(255, 255, 255); background: rgb(255, 255, 255); color: var(--char); box-shadow: rgba(255, 255, 255, 0.2) 0px 4px 20px; }

.mdm-feeling-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; }

.mdm-feel-chip { padding: 7px 16px; border-radius: 50px; background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: 0.18s; font-family: inherit; }

.mdm-feel-chip:hover { background: rgba(255, 255, 255, 0.15); color: rgb(255, 255, 255); }

.mdm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

@media (max-width: 900px) {
  .mdm-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .mdm-grid { grid-template-columns: 1fr; }
}

.mdm-slot { background: rgba(255, 255, 255, 0.07); border-radius: 20px; border: 1.5px solid rgba(255, 255, 255, 0.1); overflow: hidden; transition: transform 0.2s, border-color 0.2s; backdrop-filter: blur(8px); }

.mdm-slot:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.28); }

.mdm-slot-label { display: flex; align-items: center; gap: 7px; padding: 12px 14px 0px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.45); }

.mdm-slot-emoji { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 3.4rem; }

.mdm-slot-body { padding: 0px 14px 16px; }

.mdm-slot-moods { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 7px; }

.mdm-slot-mood { font-size: 0.58rem; font-weight: 800; padding: 2px 7px; border-radius: 50px; background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); }

.mdm-slot-title { font-weight: 800; font-size: 0.88rem; color: rgb(255, 255, 255); margin-bottom: 5px; line-height: 1.3; }

.mdm-slot-meta { font-size: 0.7rem; color: rgba(255, 255, 255, 0.55); margin-bottom: 8px; display: flex; flex-direction: column; gap: 3px; }

.mdm-slot-meta span { display: flex; align-items: center; gap: 4px; }

.mdm-scores { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }

.mdm-score-row { display: flex; align-items: center; gap: 6px; }

.mdm-score-label { font-size: 0.6rem; color: rgba(255, 255, 255, 0.5); width: 42px; flex-shrink: 0; }

.mdm-score-bar { flex: 1 1 0%; height: 4px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; }

.mdm-score-fill { height: 100%; background: linear-gradient(90deg, rgba(36, 52, 71, 0.6), rgba(200, 220, 180, 0.9)); border-radius: 2px; transition: width 0.8s; }

.mdm-score-val { font-size: 0.6rem; color: rgba(255, 255, 255, 0.6); width: 16px; text-align: right; flex-shrink: 0; }

.mdm-slot-btns { display: flex; flex-direction: column; gap: 6px; }

.mdm-slot-btn { padding: 7px 10px; border-radius: 10px; font-size: 0.72rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.18s; border: 1.5px solid; }

.mdm-slot-btn-save { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.25); color: rgb(255, 255, 255); }

.mdm-slot-btn-save:hover { background: rgba(255, 255, 255, 0.25); }

.mdm-slot-btn-plan { background: transparent; border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.75); }

.mdm-slot-btn-plan:hover { border-color: rgba(255, 255, 255, 0.45); color: rgb(255, 255, 255); }

.mdm-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

.mdm-btn-regen { display: flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 50px; background: rgba(255, 255, 255, 0.12); border: 2px solid rgba(255, 255, 255, 0.25); color: rgb(255, 255, 255); font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.2s; }

.mdm-btn-regen:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.5); }

.mdm-btn-save-all { display: flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: 50px; background: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--char); font-size: 0.88rem; font-weight: 800; cursor: pointer; font-family: inherit; transition: 0.2s; }

.mdm-btn-save-all:hover { background: var(--sage-lt); }

.mdm-empty { text-align: center; padding: 60px 20px; color: rgba(255, 255, 255, 0.4); font-size: 0.9rem; }

.mdm-empty-icon { font-size: 3rem; margin-bottom: 12px; }

@keyframes mdm-spin { 
  100% { transform: rotate(360deg); }
}

.mdm-spinning { animation: 0.7s linear 0s infinite normal none running mdm-spin; display: inline-block; }

.rc-section { padding: var(--section-gap) 0; }

.rc-section:nth-child(2n) { background: var(--hu-white-mist); }

.rc-section:nth-child(2n+1) { background: rgb(255, 255, 255); }

.rc-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 12px; }

.rc-section-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--navy-primary); margin-bottom: 6px; }

.rc-section-title { font-family: Georgia, serif; font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 700; color: var(--char); }

.rc-section-sub { font-size: 0.85rem; color: var(--brown); margin-top: 4px; }

.rc-see-all { font-size: 0.8rem; font-weight: 700; color: var(--navy-primary); background: none; border: 1.5px solid var(--sage); border-radius: 50px; padding: 7px 18px; cursor: pointer; white-space: nowrap; font-family: inherit; transition: 0.18s; }

.rc-see-all:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.rc-scroll-track { overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }

.rc-scroll-track::-webkit-scrollbar { display: none; }

.rc-scroll-row { display: flex; gap: 18px; width: max-content; }

.rc-card { width: 260px; background: rgb(255, 255, 255); border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.07) 0px 4px 20px; overflow: hidden; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; flex-shrink: 0; border: 2px solid transparent; }

.rc-card:hover { transform: translateY(-5px); box-shadow: rgba(0, 0, 0, 0.13) 0px 12px 40px; border-color: var(--sage-lt); }

.rc-card-img { height: 148px; display: flex; align-items: center; justify-content: center; font-size: 3.2rem; position: relative; }

.rc-card-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; flex-wrap: wrap; }

.rc-card-badge { font-size: 0.6rem; font-weight: 800; padding: 2px 8px; border-radius: 50px; background: rgba(255, 255, 255, 0.88); color: var(--char); backdrop-filter: blur(4px); }

.rc-card-score-badge { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.88); border-radius: 50px; padding: 3px 9px; font-size: 0.7rem; font-weight: 800; color: var(--navy-primary); backdrop-filter: blur(4px); }

.rc-card-body { padding: 14px 16px 16px; }

.rc-card-moods { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 7px; }

.rc-mood-tag { font-size: 0.6rem; font-weight: 700; padding: 2px 8px; border-radius: 50px; }

.rc-card-title { font-weight: 800; font-size: 0.9rem; color: var(--char); margin-bottom: 4px; line-height: 1.35; }

.rc-card-desc { font-size: 0.75rem; color: var(--brown); line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.rc-card-meta { display: flex; gap: 10px; font-size: 0.7rem; color: var(--brown); margin-bottom: 10px; }

.rc-card-meta span { display: flex; align-items: center; gap: 3px; }

.rc-card-save { width: 100%; padding: 8px; border-radius: 10px; border: 1.5px solid var(--sage); background: none; color: var(--navy-primary); font-size: 0.75rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.18s; }

.rc-card-save:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.mood-calm { background: rgb(200, 223, 201); color: rgb(58, 107, 62); }

.mood-focus { background: rgb(232, 240, 245); color: rgb(42, 106, 132); }

.mood-energy { background: rgb(231, 229, 228); color: rgb(122, 88, 0); }

.mood-comfort { background: rgb(242, 223, 223); color: rgb(154, 72, 32); }

.mood-happy { background: rgb(245, 224, 245); color: rgb(122, 74, 122); }

.mood-sleep { background: rgb(221, 229, 216); color: rgb(90, 74, 138); }

.rc-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.5); z-index: 4000; display: none; align-items: center; justify-content: center; padding: 20px; }

.rc-overlay.open { display: flex; }

.rc-modal { background: rgb(255, 255, 255); border-radius: 24px; max-width: 680px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.2) 0px 32px 100px; position: relative; }

.rc-modal-hero { padding: 28px 28px 0px; display: flex; align-items: center; gap: 18px; }

.rc-modal-emoji { font-size: 3.8rem; line-height: 1; flex-shrink: 0; }

.rc-modal-close { position: absolute; top: 14px; right: 16px; background: var(--hu-white-mist); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; width: 34px; height: 34px; font-size: 1rem; cursor: pointer; font-family: inherit; color: var(--brown); display: flex; align-items: center; justify-content: center; }

.rc-modal-body { padding: 22px 28px 32px; }

.rc-modal-label { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--navy-primary); margin-bottom: 8px; margin-top: 20px; }

.rc-modal-label:first-child { margin-top: 0px; }

.rc-score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 4px; }

.rc-score-item { background: var(--hu-white-mist); border-radius: 12px; padding: 10px 12px; }

.rc-score-name { font-size: 0.68rem; font-weight: 700; color: var(--brown); margin-bottom: 5px; }

.rc-score-bar-wrap { background: rgb(232, 228, 222); border-radius: 4px; height: 5px; overflow: hidden; margin-bottom: 4px; }

.rc-score-bar { height: 100%; background: linear-gradient(90deg,var(--sage-lt),var(--sage)); border-radius: 4px; }

.rc-score-num { font-size: 0.75rem; font-weight: 800; color: var(--navy-primary); }

.rc-nutrient-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.rc-nutrient-chip { font-size: 0.7rem; font-weight: 700; padding: 3px 10px; background: var(--sage-lt); color: var(--navy-primary); border-radius: 50px; }

.rc-tag-chips { display: flex; gap: 5px; flex-wrap: wrap; }

.rc-tag-chip { font-size: 0.68rem; padding: 2px 9px; background: rgb(240, 236, 230); color: var(--brown); border-radius: 50px; font-weight: 600; }

.rc-ing-list { list-style: none; display: flex; flex-direction: column; }

.rc-ing-item { padding: 6px 0px; border-bottom: 1px solid rgb(244, 240, 234); font-size: 0.85rem; color: var(--char); display: flex; gap: 8px; }

.rc-ing-item::before { content: "•"; color: var(--navy-primary); font-weight: 800; flex-shrink: 0; }

.rc-step-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.rc-step-item { display: flex; gap: 12px; align-items: flex-start; }

.rc-step-num { width: 24px; height: 24px; background: var(--navy-primary); color: rgb(255, 255, 255); border-radius: 50%; font-size: 0.7rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

.rc-step-text { font-size: 0.85rem; color: var(--char); line-height: 1.6; }

.rc-science-box { background: linear-gradient(135deg,var(--sage-lt),var(--yel-lt)); border-radius: 14px; padding: 14px 16px; font-size: 0.83rem; color: var(--char); line-height: 1.7; }

.rc-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

@media (max-width: 540px) {
  .rc-score-grid { grid-template-columns: repeat(2, 1fr); }
  .rc-modal-hero { flex-direction: column; gap: 10px; }
}

.kitchen-brain-academy, .kitchen-academy-page { background: linear-gradient(135deg, rgb(15, 47, 29) 0%, rgb(25, 61, 41) 55%, rgb(35, 72, 50) 100%); color: rgb(248, 243, 234); padding: 80px 5%; }

.academy-card { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 28px; padding: 32px; box-shadow: rgba(0, 0, 0, 0.18) 0px 24px 60px; backdrop-filter: blur(12px); transition: background 0.25s, transform 0.25s; }

.academy-card:hover { background: rgba(255, 255, 255, 0.13); transform: translateY(-4px); }

.academy-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 28px; }

.academy-primary-btn, .academy-card button { background: rgb(248, 243, 234); color: rgb(24, 54, 37); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 999px; padding: 14px 24px; font-weight: 700; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.18) 0px 12px 28px; transition: 0.25s; font-family: inherit; font-size: 0.9rem; }

.academy-primary-btn:hover, .academy-card button:hover { transform: translateY(-2px); background: rgb(255, 255, 255); }

.academy-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 12px; font-size: 0.8rem; font-weight: 700; margin: 4px; }

.academy-pill.sage { background: rgba(125, 164, 126, 0.18); color: rgb(155, 228, 163); border: 1px solid rgba(155, 228, 163, 0.28); }

.academy-pill.blue { background: rgba(147, 197, 253, 0.14); color: rgb(155, 220, 247); border: 1px solid rgba(155, 220, 247, 0.25); }

.academy-pill.lavender { background: rgba(196, 181, 253, 0.16); color: rgb(203, 184, 255); border: 1px solid rgba(203, 184, 255, 0.25); }

.academy-pill.orange { background: rgba(251, 146, 60, 0.15); color: rgb(253, 186, 116); border: 1px solid rgba(253, 186, 116, 0.28); }

.academy-icon-circle { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 18px; }

.ka-who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 44px; }

.ka-who-card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; padding: 28px 22px 24px; text-align: center; transition: background 0.2s, transform 0.2s; }

.ka-who-card:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px); }

.ka-section-eyebrow { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(248, 243, 234, 0.5); margin-bottom: 8px; }

.ka-section-title { font-family: Georgia, serif; font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; color: rgb(248, 243, 234); margin-bottom: 12px; line-height: 1.18; }

.ka-section-sub { color: rgba(248, 243, 234, 0.72); font-size: 0.95rem; line-height: 1.75; max-width: 560px; }

.ka-full-title { font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: rgb(248, 243, 234); margin-bottom: 14px; line-height: 1.12; }

.ka-full-sub { color: rgba(248, 243, 234, 0.75); font-size: 1.05rem; line-height: 1.78; max-width: 600px; margin: 0px auto 16px; }

.ka-full-intro { color: rgba(248, 243, 234, 0.6); font-size: 0.92rem; line-height: 1.78; max-width: 680px; margin: 0px auto 56px; }

.ka-card-icon { font-size: 2rem; margin-bottom: 14px; display: block; }

.ka-card-title { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 700; color: rgb(248, 243, 234); margin-bottom: 10px; }

.ka-card-desc { font-size: 0.82rem; color: rgba(248, 243, 234, 0.68); line-height: 1.72; margin-bottom: 18px; }

.ka-card-pills { display: flex; flex-wrap: wrap; gap: 0px; margin-bottom: 20px; }

@media (max-width: 1024px) {
  .academy-grid, .ka-who-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}

@media (max-width: 700px) {
  .kitchen-brain-academy, .kitchen-academy-page { padding: 56px 20px; }
  .academy-grid, .ka-who-grid { grid-template-columns: 1fr; }
  .academy-card { padding: 24px; border-radius: 22px; }
  .ka-who-card { border-radius: 18px; }
}

.chef-explorer-wrap { --ce-sage: #243447; --ce-sage-dk: #31465F; --ce-sage-lt: #edf7ee; --ce-sage-mid: #b8d4ba; --ce-cream: #faf8f4; --ce-warm: #FDFDFC; --ce-peach: #E7C9C9; --ce-peach-lt: #fdf0e6; --ce-lav: #c5b8e8; --ce-lav-lt: #f0ecfb; --ce-sky: #50657D; --ce-sky-lt: #e4f5fb; --ce-yel: #f5c842; --ce-yel-lt: #fef9dc; --ce-char: #2a2520; --ce-brown: #5B6470; --ce-muted: #8a7e74; --ce-border: rgba(36,52,71,0.18); --ce-shadow: 0 4px 28px rgba(74,122,78,0.09); --ce-shadow-h: 0 16px 48px rgba(74,122,78,0.15); --ce-r: 18px; --ce-r-lg: 26px; --ce-serif: 'Playfair Display', Georgia, serif; --ce-sans: 'DM Sans', system-ui, sans-serif; --ce-tr: all 0.28s cubic-bezier(0.25,0.46,0.45,0.94); font-family: var(--ce-sans); color: var(--ce-char); -webkit-font-smoothing: antialiased; }

.chef-explorer-section { background: var(--ce-cream); padding: var(--section-gap) 0; }

.chef-explorer-section:nth-child(2n) { background: rgb(255, 255, 255); }

.chef-explorer-container { max-width: 1160px; margin: 0px auto; padding: 0px 32px; }

.ce-hero { text-align: center; margin-bottom: 48px; }

.ce-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ce-sage-dk); background: var(--ce-sage-lt); border: 1px solid var(--ce-border); border-radius: 50px; padding: 6px 16px; margin-bottom: 18px; }

.ce-title { font-family: var(--ce-serif); font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; color: var(--ce-sage-dk); line-height: 1.15; margin: 0px 0px 14px; }

.ce-subtitle { font-size: 1rem; font-weight: 300; color: var(--ce-muted); max-width: 540px; margin: 0px auto; line-height: 1.72; }

.ce-search-wrap { display: flex; align-items: center; gap: 10px; background: rgb(255, 255, 255); border: 2px solid var(--ce-border); border-radius: 60px; padding: 8px 8px 8px 20px; box-shadow: var(--ce-shadow); max-width: 680px; margin: 32px auto 24px; transition: var(--ce-tr); }

.ce-search-wrap:focus-within { border-color: var(--ce-sage); box-shadow: 0 0 0 4px rgba(36,52,71,0.12), var(--ce-shadow); }

.ce-search-icon { font-size: 1.2rem; flex-shrink: 0; }

.ce-search-input { flex: 1 1 0%; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; font-family: var(--ce-sans); font-size: 1rem; font-weight: 400; color: var(--ce-char); background: transparent; }

.ce-search-input::placeholder { color: var(--ce-muted); }

.ce-search-btn { font-family: var(--ce-sans); font-size: 0.88rem; font-weight: 600; background: var(--ce-sage-dk); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 11px 24px; cursor: pointer; transition: var(--ce-tr); white-space: nowrap; }

.ce-search-btn:hover { background: rgb(42, 77, 46); transform: scale(1.03); }

.ce-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px; }

.ce-chip { font-family: var(--ce-sans); font-size: 0.8rem; font-weight: 500; padding: 7px 16px; border-radius: 50px; cursor: pointer; border: 1.5px solid var(--ce-border); background: rgb(255, 255, 255); color: var(--ce-muted); transition: var(--ce-tr); user-select: none; }

.ce-chip:hover { border-color: var(--ce-sage); color: var(--ce-sage-dk); background: var(--ce-sage-lt); }

.ce-chip.ce-chip-active { background: var(--ce-sage-dk); color: rgb(255, 255, 255); border-color: var(--ce-sage-dk); }

.ce-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-bottom: 36px; }

.ce-mini-card { background: rgb(255, 255, 255); border: 1.5px solid var(--ce-border); border-radius: var(--ce-r); padding: 16px 10px; text-align: center; cursor: pointer; transition: var(--ce-tr); }

.ce-mini-card:hover { transform: translateY(-3px); box-shadow: var(--ce-shadow-h); border-color: var(--ce-sage-mid); }

.ce-mini-card.ce-mini-active { border-color: var(--ce-sage-dk); background: var(--ce-sage-lt); }

.ce-mini-emoji { font-size: 1.8rem; margin-bottom: 6px; }

.ce-mini-name { font-size: 0.78rem; font-weight: 600; color: var(--ce-sage-dk); }

.ce-not-found { text-align: center; padding: 40px 20px; display: none; font-size: 0.95rem; color: var(--ce-muted); }

.ce-not-found.ce-visible { display: block; }

.ce-profile { display: none; }

.ce-profile.ce-visible { display: block; }

.ce-profile-hero { background: linear-gradient(135deg, var(--ce-sage-lt) 0%, var(--ce-warm) 100%); border-radius: var(--ce-r-lg); padding: 36px 40px; display: flex; align-items: center; gap: 28px; margin-bottom: 24px; position: relative; overflow: hidden; }

.ce-profile-hero::before { content: ""; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: rgba(36, 52, 71, 0.08); pointer-events: none; }

.ce-profile-emoji { font-size: 5rem; line-height: 1; flex-shrink: 0; }

.ce-profile-info { }

.ce-profile-cat { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ce-sage); margin-bottom: 4px; }

.ce-profile-name { font-family: var(--ce-serif); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 600; color: var(--ce-sage-dk); line-height: 1.1; margin-bottom: 10px; }

.ce-profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.ce-profile-tag { font-size: 0.72rem; font-weight: 500; padding: 4px 12px; border-radius: 50px; background: rgba(255, 255, 255, 0.75); color: var(--ce-sage-dk); border: 1px solid var(--ce-border); }

.ce-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }

.ce-card { background: rgb(255, 255, 255); border: 1px solid var(--ce-border); border-radius: var(--ce-r); padding: 22px 20px; box-shadow: var(--ce-shadow); transition: var(--ce-tr); position: relative; overflow: hidden; }

.ce-card::after { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 3px; border-radius: var(--ce-r) var(--ce-r) 0 0; opacity: 0; transition: opacity 0.25s; }

.ce-card:hover { transform: translateY(-3px); box-shadow: var(--ce-shadow-h); }

.ce-card:hover::after { opacity: 1; }

.ce-card.ce-card-origin::after { background: rgb(255, 255, 255); }

.ce-card.ce-card-mission::after { background: rgb(255, 255, 255); }

.ce-card.ce-card-science::after { background: rgb(255, 255, 255); }

.ce-card.ce-card-sensory::after { background: rgb(255, 255, 255); }

.ce-card.ce-card-mood::after { background: rgb(255, 255, 255); }

.ce-card.ce-card-snapshot::after { background: rgb(255, 255, 255); }

.ce-card-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ce-sage); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }

.ce-card-title { font-family: var(--ce-serif); font-size: 1.05rem; font-weight: 600; color: var(--ce-sage-dk); margin-bottom: 8px; }

.ce-card-text { font-size: 0.85rem; color: var(--ce-brown); line-height: 1.65; }

.ce-card-highlight { display: inline-block; margin-top: 10px; font-size: 0.78rem; font-weight: 500; color: var(--ce-sage-dk); background: var(--ce-sage-lt); padding: 4px 12px; border-radius: 50px; }

.ce-snapshot-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0px; border-bottom: 1px solid var(--ce-border); font-size: 0.83rem; }

.ce-snapshot-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.ce-snapshot-key { color: var(--ce-muted); font-weight: 400; }

.ce-snapshot-val { color: var(--ce-char); font-weight: 500; text-align: right; max-width: 55%; }

.ce-map-panel { background: rgb(255, 255, 255); border: 1px solid var(--ce-border); border-radius: var(--ce-r-lg); padding: 24px; margin-bottom: 24px; box-shadow: var(--ce-shadow); }

.ce-map-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ce-sage); margin-bottom: 16px; }

.ce-map-regions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }

.ce-map-region { border-radius: 14px; padding: 14px 10px; text-align: center; border: 2px solid var(--ce-border); background: var(--ce-cream); transition: var(--ce-tr); cursor: default; }

.ce-map-region.ce-map-active { border-color: var(--ce-sage-dk); background: var(--ce-sage-lt); transform: scale(1.04); box-shadow: rgba(74, 122, 78, 0.18) 0px 4px 16px; }

.ce-map-region-icon { font-size: 1.6rem; margin-bottom: 6px; }

.ce-map-region-name { font-size: 0.72rem; font-weight: 600; color: var(--ce-sage-dk); }

.ce-map-region-sub { font-size: 0.64rem; color: var(--ce-muted); margin-top: 2px; }

.ce-try-next { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.ce-try-btn { font-family: var(--ce-sans); font-size: 0.8rem; font-weight: 500; padding: 7px 15px; border-radius: 50px; cursor: pointer; border: 1.5px solid var(--ce-sage-mid); background: rgb(255, 255, 255); color: var(--ce-sage-dk); transition: var(--ce-tr); }

.ce-try-btn:hover { background: var(--ce-sage-dk); color: rgb(255, 255, 255); border-color: var(--ce-sage-dk); }

.ce-bottom-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 24px; }

.ce-progress-card { background: linear-gradient(135deg, var(--ce-sage-dk), #2a4d2e); border-radius: var(--ce-r-lg); padding: 26px 24px; color: rgb(255, 255, 255); }

.ce-progress-title { font-family: var(--ce-serif); font-size: 1.1rem; font-weight: 600; margin-bottom: 16px; }

.ce-progress-stats { display: flex; flex-direction: column; gap: 10px; }

.ce-progress-stat { display: flex; align-items: center; justify-content: space-between; }

.ce-progress-stat-label { font-size: 0.78rem; opacity: 0.85; }

.ce-progress-stat-val { font-family: var(--ce-serif); font-size: 1.1rem; font-weight: 600; background: rgba(255, 255, 255, 0.18); border-radius: 50px; padding: 2px 12px; min-width: 44px; text-align: center; }

.ce-progress-bar-wrap { margin-top: 14px; }

.ce-progress-bar-label { font-size: 0.7rem; opacity: 0.75; margin-bottom: 6px; }

.ce-progress-bar-track { background: rgba(255, 255, 255, 0.2); border-radius: 4px; height: 6px; }

.ce-progress-bar-fill { background: var(--ce-yel); border-radius: 4px; height: 6px; transition: width 0.6s; }

.ce-next-badge { font-size: 0.7rem; opacity: 0.75; margin-top: 6px; text-align: right; }

.ce-feature-card { background: rgb(255, 255, 255); border: 1px solid var(--ce-border); border-radius: var(--ce-r-lg); padding: 26px 24px; box-shadow: var(--ce-shadow); display: flex; flex-direction: column; gap: 12px; }

.ce-feature-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }

.ce-feature-title { font-family: var(--ce-serif); font-size: 1.05rem; font-weight: 600; color: var(--ce-sage-dk); }

.ce-feature-text { font-size: 0.82rem; color: var(--ce-muted); line-height: 1.6; flex: 1 1 0%; }

.ce-feature-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 500; padding: 5px 12px; border-radius: 50px; border: 1.5px solid var(--ce-border); color: var(--ce-muted); width: fit-content; }

.ce-print-card { background: linear-gradient(135deg, var(--ce-yel-lt), var(--ce-peach-lt)); border: 1px solid rgba(245, 200, 66, 0.3); border-radius: var(--ce-r-lg); padding: 28px 32px; display: flex; align-items: center; gap: 24px; box-shadow: var(--ce-shadow); margin-bottom: 0px; }

.ce-print-icon { font-size: 2.8rem; flex-shrink: 0; }

.ce-print-info { flex: 1 1 0%; }

.ce-print-title { font-family: var(--ce-serif); font-size: 1.15rem; font-weight: 600; color: var(--ce-sage-dk); margin-bottom: 4px; }

.ce-print-text { font-size: 0.85rem; color: var(--ce-brown); line-height: 1.55; }

.ce-print-btn { font-family: var(--ce-sans); font-size: 0.88rem; font-weight: 600; background: var(--ce-sage-dk); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 12px 24px; cursor: pointer; transition: var(--ce-tr); flex-shrink: 0; white-space: nowrap; }

.ce-print-btn:hover { background: rgb(42, 77, 46); transform: translateY(-1px); box-shadow: rgba(74, 122, 78, 0.3) 0px 6px 18px; }

@media (max-width: 900px) {
  .ce-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .ce-bottom-grid { grid-template-columns: 1fr 1fr; }
  .ce-map-regions { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .chef-explorer-container { padding: 0px 16px; }
  .chef-explorer-section { padding: var(--section-gap-sm) 0; }
  .ce-cards-grid { grid-template-columns: 1fr; }
  .ce-bottom-grid { grid-template-columns: 1fr; }
  .ce-profile-hero { flex-direction: column; text-align: center; padding: 28px 20px; }
  .ce-map-regions { grid-template-columns: repeat(2, 1fr); }
  .ce-print-card { flex-direction: column; text-align: center; }
  .ce-mini-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
}

.dsc-hero { padding: var(--section-gap-sm) 0 0; margin: 0px; background: rgb(255, 255, 255); position: relative; overflow: hidden; }

.dsc-hero::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(at 70% 40%, rgba(36, 52, 71, 0.1) 0%, transparent 60%); pointer-events: none; }

.dsc-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

@media (max-width: 820px) {
  .dsc-hero-grid { grid-template-columns: 1fr; gap: 32px; }
}

.dsc-hero-title { font-family: Georgia, serif; font-size: clamp(2.2rem, 4.5vw, 3.4rem); font-weight: 700; color: var(--char); line-height: 1.1; margin-bottom: 14px; letter-spacing: -0.02em; }

.dsc-hero-tag { font-size: 1rem; color: var(--navy-primary); font-weight: 600; font-style: italic; margin-bottom: 16px; }

.dsc-hero-desc { color: var(--brown); font-size: 0.95rem; line-height: 1.8; margin-bottom: 28px; max-width: 460px; }

.dsc-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.dsc-wave { display: block; width: 100%; line-height: 0; margin-bottom: -2px; }

.dsc-wave svg { display: block; width: 100%; }

.dsc-explorer { background: rgb(255, 255, 255); padding: var(--section-gap) 0; }

.dsc-search-wrap { position: relative; max-width: 640px; margin: 0px auto 24px; }

.dsc-search { width: 100%; padding: 18px 60px 18px 52px; border-radius: 50px; border: 2px solid rgba(36, 52, 71, 0.2); font-size: 1rem; font-family: inherit; background: rgb(250, 250, 248); box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 28px; outline: none; color: var(--char); transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }

.dsc-search:focus { border-color: var(--navy-primary); box-shadow: rgba(36, 52, 71, 0.16) 0px 6px 32px; }

.dsc-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 1.2rem; pointer-events: none; }

.dsc-search-go { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

.dsc-cats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 32px; }

.dsc-cat { padding: 8px 18px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; border: 1.5px solid rgba(36, 52, 71, 0.2); background: rgb(255, 255, 255); color: var(--brown); cursor: pointer; transition: 0.2s; font-family: inherit; }

.dsc-cat:hover, .dsc-cat.active { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); }

.dsc-hub-cards { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

.dsc-hub-card { flex: 1 1 0%; min-width: 140px; background: rgb(255, 255, 255); border-radius: 16px; padding: 16px 14px; box-shadow: rgba(30, 45, 61, 0.08) 0px 3px 18px; border: 1px solid rgba(30, 45, 61, 0.06); text-align: center; cursor: pointer; transition: 0.22s; animation: 5s ease-in-out 0s infinite normal none running dscFloat; }

.dsc-hub-card:nth-child(2) { animation-delay: -1s; }

.dsc-hub-card:nth-child(3) { animation-delay: -2s; }

.dsc-hub-card:nth-child(4) { animation-delay: -3s; }

.dsc-hub-card:nth-child(5) { animation-delay: -4s; }

.dsc-hub-card:hover { transform: translateY(-4px); box-shadow: rgba(30, 45, 61, 0.12) 0px 8px 28px; }

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

.dsc-hub-icon { font-size: 1.6rem; margin-bottom: 7px; }

.dsc-hub-label { font-size: 0.76rem; font-weight: 700; color: rgb(30, 45, 61); line-height: 1.3; }

.dsc-hub-sub { font-size: 0.68rem; color: var(--brown); margin-top: 3px; }

.dsc-flow-section { background: linear-gradient(145deg, rgb(247, 248, 246), rgb(250, 250, 248)); padding: var(--section-gap) var(--content-pad); }

.dsc-flow-inner { max-width: 1000px; margin: 0px auto; }

.dsc-flow-row { display: flex; align-items: flex-start; gap: 0px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }

.dsc-flow-step { flex: 1 1 0%; min-width: 160px; max-width: 190px; text-align: center; position: relative; padding: 0px 8px; }

.dsc-flow-step:not(:last-child)::after { content: "→"; position: absolute; right: -14px; top: 22px; font-size: 1.3rem; color: var(--navy-primary); font-weight: 700; }

.dsc-flow-circle { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin: 0px auto 12px; box-shadow: rgba(74, 122, 78, 0.28) 0px 4px 16px; }

.dsc-flow-step h4 { font-size: 0.88rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 5px; }

.dsc-flow-step p { font-size: 0.74rem; color: var(--brown); line-height: 1.55; }

@media (max-width: 700px) {
  .dsc-flow-row { flex-direction: column; align-items: center; gap: 24px; }
  .dsc-flow-step { max-width: 260px; }
  .dsc-flow-step:not(:last-child)::after { content: "↓"; inset: auto auto -20px 50%; transform: translateX(-50%); }
}

.dsc-feat-section { background: rgb(255, 255, 255); padding: var(--section-gap) var(--content-pad); }

.dsc-feat-inner { max-width: var(--content-max); margin: 0px auto; }

.dsc-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.dsc-feat-grid .dsc-feat-card:nth-child(4), .dsc-feat-grid .dsc-feat-card:nth-child(5) { grid-column: span 1; }

@media (max-width: 900px) {
  .dsc-feat-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .dsc-feat-grid { grid-template-columns: 1fr; }
}

.dsc-feat-card { border-radius: 22px; overflow: hidden; box-shadow: rgba(30, 45, 61, 0.08) 0px 4px 24px; border: 1px solid rgba(30, 45, 61, 0.06); background: rgb(255, 255, 255); cursor: pointer; transition: 0.24s; display: flex; flex-direction: column; }

.dsc-feat-card:hover { transform: translateY(-5px); box-shadow: rgba(30, 45, 61, 0.13) 0px 12px 40px; }

.dsc-feat-banner { padding: 32px 24px 24px; display: flex; align-items: flex-start; gap: 16px; }

.dsc-feat-emoji { font-size: 2.8rem; flex-shrink: 0; }

.dsc-feat-body { flex: 1 1 0%; }

.dsc-feat-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.dsc-feat-tag { font-size: 0.63rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; background: rgba(36, 52, 71, 0.12); color: var(--sage-dk); }

.dsc-feat-card h3 { font-family: Georgia, serif; font-size: 1.08rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 7px; line-height: 1.2; }

.dsc-feat-card p { font-size: 0.82rem; color: var(--brown); line-height: 1.65; margin-bottom: 0px; }

.dsc-feat-foot { padding: 0px 24px 22px; margin-top: auto; }

.dsc-feat-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; border-radius: 50px; font-size: 0.78rem; font-weight: 700; background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; transition: 0.2s; box-shadow: rgba(74, 122, 78, 0.25) 0px 3px 12px; }

.dsc-feat-btn:hover { transform: translateY(-1px); box-shadow: rgba(74, 122, 78, 0.35) 0px 5px 18px; }

.dsc-season-section { background: linear-gradient(145deg, rgb(250, 250, 248), rgb(240, 248, 241)); padding: var(--section-gap) var(--content-pad); }

.dsc-season-inner { max-width: 1100px; margin: 0px auto; }

.dsc-season-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@media (max-width: 760px) {
  .dsc-season-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
  .dsc-season-grid { grid-template-columns: 1fr; }
}

.dsc-season-card { background: rgb(255, 255, 255); border-radius: 18px; padding: 22px 18px; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 14px; border: 1px solid rgba(30, 45, 61, 0.05); cursor: pointer; transition: 0.22s; }

.dsc-season-card:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.1) 0px 7px 24px; }

.dsc-season-icon { font-size: 1.6rem; margin-bottom: 9px; }

.dsc-season-card h4 { font-size: 0.92rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 5px; }

.dsc-season-card p { font-size: 0.79rem; color: var(--brown); line-height: 1.6; margin-bottom: 11px; }

.dsc-season-link { font-size: 0.74rem; font-weight: 600; color: var(--sage-dk); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; padding: 0px; transition: color 0.18s; }

.dsc-season-link:hover { color: var(--navy-primary); }

.dsc-stories-section { background: rgb(255, 255, 255); padding: var(--section-gap) var(--content-pad); }

.dsc-stories-inner { max-width: 1100px; margin: 0px auto; }

.dsc-stories-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@media (max-width: 760px) {
  .dsc-stories-track { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 500px) {
  .dsc-stories-track { grid-template-columns: 1fr; }
}

.dsc-story-card { background: linear-gradient(145deg, rgb(250, 248, 245), rgb(247, 248, 246)); border-radius: 18px; padding: 22px 20px; box-shadow: rgba(30, 45, 61, 0.06) 0px 2px 14px; border: 1px solid rgba(30, 45, 61, 0.05); display: flex; flex-direction: column; gap: 10px; }

.dsc-story-icon { font-size: 1.4rem; }

.dsc-story-quote { font-size: 0.86rem; color: rgb(30, 45, 61); line-height: 1.7; font-style: italic; font-weight: 400; flex: 1 1 0%; }

.dsc-story-tag { display: inline-flex; font-size: 0.66rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; background: var(--sage-lt); color: var(--sage-dk); align-self: flex-start; }

.dsc-story-link { font-size: 0.73rem; font-weight: 600; color: var(--sage-dk); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; padding: 0px; transition: color 0.18s; }

.dsc-story-link:hover { color: var(--navy-primary); }

.dsc-sec-eyebrow { font-size: 0.69rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-primary); text-align: center; margin-bottom: 9px; }

.dsc-sec-title { font-family: Georgia, serif; font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 700; color: rgb(30, 45, 61); text-align: center; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 9px; }

.dsc-sec-sub { font-size: 0.95rem; color: var(--brown); line-height: 1.75; text-align: center; max-width: 520px; margin: 0px auto 44px; font-weight: 300; }

.dsc-sec-cta-row { text-align: center; margin-top: 36px; }

@media (max-width: 560px) {
  .dsc-hub-cards { gap: 8px; }
  .dsc-hub-card { min-width: 120px; padding: 12px 10px; }
  .dsc-feat-banner { padding: 22px 18px 16px; }
  .dsc-feat-foot { padding: 0px 18px 18px; }
}

.mfv-hero { padding: var(--section-gap) 0 var(--section-gap-sm); background: rgb(255, 255, 255); position: relative; overflow: hidden; }

.mfv-hero::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(at 70% 50%, rgba(36, 52, 71, 0.25) 0%, transparent 65%); }

.mfv-hero-content { position: relative; z-index: 1; }

.mfv-hero h1 { font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: rgb(255, 255, 255); line-height: 1.15; margin-bottom: 14px; }

.mfv-hero p { color: rgba(255, 255, 255, 0.8); font-size: 1rem; line-height: 1.7; max-width: 520px; margin-bottom: 28px; }

.mfv-hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }

.mfv-hero-badge { display: flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; padding: 8px 16px; color: rgb(255, 255, 255); font-size: 0.82rem; font-weight: 700; }

.mfv-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

.mfv-badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

@media (max-width: 860px) {
  .mfv-badge-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
  .mfv-badge-grid { grid-template-columns: 1fr 1fr; }
}

.mfv-badge-card { background: rgb(255, 255, 255); border-radius: 22px; padding: 24px 18px; text-align: center; box-shadow: var(--sh); border-top: 4px solid transparent; transition: transform 0.2s, box-shadow 0.2s; }

.mfv-badge-card:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 36px; }

.mfv-badge-icon-wrap { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0px auto 14px; }

.mfv-badge-name { font-weight: 800; font-size: 0.9rem; color: var(--char); margin-bottom: 5px; }

.mfv-badge-desc { font-size: 0.75rem; color: var(--brown); line-height: 1.55; margin-bottom: 10px; }

.mfv-badge-req { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 50px; display: inline-block; }

.mfv-top-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

@media (max-width: 760px) {
  .mfv-top-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .mfv-top-grid { grid-template-columns: 1fr; }
}

.mfv-top-card { background: rgb(255, 255, 255); border-radius: 22px; overflow: hidden; box-shadow: var(--sh); cursor: pointer; transition: transform 0.2s; }

.mfv-top-card:hover { transform: translateY(-4px); }

.mfv-top-img { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; position: relative; }

.mfv-top-rank { position: absolute; top: 12px; left: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: var(--char); box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px; }

.mfv-top-badges { position: absolute; bottom: 10px; left: 10px; display: flex; gap: 5px; flex-wrap: wrap; }

.mfv-top-badge-pill { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); border-radius: 50px; padding: 2px 9px; font-size: 0.62rem; font-weight: 800; color: var(--char); }

.mfv-top-body { padding: 16px; }

.mfv-top-name { font-weight: 800; font-size: 0.95rem; color: var(--char); margin-bottom: 3px; }

.mfv-top-city { font-size: 0.75rem; color: var(--brown); margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }

.mfv-top-score { display: flex; align-items: center; gap: 8px; }

.mfv-top-score-val { font-weight: 800; font-size: 1.1rem; color: var(--navy-primary); }

.mfv-top-score-bar { flex: 1 1 0%; height: 5px; background: rgb(238, 238, 238); border-radius: 3px; overflow: hidden; }

.mfv-top-score-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg,var(--sage),#90e0a8); }

.mfv-how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }

@media (max-width: 700px) {
  .mfv-how-steps { grid-template-columns: repeat(2, 1fr); }
}

.mfv-how-step { text-align: center; }

.mfv-how-num { width: 44px; height: 44px; border-radius: 50%; background: var(--navy-primary); color: rgb(255, 255, 255); font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: center; margin: 0px auto 12px; }

.mfv-how-icon { font-size: 2rem; margin-bottom: 10px; }

.mfv-how-title { font-weight: 800; font-size: 0.88rem; color: var(--char); margin-bottom: 4px; }

.mfv-how-sub { font-size: 0.75rem; color: var(--brown); line-height: 1.55; }

.mfv-claim-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }

@media (max-width: 700px) {
  .mfv-claim-split { grid-template-columns: 1fr; }
}

.mfv-claim-form { background: rgb(255, 255, 255); border-radius: 22px; padding: 28px; box-shadow: var(--sh); }

.mfv-form-title { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--char); margin-bottom: 18px; }

.mfv-field { margin-bottom: 14px; }

.mfv-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brown); display: block; margin-bottom: 5px; }

.mfv-input { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1.5px solid rgb(224, 219, 212); font-size: 0.88rem; font-family: inherit; background: rgb(250, 250, 248); outline: none; box-sizing: border-box; transition: border-color 0.15s; }

.mfv-input:focus { border-color: var(--navy-primary); }

.mfv-assets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 700px) {
  .mfv-assets-grid { grid-template-columns: 1fr; }
}

.mfv-asset-card { background: rgb(255, 255, 255); border-radius: 22px; overflow: hidden; box-shadow: var(--sh); }

.mfv-asset-preview { height: 200px; display: flex; align-items: center; justify-content: center; position: relative; }

.mfv-asset-body { padding: 18px 20px; }

.mfv-asset-title { font-weight: 800; font-size: 0.92rem; color: var(--char); margin-bottom: 4px; }

.mfv-asset-sub { font-size: 0.76rem; color: var(--brown); margin-bottom: 14px; }

.mfv-asset-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.mfv-profile-hero { min-height: 260px; display: flex; align-items: flex-end; position: relative; overflow: hidden; }

.mfv-profile-overlay { position: absolute; inset: 0px; background: linear-gradient(to top, rgba(20, 20, 15, 0.78) 0%, rgba(0, 0, 0, 0.08) 60%); }

.mfv-profile-content { position: relative; z-index: 2; padding: 28px 32px; width: 100%; box-sizing: border-box; }

@media (max-width: 600px) {
  .mfv-profile-content { padding: 20px; }
}

.mfv-claimed-badge { display: inline-flex; align-items: center; gap: 6px; background: rgb(34, 197, 94); color: rgb(255, 255, 255); border-radius: 50px; padding: 4px 12px; font-size: 0.72rem; font-weight: 700; margin-bottom: 10px; }

.mfv-earned-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 50px; font-size: 0.78rem; font-weight: 800; border: 2px solid; }

.mfv-profile-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }

@media (max-width: 820px) {
  .mfv-profile-layout { grid-template-columns: 1fr; }
}

.mfv-meal-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 24px; }

.mfv-meal-photo { border-radius: 12px; height: 95px; display: flex; align-items: center; justify-content: center; font-size: 2rem; cursor: pointer; transition: transform 0.15s; }

.mfv-meal-photo:hover { transform: scale(1.04); }

.mp-img-hero-wrap { position: relative; width: 100vw; left: 50%; margin-left: -50vw; margin-bottom: 0px; padding: 0px; overflow: hidden; background: rgb(255, 255, 255); line-height: 0; height: clamp(360px, 40vw, 540px); margin-top: 0px !important; }

.mp-img-hero-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center top; }

.mp-img-hero-bar { position: relative; margin-top: 18px; width: 100vw; left: 50%; margin-left: -50vw; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-top-width: medium; border-top-style: none; border-top-color: currentcolor; padding: clamp(14px, 2.5vw, 22px) clamp(20px, 6vw, 80px); display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 768px) {
  .mp-img-hero-bar { margin-top: 22px; padding-top: 14px; }
  .mp-img-hero-wrap { height: clamp(220px, 58vw, 310px); }
  .mp-img-hero-wrap img { object-position: 28% top; }
  .mp-img-hero-bar { padding: 14px 16px; }
}

@media (max-width: 480px) {
  .mp-img-hero-wrap { height: 230px; }
  .mp-img-hero-wrap img { object-position: 24% top; }
  .mp2-search { padding-right: 18px; }
  .mp2-search-go { position: static; transform: none; margin-top: 10px; width: 100%; }
  .mp2-search-wrap { display: flex; flex-direction: column; }
}

.mp2-hero { padding: var(--section-gap) 0 0; background: linear-gradient(160deg,#DDE5D8 0%,#E8F0F5 50%,var(--cream) 100%); }

.mp2-hero-inner { max-width: 740px; }

.mp2-search-wrap { position: relative; margin: 22px 0px 18px; }

.mp2-search { width: 100%; padding: 16px 56px 16px 52px; border-radius: 50px; border: 2px solid rgba(36, 52, 71, 0.2); font-size: 0.95rem; font-family: inherit; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 24px; outline: none; color: var(--char); transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }

.mp2-search:focus { border-color: var(--navy-primary); box-shadow: rgba(36, 52, 71, 0.18) 0px 4px 28px; }

.mp2-search-pin { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; pointer-events: none; }

.mp2-search-go { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

.mp2-filters { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 24px; }

.mp2-filter { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 50px; border: 1.5px solid rgb(224, 219, 212); background: rgb(255, 255, 255); font-size: 0.82rem; font-weight: 600; color: var(--brown); cursor: pointer; font-family: inherit; transition: 0.18s; }

.mp2-filter:hover, .mp2-filter.active { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); }

.mp2-filter-calm.active { background: rgb(36, 52, 71); border-color: rgb(36, 52, 71); }

.mp2-filter-focus.active { background: rgb(91, 154, 181); border-color: rgb(91, 154, 181); }

.mp2-filter-energy.active { background: rgb(200, 144, 10); border-color: rgb(200, 144, 10); }

.mp2-filter-comfort.active { background: rgb(192, 90, 32); border-color: rgb(192, 90, 32); }

.mp2-autocomplete { position: absolute; top: 100%; left: 0px; right: 0px; z-index: 200; background: rgb(255, 255, 255); border-radius: 14px; box-shadow: rgba(0, 0, 0, 0.14) 0px 8px 32px; border: 1.5px solid rgba(36, 52, 71, 0.2); overflow: hidden; margin-top: 4px; }

.mp2-ac-item { display: flex; align-items: center; gap: 10px; padding: 11px 18px; font-size: 0.88rem; color: var(--char); cursor: pointer; transition: background 0.15s; }

.mp2-ac-item:hover { background: var(--sage-lt); color: var(--sage-dk); }

.mp2-ac-icon { font-size: 0.85rem; opacity: 0.5; flex-shrink: 0; }

.mp2-split { display: grid; grid-template-columns: 1fr 420px; min-height: 560px; gap: 0px; }

@media (max-width: 900px) {
  .mp2-split { grid-template-columns: 1fr; }
}

.mp2-map-col { position: relative; background: rgb(232, 240, 228); overflow: hidden; min-height: 400px; }

.mp2-map-svg { width: 100%; height: 100%; object-fit: cover; }

.mp2-map-pin { position: absolute; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.2s; }

.mp2-map-pin:hover { transform: scale(1.15); }

.mp2-map-pin-dot { width: 36px; height: 36px; border-radius: 50%; background: var(--navy-primary); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 1rem; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 12px; border: 2.5px solid rgb(255, 255, 255); }

.mp2-map-pin-label { background: rgb(255, 255, 255); border-radius: 6px; padding: 2px 7px; font-size: 0.62rem; font-weight: 700; color: var(--char); box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 8px; white-space: nowrap; margin-top: 3px; }

.mp2-map-pin.active .mp2-map-pin-dot { background: var(--sage-dk); transform: scale(1.15); }

.mp2-cards-col { background: rgb(255, 255, 255); overflow-y: auto; max-height: 560px; padding: 16px; }

@media (max-width: 900px) {
  .mp2-cards-col { max-height: none; }
}

.mp2-venue-card { border-radius: 16px; padding: 16px; border: 2px solid transparent; cursor: pointer; transition: 0.2s; display: flex; gap: 14px; margin-bottom: 10px; background: var(--hu-white-mist); }

.mp2-venue-card:hover, .mp2-venue-card.active { border-color: var(--navy-primary); background: rgb(255, 255, 255); box-shadow: rgba(36, 52, 71, 0.13) 0px 4px 20px; }

.mp2-venue-thumb { width: 68px; height: 68px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; overflow: hidden; }

.mp2-venue-name { font-weight: 800; font-size: 0.92rem; color: var(--char); margin-bottom: 2px; }

.mp2-venue-loc { font-size: 0.72rem; color: var(--brown); margin-bottom: 7px; display: flex; align-items: center; gap: 4px; }

.mp2-venue-moods { display: flex; gap: 6px; flex-wrap: wrap; }

.mp2-venue-mood { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 50px; }

.mp2-venue-score { font-size: 0.7rem; color: var(--brown); margin-top: 5px; display: flex; align-items: center; gap: 4px; }

.mp2-venue-score-bar { flex: 1 1 0%; height: 4px; background: rgb(238, 238, 238); border-radius: 2px; overflow: hidden; max-width: 80px; }

.mp2-venue-score-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg,var(--sage),#90e0a8); }

.mp2-trending-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

@media (max-width: 700px) {
  .mp2-trending-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 460px) {
  .mp2-trending-grid { grid-template-columns: 1fr; }
}

.mp2-trend-card { border-radius: 20px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: var(--sh); cursor: pointer; transition: transform 0.2s; }

.mp2-trend-card:hover { transform: translateY(-4px); }

.mp2-trend-img { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; position: relative; }

.mp2-trend-score { position: absolute; bottom: 10px; left: 10px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(4px); border-radius: 50px; padding: 3px 10px; font-size: 0.68rem; font-weight: 700; color: var(--navy-primary); }

.mp2-trend-body { padding: 14px; }

.mp2-trend-dish { font-size: 0.78rem; color: var(--brown); margin-bottom: 3px; }

.mp2-trend-venue { font-weight: 800; font-size: 0.9rem; color: var(--char); margin-bottom: 2px; }

.mp2-trend-city { font-size: 0.7rem; color: var(--brown); }

.mp2-guides-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

@media (max-width: 700px) {
  .mp2-guides-grid { grid-template-columns: 1fr; }
}

.mp2-guide-card { border-radius: 20px; padding: 24px 20px; cursor: pointer; transition: transform 0.2s; position: relative; overflow: hidden; }

.mp2-guide-card:hover { transform: translateY(-3px); }

.mp2-guide-icon { font-size: 2.4rem; margin-bottom: 12px; }

.mp2-guide-title { font-family: Georgia, serif; font-size: 1rem; font-weight: 700; color: var(--char); margin-bottom: 6px; line-height: 1.35; }

.mp2-guide-count { font-size: 0.72rem; color: var(--brown); }

.mp2-profile-hero { height: 280px; display: flex; align-items: flex-end; padding: 0px; position: relative; overflow: hidden; }

@media (max-width: 600px) {
  .mp2-profile-hero { height: 200px; }
}

.mp2-profile-overlay { position: absolute; inset: 0px; background: linear-gradient(to top, rgba(20, 20, 15, 0.75) 0%, rgba(0, 0, 0, 0.1) 60%); }

.mp2-profile-content { position: relative; z-index: 2; padding: 24px 32px; width: 100%; box-sizing: border-box; }

@media (max-width: 600px) {
  .mp2-profile-content { padding: 18px; }
}

.mp2-profile-body { background: var(--hu-white-mist); padding: 40px 0px 60px; }

.mp2-profile-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; align-items: start; }

@media (max-width: 820px) {
  .mp2-profile-layout { grid-template-columns: 1fr; }
}

.mp2-dish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }

@media (max-width: 500px) {
  .mp2-dish-grid { grid-template-columns: repeat(2, 1fr); }
}

.mp2-dish-card { border-radius: 14px; overflow: hidden; cursor: pointer; position: relative; }

.mp2-dish-img { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; }

.mp2-dish-name { font-size: 0.72rem; font-weight: 700; color: var(--char); padding: 8px 10px 10px; }

.mp2-user-flow { display: flex; align-items: center; justify-content: center; gap: 0px; flex-wrap: wrap; margin: 0px auto; max-width: 600px; }

.mp2-flow-step { text-align: center; padding: 16px 12px; flex: 1 1 0%; min-width: 100px; }

.mp2-flow-icon { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0px auto 10px; background: rgb(255, 255, 255); box-shadow: var(--sh); }

.mp2-flow-label { font-size: 0.78rem; font-weight: 700; color: var(--char); }

.mp2-flow-arrow { font-size: 1.2rem; color: var(--navy-primary); padding: 0px 4px; margin-top: -20px; }

@media (max-width: 500px) {
  .mp2-flow-arrow { display: none; }
}

.mp2-swipe-strip { display: none; }

@media (max-width: 900px) {
  .mp2-swipe-strip { display: flex; gap: 12px; overflow-x: auto; padding: 14px 16px; scroll-snap-type: x mandatory; }
  .mp2-swipe-strip::-webkit-scrollbar { display: none; }
  .mp2-swipe-card { min-width: 260px; scroll-snap-align: start; background: rgb(255, 255, 255); border-radius: 16px; padding: 14px; box-shadow: var(--sh); flex-shrink: 0; cursor: pointer; }
}

.mp2-loc-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 0px 4px; align-items: center; }

.mp2-loc-btn { display: flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 50px; border: 1.5px solid rgb(224, 219, 212); background: rgb(255, 255, 255); font-size: 0.78rem; font-weight: 600; color: var(--brown); cursor: pointer; font-family: inherit; transition: 0.18s; white-space: nowrap; }

.mp2-loc-btn:hover, .mp2-loc-btn.active { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); }

.mp2-loc-sep { color: rgb(221, 221, 221); font-size: 0.75rem; padding: 0px 2px; }

.mp2-radius-select { padding: 7px 12px; border-radius: 50px; border: 1.5px solid rgb(224, 219, 212); background: rgb(255, 255, 255); font-size: 0.78rem; font-weight: 600; color: var(--brown); cursor: pointer; font-family: inherit; outline: none; }

.mp2-mood-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0px 16px; overflow-x: auto; }

.mp2-mood-chips::-webkit-scrollbar { display: none; }

.mp2-chip { display: flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 50px; border: 1.5px solid rgb(224, 219, 212); background: rgb(255, 255, 255); font-size: 0.77rem; font-weight: 600; color: var(--brown); cursor: pointer; font-family: inherit; transition: 0.18s; white-space: nowrap; flex-shrink: 0; }

.mp2-chip:hover { background: var(--sage-lt); border-color: var(--navy-primary); color: var(--sage-dk); }

.mp2-chip.active { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); }

.mp2-chip.chip-calm.active { background: rgb(36, 52, 71); border-color: rgb(36, 52, 71); }

.mp2-chip.chip-focus.active { background: rgb(91, 154, 181); border-color: rgb(91, 154, 181); }

.mp2-chip.chip-energy.active { background: rgb(200, 144, 10); border-color: rgb(200, 144, 10); }

.mp2-chip.chip-comfort.active { background: rgb(192, 90, 32); border-color: rgb(192, 90, 32); }

.mp2-chip.chip-low-sensory.active { background: rgb(156, 127, 192); border-color: rgb(156, 127, 192); }

.mp2-venue-card-v2 { border-radius: 16px; padding: 16px; border: 2px solid transparent; cursor: pointer; transition: 0.2s; background: var(--hu-white-mist); margin-bottom: 10px; }

.mp2-venue-card-v2:hover, .mp2-venue-card-v2.active { border-color: var(--navy-primary); background: rgb(255, 255, 255); box-shadow: rgba(36, 52, 71, 0.13) 0px 4px 20px; }

.mp2-vc-top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }

.mp2-vc-thumb { width: 64px; height: 64px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; flex-shrink: 0; }

.mp2-vc-info { flex: 1 1 0%; min-width: 0px; }

.mp2-vc-name { font-weight: 800; font-size: 0.9rem; color: var(--char); margin-bottom: 1px; }

.mp2-vc-sub { font-size: 0.7rem; color: var(--brown); margin-bottom: 5px; }

.mp2-vc-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }

.mp2-vc-badge-pill { font-size: 0.6rem; font-weight: 700; padding: 2px 7px; border-radius: 50px; background: var(--sage-lt); color: var(--sage-dk); }

.mp2-vc-badge-pill.partner { background: rgb(241, 239, 237); color: rgb(122, 85, 0); }

.mp2-vc-status { font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 50px; }

.mp2-vc-status.open { background: rgb(212, 237, 218); color: rgb(21, 87, 36); }

.mp2-vc-status.closed { background: rgb(248, 215, 218); color: rgb(114, 28, 36); }

.mp2-vc-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.7rem; color: var(--brown); margin-bottom: 8px; align-items: center; }

.mp2-vc-env { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 10px; }

.mp2-vc-env-item { display: flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--char); }

.mp2-vc-env-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--navy-primary); flex-shrink: 0; }

.mp2-vc-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.mp2-vc-btn { padding: 7px 13px; border-radius: 50px; border: 1.5px solid var(--sage); background: rgb(255, 255, 255); color: var(--navy-primary); font-size: 0.72rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.18s; }

.mp2-vc-btn:hover, .mp2-vc-btn.saved { background: var(--navy-primary); color: rgb(255, 255, 255); }

.mp2-vc-btn.primary { background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); border-color: var(--sage-dk); }

.mp2-vc-btn.primary:hover { transform: translateY(-1px); }

.mp2-share-modal { position: fixed; inset: 0px; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s; }

.mp2-share-modal.open { opacity: 1; pointer-events: all; }

.mp2-share-backdrop { position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); }

.mp2-share-sheet { position: relative; z-index: 1; background: rgb(255, 255, 255); border-radius: 24px 24px 0px 0px; padding: 28px 24px 40px; width: 100%; max-width: 540px; box-shadow: rgba(0, 0, 0, 0.18) 0px -8px 40px; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.mp2-share-modal.open .mp2-share-sheet { transform: translateY(0px); }

.mp2-share-handle { width: 40px; height: 4px; background: rgb(224, 219, 212); border-radius: 2px; margin: 0px auto 20px; }

.mp2-share-card-preview { background: linear-gradient(135deg, rgb(26, 58, 42), rgb(45, 90, 62)); border-radius: 20px; padding: 24px; margin-bottom: 20px; color: rgb(255, 255, 255); position: relative; overflow: hidden; }

.mp2-share-card-preview::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.08), transparent 60%); }

.mp2-share-card-logo { font-family: Georgia, serif; font-size: 0.78rem; font-weight: 700; color: rgba(255, 255, 255, 0.6); margin-bottom: 14px; letter-spacing: 0.06em; text-transform: uppercase; }

.mp2-share-card-dish { font-size: 1.15rem; font-weight: 800; color: rgb(255, 255, 255); margin-bottom: 4px; line-height: 1.3; }

.mp2-share-card-venue { font-size: 0.88rem; color: rgba(255, 255, 255, 0.8); margin-bottom: 12px; }

.mp2-share-card-score { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.15); border-radius: 50px; padding: 5px 13px; font-size: 0.78rem; font-weight: 700; color: rgb(255, 255, 255); }

.mp2-share-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }

.mp2-share-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 12px; border-radius: 16px; background: var(--hu-white-mist); border: 2px solid transparent; cursor: pointer; transition: 0.18s; font-family: inherit; }

.mp2-share-opt:hover { border-color: var(--navy-primary); background: rgb(255, 255, 255); }

.mp2-share-opt-icon { font-size: 1.6rem; }

.mp2-share-opt-label { font-size: 0.75rem; font-weight: 700; color: var(--char); }

.mp2-share-note { font-size: 0.72rem; color: var(--brown); text-align: center; margin-top: 8px; line-height: 1.6; }

.mp2-reflect-modal { position: fixed; inset: 0px; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }

.mp2-reflect-modal.open { opacity: 1; pointer-events: all; }

.mp2-reflect-backdrop { position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); }

.mp2-reflect-box { position: relative; z-index: 1; background: rgb(255, 255, 255); border-radius: 24px; padding: 28px 24px; width: 100%; max-width: 480px; box-shadow: rgba(0, 0, 0, 0.18) 0px 12px 60px; transform: scale(0.94); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.mp2-reflect-modal.open .mp2-reflect-box { transform: scale(1); }

.mp2-reflect-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0px; }

.mp2-reflect-opt { padding: 11px 12px; border-radius: 12px; border: 2px solid rgb(224, 219, 212); background: var(--hu-white-mist); font-size: 0.78rem; font-weight: 700; color: var(--char); cursor: pointer; font-family: inherit; text-align: center; transition: 0.18s; }

.mp2-reflect-opt:hover, .mp2-reflect-opt.sel { border-color: var(--navy-primary); background: var(--sage-lt); color: var(--sage-dk); }

.mp2-reflect-ta { width: 100%; min-height: 80px; border-radius: 12px; border: 2px solid rgb(224, 219, 212); padding: 12px; font-size: 0.82rem; font-family: inherit; color: var(--char); resize: vertical; outline: none; box-sizing: border-box; transition: border-color 0.18s; }

.mp2-reflect-ta:focus { border-color: var(--navy-primary); }

.mp2-trails-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

@media (max-width: 640px) {
  .mp2-trails-grid { grid-template-columns: 1fr; }
}

.mp2-trail-card { border-radius: 22px; padding: 22px 20px; background: rgb(255, 255, 255); box-shadow: var(--sh); cursor: pointer; transition: 0.2s; border-top: 4px solid var(--sage); position: relative; overflow: hidden; }

.mp2-trail-card:hover { transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 28px; }

.mp2-trail-mood { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy-primary); margin-bottom: 8px; }

.mp2-trail-name { font-family: Georgia, serif; font-size: 1rem; font-weight: 700; color: var(--char); margin-bottom: 8px; line-height: 1.3; }

.mp2-trail-stops { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }

.mp2-trail-stop { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--char); }

.mp2-trail-stop-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--sage-lt); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; }

.mp2-trail-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.7rem; color: var(--brown); }

.mp2-trail-save { background: none; border: 1.5px solid var(--sage); color: var(--navy-primary); border-radius: 50px; padding: 5px 13px; font-size: 0.72rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.18s; }

.mp2-trail-save:hover, .mp2-trail-save.saved { background: var(--navy-primary); color: rgb(255, 255, 255); }

.mp2-popular-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 20px; }

.mp2-popular-tabs::-webkit-scrollbar { display: none; }

.mp2-pop-tab { padding: 7px 14px; border-radius: 50px; border: 1.5px solid rgb(224, 219, 212); background: rgb(255, 255, 255); font-size: 0.76rem; font-weight: 600; color: var(--brown); cursor: pointer; font-family: inherit; white-space: nowrap; transition: 0.18s; flex-shrink: 0; }

.mp2-pop-tab:hover, .mp2-pop-tab.active { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); }

.mp2-popular-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@media (max-width: 700px) {
  .mp2-popular-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 440px) {
  .mp2-popular-grid { grid-template-columns: 1fr; }
}

.mp2-pop-card { border-radius: 18px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: var(--sh); cursor: pointer; transition: transform 0.2s; }

.mp2-pop-card:hover { transform: translateY(-3px); }

.mp2-pop-img { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; position: relative; }

.mp2-pop-mood-badge { position: absolute; bottom: 8px; left: 8px; background: rgba(255, 255, 255, 0.92); border-radius: 50px; padding: 2px 9px; font-size: 0.62rem; font-weight: 700; color: var(--navy-primary); }

.mp2-pop-body { padding: 12px; }

.mp2-pop-dish { font-size: 0.78rem; color: var(--brown); margin-bottom: 1px; }

.mp2-pop-venue { font-weight: 800; font-size: 0.85rem; color: var(--char); margin-bottom: 1px; }

.mp2-pop-loc { font-size: 0.67rem; color: var(--brown); margin-bottom: 7px; }

.mp2-pop-log { width: 100%; background: none; border: 1.5px solid var(--sage); color: var(--navy-primary); border-radius: 50px; padding: 5px; font-size: 0.7rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.18s; }

.mp2-pop-log:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.mp2-saved-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

@media (max-width: 500px) {
  .mp2-saved-grid { grid-template-columns: 1fr; }
}

.mp2-saved-cat { background: rgb(255, 255, 255); border-radius: 18px; padding: 18px; box-shadow: var(--sh); cursor: pointer; transition: 0.2s; border: 2px solid transparent; }

.mp2-saved-cat:hover { border-color: var(--navy-primary); transform: translateY(-2px); }

.mp2-saved-cat-icon { font-size: 1.6rem; margin-bottom: 8px; }

.mp2-saved-cat-name { font-weight: 800; font-size: 0.88rem; color: var(--char); margin-bottom: 3px; }

.mp2-saved-cat-count { font-size: 0.73rem; color: var(--brown); }

.mp2-ai-panel { position: fixed; inset: 0px; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s; }

.mp2-ai-panel.open { opacity: 1; pointer-events: all; }

.mp2-ai-backdrop { position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(4px); }

.mp2-ai-sheet { position: relative; z-index: 1; background: rgb(255, 255, 255); border-radius: 24px 24px 0px 0px; padding: 28px 24px 48px; width: 100%; max-width: 540px; box-shadow: rgba(0, 0, 0, 0.18) 0px -8px 40px; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.mp2-ai-panel.open .mp2-ai-sheet { transform: translateY(0px); }

.mp2-ai-feeling-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0px 20px; }

.mp2-ai-feeling { padding: 12px 8px; border-radius: 14px; border: 2px solid rgb(224, 219, 212); background: var(--hu-white-mist); font-size: 0.75rem; font-weight: 700; color: var(--char); cursor: pointer; font-family: inherit; text-align: center; transition: 0.18s; }

.mp2-ai-feeling:hover, .mp2-ai-feeling.sel { border-color: var(--navy-primary); background: var(--sage-lt); color: var(--sage-dk); }

.mp2-ai-feeling-icon { font-size: 1.4rem; display: block; margin-bottom: 4px; }

.mp2-ai-recs { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

.mp2-ai-rec { display: flex; gap: 12px; align-items: center; background: var(--hu-white-mist); border-radius: 14px; padding: 12px 14px; cursor: pointer; transition: 0.18s; }

.mp2-ai-rec:hover { background: var(--sage-lt); }

.mp2-ai-rec-emoji { font-size: 1.6rem; flex-shrink: 0; }

.mp2-ai-rec-name { font-weight: 800; font-size: 0.85rem; color: var(--char); }

.mp2-ai-rec-why { font-size: 0.72rem; color: var(--brown); }

.mp2-ai-rec-score { font-weight: 700; color: var(--navy-primary); font-size: 0.78rem; margin-left: auto; flex-shrink: 0; }

.mp2-sticky-log { display: none; }

@media (max-width: 768px) {
  .mp2-sticky-log { display: block; position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%); z-index: 500; white-space: nowrap; }
  .mp2-sticky-log button { background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 13px 28px; border-radius: 50px; font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: rgba(36, 52, 71, 0.15) 0px 4px 20px; }
}

.mp2-partner-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 50px; font-size: 0.62rem; font-weight: 700; }

.mp2-pb-mood { background: rgb(221, 229, 216); color: rgb(45, 90, 48); }

.mp2-pb-calm { background: rgb(232, 240, 245); color: rgb(26, 94, 120); }

.mp2-pb-study { background: rgb(221, 229, 216); color: rgb(74, 59, 122); }

.mp2-pb-family { background: rgb(241, 239, 237); color: rgb(122, 85, 0); }

.mp2-pb-recovery { background: rgb(242, 223, 223); color: rgb(138, 48, 16); }

.mp2-pb-sensory { background: rgb(240, 232, 245); color: rgb(107, 58, 138); }

.mp2-pb-community { background: rgb(221, 229, 216); color: rgb(45, 90, 48); }

.habit-voice-page { --hv-sage: #243447; --hv-sage-dk: #3d6b42; --hv-sage-lt: #edf5ee; --hv-cream: #faf8f4; --hv-warm: #FDFDFC; --hv-pink-lt: #fdf0f0; --hv-pink: #e8a0a0; --hv-navy: #2d3e50; --hv-navy-lt: #e8ecf0; --hv-char: #2a2826; --hv-muted: #7a7268; --hv-border: rgba(36,52,71,0.18); --hv-r: 16px; --hv-r-lg: 24px; --hv-shadow: 0 4px 28px rgba(0,0,0,0.07); --hv-shadow-h: 0 16px 48px rgba(61,107,66,0.12); --hv-serif: 'Playfair Display', 'Georgia', serif; --hv-sans: 'DM Sans', system-ui, sans-serif; --hv-tr: all 0.28s cubic-bezier(0.25,0.46,0.45,0.94); font-family: var(--hv-sans); color: var(--hv-char); background: var(--hv-cream); -webkit-font-smoothing: antialiased; padding-top: 0px !important; }

.habit-voice-container { max-width: 1140px; margin: 0px auto; padding: 0px 32px; }

.habit-voice-section { padding: var(--section-gap) 0; }

.habit-voice-section:nth-child(2n) { background: var(--hv-warm); }

.habit-voice-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--hv-sage-dk); background: var(--hv-sage-lt); border: 1px solid var(--hv-border); border-radius: 50px; padding: 6px 16px; margin-bottom: 18px; }

.habit-voice-h2 { font-family: var(--hv-serif); font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 600; color: var(--hv-sage-dk); line-height: 1.18; margin-bottom: 12px; }

.habit-voice-sub { font-size: 1rem; font-weight: 300; color: var(--hv-muted); max-width: 560px; line-height: 1.72; }

.habit-voice-card { background: rgb(255, 255, 255); border: 1px solid var(--hv-border); border-radius: var(--hv-r-lg); padding: 28px; box-shadow: var(--hv-shadow); transition: var(--hv-tr); }

.habit-voice-card:hover { box-shadow: var(--hv-shadow-h); transform: translateY(-2px); }

.hv-log-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px; margin-top: 48px; }

.hv-mic-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 48px 32px; }

.hv-mic-wrap { position: relative; display: flex; align-items: center; justify-content: center; }

.hv-mic-ring { position: absolute; width: 120px; height: 120px; border-radius: 50%; background: rgba(36, 52, 71, 0.15); animation: auto ease 0s 1 normal none running none; }

.hv-mic-ring.hv-pulse { animation: 1.4s ease-in-out 0s infinite normal none running hvPulse; }

.hv-mic-ring-2 { position: absolute; width: 148px; height: 148px; border-radius: 50%; background: rgba(36, 52, 71, 0.08); animation: auto ease 0s 1 normal none running none; }

.hv-mic-ring-2.hv-pulse { animation: 1.4s ease-in-out 0.3s infinite normal none running hvPulse; }

@keyframes hvPulse { 
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.18); opacity: 0.4; }
}

.hv-mic-btn { width: 88px; height: 88px; border-radius: 50%; background: linear-gradient(145deg, var(--hv-sage), var(--hv-sage-dk)); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: rgba(61, 107, 66, 0.35) 0px 8px 32px; transition: var(--hv-tr); z-index: 1; position: relative; }

.hv-mic-btn:hover { transform: scale(1.06); box-shadow: rgba(61, 107, 66, 0.45) 0px 12px 40px; }

.hv-mic-btn.hv-recording { background: rgb(255, 255, 255); }

.hv-mic-btn svg { width: 32px; height: 32px; }

.hv-mic-status { font-size: 0.88rem; font-weight: 500; color: var(--hv-muted); letter-spacing: 0.02em; text-align: center; }

.hv-mic-status.hv-active { color: var(--hv-sage-dk); }

.hv-transcript { background: var(--hv-sage-lt); border: 1.5px solid var(--hv-border); border-radius: var(--hv-r); padding: 18px 20px; font-size: 0.92rem; font-style: italic; color: var(--hv-char); line-height: 1.65; font-family: var(--hv-serif); min-height: 64px; display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; }

.hv-transcript-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }

.hv-transcript-text { flex: 1 1 0%; }

.hv-action-card { background: rgb(255, 255, 255); border: 1.5px solid rgba(61, 107, 66, 0.2); border-radius: var(--hv-r); padding: 16px 20px; display: none; flex-direction: column; gap: 10px; width: 100%; box-sizing: border-box; }

.hv-action-card.hv-visible { display: flex; }

.hv-action-label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hv-sage); margin-bottom: 4px; }

.hv-action-title { font-family: var(--hv-serif); font-size: 1rem; font-weight: 600; color: var(--hv-sage-dk); }

.hv-action-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.hv-action-tag { font-size: 0.72rem; font-weight: 500; padding: 4px 12px; border-radius: 50px; background: var(--hv-sage-lt); color: var(--hv-sage-dk); border: 1px solid var(--hv-border); }

.hv-action-tag.hv-tag-pink { background: var(--hv-pink-lt); color: rgb(154, 64, 64); border-color: rgba(232, 160, 160, 0.3); }

.hv-action-tag.hv-tag-navy { background: var(--hv-navy-lt); color: var(--hv-navy); border-color: rgba(45, 62, 80, 0.15); }

.hv-action-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.hv-btn { font-family: var(--hv-sans); font-size: 0.82rem; font-weight: 500; border-radius: 50px; padding: 9px 20px; cursor: pointer; transition: var(--hv-tr); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; display: inline-flex; align-items: center; gap: 6px; }

.hv-btn-primary { background: var(--hv-sage-dk); color: rgb(255, 255, 255); }

.hv-btn-primary:hover { background: rgb(42, 77, 46); transform: translateY(-1px); box-shadow: rgba(61, 107, 66, 0.3) 0px 6px 18px; }

.hv-btn-outline { background: transparent; color: var(--hv-sage-dk); border: 1.5px solid var(--hv-sage-dk); }

.hv-btn-outline:hover { background: var(--hv-sage-dk); color: rgb(255, 255, 255); }

.hv-btn-ghost { background: transparent; color: var(--hv-muted); border: 1.5px solid rgba(122, 122, 122, 0.2); }

.hv-btn-ghost:hover { border-color: var(--hv-muted); color: var(--hv-char); }

.hv-right-panel { display: flex; flex-direction: column; gap: 16px; }

.hv-recent-title { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hv-sage); margin-bottom: 12px; }

.hv-log-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--hv-r); border: 1px solid var(--hv-border); background: rgb(255, 255, 255); transition: var(--hv-tr); cursor: default; margin-bottom: 8px; }

.hv-log-item:last-child { margin-bottom: 0px; }

.hv-log-item:hover { background: var(--hv-sage-lt); border-color: var(--hv-sage); }

.hv-log-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hv-sage); flex-shrink: 0; margin-top: 5px; }

.hv-log-dot.hv-dot-pink { background: var(--hv-pink); }

.hv-log-dot.hv-dot-navy { background: var(--hv-navy); }

.hv-log-body { flex: 1 1 0%; }

.hv-log-text { font-size: 0.83rem; color: var(--hv-char); line-height: 1.5; margin-bottom: 4px; }

.hv-log-meta { display: flex; gap: 6px; flex-wrap: wrap; }

.hv-log-tag { font-size: 0.65rem; font-weight: 500; padding: 2px 9px; border-radius: 50px; background: var(--hv-sage-lt); color: var(--hv-sage-dk); }

.hv-log-tag.hv-lt-pink { background: var(--hv-pink-lt); color: rgb(154, 64, 64); }

.hv-log-tag.hv-lt-navy { background: var(--hv-navy-lt); color: var(--hv-navy); }

.hv-log-time { font-size: 0.7rem; color: var(--hv-muted); margin-left: auto; flex-shrink: 0; }

.hv-planner-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }

.hv-planner-left { display: flex; flex-direction: column; gap: 18px; }

.hv-planner-right { display: flex; flex-direction: column; gap: 18px; }

.hv-planner-mic-bar { background: var(--hv-sage-dk); border-radius: var(--hv-r-lg); padding: 20px 24px; display: flex; align-items: center; gap: 16px; color: rgb(255, 255, 255); }

.hv-planner-mic-btn { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); border: 2px solid rgba(255, 255, 255, 0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--hv-tr); flex-shrink: 0; }

.hv-planner-mic-btn:hover { background: rgba(255, 255, 255, 0.3); }

.hv-planner-mic-btn.hv-recording { background: rgba(224, 85, 85, 0.85); border-color: rgba(255, 255, 255, 0.5); animation: 1s ease-in-out 0s infinite normal none running hvPulse; }

.hv-planner-mic-btn svg { width: 22px; height: 22px; }

.hv-planner-mic-text { flex: 1 1 0%; }

.hv-planner-mic-title { font-family: var(--hv-serif); font-size: 1.02rem; font-weight: 500; margin-bottom: 2px; }

.hv-planner-mic-sub { font-size: 0.78rem; opacity: 0.78; }

.hv-planner-cmd-display { background: rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 10px 14px; font-size: 0.82rem; font-style: italic; opacity: 0.9; line-height: 1.5; min-height: 36px; display: flex; align-items: center; }

.hv-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }

.hv-day-card { background: rgb(255, 255, 255); border: 1px solid var(--hv-border); border-radius: 12px; padding: 10px 7px; text-align: center; min-height: 100px; transition: var(--hv-tr); cursor: default; }

.hv-day-card:hover { border-color: var(--hv-sage); background: var(--hv-sage-lt); }

.hv-day-card.hv-day-today { border-color: var(--hv-sage-dk); border-width: 2px; }

.hv-day-name { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hv-muted); margin-bottom: 6px; }

.hv-day-meal { font-size: 0.72rem; color: var(--hv-char); line-height: 1.35; font-weight: 400; background: var(--hv-sage-lt); border-radius: 6px; padding: 4px 5px; margin-bottom: 4px; }

.hv-day-meal.hv-meal-pink { background: var(--hv-pink-lt); }

.hv-day-meal.hv-meal-navy { background: var(--hv-navy-lt); }

.hv-day-add { font-size: 0.68rem; color: var(--hv-sage); opacity: 0.7; }

.hv-grocery-list { list-style: none; padding: 0px; margin: 10px 0px 0px; display: flex; flex-direction: column; gap: 7px; }

.hv-grocery-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--hv-char); }

.hv-grocery-item input[type="checkbox"] { accent-color: var(--hv-sage-dk); width: 14px; height: 14px; cursor: pointer; }

.hv-grocery-item.hv-new { animation: 0.3s ease 0s 1 normal none running hvSlideIn; }

@keyframes hvSlideIn { 
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: none; }
}

.hv-recipe-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

.hv-recipe-chip { font-size: 0.78rem; padding: 5px 13px; border-radius: 50px; background: var(--hv-cream); color: var(--hv-char); border: 1px solid var(--hv-border); cursor: default; transition: var(--hv-tr); }

.hv-recipe-chip:hover { background: var(--hv-sage-lt); border-color: var(--hv-sage); }

.hv-suggest-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--hv-cream); border: 1px solid var(--hv-border); margin-bottom: 8px; transition: var(--hv-tr); cursor: default; }

.hv-suggest-item:hover { background: var(--hv-sage-lt); border-color: var(--hv-sage); }

.hv-suggest-icon { font-size: 1.2rem; flex-shrink: 0; }

.hv-suggest-text { font-size: 0.82rem; color: var(--hv-char); line-height: 1.4; }

.hv-suggest-tag { font-size: 0.65rem; padding: 2px 9px; border-radius: 50px; background: var(--hv-sage-lt); color: var(--hv-sage-dk); margin-left: auto; flex-shrink: 0; }

.hv-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; align-items: center; }

.hv-why-list { list-style: none; padding: 0px; margin: 0px; display: flex; flex-direction: column; gap: 16px; }

.hv-why-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-radius: var(--hv-r); background: rgb(255, 255, 255); border: 1px solid var(--hv-border); transition: var(--hv-tr); }

.hv-why-item:hover { background: var(--hv-sage-lt); border-color: var(--hv-sage); transform: translateX(4px); }

.hv-why-num { width: 28px; height: 28px; border-radius: 50%; background: var(--hv-sage-lt); color: var(--hv-sage-dk); font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.hv-why-text { font-size: 0.9rem; color: var(--hv-char); line-height: 1.55; }

.hv-cta-box { background: var(--hv-sage-dk); border-radius: var(--hv-r-lg); padding: 44px 40px; color: rgb(255, 255, 255); text-align: center; }

.hv-cta-title { font-family: var(--hv-serif); font-size: 1.8rem; font-weight: 600; margin-bottom: 12px; line-height: 1.2; }

.hv-cta-sub { font-size: 0.92rem; opacity: 0.82; margin-bottom: 28px; line-height: 1.65; }

.hv-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); color: var(--hv-sage-dk); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 14px 32px; font-family: var(--hv-sans); font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: var(--hv-tr); }

.hv-cta-btn:hover { background: var(--hv-sage-lt); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 28px; }

.hv-toast { position: fixed; bottom: 28px; right: 28px; z-index: 99999; background: var(--hv-sage-dk); color: rgb(255, 255, 255); border-radius: 50px; padding: 12px 22px; font-size: 0.85rem; font-weight: 500; box-shadow: rgba(0, 0, 0, 0.18) 0px 8px 28px; transform: translateY(80px); opacity: 0; transition: 0.35s cubic-bezier(0.34, 1.04, 0.64, 1); pointer-events: none; }

.hv-toast.hv-toast-show { transform: translateY(0px); opacity: 1; }

@media (max-width: 960px) {
  .hv-log-grid, .hv-planner-layout, .hv-why-grid { grid-template-columns: 1fr; }
  .hv-week-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 600px) {
  .habit-voice-container { padding: 0px 16px; }
  .habit-voice-section { padding: 56px 0px; }
  .hv-week-grid { grid-template-columns: repeat(2, 1fr); }
  .hv-cta-box { padding: 32px 24px; }
}

:root { --ff-sage: #243447; --ff-sage-dk: #31465F; --ff-sage-lt: #DDE5D8; --ff-cream: #FAFAF8; --ff-peach: #E7C9C9; --ff-peach-lt: #F2DFDF; --ff-lav: #BCC8B4; --ff-lav-lt: #DDE5D8; --ff-sky: #50657D; --ff-sky-lt: #E8F0F5; --ff-yel: #E7E5E4; --ff-yel-lt: #F1EFED; --ff-char: #1e2d3d; --ff-brown: #5B6470; --ff-r: 20px; }

.ff2-hero { background: linear-gradient(135deg, rgb(18, 33, 58) 0%, rgb(27, 46, 74) 100%); padding: 48px 24px 40px; text-align: center; color: rgb(255, 255, 255); border-radius: 0px 0px 32px 32px; position: relative; }

.ff2-hero::before { content: ""; position: absolute; top: -100px; right: -100px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(232, 244, 233, 0.55) 0%, transparent 65%); pointer-events: none; }

.ff2-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: var(--ff-sage-lt); border: 1px solid rgba(36, 52, 71, 0.22); border-radius: 50px; padding: 5px 15px 5px 10px; font-size: 0.71rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-sage-dk); margin-bottom: 20px; }

.ff2-hero h1 { font-family: Georgia, serif; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; color: var(--ff-char); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 16px; }

.ff2-hero h1 em { font-style: normal; -webkit-text-fill-color: transparent; background-clip: text; }

.ff2-hero-sub { font-size: 1.07rem; color: var(--ff-brown); line-height: 1.75; max-width: 540px; margin: 0px auto 10px; font-weight: 300; }

.ff2-hero-support { font-size: 0.88rem; color: rgba(107, 91, 78, 0.7); margin: 0px auto 34px; max-width: 460px; line-height: 1.65; }

.ff2-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.ff2-btn-primary { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg,var(--ff-sage),var(--ff-sage-dk)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 14px 28px; border-radius: 50px; font-size: 0.92rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: rgba(36, 52, 71, 0.1) 0px 4px 18px; transition: 0.22s; }

.ff2-btn-primary:hover { transform: translateY(-2px); box-shadow: rgba(36, 52, 71, 0.15) 0px 7px 26px; }

.ff2-btn-outline { display: inline-flex; align-items: center; gap: 7px; background: rgb(255, 255, 255); color: var(--ff-char); border: 1.5px solid rgba(30, 45, 61, 0.16); padding: 12px 26px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.22s; }

.ff2-btn-outline:hover { background: var(--ff-sage-lt); border-color: var(--ff-sage); color: var(--ff-sage-dk); }

.ff2-bowl { background: linear-gradient(135deg, rgb(247, 248, 246), rgb(221, 229, 216)); border-radius: 50%; width: 200px; height: 150px; margin: 40px auto 0px; position: relative; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; box-shadow: rgba(36, 52, 71, 0.18) 0px 8px 40px; }

.ff2-float-ing { position: absolute; font-size: 1.5rem; animation: 4s ease-in-out 0s infinite normal none running ff2Float; }

.ff2-float-ing:nth-child(2) { top: -18px; left: 18px; animation-delay: -1s; }

.ff2-float-ing:nth-child(3) { top: -8px; right: 28px; animation-delay: -2s; }

.ff2-float-ing:nth-child(4) { bottom: -14px; left: 8px; animation-delay: -0.5s; }

.ff2-float-ing:nth-child(5) { bottom: -4px; right: 18px; animation-delay: -2.5s; }

@keyframes ff2Float { 
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

.ff2-section { padding: var(--section-gap) var(--content-pad); }

.ff2-inner { max-width: 1100px; margin: 0px auto; }

.ff2-sec-eyebrow { font-size: 0.69rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ff-sage); text-align: center; margin-bottom: 9px; }

.ff2-sec-title { font-family: Georgia, serif; font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--ff-char); text-align: center; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 9px; }

.ff2-sec-sub { font-size: 0.95rem; color: var(--ff-brown); line-height: 1.75; text-align: center; max-width: 520px; margin: 0px auto 44px; font-weight: 300; }

.ff2-texture-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

.ff2-tex-card { background: rgb(255, 255, 255); border-radius: var(--ff-r); padding: 22px 16px 20px; text-align: center; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 16px; border: 1px solid rgba(30, 45, 61, 0.05); cursor: pointer; transition: 0.22s; }

.ff2-tex-card:hover { transform: translateY(-4px); box-shadow: rgba(30, 45, 61, 0.11) 0px 8px 32px; }

.ff2-tex-icon { font-size: 1.8rem; margin-bottom: 10px; display: block; }

.ff2-tex-name { font-size: 0.92rem; font-weight: 700; color: var(--ff-char); margin-bottom: 5px; }

.ff2-tex-desc { font-size: 0.77rem; color: var(--ff-brown); line-height: 1.5; margin-bottom: 12px; }

.ff2-tex-btn { font-size: 0.75rem; font-weight: 600; color: var(--ff-sage-dk); background: var(--ff-sage-lt); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 5px 14px; cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff2-tex-btn:hover { background: var(--ff-sage); color: rgb(255, 255, 255); }

.ff2-library-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }

.ff2-lib-card { background: rgb(255, 255, 255); border-radius: var(--ff-r); padding: 26px 20px; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 16px; border: 1px solid rgba(30, 45, 61, 0.05); cursor: pointer; transition: 0.22s; }

.ff2-lib-card:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.1) 0px 7px 26px; }

.ff2-lib-icon { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 13px; }

.ff2-lib-card h4 { font-size: 0.96rem; font-weight: 700; color: var(--ff-char); margin-bottom: 6px; }

.ff2-lib-card p { font-size: 0.8rem; color: var(--ff-brown); line-height: 1.65; margin-bottom: 12px; }

.ff2-lib-btn { font-size: 0.76rem; font-weight: 600; color: var(--ff-sage-dk); background: var(--ff-sage-lt); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 6px 14px; cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff2-lib-btn:hover { background: var(--ff-sage); color: rgb(255, 255, 255); }

.ff2-library-note { background: linear-gradient(135deg,var(--ff-sage-lt),#F7F8F6); border: 1px solid rgba(36, 52, 71, 0.2); border-radius: 16px; padding: 18px 22px; text-align: center; font-size: 0.86rem; color: var(--ff-brown); line-height: 1.65; }

.ff2-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }

.ff2-chip { padding: 8px 18px; border-radius: 50px; font-size: 0.81rem; font-weight: 500; cursor: pointer; border: 1.5px solid rgba(36, 52, 71, 0.22); background: rgb(255, 255, 255); color: var(--ff-brown); transition: 0.2s; font-family: inherit; white-space: nowrap; }

.ff2-chip:hover { border-color: var(--ff-sage); color: var(--ff-sage-dk); background: rgb(242, 248, 242); }

.ff2-chip.active { background: var(--ff-sage); color: rgb(255, 255, 255); border-color: var(--ff-sage); box-shadow: rgba(36, 52, 71, 0.28) 0px 3px 12px; }

.ff2-recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.ff2-rec-card { background: rgb(255, 255, 255); border-radius: var(--ff-r); padding: 24px 20px; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 16px; border: 1px solid rgba(30, 45, 61, 0.05); transition: 0.22s; }

.ff2-rec-card:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.1) 0px 8px 28px; }

.ff2-rec-emoji { font-size: 2.8rem; margin-bottom: 12px; display: block; }

.ff2-rec-card h4 { font-size: 1rem; font-weight: 700; color: var(--ff-char); margin-bottom: 8px; }

.ff2-rec-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }

.ff2-rec-tag { font-size: 0.68rem; font-weight: 600; padding: 3px 10px; border-radius: 50px; }

.ff2-tag-feel { background: var(--ff-sage-lt); color: var(--ff-sage-dk); }

.ff2-tag-tex { background: var(--ff-peach-lt); color: rgb(160, 74, 26); }

.ff2-tag-mood { background: var(--ff-lav-lt); color: rgb(90, 74, 138); }

.ff2-rec-note { font-size: 0.79rem; color: var(--ff-brown); line-height: 1.6; margin-bottom: 14px; }

.ff2-rec-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.05); }

.ff2-rec-save { font-size: 0.75rem; font-weight: 600; color: var(--ff-brown); background: rgb(255, 255, 255); border: 1.5px solid rgba(0, 0, 0, 0.1); border-radius: 50px; padding: 6px 14px; cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff2-rec-save:hover { background: var(--ff-sage-lt); border-color: var(--ff-sage); color: var(--ff-sage-dk); }

.ff2-rec-cta { font-size: 0.75rem; font-weight: 700; color: rgb(255, 255, 255); background: linear-gradient(135deg,var(--ff-sage),var(--ff-sage-dk)); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 7px 14px; cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff2-profile-wrap { background: linear-gradient(145deg, rgb(247, 248, 246), rgb(250, 250, 248), rgb(240, 245, 251)); border-radius: 24px; padding: 40px; border: 1px solid rgba(36, 52, 71, 0.14); }

.ff2-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 28px; }

.ff2-profile-field { background: rgb(255, 255, 255); border-radius: 16px; padding: 20px; box-shadow: rgba(30, 45, 61, 0.05) 0px 1px 10px; }

.ff2-profile-field label { display: block; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ff-sage-dk); margin-bottom: 8px; }

.ff2-tags-row { display: flex; flex-wrap: wrap; gap: 6px; }

.ff2-ptag { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 50px; font-size: 0.77rem; font-weight: 500; cursor: pointer; background: var(--ff-sage-lt); color: var(--ff-sage-dk); border: 1.5px solid transparent; transition: 0.18s; user-select: none; }

.ff2-ptag.selected { background: var(--ff-sage); color: rgb(255, 255, 255); }

.ff2-ptag.avoid { background: rgb(255, 240, 241); color: rgb(138, 58, 64); }

.ff2-ptag.avoid.selected { background: rgb(192, 112, 110); color: rgb(255, 255, 255); }

.ff2-profile-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.ff2-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.ff2-tool-card { background: rgb(255, 255, 255); border-radius: var(--ff-r); padding: 24px 20px; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 14px; border: 1px solid rgba(30, 45, 61, 0.05); transition: 0.22s; }

.ff2-tool-card:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.1) 0px 7px 26px; }

.ff2-tool-icon { font-size: 1.8rem; margin-bottom: 11px; }

.ff2-tool-card h4 { font-size: 0.95rem; font-weight: 700; color: var(--ff-char); margin-bottom: 6px; }

.ff2-tool-card p { font-size: 0.8rem; color: var(--ff-brown); line-height: 1.65; margin-bottom: 13px; }

.ff2-tool-btn { font-size: 0.76rem; font-weight: 600; color: var(--ff-sage-dk); background: var(--ff-sage-lt); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 7px 15px; cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff2-tool-btn:hover { background: var(--ff-sage); color: rgb(255, 255, 255); }

.ff2-connect-band { background: linear-gradient(145deg, rgb(30, 45, 61), rgb(45, 61, 90)); padding: 56px 24px; text-align: center; }

.ff2-connect-band h3 { font-family: Georgia, serif; font-size: 1.6rem; font-weight: 700; color: rgb(255, 255, 255); margin-bottom: 10px; }

.ff2-connect-band p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.7); max-width: 460px; margin: 0px auto 28px; line-height: 1.7; }

.ff2-connect-grid { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

.ff2-connect-chip { padding: 9px 20px; border-radius: 50px; font-size: 0.82rem; font-weight: 600; cursor: pointer; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.9); border: 1.5px solid rgba(255, 255, 255, 0.2); transition: 0.2s; font-family: inherit; }

.ff2-connect-chip:hover { background: rgba(255, 255, 255, 0.22); }

@media (max-width: 900px) {
  .ff2-texture-grid { grid-template-columns: repeat(3, 1fr); }
  .ff2-library-grid { grid-template-columns: 1fr 1fr; }
  .ff2-recipe-grid { grid-template-columns: 1fr 1fr; }
  .ff2-tools-grid { grid-template-columns: 1fr 1fr; }
  .ff2-profile-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .ff2-section { padding: 52px 18px; }
  .ff2-hero { padding: 56px 18px 64px; }
  .ff2-texture-grid { grid-template-columns: 1fr 1fr; }
  .ff2-library-grid { grid-template-columns: 1fr; }
  .ff2-recipe-grid { grid-template-columns: 1fr; }
  .ff2-tools-grid { grid-template-columns: 1fr; }
  .ff2-profile-wrap { padding: 24px 16px; }
  .ff2-connect-grid { flex-direction: column; align-items: center; }
}

.ctg-section { padding: var(--section-gap) 0; }

.ctg-section-alt { background: rgb(255, 255, 255); }

.ctg-wave { display: block; width: 100%; overflow: hidden; line-height: 0; margin-bottom: -2px; }

.ctg-wave svg { display: block; width: 100%; }

.ctg-hero { background: rgb(255, 255, 255); padding: var(--section-gap) 0 0; position: relative; overflow: hidden; }

.ctg-hero::before { content: ""; position: absolute; inset: 0px; background: none; pointer-events: none; }

.ctg-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

@media (max-width: 860px) {
  .ctg-hero-grid { grid-template-columns: 1fr; gap: 40px; }
}

.ctg-hero-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(36, 52, 71, 0.12); border: 1px solid rgba(36, 52, 71, 0.25); border-radius: 50px; padding: 6px 16px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-primary); margin-bottom: 18px; }

.ctg-hero-title { font-family: Georgia, serif; font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; color: var(--char); line-height: 1.1; margin-bottom: 14px; letter-spacing: -0.02em; }

.ctg-hero-tag { font-size: 1.05rem; color: var(--navy-primary); font-weight: 600; margin-bottom: 16px; font-style: italic; }

.ctg-hero-desc { color: var(--brown); font-size: 0.95rem; line-height: 1.8; margin-bottom: 30px; max-width: 480px; }

.ctg-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.ctg-hero-img { position: relative; display: flex; align-items: center; justify-content: center; }

.ctg-hero-scene { width: 100%; max-width: 440px; aspect-ratio: 1 / 1; border-radius: 50%; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.1) 0px 24px 64px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }

.ctg-deco { position: absolute; pointer-events: none; }

.ctg-deco-heart { font-size: 1.2rem; animation: 3s ease-in-out 0s infinite normal none running ctg-float; }

.ctg-deco-leaf { font-size: 1rem; animation: 4s ease-in-out 0.8s infinite normal none running ctg-float; }

.ctg-deco-star { font-size: 0.9rem; animation: 3.5s ease-in-out 1.5s infinite normal none running ctg-float; }

@keyframes ctg-float { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.ctg-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

@media (max-width: 900px) {
  .ctg-cards-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .ctg-cards-grid { grid-template-columns: 1fr; }
}

.ctg-card { background: rgb(255, 255, 255); border-radius: 22px; padding: 26px 22px; box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 20px; border: 2px solid transparent; transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s; cursor: pointer; }

.ctg-card:hover { transform: translateY(-6px); box-shadow: rgba(0, 0, 0, 0.11) 0px 16px 44px; border-color: var(--navy-primary); }

.ctg-card.open { border-color: var(--navy-primary); box-shadow: rgba(0, 0, 0, 0.11) 0px 16px 44px; }

.ctg-card-icon { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 16px; }

.ctg-card-title { font-weight: 800; font-size: 1rem; color: var(--char); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.ctg-card-title .ctg-chevron { font-size: 0.7rem; color: var(--navy-primary); transition: transform 0.25s; flex-shrink: 0; opacity: 0.7; }

.ctg-card.open .ctg-card-title .ctg-chevron { transform: rotate(180deg); }

.ctg-card-desc { font-size: 0.83rem; color: var(--brown); line-height: 1.7; margin-bottom: 14px; }

.ctg-card-tip { background: var(--hu-white-mist); border-radius: 10px; padding: 10px 13px; font-size: 0.76rem; color: var(--char); line-height: 1.5; }

.ctg-card-tip strong { color: var(--navy-primary); }

.ctg-card-expand { display: none; margin-top: 12px; border-top: 1px solid rgb(240, 236, 230); padding-top: 14px; animation: 0.28s ease 0s 1 normal none running ctg-expand-in; }

.ctg-card.open .ctg-card-expand { display: block; }

@keyframes ctg-expand-in { 
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.ctg-try-label { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy-primary); margin-bottom: 8px; }

.ctg-try-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }

.ctg-try-list li { background: var(--hu-white-mist); border-radius: 10px; padding: 9px 12px; font-size: 0.76rem; color: var(--char); line-height: 1.5; display: flex; align-items: flex-start; gap: 8px; }

.ctg-try-list li::before { content: "✦"; color: var(--navy-primary); font-size: 0.6rem; flex-shrink: 0; margin-top: 2px; }

.ctg-brain-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 40px; }

@media (max-width: 860px) {
  .ctg-brain-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .ctg-brain-grid { grid-template-columns: repeat(2, 1fr); }
}

.ctg-brain-item { background: rgb(255, 255, 255); border-radius: 18px; padding: 20px 14px; text-align: center; box-shadow: rgba(0, 0, 0, 0.06) 0px 3px 16px; transition: transform 0.2s; }

.ctg-brain-item:hover { transform: translateY(-4px); }

.ctg-brain-icon { font-size: 2rem; margin-bottom: 10px; animation: 4s ease-in-out 0s infinite normal none running ctg-brain-pulse; }

.ctg-brain-item:nth-child(2) .ctg-brain-icon { animation-delay: 0.5s; }

.ctg-brain-item:nth-child(3) .ctg-brain-icon { animation-delay: 1s; }

.ctg-brain-item:nth-child(4) .ctg-brain-icon { animation-delay: 1.5s; }

.ctg-brain-item:nth-child(5) .ctg-brain-icon { animation-delay: 2s; }

.ctg-brain-item:nth-child(6) .ctg-brain-icon { animation-delay: 2.5s; }

@keyframes ctg-brain-pulse { 
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

.ctg-brain-title { font-weight: 800; font-size: 0.82rem; color: var(--char); margin-bottom: 4px; }

.ctg-brain-sub { font-size: 0.7rem; color: var(--brown); line-height: 1.45; }

.ctg-academy { background: rgb(255, 255, 255); position: relative; overflow: hidden; }

.ctg-academy::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(at 20% 80%, rgba(144, 224, 168, 0.1) 0%, transparent 55%), radial-gradient(at 80% 20%, rgba(123, 191, 212, 0.1) 0%, transparent 55%); pointer-events: none; }

.ctg-academy-inner { position: relative; z-index: 1; padding: var(--section-gap) 0; }

.ctg-age-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 32px; justify-content: center; }

.ctg-age-tab { padding: 9px 22px; border-radius: 50px; font-size: 0.82rem; font-weight: 700; border: 2px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.65); cursor: pointer; font-family: inherit; transition: 0.18s; }

.ctg-age-tab:hover { border-color: rgba(255, 255, 255, 0.35); color: rgb(255, 255, 255); }

.ctg-age-tab.active { background: var(--navy-primary); border-color: var(--navy-primary); color: rgb(255, 255, 255); box-shadow: rgba(36, 52, 71, 0.1) 0px 4px 18px; }

.ctg-activities-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 36px; }

@media (max-width: 860px) {
  .ctg-activities-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .ctg-activities-grid { grid-template-columns: 1fr; }
}

.ctg-activity-card { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 22px; transition: 0.2s; cursor: pointer; }

.ctg-activity-card:hover { background: rgba(255, 255, 255, 0.11); transform: translateY(-3px); border-color: rgba(144, 224, 168, 0.3); }

.ctg-activity-emoji { font-size: 2rem; margin-bottom: 12px; }

.ctg-activity-title { font-weight: 800; font-size: 0.92rem; color: rgb(255, 255, 255); margin-bottom: 6px; }

.ctg-activity-skill { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: rgb(144, 224, 168); margin-bottom: 10px; }

.ctg-activity-desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin-bottom: 12px; }

.ctg-activity-skills { display: flex; gap: 6px; flex-wrap: wrap; }

.ctg-skill-chip { background: rgba(144, 224, 168, 0.12); border: 1px solid rgba(144, 224, 168, 0.25); border-radius: 50px; padding: 2px 10px; font-size: 0.65rem; font-weight: 700; color: rgb(144, 224, 168); }

.ctg-tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 860px) {
  .ctg-tools-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .ctg-tools-grid { grid-template-columns: 1fr; }
}

.ctg-tool-card { background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.1); border-radius: 18px; padding: 20px 16px; text-align: center; cursor: pointer; transition: 0.18s; }

.ctg-tool-card:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(144, 224, 168, 0.35); transform: translateY(-3px); }

.ctg-tool-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin: 0px auto 12px; }

.ctg-tool-title { font-weight: 800; font-size: 0.85rem; color: rgb(255, 255, 255); margin-bottom: 6px; }

.ctg-tool-sub { font-size: 0.72rem; color: rgba(255, 255, 255, 0.55); line-height: 1.5; }

.ctg-boost-form { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 24px; margin-top: 20px; }

.ctg-boost-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; }

@media (max-width: 640px) {
  .ctg-boost-row { grid-template-columns: 1fr 1fr; }
}

.ctg-boost-field label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: rgba(255, 255, 255, 0.5); display: block; margin-bottom: 6px; }

.ctg-boost-input { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1.5px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); font-size: 0.85rem; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.18s; }

.ctg-boost-input:focus { border-color: rgba(144, 224, 168, 0.5); }

.ctg-boost-input::placeholder { color: rgba(255, 255, 255, 0.3); }

.ctg-boost-result { background: rgba(144, 224, 168, 0.08); border: 1px solid rgba(144, 224, 168, 0.2); border-radius: 14px; padding: 18px; margin-top: 16px; display: none; font-size: 0.85rem; color: rgba(255, 255, 255, 0.88); line-height: 1.7; }

.ctg-boost-result.open { display: block; }

.ctg-benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

@media (max-width: 760px) {
  .ctg-benefits-grid { grid-template-columns: 1fr; }
}

.ctg-benefit-card { border-radius: 24px; padding: 32px 26px; text-align: center; transition: transform 0.2s; }

.ctg-benefit-card:hover { transform: translateY(-5px); }

.ctg-benefit-illu { width: 90px; height: 90px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; margin: 0px auto 18px; box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 24px; }

.ctg-benefit-title { font-family: Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--char); margin-bottom: 10px; }

.ctg-benefit-desc { font-size: 0.87rem; color: var(--brown); line-height: 1.75; margin-bottom: 16px; }

.ctg-benefit-tags { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }

.ctg-benefit-tag { padding: 4px 12px; border-radius: 50px; font-size: 0.7rem; font-weight: 700; }

.ctg-cta-banner { background: rgb(255, 255, 255); border-radius: 28px; padding: 56px 48px; text-align: center; position: relative; overflow: hidden; }

.ctg-cta-banner::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(at 50% 0%, rgba(144, 224, 168, 0.15) 0%, transparent 60%); pointer-events: none; }

.ctg-cta-banner-content { position: relative; z-index: 1; }

@media (max-width: 600px) {
  .ctg-cta-banner { padding: 36px 24px; }
}

.ctg-tracker-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 4px; }

.ctg-tracker-fill { height: 100%; border-radius: 4px; background: rgb(255, 255, 255); transition: width 0.6s; }

.ctg-tool-panel { display: none; }

.ctg-tool-panel.open { display: block; }

@media (max-width: 820px) {
  #ctg-academy .container > div:last-child { grid-template-columns: 1fr !important; }
}

.ff-section { padding: var(--section-gap) 0; background: rgb(255, 255, 255); }

.ff-section > .container, .ff-section > div > .container { max-width: var(--content-max); margin: 0px auto; padding: 0 var(--content-pad); }

.ff-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }

.ff-filter { padding: 8px 18px; border-radius: 50px; border: 2px solid rgb(232, 228, 222); background: rgb(255, 255, 255); font-size: 0.8rem; font-weight: 700; color: var(--brown); cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff-filter:hover, .ff-filter.active { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); }

.ff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

@media (max-width: 900px) {
  .ff-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .ff-grid { grid-template-columns: repeat(2, 1fr); }
}

.ff-card-wrap { perspective: 700px; }

.ff-card-wrap.hidden { display: none; }

.ff-card { position: relative; height: 220px; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border-radius: 20px; }

.ff-card-wrap.flipped .ff-card { transform: rotateY(180deg); }

.ff-face { position: absolute; inset: 0px; border-radius: 20px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 14px; text-align: center; }

.ff-front { color: rgb(255, 255, 255); }

.ff-back { background: rgb(255, 255, 255); transform: rotateY(180deg); border: 2px solid rgb(240, 237, 232); }

.ff-emoji { font-size: 3rem; margin-bottom: 8px; line-height: 1; }

.ff-name { font-family: Georgia, serif; font-size: 0.92rem; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }

.ff-power { font-size: 0.7rem; font-weight: 700; opacity: 0.85; }

.ff-back-name { font-family: Georgia, serif; font-size: 0.88rem; font-weight: 700; color: var(--char); margin-bottom: 6px; }

.ff-back-text { font-size: 0.72rem; color: var(--brown); line-height: 1.55; margin-bottom: 10px; }

.ff-back-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

.ff-dl-btn { font-size: 0.68rem; font-weight: 700; padding: 4px 10px; border-radius: 50px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; background: var(--sage-lt); color: var(--navy-primary); transition: background 0.15s; }

.ff-dl-btn:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.ff-print-section { padding: var(--section-gap) 0; background: var(--hu-white-mist); }

.ff-print-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@media (max-width: 720px) {
  .ff-print-grid { grid-template-columns: 1fr; }
}

.ff-print-card { background: rgb(255, 255, 255); border-radius: 20px; padding: 24px 20px; text-align: center; box-shadow: rgba(0, 0, 0, 0.055) 0px 2px 14px; transition: transform 0.2s, box-shadow 0.2s; }

.ff-print-card:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 32px; }

.ff-print-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0px auto 14px; }

.ff-print-title { font-family: Georgia, serif; font-size: 0.95rem; font-weight: 700; color: var(--char); margin-bottom: 6px; }

.ff-print-sub { font-size: 0.78rem; color: var(--brown); line-height: 1.6; margin-bottom: 16px; }

.pp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }

@media (max-width: 720px) {
  .pp-grid { grid-template-columns: 1fr; gap: 32px; }
}

.pp-carousel { position: relative; border-radius: 24px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 40px; }

.pp-carousel-track { display: flex; transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1); }

.pp-slide { min-width: 100%; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 28px; }

.pp-slide-label { position: absolute; top: 14px; left: 14px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(4px); border-radius: 50px; padding: 4px 12px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-primary); }

.pp-slide-inner { width: 100%; height: 100%; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; font-size: 3.5rem; }

.pp-slide-title { font-size: 0.78rem; font-weight: 700; color: var(--char); text-align: center; margin-top: 6px; }

.pp-slide-sub { font-size: 0.68rem; color: var(--brown); text-align: center; }

.pp-carr-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 12px; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; z-index: 2; transition: 0.18s; }

.pp-carr-btn:hover { background: var(--navy-primary); color: rgb(255, 255, 255); transform: translateY(-50%) scale(1.05); }

.pp-carr-prev { left: 12px; }

.pp-carr-next { right: 12px; }

.pp-dots { display: flex; justify-content: center; gap: 7px; padding: 14px 0px 10px; }

.pp-dot { width: 8px; height: 8px; border-radius: 50%; background: rgb(221, 221, 221); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; transition: 0.2s; padding: 0px; }

.pp-dot.active { background: var(--navy-primary); width: 22px; border-radius: 4px; }

.pp-badge { display: inline-block; background: var(--badge-bg); color: var(--badge-col); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; border-radius: 50px; margin-bottom: 12px; }

.pp-title { font-family: Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; line-height: 1.2; color: var(--char); margin-bottom: 10px; }

.pp-desc { color: var(--brown); line-height: 1.8; margin-bottom: 22px; font-size: 0.93rem; }

.pp-price-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }

.pp-price { font-family: Georgia, serif; font-size: 2.4rem; font-weight: 700; color: var(--navy-primary); }

.pp-savings { font-size: 0.75rem; color: rgb(255, 255, 255); background: rgb(224, 92, 42); padding: 3px 10px; border-radius: 50px; font-weight: 700; }

.pp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

.pp-includes { background: var(--inc-bg); border-radius: 18px; padding: 20px 22px; margin-bottom: 0px; }

.pp-includes-title { font-size: 0.72rem; font-weight: 700; color: var(--inc-col); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 14px; }

.pp-includes ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.pp-includes li { font-size: 0.88rem; color: var(--char); display: flex; align-items: center; gap: 10px; line-height: 1.4; }

.pp-includes li .pp-tick { width: 22px; height: 22px; border-radius: 50%; background: rgb(34, 197, 94); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; }

.pp-preview-btn { background: transparent; border: 2px solid var(--blush-primary); color: var(--navy-primary); padding: 9px 20px; border-radius: 50px; font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.18s; white-space: nowrap; }

.pp-preview-btn:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.pp-section { padding: 48px 0px; }

.pp-section-alt { background: rgb(255, 255, 255); }

.pp-section-title { font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; color: var(--char); margin-bottom: 6px; }

.pp-section-sub { font-size: 0.85rem; color: var(--brown); margin-bottom: 28px; }

.pp-activities { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }

.pp-act-card { background: rgb(255, 255, 255); border-radius: 18px; padding: 20px 16px; text-align: center; box-shadow: rgba(0, 0, 0, 0.07) 0px 3px 16px; border: 2px solid transparent; transition: 0.2s; }

.pp-act-card:hover { border-color: var(--navy-primary); transform: translateY(-3px); }

.pp-act-icon { font-size: 2.2rem; margin-bottom: 10px; }

.pp-act-label { font-size: 0.82rem; font-weight: 700; color: var(--char); line-height: 1.4; }

.pp-chars { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; }

.pp-char-card { border-radius: 20px; padding: 22px 14px; text-align: center; box-shadow: rgba(0, 0, 0, 0.07) 0px 3px 16px; }

.pp-char-icon { font-size: 2.8rem; margin-bottom: 10px; }

.pp-char-name { font-weight: 800; font-size: 0.85rem; color: var(--char); margin-bottom: 3px; }

.pp-char-role { font-size: 0.72rem; color: var(--brown); }

.pp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0px; position: relative; }

@media (max-width: 600px) {
  .pp-steps { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

.pp-step { text-align: center; padding: 0px 8px; position: relative; }

.pp-step:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 28px; font-size: 1.4rem; color: rgb(204, 204, 204); }

@media (max-width: 600px) {
  .pp-step:not(:last-child)::after { display: none; }
}

.pp-step-num { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0px auto 12px; font-size: 1.6rem; background: var(--sage-lt); }

.pp-step-label { font-weight: 800; font-size: 0.88rem; color: var(--char); margin-bottom: 4px; }

.pp-step-sub { font-size: 0.72rem; color: var(--brown); }

.pp-download { background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); border-radius: 24px; padding: 36px; color: rgb(255, 255, 255); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }

@media (max-width: 560px) {
  .pp-download { grid-template-columns: 1fr; }
}

.pp-dl-title { font-family: Georgia, serif; font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; }

.pp-dl-steps { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }

.pp-dl-step { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; opacity: 0.9; }

.pp-dl-circle { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }

.pp-modal-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.72); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }

.pp-modal-overlay.open { opacity: 1; pointer-events: all; }

.pp-modal { background: rgb(255, 255, 255); border-radius: 24px; padding: 32px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; transform: scale(0.94); transition: transform 0.25s; }

.pp-modal-overlay.open .pp-modal { transform: scale(1); }

.pp-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }

.pp-modal-close { background: none; border: 1.5px solid rgb(221, 221, 221); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: 0.15s; }

.pp-modal-close:hover { background: rgb(245, 245, 245); }

.pp-modal-pages { display: flex; flex-direction: column; gap: 16px; }

.pp-modal-page { border-radius: 16px; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }

.pp-modal-page-label { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, 0.9); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 3px 10px; border-radius: 50px; color: var(--navy-primary); }

.kc-prod-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); z-index: 9997; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }

.kc-prod-overlay.open { opacity: 1; pointer-events: all; }

.kc-prod-modal { background: rgb(255, 255, 255); border-radius: 22px; max-width: 440px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.18) 0px 24px 72px; transform: scale(0.95) translateY(10px); transition: transform 0.25s; }

.kc-prod-overlay.open .kc-prod-modal { transform: scale(1) translateY(0px); }

.kc-prod-modal::-webkit-scrollbar { width: 3px; }

.kc-prod-modal::-webkit-scrollbar-thumb { background: rgb(221, 221, 221); border-radius: 2px; }

.kc-prod-modal-body { padding: 20px 22px 22px; }

.kc-prod-modal-close { position: absolute; top: 12px; right: 14px; background: rgba(0, 0, 0, 0.35); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(255, 255, 255); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; align-items: center; justify-content: center; z-index: 2; }

.ff-filter { padding: 8px 18px; border-radius: 50px; border: 1.5px solid rgb(224, 219, 212); background: rgb(255, 255, 255); font-size: 0.78rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff-filter.active, .ff-filter-all.active { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); }

.ff-filter:hover { transform: translateY(-1px); }

.ff-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 36px; }

@media (max-width: 900px) {
  .ff-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .ff-grid { grid-template-columns: repeat(2, 1fr); }
}

.ff-card-wrap { perspective: 900px; cursor: pointer; }

.ff-card-wrap.hidden { display: none; }

.ff-card { position: relative; width: 100%; padding-bottom: 130%; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); }

.ff-card-wrap:hover .ff-card, .ff-card-wrap.flipped .ff-card { transform: rotateY(180deg); }

.ff-front, .ff-back { position: absolute; inset: 0px; border-radius: 20px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px 14px; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 18px; }

.ff-front { background: rgb(255, 255, 255); border: 2px solid rgb(240, 236, 230); }

.ff-back { transform: rotateY(180deg); }

.ff-emoji { font-size: 3.2rem; margin-bottom: 10px; transition: transform 0.3s; }

.ff-card-wrap:hover .ff-emoji { transform: scale(1.15); }

.ff-name { font-weight: 800; font-size: 0.88rem; color: var(--char); line-height: 1.3; margin-bottom: 6px; }

.ff-power-badge { padding: 4px 12px; border-radius: 50px; font-size: 0.68rem; font-weight: 700; margin-top: 6px; }

.ff-tap-hint { font-size: 0.62rem; color: rgb(204, 204, 204); margin-top: 8px; }

.ff-back-emoji { font-size: 2rem; margin-bottom: 8px; }

.ff-back-name { font-weight: 800; font-size: 0.82rem; color: rgb(255, 255, 255); margin-bottom: 6px; }

.ff-back-desc { font-size: 0.72rem; color: rgba(255, 255, 255, 0.88); line-height: 1.55; margin-bottom: 10px; text-align: center; }

.ff-back-nutrients { font-size: 0.65rem; font-weight: 700; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; }

.ff-back-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }

.ff-back-btn { padding: 5px 12px; border-radius: 50px; font-size: 0.65rem; font-weight: 700; border: 1.5px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: rgb(255, 255, 255); cursor: pointer; font-family: inherit; transition: background 0.15s; }

.ff-back-btn:hover { background: rgba(255, 255, 255, 0.25); }

.ff-back-btn.primary { background: rgba(255, 255, 255, 0.9); color: var(--char); }

.ff-quiz { background: rgb(255, 255, 255); border-radius: 24px; padding: 32px; margin-bottom: 36px; text-align: center; position: relative; overflow: hidden; }

.ff-quiz::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(at 80% 20%, rgba(144, 224, 168, 0.1) 0%, transparent 55%); pointer-events: none; }

.ff-quiz-q { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 700; color: rgb(255, 255, 255); margin-bottom: 20px; }

.ff-quiz-opts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }

.ff-quiz-opt { padding: 9px 20px; border-radius: 50px; border: 1.5px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.8); font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.18s; }

.ff-quiz-opt:hover { background: rgba(255, 255, 255, 0.14); color: rgb(255, 255, 255); transform: translateY(-2px); }

.ff-quiz-result { display: none; padding: 20px; background: rgba(255, 255, 255, 0.08); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12); }

.ff-quiz-result.open { display: block; }

.ff-quiz-result-emoji { font-size: 3rem; margin-bottom: 10px; }

.ff-quiz-result-title { font-weight: 800; font-size: 1rem; color: rgb(255, 255, 255); margin-bottom: 6px; }

.ff-quiz-result-text { font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); line-height: 1.65; margin-bottom: 14px; }

.ff-progress-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }

.ff-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }

.ff-dot.done { background: var(--navy-primary); }

.ff-dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@media (max-width: 640px) {
  .ff-dl-grid { grid-template-columns: 1fr 1fr; }
}

.ff-dl-card { background: var(--hu-white-mist); border-radius: 18px; padding: 18px 14px; text-align: center; border: 2px solid transparent; transition: 0.2s; cursor: pointer; }

.ff-dl-card:hover { border-color: var(--navy-primary); transform: translateY(-2px); }

.ff-dl-icon { font-size: 2.4rem; margin-bottom: 10px; }

.ff-dl-title { font-weight: 800; font-size: 0.85rem; color: var(--char); margin-bottom: 4px; }

.ff-dl-sub { font-size: 0.72rem; color: var(--brown); margin-bottom: 12px; line-height: 1.5; }

.kids-img-hero-wrap { position: relative; width: 100vw; left: 50%; margin-left: -50vw; margin-bottom: 0px; padding: 0px; overflow: hidden; background: rgb(255, 255, 255); line-height: 0; height: clamp(360px, 34vw, 500px); display: flex; align-items: center; justify-content: center; margin-top: 0px !important; }

.kids-img-hero-wrap img { width: 100%; height: 100%; display: block; background: rgb(255, 255, 255); object-fit: contain !important; object-position: center center !important; }

@media (max-width: 768px) {
  .kids-img-hero-wrap { height: clamp(240px, 52vw, 340px); }
}

@media (max-width: 480px) {
  .kids-img-hero-wrap { height: 240px; }
}

.sk-wrap { display: grid; grid-template-columns: 280px 1fr 340px; gap: 0px; min-height: calc(-130px + 100vh); margin: -28px -24px -60px; border-radius: 0px; }

@media (max-width: 1100px) {
  .sk-wrap { grid-template-columns: 240px 1fr; }
}

@media (max-width: 820px) {
  .sk-wrap { grid-template-columns: 1fr; min-height: auto; margin: -16px -12px -60px; }
}

.sk-panel { display: flex; flex-direction: column; overflow: hidden; }

.sk-panel-pantry { background: var(--hu-white-mist); border-right: 1px solid rgb(236, 232, 226); }

.sk-panel-recipes { background: rgb(255, 255, 255); border-right: 1px solid rgb(236, 232, 226); }

.sk-panel-planner { background: rgb(246, 249, 246); }

@media (max-width: 1100px) {
  .sk-panel-planner { display: none; }
}

@media (max-width: 820px) {
  .sk-panel-pantry, .sk-panel-recipes, .sk-panel-planner { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; border-bottom: 1px solid rgb(236, 232, 226); display: block; }
}

.sk-ph { padding: 18px 18px 12px; border-bottom: 1px solid rgb(236, 232, 226); flex-shrink: 0; }

.sk-ph-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }

.sk-ph-title { font-family: Georgia, serif; font-size: 0.95rem; font-weight: 700; color: var(--char); display: flex; align-items: center; gap: 7px; }

.sk-ph-count { font-size: 0.68rem; font-weight: 700; background: var(--sage-lt); color: var(--navy-primary); border-radius: 50px; padding: 2px 8px; }

.sk-ph-btn { background: var(--navy-primary); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 5px 12px; font-size: 0.72rem; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }

.sk-pb { flex: 1 1 0%; overflow-y: auto; padding: 14px 14px 20px; }

.sk-pb::-webkit-scrollbar { width: 3px; }

.sk-pb::-webkit-scrollbar-thumb { background: rgb(224, 219, 212); border-radius: 2px; }

.sk-pantry-add { display: flex; gap: 7px; margin-bottom: 12px; }

.sk-pantry-inp { flex: 1 1 0%; padding: 8px 13px; border-radius: 50px; border: 1.5px solid rgb(224, 219, 212); font-size: 0.8rem; font-family: inherit; background: rgb(255, 255, 255); outline: none; min-width: 0px; }

.sk-pantry-inp:focus { border-color: var(--navy-primary); }

.sk-pantry-mic { width: 34px; height: 34px; border-radius: 50%; background: var(--sage-lt); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-size: 0.9rem; flex-shrink: 0; transition: background 0.15s; }

.sk-pantry-mic:hover, .sk-pantry-mic.listening { background: var(--navy-primary); color: rgb(255, 255, 255); }

.sk-pantry-cat { margin-bottom: 14px; }

.sk-pantry-cat-label { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brown); margin-bottom: 7px; padding: 0px 2px; }

.sk-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: rgb(255, 255, 255); border-radius: 10px; margin-bottom: 5px; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 4px; transition: box-shadow 0.15s; }

.sk-item:hover { box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px; }

.sk-item-emoji { font-size: 1rem; flex-shrink: 0; width: 22px; text-align: center; }

.sk-item-name { flex: 1 1 0%; font-size: 0.8rem; color: var(--char); font-weight: 600; min-width: 0px; }

.sk-item-qty { font-size: 0.68rem; color: var(--brown); flex-shrink: 0; }

.sk-item-expiry { font-size: 0.62rem; border-radius: 50px; padding: 2px 7px; flex-shrink: 0; }

.sk-expiry-ok { background: rgb(221, 229, 216); color: rgb(49, 70, 95); }

.sk-expiry-warn { background: rgb(241, 239, 237); color: rgb(138, 98, 0); }

.sk-expiry-soon { background: rgb(242, 223, 223); color: rgb(192, 90, 32); }

.sk-item-rm { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(204, 204, 204); cursor: pointer; font-size: 0.85rem; padding: 2px; line-height: 1; transition: color 0.15s; }

.sk-item-rm:hover { color: rgb(224, 80, 80); }

.sk-match-pct { display: inline-block; height: 5px; border-radius: 3px; background: linear-gradient(90deg,var(--sage),#90e0a8); margin-top: 3px; }

.sk-pantry-stats { background: linear-gradient(135deg,var(--sage-lt),#e0f5e2); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; display: flex; gap: 16px; }

.sk-pstat { text-align: center; flex: 1 1 0%; }

.sk-pstat-n { font-size: 1.3rem; font-weight: 800; color: var(--navy-primary); }

.sk-pstat-l { font-size: 0.62rem; color: var(--brown); }

.sk-mood-pills { display: flex; gap: 5px; flex-wrap: wrap; }

.sk-pill { padding: 5px 11px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; border: 1.5px solid transparent; cursor: pointer; font-family: inherit; transition: 0.15s; background: rgb(255, 255, 255); }

.sk-pill-calm { color: rgb(49, 70, 95); border-color: rgb(200, 223, 201); }

.sk-pill-calm.on { background: rgb(200, 223, 201); }

.sk-pill-focus { color: rgb(42, 106, 132); border-color: rgb(80, 101, 125); }

.sk-pill-focus.on { background: rgb(232, 240, 245); }

.sk-pill-energy { color: rgb(138, 98, 0); border-color: rgb(231, 229, 228); }

.sk-pill-energy.on { background: rgb(241, 239, 237); }

.sk-pill-sleep { color: rgb(106, 90, 148); border-color: rgb(188, 200, 180); }

.sk-pill-sleep.on { background: rgb(221, 229, 216); }

.sk-pill-happy { color: rgb(122, 85, 0); border-color: rgb(231, 229, 228); }

.sk-pill-happy.on { background: rgb(241, 239, 237); }

.sk-rec-card { border-radius: 16px; overflow: hidden; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 12px; margin-bottom: 12px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; border: 2px solid transparent; }

.sk-rec-card:hover { transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.11) 0px 8px 24px; border-color: var(--navy-primary); }

.sk-rec-img { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; position: relative; }

.sk-rec-match { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(4px); border-radius: 50px; padding: 3px 9px; font-size: 0.65rem; font-weight: 800; color: var(--navy-primary); }

.sk-rec-body { padding: 12px 14px; }

.sk-rec-title { font-weight: 800; font-size: 0.88rem; color: var(--char); margin-bottom: 4px; line-height: 1.3; }

.sk-rec-meta { font-size: 0.7rem; color: var(--brown); display: flex; gap: 10px; margin-bottom: 7px; }

.sk-rec-moods { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }

.sk-rec-mood { font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 50px; }

.sk-match-bar-wrap { height: 4px; background: rgb(238, 238, 238); border-radius: 2px; overflow: hidden; }

.sk-match-bar-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg,var(--sage),#90e0a8); }

.sk-rec-nutrients { font-size: 0.68rem; color: var(--brown); margin-top: 5px; line-height: 1.4; }

.sk-sort-row { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }

.sk-sort-btn { padding: 4px 11px; border-radius: 50px; font-size: 0.7rem; font-weight: 700; border: 1.5px solid rgb(224, 219, 212); background: rgb(255, 255, 255); color: var(--brown); cursor: pointer; font-family: inherit; transition: 0.15s; }

.sk-sort-btn.on { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); }

.sk-ai-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

.sk-ai-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(135deg,var(--sage-lt),#e0f5e2); color: var(--navy-primary); border-radius: 50px; padding: 3px 10px; }

.sk-ai-btn { width: 100%; padding: 10px; border-radius: 12px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: linear-gradient(135deg,var(--sage),#31465F); color: rgb(255, 255, 255); font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit; margin-bottom: 14px; transition: 0.18s; display: flex; align-items: center; justify-content: center; gap: 7px; }

.sk-ai-btn:hover { transform: translateY(-1px); box-shadow: rgba(36, 52, 71, 0.35) 0px 6px 18px; }

.sk-ai-btn.loading { opacity: 0.7; cursor: not-allowed; transform: none; }

.sk-goal-row { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }

.sk-goal { padding: 5px 11px; border-radius: 50px; font-size: 0.7rem; font-weight: 700; border: 1.5px solid rgb(224, 219, 212); background: rgb(255, 255, 255); color: var(--brown); cursor: pointer; font-family: inherit; transition: 0.15s; }

.sk-goal.on { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); }

.sk-day { background: rgb(255, 255, 255); border-radius: 14px; padding: 12px; margin-bottom: 8px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 8px; }

.sk-day-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.sk-day-name { font-size: 0.72rem; font-weight: 800; color: var(--navy-primary); text-transform: uppercase; letter-spacing: 0.08em; }

.sk-day-score { font-size: 0.68rem; font-weight: 700; color: var(--brown); }

.sk-meal-row { display: flex; gap: 6px; align-items: center; padding: 5px 0px; border-bottom: 1px solid rgb(244, 240, 235); cursor: pointer; transition: background 0.12s; border-radius: 6px; }

.sk-meal-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.sk-meal-row:hover { background: rgb(249, 247, 244); padding: 5px 4px; }

.sk-meal-type { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brown); width: 46px; flex-shrink: 0; }

.sk-meal-name { flex: 1 1 0%; font-size: 0.75rem; font-weight: 600; color: var(--char); min-width: 0px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.sk-meal-mood { font-size: 0.62rem; padding: 1px 6px; border-radius: 50px; flex-shrink: 0; }

.sk-meal-drag { color: rgb(204, 204, 204); font-size: 0.7rem; cursor: grab; flex-shrink: 0; }

.sk-pref-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }

.sk-pref-sel { padding: 7px 10px; border-radius: 10px; border: 1.5px solid rgb(224, 219, 212); font-size: 0.75rem; font-family: inherit; background: rgb(255, 255, 255); outline: none; width: 100%; cursor: pointer; }

.sk-pref-sel:focus { border-color: var(--navy-primary); }

@keyframes sk-dot { 
  0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
  40% { transform: scale(1); opacity: 1; }
}

.sk-dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--navy-primary); margin: 0px 2px; animation: 1.2s ease-in-out 0s infinite normal none running sk-dot; }

.sk-dots span:nth-child(2) { animation-delay: 0.2s; }

.sk-dots span:nth-child(3) { animation-delay: 0.4s; }

.sk-shop-item { display: flex; align-items: center; gap: 8px; padding: 6px 0px; border-bottom: 1px solid rgb(244, 240, 235); font-size: 0.78rem; color: var(--char); }

.sk-shop-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.sk-shop-item input[type="checkbox"] { accent-color: var(--navy-primary); cursor: pointer; }

.sg-hd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }

.sg-card { background: rgb(255, 255, 255); border-radius: 20px; padding: 18px 20px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 14px; border: 1px solid rgba(0, 0, 0, 0.04); margin-bottom: 14px; }

.sg-card-title { font-weight: 800; font-size: 0.88rem; color: var(--char); margin-bottom: 10px; display: flex; align-items: center; gap: 7px; }

.sg-card-sub { font-size: 0.78rem; color: var(--brown); line-height: 1.6; margin-bottom: 10px; }

.sg-budget-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }

@media (max-width: 520px) {
  .sg-budget-grid { grid-template-columns: repeat(2, 1fr); }
}

.sg-metric { background: var(--hu-white-mist); border-radius: 13px; padding: 10px 12px; text-align: center; }

.sg-metric-n { font-family: Georgia, serif; font-size: 1.25rem; font-weight: 700; color: var(--char); line-height: 1; }

.sg-metric-n.good { color: rgb(34, 168, 88); }

.sg-metric-n.warn { color: rgb(224, 138, 32); }

.sg-metric-l { font-size: 0.62rem; color: var(--brown); margin-top: 3px; }

.sg-budget-inp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }

.sg-budget-inp { font-family: inherit; font-size: 0.9rem; font-weight: 700; color: var(--char); background: var(--hu-white-mist); border: 1.5px solid rgba(0, 0, 0, 0.09); border-radius: 12px; padding: 8px 13px; outline: none; width: 110px; transition: border-color 0.15s; }

.sg-budget-inp:focus { border-color: var(--navy-primary); }

.sg-status-line { font-size: 0.82rem; color: var(--brown); line-height: 1.5; }

.sg-status-line strong { color: var(--char); }

.sg-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 50px; font-size: 0.65rem; font-weight: 700; }

.sg-pill-sage { background: var(--sage-lt); color: var(--sage-dk); }

.sg-pill-yel { background: var(--yel-lt); color: rgb(122, 85, 0); }

.sg-pill-sky { background: var(--sky-lt); color: rgb(42, 106, 126); }

.sg-pill-peach { background: var(--peach-lt); color: rgb(184, 92, 48); }

.sg-pill-lav { background: var(--lav-lt); color: rgb(90, 74, 138); }

.sg-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

.sg-filter { padding: 6px 13px; border-radius: 50px; border: 1.5px solid rgba(0, 0, 0, 0.09); background: rgb(255, 255, 255); font-family: inherit; font-size: 0.74rem; font-weight: 700; color: var(--brown); cursor: pointer; transition: 0.15s; white-space: nowrap; }

.sg-filter:hover { border-color: var(--navy-primary); color: var(--sage-dk); }

.sg-filter.sg-on { background: var(--sage-lt); border-color: var(--navy-primary); color: var(--sage-dk); }

.sg-item-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--hu-white-mist); border-radius: 13px; margin-bottom: 7px; transition: 0.15s; }

.sg-item-row.sg-checked { opacity: 0.5; }

.sg-item-row.sg-instore { padding: 14px 16px; border-radius: 16px; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 6px; }

.sg-item-cb { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: 0.15s; font-size: 0.75rem; }

.sg-item-cb.ticked { background: var(--navy-primary); border-color: var(--navy-primary); color: rgb(255, 255, 255); }

.sg-item-name { flex: 1 1 0%; font-size: 0.86rem; font-weight: 600; color: var(--char); }

.sg-item-name.sg-checked { text-decoration: line-through; color: var(--brown); }

.sg-item-price { font-size: 0.78rem; color: var(--brown); white-space: nowrap; }

.sg-item-tags { display: flex; gap: 4px; flex-wrap: wrap; }

.sg-item-rm { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(204, 204, 204); cursor: pointer; font-size: 0.85rem; padding: 2px; transition: color 0.15s; flex-shrink: 0; }

.sg-item-rm:hover { color: var(--red); }

.sg-instore-wrap { display: none; }

.sg-instore-wrap.sg-show { display: block; }

.sg-progress-bar { height: 8px; background: rgba(0, 0, 0, 0.07); border-radius: 4px; overflow: hidden; margin: 10px 0px 6px; }

.sg-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg,var(--sage),var(--sage-dk)); transition: width 0.4s; }

.sg-progress-label { font-size: 0.72rem; color: var(--brown); }

.sg-aisle-hd { display: flex; align-items: center; gap: 8px; margin: 16px 0px 8px; }

.sg-aisle-hd-line { flex: 1 1 0%; height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.07), transparent); }

.sg-aisle-label { font-size: 0.63rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-primary); }

.sg-score-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }

.sg-score-tile { background: var(--hu-white-mist); border-radius: 13px; padding: 11px 8px; text-align: center; }

.sg-score-label { font-size: 0.65rem; font-weight: 700; color: var(--brown); margin-bottom: 5px; }

.sg-score-dots { display: flex; gap: 3px; justify-content: center; }

.sg-dot { width: 8px; height: 8px; border-radius: 50%; }

.sg-dot-fill { background: var(--navy-primary); }

.sg-dot-empty { background: rgb(224, 219, 212); }

.sg-modal-bg { display: none; position: fixed; inset: 0px; background: rgba(20, 20, 20, 0.5); z-index: 6500; align-items: flex-end; justify-content: center; }

.sg-modal-bg.sg-open { display: flex; }

.sg-modal-sheet { background: rgb(255, 255, 255); border-radius: 28px 28px 0px 0px; width: 100%; max-width: 540px; max-height: 85vh; overflow-y: auto; padding: 24px 20px 44px; animation: 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 normal none running sgSlideUp; }

@keyframes sgSlideUp { 
  0% { transform: translateY(100%); }
  100% { transform: translateY(0px); }
}

.sg-modal-handle { width: 36px; height: 4px; border-radius: 2px; background: rgb(212, 212, 208); margin: 0px auto 18px; }

.sg-meal-idea { background: var(--hu-white-mist); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; }

.sg-meal-idea-title { font-weight: 800; font-size: 0.86rem; color: var(--char); margin-bottom: 4px; }

.sg-meal-idea-desc { font-size: 0.78rem; color: var(--brown); line-height: 1.55; margin-bottom: 10px; }

.sg-meal-idea-btns { display: flex; gap: 7px; flex-wrap: wrap; }

.sg-tiny-btn { padding: 6px 13px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; border: 1.5px solid var(--sage); background: rgb(255, 255, 255); color: var(--navy-primary); cursor: pointer; font-family: inherit; transition: 0.15s; white-space: nowrap; }

.sg-tiny-btn:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.sg-tiny-btn-fill { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); }

.sg-tiny-btn-fill:hover { background: var(--sage-dk); }

.sg-warn-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 13px; margin-bottom: 7px; }

.sg-warn-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; }

.sg-warn-text { flex: 1 1 0%; font-size: 0.8rem; color: var(--char); line-height: 1.5; }

.sg-warn-sub { font-size: 0.72rem; color: var(--brown); }

.sg-forgotten-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; background: var(--hu-white-mist); margin-bottom: 7px; }

.sg-forgotten-text { flex: 1 1 0%; font-size: 0.81rem; color: var(--char); line-height: 1.45; }

.sg-forgotten-btns { display: flex; gap: 5px; flex-shrink: 0; }

.sg-micro { font-size: 0.74rem; color: rgb(154, 170, 158); font-style: italic; line-height: 1.5; padding: 6px 2px; margin: 0px; }

.sg-store-compact { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--hu-white-mist); border-radius: 13px; margin-bottom: 12px; flex-wrap: wrap; }

.sg-store-pill { padding: 5px 12px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; color: rgb(255, 255, 255); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-family: inherit; }

@media (max-width: 480px) {
  .sg-budget-grid { grid-template-columns: 1fr 1fr; }
  .sg-score-grid { grid-template-columns: repeat(3, 1fr); }
}

.mfl-page-hd { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }

.mfl-page-title-wrap .sl { margin-bottom: 3px; }

.mfl-page-title { font-family: Georgia, serif; font-size: 1.4rem; font-weight: 700; color: var(--char); margin: 0px; line-height: 1.25; }

.mfl-page-sub { font-size: 0.78rem; color: var(--brown); margin-top: 5px; font-style: italic; }

.mfl-hd-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.mfl-disclaimer { background: linear-gradient(135deg, rgb(240, 248, 240), rgb(250, 245, 239)); border: 1px solid rgba(36, 52, 71, 0.2); border-radius: 14px; padding: 12px 16px; margin-bottom: 22px; display: flex; align-items: flex-start; gap: 10px; }

.mfl-disclaimer-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

.mfl-disclaimer-text { font-size: 0.74rem; color: var(--brown); line-height: 1.55; }

.mfl-tabs { display: flex; background: rgb(255, 255, 255); border-radius: 20px; padding: 5px; gap: 4px; margin-bottom: 22px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 14px; overflow-x: auto; scrollbar-width: none; }

.mfl-tabs::-webkit-scrollbar { display: none; }

.mfl-tab-btn { flex: 1 1 0%; min-width: fit-content; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 12px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: transparent; border-radius: 14px; cursor: pointer; font-family: inherit; transition: 0.2s; white-space: nowrap; }

.mfl-tab-btn:hover { background: rgba(36, 52, 71, 0.07); }

.mfl-tab-btn.mfl-tab-active { background: linear-gradient(135deg,var(--sage-lt),#e4f3e4); box-shadow: rgba(36, 52, 71, 0.18) 0px 2px 10px; }

.mfl-tab-icon { font-size: 1.1rem; }

.mfl-tab-label { font-size: 0.67rem; font-weight: 700; color: var(--brown); letter-spacing: 0.02em; }

.mfl-tab-btn.mfl-tab-active .mfl-tab-label { color: var(--sage-dk); }

.mfl-panel { display: none; animation: 0.25s ease 0s 1 normal none running mflFadeIn; }

.mfl-panel.mfl-panel-active { display: block; }

@keyframes mflFadeIn { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.mfl-card { background: rgb(255, 255, 255); border-radius: 22px; padding: 22px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 16px; margin-bottom: 16px; border: 1px solid rgba(0, 0, 0, 0.04); }

.mfl-card-title { font-family: Georgia, serif; font-size: 1rem; font-weight: 700; color: var(--char); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }

.mfl-card-title-icon { font-size: 1.1rem; }

.mfl-field { margin-bottom: 18px; }

.mfl-field:last-child { margin-bottom: 0px; }

.mfl-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--brown); margin-bottom: 7px; letter-spacing: 0.02em; }

.mfl-input, .mfl-textarea, .mfl-select { width: 100%; background: rgb(250, 250, 248); border: 1.5px solid rgb(236, 232, 226); border-radius: 12px; padding: 11px 14px; font-size: 0.88rem; font-family: inherit; color: var(--char); outline: none; transition: border-color 0.18s, box-shadow 0.18s; }

.mfl-input:focus, .mfl-textarea:focus, .mfl-select:focus { border-color: var(--navy-primary); box-shadow: rgba(36, 52, 71, 0.12) 0px 0px 0px 3px; }

.mfl-input::placeholder, .mfl-textarea::placeholder { color: rgb(191, 186, 181); }

.mfl-textarea { resize: vertical; min-height: 80px; }

.mfl-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b5b4e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; cursor: pointer; }

.mfl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 500px) {
  .mfl-row { grid-template-columns: 1fr; }
}

.mfl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.mfl-chip { padding: 7px 15px; border-radius: 50px; font-size: 0.78rem; font-weight: 600; color: var(--brown); background: rgb(250, 250, 248); border: 1.5px solid rgb(236, 232, 226); cursor: pointer; transition: 0.18s; user-select: none; font-family: inherit; }

.mfl-chip:hover { border-color: var(--navy-primary); color: var(--sage-dk); background: var(--sage-lt); }

.mfl-chip.mfl-chip-sel { background: var(--sage-lt); border-color: var(--navy-primary); color: var(--sage-dk); }

.mfl-chip.mfl-chip-sel.mfl-chip-blush { background: var(--peach-lt); border-color: var(--peach); color: rgb(184, 92, 48); }

.mfl-chip.mfl-chip-sel.mfl-chip-sky { background: var(--sky-lt); border-color: var(--sky); color: rgb(42, 106, 126); }

.mfl-chip.mfl-chip-sel.mfl-chip-lav { background: var(--lav-lt); border-color: var(--lav); color: rgb(106, 84, 138); }

.mfl-media-row { display: flex; gap: 10px; flex-wrap: wrap; }

.mfl-media-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 50px; border: 1.5px dashed rgb(212, 206, 200); background: rgb(250, 250, 248); font-size: 0.78rem; font-weight: 700; color: var(--brown); cursor: pointer; font-family: inherit; transition: 0.18s; }

.mfl-media-btn:hover { border-color: var(--navy-primary); color: var(--sage-dk); background: var(--sage-lt); border-style: solid; }

.mfl-media-btn .mfl-media-icon { font-size: 1rem; }

.mfl-severity { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.mfl-sev-opt { padding: 9px 6px; border-radius: 12px; border: 1.5px solid rgb(236, 232, 226); background: rgb(250, 250, 248); text-align: center; cursor: pointer; font-family: inherit; transition: 0.18s; }

.mfl-sev-opt span { display: block; font-size: 0.65rem; font-weight: 700; color: var(--brown); margin-top: 3px; letter-spacing: 0.03em; text-transform: uppercase; }

.mfl-sev-opt:hover { border-color: var(--navy-primary); background: var(--sage-lt); }

.mfl-sev-opt.mfl-sev-sel[data-sev="none"] { background: rgb(221, 229, 216); border-color: rgb(36, 52, 71); }

.mfl-sev-opt.mfl-sev-sel[data-sev="mild"] { background: rgb(241, 239, 237); border-color: rgb(212, 168, 42); }

.mfl-sev-opt.mfl-sev-sel[data-sev="moderate"] { background: rgb(242, 223, 223); border-color: var(--peach); }

.mfl-sev-opt.mfl-sev-sel[data-sev="severe"] { background: rgb(253, 232, 232); border-color: rgb(192, 112, 110); }

.mfl-timing { display: flex; flex-wrap: wrap; gap: 8px; }

.mfl-timing-opt { padding: 8px 14px; border-radius: 50px; border: 1.5px solid rgb(236, 232, 226); background: rgb(250, 250, 248); font-size: 0.75rem; font-weight: 600; color: var(--brown); cursor: pointer; font-family: inherit; transition: 0.18s; }

.mfl-timing-opt:hover, .mfl-timing-opt.mfl-timing-sel { background: var(--sky-lt); border-color: var(--sky); color: rgb(42, 106, 126); }

.mfl-med-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgb(250, 250, 248); border-radius: 14px; border: 1.5px solid rgb(236, 232, 226); }

.mfl-med-label { flex: 1 1 0%; font-size: 0.83rem; font-weight: 600; color: var(--char); }

.mfl-toggle { position: relative; width: 42px; height: 24px; flex-shrink: 0; }

.mfl-toggle input { opacity: 0; width: 0px; height: 0px; }

.mfl-toggle-slider { position: absolute; inset: 0px; background: rgb(221, 221, 221); border-radius: 50px; cursor: pointer; transition: 0.25s; }

.mfl-toggle-slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; bottom: 3px; background: rgb(255, 255, 255); border-radius: 50%; transition: 0.25s; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 4px; }

.mfl-toggle input:checked + .mfl-toggle-slider { background: var(--navy-primary); }

.mfl-toggle input:checked + .mfl-toggle-slider::before { transform: translateX(18px); }

.mfl-med-input-wrap { margin-top: 10px; display: none; }

.mfl-med-input-wrap.open { display: block; }

.mfl-actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

.mfl-action-btn { flex: 1 1 0%; min-width: 140px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 20px; border-radius: 50px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 0.83rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.2s; }

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

.mfl-btn-primary { background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); box-shadow: rgba(36, 52, 71, 0.1) 0px 3px 14px; }

.mfl-btn-primary:hover { box-shadow: rgba(36, 52, 71, 0.15) 0px 6px 20px; }

.mfl-btn-outline { background: rgb(255, 255, 255); color: var(--sage-dk); border: 1.5px solid var(--sage) !important; }

.mfl-btn-ghost { background: rgb(250, 250, 248); color: var(--brown); border: 1.5px solid rgb(236, 232, 226) !important; }

.mfl-btn-sky { background: linear-gradient(135deg, rgb(80, 101, 125), rgb(74, 154, 181)); color: rgb(255, 255, 255); box-shadow: rgba(123, 191, 212, 0.3) 0px 3px 14px; }

.mfl-recent-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

.mfl-recent-title { font-family: Georgia, serif; font-size: 1rem; font-weight: 700; color: var(--char); }

.mfl-recent-clear { font-size: 0.72rem; font-weight: 700; color: var(--brown); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; opacity: 0.6; }

.mfl-recent-clear:hover { opacity: 1; color: rgb(192, 112, 110); }

.mfl-log-entries { display: flex; flex-direction: column; gap: 10px; }

.mfl-log-entry { background: rgb(255, 255, 255); border-radius: 18px; padding: 16px 18px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 12px; border: 1px solid rgba(0, 0, 0, 0.04); display: flex; align-items: flex-start; gap: 14px; animation: 0.3s ease 0s 1 normal none running mflFadeIn; }

.mfl-log-entry-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }

.mfl-log-entry-body { flex: 1 1 0%; min-width: 0px; }

.mfl-log-entry-title { font-weight: 800; font-size: 0.85rem; color: var(--char); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mfl-log-entry-meta { font-size: 0.73rem; color: var(--brown); line-height: 1.6; }

.mfl-log-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }

.mfl-log-pill { padding: 2px 9px; border-radius: 50px; font-size: 0.65rem; font-weight: 700; }

.mfl-pill-sage { background: var(--sage-lt); color: var(--sage-dk); }

.mfl-pill-peach { background: var(--peach-lt); color: rgb(184, 92, 48); }

.mfl-pill-sky { background: var(--sky-lt); color: rgb(42, 106, 126); }

.mfl-pill-yel { background: var(--yel-lt); color: rgb(138, 106, 0); }

.mfl-pill-red { background: rgb(253, 232, 232); color: rgb(192, 48, 48); }

.mfl-empty-state { text-align: center; padding: 36px 20px; color: var(--brown); }

.mfl-empty-icon { font-size: 2.4rem; display: block; margin-bottom: 10px; opacity: 0.45; }

.mfl-empty-text { font-size: 0.83rem; line-height: 1.6; }

.mfl-export-card { background: linear-gradient(135deg, rgb(240, 248, 240) 0%, rgb(250, 250, 248) 50%, rgb(240, 246, 249) 100%); border: 1px solid rgba(36, 52, 71, 0.18); border-radius: 22px; padding: 26px; margin-bottom: 18px; }

.mfl-export-card-title { font-family: Georgia, serif; font-size: 1.1rem; font-weight: 700; color: var(--char); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }

.mfl-export-card-sub { font-size: 0.74rem; color: var(--brown); margin-bottom: 20px; }

.mfl-export-section { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }

.mfl-export-section:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; margin-bottom: 0px; padding-bottom: 0px; }

.mfl-export-section-label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy-primary); margin-bottom: 8px; }

.mfl-export-section-content { font-size: 0.82rem; color: var(--char); line-height: 1.7; }

.mfl-export-section-content em { color: var(--brown); font-style: normal; }

@media (max-width: 480px) {
  .mfl-tab-btn { padding: 9px 8px; }
  .mfl-tab-label { font-size: 0.6rem; }
  .mfl-severity { grid-template-columns: repeat(2, 1fr); }
  .mfl-action-btn { min-width: 120px; }
}

.mk-wrap { background: rgb(250, 248, 245); }

.mk-body { max-width: var(--content-max); margin: 0px auto; padding: var(--section-gap) var(--content-pad) 96px; }

@media (max-width: 640px) {
  .mk-body { padding: var(--section-gap-sm) 16px 80px; }
}

.mk-profile-bar { background: rgb(255, 255, 255); border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 16px 0px 14px; position: sticky; top: var(--nav-h); z-index: 110; }

.mk-profile-bar-inner { max-width: var(--content-max); margin: 0px auto; padding: 0 var(--content-pad); display: flex; align-items: center; gap: 16px; }

.mk-profile-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--brown); opacity: 0.55; white-space: nowrap; flex-shrink: 0; padding-top: 2px; }

.mk-profile-circles { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; scrollbar-width: none; flex: 1 1 0%; padding: 2px 2px 4px; }

.mk-profile-circles::-webkit-scrollbar { display: none; }

.mk-prof-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; flex-shrink: 0; transition: transform 0.2s; outline: none; -webkit-tap-highlight-color: transparent; }

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

.mk-prof-btn:focus-visible .mk-prof-avatar { outline: 2px solid var(--sage); outline-offset: 3px; }

.mk-prof-avatar { width: 46px; height: 46px; border-radius: 50%; background: rgb(255, 255, 255); border: 2px solid rgba(36, 52, 71, 0.18); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 10px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; line-height: 1; transition: border-color 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; flex-shrink: 0; }

.mk-prof-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; position: absolute; inset: 0px; }

.mk-prof-initials { font-size: 0.88rem; font-weight: 800; color: var(--sage-dk); letter-spacing: -0.02em; line-height: 1; }

.mk-prof-btn.active .mk-prof-avatar { border-color: var(--navy-primary); box-shadow: rgba(36, 52, 71, 0.22) 0px 0px 0px 3.5px, rgba(0, 0, 0, 0.09) 0px 3px 12px; }

.mk-prof-name { font-size: 0.6rem; font-weight: 600; color: var(--brown); opacity: 0.65; letter-spacing: 0.015em; text-align: center; max-width: 56px; line-height: 1.2; transition: color 0.2s, opacity 0.2s; white-space: nowrap; }

.mk-prof-btn.active .mk-prof-name { color: var(--sage-dk); opacity: 1; font-weight: 700; }

.mk-prof-btn.mk-prof-all .mk-prof-avatar { width: auto; min-width: 46px; border-radius: 50px; padding: 0px 14px; font-size: 0.72rem; font-weight: 700; color: var(--brown); letter-spacing: 0.01em; }

.mk-prof-btn.mk-prof-all.active .mk-prof-avatar { color: var(--sage-dk); }

.mk-profile-manage { font-size: 0.69rem; font-weight: 600; color: var(--sage-dk); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; white-space: nowrap; opacity: 0.65; transition: opacity 0.18s; flex-shrink: 0; padding-top: 2px; }

.mk-profile-manage:hover { opacity: 1; }

.mk-profile-greeting { display: none; background: linear-gradient(135deg, rgb(248, 251, 248), rgb(250, 250, 248)); border-top: 1px solid rgba(36, 52, 71, 0.08); padding: 10px 0px; }

.mk-profile-greeting-inner { max-width: var(--content-max); margin: 0px auto; padding: 0 var(--content-pad); display: flex; align-items: center; gap: 12px; }

.mk-profile-greeting-emoji { font-size: 1.4rem; flex-shrink: 0; }

.mk-profile-greeting-title { font-size: 0.82rem; font-weight: 700; color: var(--char); }

.mk-profile-greeting-goals { font-size: 0.67rem; color: var(--brown); margin-top: 1px; }

.mk-profile-greeting-close { margin-left: auto; font-size: 0.65rem; font-weight: 600; color: var(--brown); background: rgba(0, 0, 0, 0.05); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 4px 10px; cursor: pointer; font-family: inherit; opacity: 0.65; transition: opacity 0.18s; flex-shrink: 0; }

.mk-profile-greeting-close:hover { opacity: 1; }

@media (max-width: 480px) {
  .mk-prof-avatar { width: 40px; height: 40px; font-size: 1.2rem; }
  .mk-prof-btn.mk-prof-all .mk-prof-avatar { min-width: 40px; padding: 0px 11px; font-size: 0.68rem; }
  .mk-prof-name { font-size: 0.57rem; max-width: 48px; }
  .mk-profile-circles { gap: 11px; }
}

.mk-hero { background: linear-gradient(155deg, rgb(248, 251, 248) 0%, rgb(250, 250, 248) 50%, rgb(242, 245, 251) 100%); padding: 54px var(--content-pad) 46px; position: relative; overflow: hidden; }

.mk-hero::before { content: ""; position: absolute; top: -120px; right: -80px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(36, 52, 71, 0.09) 0%, transparent 65%); pointer-events: none; }

.mk-hero::after { content: ""; position: absolute; bottom: -60px; left: -60px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(181, 167, 212, 0.07) 0%, transparent 65%); pointer-events: none; }

.mk-hero-inner { max-width: var(--content-max); margin: 0px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }

@media (max-width: 820px) {
  .mk-hero-inner { grid-template-columns: 1fr; gap: 28px; }
}

.mk-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: var(--sage-lt); border: 1px solid rgba(36, 52, 71, 0.22); border-radius: 50px; padding: 5px 14px 5px 10px; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-dk); margin-bottom: 17px; }

.mk-hero h1 { font-family: Georgia, serif; font-size: clamp(1.95rem, 4vw, 3rem); font-weight: 700; color: rgb(30, 45, 61); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 15px; }

.mk-hero h1 em { font-style: normal; -webkit-text-fill-color: transparent; background-clip: text; }

.mk-hero-sub { font-size: 0.95rem; color: var(--brown); line-height: 1.78; max-width: 400px; font-weight: 300; }

.mk-hero-tiles { display: none; }

.mk-hero-tile { display: none; }

.mk-hero-tile:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.11) 0px 8px 26px; }

.mk-hero-tile-icon { font-size: 1.45rem; margin-bottom: 5px; }

.mk-hero-tile-label { font-size: 0.72rem; font-weight: 700; color: rgb(30, 45, 61); line-height: 1.3; }

.mk-hero-tile-sub { font-size: 0.61rem; color: var(--brown); margin-top: 2px; }

-card { background: rgb(255, 255, 255); border-radius: 22px; padding: 26px 28px; box-shadow: rgba(30, 45, 61, 0.055) 0px 3px 20px; border: 1px solid rgba(36, 52, 71, 0.1); display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: var(--section-gap); }

-eyebrow { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-primary); margin-bottom: 5px; }

-card h2 { font-family: Georgia, serif; font-size: 1.22rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 5px; line-height: 1.25; }

-sub { font-size: 0.82rem; color: var(--brown); line-height: 1.6; margin-bottom: 13px; }

.mk-insight-pills { display: none; }

.mk-insight-pill { display: none; }

.mk-insight-pill { display: none; }

.mk-insight-pill { display: none; }

.mk-insight-pill { display: none; }

.mk-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; min-width: 250px; }

@media (max-width: 680px) {
  .mk-stat-cards { grid-template-columns: repeat(2, 1fr); min-width: 0px; width: 100%; }
}

.mk-stat-card { background: linear-gradient(135deg, var(--sage-lt), #f8fbf8); border-radius: 13px; padding: 13px 10px; text-align: center; border: 1px solid rgba(36, 52, 71, 0.12); }

.mk-stat-card-n { font-size: 1.4rem; font-weight: 800; color: var(--sage-dk); line-height: 1; }

.mk-stat-card-l { font-size: 0.61rem; color: var(--brown); margin-top: 3px; font-weight: 600; letter-spacing: 0.04em; }

.mk-intro { background: linear-gradient(145deg, rgb(247, 248, 246), rgb(250, 250, 248)); border-radius: 21px; padding: 30px 30px 26px; margin-bottom: 24px; border: 1px solid rgba(36, 52, 71, 0.08); }

.mk-intro:not(.mk-tiles-section .mk-intro) { margin-bottom: var(--section-gap); }

@media (max-width: 580px) {
  .mk-intro { padding: 20px 18px; border-radius: 17px; }
}

.mk-intro-title { font-family: Georgia, serif; font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 700; color: rgb(30, 45, 61); line-height: 1.2; margin-bottom: 9px; letter-spacing: -0.013em; }

.mk-intro-body { font-size: 0.89rem; color: var(--brown); line-height: 1.78; margin-bottom: 17px; max-width: 640px; font-weight: 300; }

.mk-feature-pills { display: none; }

.mk-feature-pill { display: none; }

.mk-tiles-section { margin-bottom: var(--section-gap); }

.mk-tiles-eyebrow { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-primary); margin-bottom: 6px; }

.mk-tiles-title { font-family: Georgia, serif; font-size: clamp(1.15rem, 2.5vw, 1.6rem); font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 6px; letter-spacing: -0.013em; }

.mk-tiles-sub { font-size: 0.87rem; color: var(--brown); line-height: 1.72; margin-bottom: 24px; max-width: 500px; font-weight: 300; }

.mk-tiles-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--card-gap); }

@media (max-width: 1020px) {
  .mk-tiles-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 680px) {
  .mk-tiles-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .mk-tiles-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

.mk-tile { background: var(--navy-primary); border-radius: 16px; padding: 22px 17px 17px; border: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; transition: transform 0.22s, box-shadow 0.22s; display: flex; flex-direction: column; position: relative; overflow: hidden; text-align: left; font-family: inherit; appearance: none; }

.mk-tile:hover { transform: translateY(-4px); box-shadow: rgba(30, 45, 61, 0.1) 0px 10px 32px; }

.mk-tile-icon { width: auto; height: auto; border-radius: 0px; background: transparent; display: block; font-size: 1.8rem; margin-bottom: 10px; line-height: 1; }

.mk-tile-name { font-family: Georgia, serif; font-size: 0.91rem; font-weight: 700; color: rgb(255, 255, 255); margin-bottom: 5px; line-height: 1.2; }

.mk-tile-desc { font-size: 0.74rem; color: rgba(255, 255, 255, 0.65); line-height: 1.6; flex: 1 1 0%; }

.mk-tile-cta { display: inline-flex; align-items: center; gap: 3px; font-size: 0.68rem; font-weight: 700; color: var(--sage-dk); margin-top: 11px; opacity: 0; transform: translateX(-5px); transition: opacity 0.2s, transform 0.2s; }

.mk-tile:hover .mk-tile-cta { opacity: 0; transform: translateX(0px); }

.mk-tile-yellow { border-color: rgba(255, 255, 255, 0.1); background: var(--navy-primary); }

.mk-tile-yellow:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px; }

.mk-tile-badge { position: absolute; top: 11px; right: 11px; background: rgba(255, 255, 255, 0.2); color: rgb(255, 255, 255); font-size: 0.51rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; }

.mk-pantry-section { background: rgb(255, 255, 255); border-radius: 22px; padding: 26px 26px 22px; margin-bottom: var(--section-gap); box-shadow: rgba(30, 45, 61, 0.05) 0px 2px 18px; border: 1px solid rgba(30, 45, 61, 0.05); }

@media (max-width: 560px) {
  .mk-pantry-section { padding: 18px 15px; border-radius: 17px; }
}

.mk-pantry-section-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 17px; flex-wrap: wrap; }

.mk-pantry-eyebrow { font-size: 0.63rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-primary); margin-bottom: 3px; }

.mk-pantry-section-title { font-family: Georgia, serif; font-size: 1.08rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 3px; }

.mk-pantry-section-sub { font-size: 0.78rem; color: var(--brown); }

.mk-match-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }

@media (max-width: 520px) {
  .mk-match-grid { grid-template-columns: 1fr; }
}

.mk-match-card { background: rgb(250, 248, 245); border-radius: 14px; padding: 14px; display: flex; align-items: flex-start; gap: 11px; border: 1px solid rgba(30, 45, 61, 0.05); transition: background 0.2s, border-color 0.2s; }

.mk-match-card:hover { background: rgb(247, 248, 246); border-color: rgba(36, 52, 71, 0.15); }

.mk-match-icon { font-size: 1.65rem; flex-shrink: 0; margin-top: 2px; }

.mk-match-title { font-weight: 700; font-size: 0.85rem; color: rgb(30, 45, 61); margin-bottom: 3px; }

.mk-match-status { font-size: 0.71rem; margin-bottom: 6px; }

.mk-match-moods { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 7px; }

.mk-match-btns { display: flex; gap: 7px; flex-wrap: wrap; }

.mk-match-btn { padding: 5px 12px; border-radius: 50px; font-size: 0.71rem; font-weight: 700; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; transition: filter 0.18s; }

.mk-match-btn:hover { filter: brightness(0.95); }

.mk-match-bar-wrap { margin: 5px 0px 7px; }

.mk-match-bar-bg { height: 4px; background: rgba(0, 0, 0, 0.07); border-radius: 3px; overflow: hidden; }

.mk-match-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--sage), #90e0a8); transition: width 0.4s; }

.mk-week-section { margin-bottom: var(--section-gap); }

.mk-week-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }

@media (max-width: 940px) {
  .mk-week-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 500px) {
  .mk-week-grid { grid-template-columns: repeat(2, 1fr); }
}

.mk-week-card { background: rgb(255, 255, 255); border-radius: 16px; padding: 17px 13px; box-shadow: rgba(30, 45, 61, 0.05) 0px 2px 12px; border: 1px solid rgba(30, 45, 61, 0.04); text-align: center; transition: transform 0.22s, box-shadow 0.22s; }

.mk-week-card:hover { transform: translateY(-2px); box-shadow: rgba(30, 45, 61, 0.09) 0px 6px 18px; }

.mk-week-icon { font-size: 1.45rem; margin-bottom: 7px; }

.mk-week-n { font-size: 1.4rem; font-weight: 800; color: var(--sage-dk); line-height: 1; margin-bottom: 3px; }

.mk-week-label { font-size: 0.67rem; font-weight: 700; color: rgb(30, 45, 61); letter-spacing: 0.02em; margin-bottom: 3px; }

.mk-week-sub { font-size: 0.61rem; color: var(--brown); line-height: 1.4; }

.mk-recent-section { margin-bottom: var(--section-gap); }

.mk-log-section { margin-bottom: var(--section-gap); }

.mk-section-hd { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }

.mk-section-hd-left { }

.mk-section-eyebrow { font-size: 0.61rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-primary); margin-bottom: 3px; }

.mk-section-title { font-family: Georgia, serif; font-size: 1.03rem; font-weight: 700; color: rgb(30, 45, 61); }

.mk-see-all { font-size: 0.74rem; font-weight: 700; color: var(--sage-dk); background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 3px; transition: color 0.18s; padding-bottom: 2px; }

.mk-see-all:hover { color: var(--navy-primary); }

.mk-recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }

@media (max-width: 800px) {
  .mk-recipe-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
  .mk-recipe-grid { grid-template-columns: 1fr; }
}

.mk-rec-card { background: rgb(255, 255, 255); border-radius: 16px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.055) 0px 2px 14px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }

.mk-rec-card:hover { transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.09) 0px 8px 26px; }

.mk-rec-img { height: 108px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; position: relative; }

.mk-rec-badge { position: absolute; top: 9px; left: 9px; background: rgba(255, 255, 255, 0.9); border-radius: 50px; padding: 2px 8px; font-size: 0.62rem; font-weight: 700; backdrop-filter: blur(4px); }

.mk-rec-body { padding: 11px 13px 13px; }

.mk-rec-title { font-weight: 700; font-size: 0.82rem; color: rgb(30, 45, 61); margin-bottom: 4px; line-height: 1.3; }

.mk-rec-meta { font-size: 0.69rem; color: var(--brown); display: flex; gap: 9px; }

.mk-rec-moods { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }

.mk-rec-mood { font-size: 0.64rem; font-weight: 700; padding: 2px 8px; border-radius: 50px; }

.mk-log-card { background: rgb(255, 255, 255); border-radius: 18px; padding: 17px 21px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 14px; border: 1px solid rgba(30, 45, 61, 0.04); }

.mk-log-entry { display: flex; align-items: center; gap: 11px; padding: 9px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); }

.mk-log-entry:last-of-type { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.mk-log-icon { width: 33px; height: 33px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }

.mk-log-name { font-weight: 700; font-size: 0.81rem; color: var(--char); }

.mk-log-time { font-size: 0.67rem; color: var(--brown); margin-top: 1px; }

.mk-log-score { margin-left: auto; font-size: 0.79rem; font-weight: 700; color: var(--sage-dk); white-space: nowrap; }

.mk-back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; color: var(--sage-dk); background: var(--sage-lt); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 7px 14px; cursor: pointer; font-family: inherit; transition: background 0.18s; margin-bottom: 16px; }

.mk-back-btn:hover { background: rgba(36, 52, 71, 0.18); }

-left h2 { font-family: Georgia, serif; font-size: 1.28rem; font-weight: 700; margin-bottom: 3px; }

-left p { opacity: 0.82; font-size: 0.83rem; }

-stats { display: flex; gap: 18px; flex-wrap: wrap; }

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

.mk-stat-n { font-size: 1.4rem; font-weight: 800; }

.mk-stat-l { font-size: 0.65rem; opacity: 0.72; margin-top: 1px; }

.mk-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.mk-qa-pill { display: inline-flex; align-items: center; gap: 6px; background: rgb(255, 255, 255); border: 1.5px solid rgba(36, 52, 71, 0.2); border-radius: 50px; padding: 7px 14px; font-size: 0.78rem; font-weight: 700; color: var(--char); cursor: pointer; font-family: inherit; transition: var(--tr); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 7px; white-space: nowrap; }

.mk-qa-pill:hover { background: var(--sage-lt); border-color: var(--navy-primary); color: var(--sage-dk); transform: translateY(-1px); }

.mk-qa-icon { font-size: 0.94rem; }

.mk-pantry-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 17px; }

@media (max-width: 520px) {
  .mk-pantry-cats { grid-template-columns: repeat(2, 1fr); }
}

.mk-pantry-cat { background: rgb(255, 255, 255); border-radius: 14px; padding: 12px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 10px; }

.mk-pantry-cat-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }

.mk-pantry-cat-title { font-weight: 800; font-size: 0.79rem; color: var(--char); }

.mk-pantry-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); font-size: 0.77rem; color: var(--char); }

.mk-pantry-rm { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(204, 204, 204); cursor: pointer; font-size: 0.86rem; padding: 2px 3px; }

.mk-pantry-add { display: flex; gap: 9px; margin-bottom: 17px; }

.mk-pantry-input { flex: 1 1 0%; padding: 10px 14px; border-radius: 10px; border: 1.5px solid rgb(224, 219, 212); font-size: 0.85rem; font-family: inherit; background: rgb(250, 250, 248); outline: none; transition: border-color 0.15s; }

.mk-pantry-input:focus { border-color: var(--navy-primary); }

.mk-tabs { display: flex; gap: 0px; margin-bottom: 17px; background: transparent; border-radius: 0px; padding: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); overflow-x: auto; }

.mk-tab { padding: 8px 16px; border-radius: 0px; font-size: 0.77rem; font-weight: 600; color: rgba(255, 255, 255, 0.55); border-width: medium medium 2px; border-style: none none solid; border-color: currentcolor currentcolor transparent; border-image: initial; background: none; cursor: pointer; font-family: inherit; transition: 0.16s; white-space: nowrap; margin-bottom: -1px; }

.mk-tab.mk-tab-active { background: transparent; color: rgb(255, 255, 255); border-bottom: 2px solid rgb(255, 255, 255); box-shadow: none; }

.mk-add-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--inner-gap); margin-bottom: var(--section-gap-sm); }

@media (max-width: 520px) {
  .mk-add-grid { grid-template-columns: 1fr 1fr; }
}

.mk-add-card { background: var(--hu-white-mist); border-radius: 14px; padding: 16px; cursor: pointer; transition: 0.18s; border: 1.5px solid transparent; }

.mk-add-card:hover { background: rgb(255, 255, 255); border-color: rgba(36, 52, 71, 0.22); box-shadow: rgba(0, 0, 0, 0.07) 0px 4px 14px; }

.mk-add-card-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 9px; }

.mk-add-card-title { font-weight: 800; font-size: 0.81rem; color: var(--char); margin-bottom: 3px; }

.mk-add-card-sub { font-size: 0.71rem; color: var(--brown); line-height: 1.55; }

.mk-form { background: var(--hu-white-mist); border-radius: 18px; padding: 21px; margin-top: 13px; display: none; }

.mk-form.open { display: block; }

.mk-form-title { font-family: Georgia, serif; font-size: 1.02rem; font-weight: 700; margin-bottom: 17px; }

.mk-field { margin-bottom: 14px; }

.mk-label { font-size: 0.71rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brown); margin-bottom: 5px; display: block; }

.mk-input { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1.5px solid rgb(224, 219, 212); font-size: 0.85rem; font-family: inherit; background: rgb(250, 250, 248); outline: none; box-sizing: border-box; transition: border-color 0.15s; }

.mk-input:focus { border-color: var(--navy-primary); }

.mk-textarea { width: 100%; padding: 10px 14px; border-radius: 10px; border: 1.5px solid rgb(224, 219, 212); font-size: 0.85rem; font-family: inherit; background: rgb(250, 250, 248); outline: none; resize: vertical; min-height: 86px; box-sizing: border-box; transition: border-color 0.15s; }

.mk-textarea:focus { border-color: var(--navy-primary); }

.mk-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 460px) {
  .mk-form-row { grid-template-columns: 1fr; }
}

.mk-mood-checks { display: flex; gap: 7px; flex-wrap: wrap; }

.mk-mood-check { padding: 6px 12px; border-radius: 50px; border: 2px solid rgb(224, 219, 212); font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: 0.15s; background: rgb(255, 255, 255); }

.mk-mood-check.checked { border-color: var(--navy-primary); background: var(--sage-lt); color: var(--navy-primary); }

.mk-upload-zone { border: 2px dashed rgb(224, 219, 212); border-radius: 10px; padding: 20px; text-align: center; cursor: pointer; transition: border-color 0.15s; }

.mk-upload-zone:hover { border-color: var(--navy-primary); }

.mk-ai-result { background: linear-gradient(135deg,var(--sage-lt),var(--yel-lt)); border-radius: 13px; padding: 17px; margin-top: 13px; display: none; }

.mk-ai-result.open { display: block; }

.mk-ai-result-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy-primary); margin-bottom: 9px; }

.mk-ai-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

@media (max-width: 460px) {
  .mk-ai-row { grid-template-columns: 1fr; }
}

.mk-ai-card { background: rgb(255, 255, 255); border-radius: 10px; padding: 12px; }

.mk-ai-card-title { font-size: 0.69rem; font-weight: 700; color: var(--char); margin-bottom: 5px; }

.mk-ai-card-body { font-size: 0.72rem; color: var(--brown); line-height: 1.6; }

.mk-import-form { background: rgb(255, 255, 255); border-radius: 18px; padding: 24px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 14px; display: none; }

.mk-import-form.open { display: block; }

.mk-import-preview { background: var(--hu-white-mist); border-radius: 12px; padding: 16px; margin-top: 14px; display: none; }

.mk-import-preview.open { display: block; }

.mk-search-panel { background: rgb(255, 255, 255); border-radius: 18px; padding: 24px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 14px; display: none; }

.mk-search-panel.open { display: block; }

.mk-search-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 17px; }

@media (max-width: 500px) {
  .mk-search-results { grid-template-columns: 1fr; }
}

.sr-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.45); z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px; }

.sr-overlay.open { display: flex; }

.sr-modal { background: rgb(255, 255, 255); border-radius: 22px; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.18) 0px 24px 80px; position: relative; }

.sr-modal-hero { padding: 25px 25px 0px; display: flex; align-items: center; gap: 14px; }

.sr-modal-emoji { font-size: 2.9rem; line-height: 1; }

.sr-modal-title { font-size: 1.12rem; font-weight: 800; color: var(--char); margin-bottom: 3px; }

.sr-modal-meta { font-size: 0.74rem; color: var(--brown); }

.sr-modal-body { padding: 17px 25px 25px; }

.sr-modal-section { margin-bottom: 15px; }

.sr-modal-label { font-size: 0.61rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--navy-primary); margin-bottom: 6px; }

.sr-modal-text { font-size: 0.82rem; color: var(--char); line-height: 1.7; }

.sr-modal-steps { padding-left: 16px; margin: 0px; }

.sr-modal-steps li { margin-bottom: 5px; font-size: 0.82rem; color: var(--char); line-height: 1.6; }

.sr-modal-moods { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 3px; }

.sr-modal-close { position: absolute; top: 12px; right: 13px; background: var(--hu-white-mist); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; width: 29px; height: 29px; font-size: 0.92rem; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--brown); font-family: inherit; }

.sr-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }

.mk-plate-wrap { text-align: center; }

.mk-plate-svg { width: 94px; height: 94px; border-radius: 50%; overflow: hidden; }

.mk-planner-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: var(--section-gap-sm); }

@media (max-width: 660px) {
  .mk-planner-week { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 400px) {
  .mk-planner-week { grid-template-columns: repeat(3, 1fr); }
}

.mk-day-col { background: rgb(255, 255, 255); border-radius: 12px; padding: 8px 6px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 9px; }

.mk-day-hd { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--brown); text-align: center; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

.mk-day-hd.today { color: var(--sage-dk); }

.mk-day-slot { min-height: 46px; border-radius: 8px; border: 1.5px dashed rgb(224, 219, 212); display: flex; align-items: center; justify-content: center; font-size: 0.66rem; color: var(--brown); margin-bottom: 4px; cursor: pointer; transition: 0.18s; padding: 3px 4px; text-align: center; line-height: 1.3; }

.mk-day-slot:hover { border-color: var(--navy-primary); background: var(--sage-lt); }

.mk-day-slot.filled { border-style: solid; border-color: rgba(36, 52, 71, 0.22); background: var(--sage-lt); color: var(--sage-dk); font-weight: 600; }

#mkt-home, #mkt-planner, #mkt-pantry, #mkt-grocery, #mkt-recipes, #mkt-log, #mkt-smart, #mkt-yellow { display: none !important; }

.fl-page { background: rgb(247, 249, 247); min-height: 100vh; }

.fl-hero { padding: var(--section-gap) var(--content-pad) var(--section-gap-sm); text-align: center; background: rgb(255, 255, 255); }

.fl-eyebrow { display: inline-flex; align-items: center; gap: 6px; background: rgba(36, 52, 71, 0.12); border: 1px solid rgba(36, 52, 71, 0.22); border-radius: 50px; padding: 5px 14px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(49, 70, 95); margin-bottom: 22px; }

.fl-hero h1 { font-family: Georgia, serif; font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 700; color: rgb(26, 42, 27); line-height: 1.1; margin: 0px 0px 12px; letter-spacing: -0.02em; }

.fl-hero-sub { font-size: clamp(1rem, 2.5vw, 1.18rem); color: rgb(74, 94, 75); font-weight: 600; margin: 0px 0px 14px; letter-spacing: -0.01em; }

.fl-hero-desc { font-size: 0.93rem; color: rgb(107, 122, 108); line-height: 1.75; max-width: 480px; margin: 0px auto 36px; }

.fl-hero-cta { display: inline-flex; align-items: center; gap: 10px; background: rgb(45, 74, 46); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 16px 34px; font-size: 0.97rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: rgba(45, 74, 46, 0.28) 0px 8px 28px; transition: transform 0.2s, box-shadow 0.2s; }

.fl-hero-cta:hover { transform: translateY(-2px); box-shadow: rgba(45, 74, 46, 0.36) 0px 14px 36px; }

.fl-hero-cta svg { flex-shrink: 0; }

.fl-features { padding: 48px 24px 56px; max-width: 1080px; margin: 0px auto; }

.fl-features-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(36, 52, 71); text-align: center; margin-bottom: 36px; }

.fl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

@media (max-width: 820px) {
  .fl-cards { grid-template-columns: 1fr; gap: 14px; }
}

.fl-card { background: rgb(255, 255, 255); border-radius: 24px; padding: 32px 28px 28px; box-shadow: rgba(0, 0, 0, 0.055) 0px 2px 18px; border: 1px solid rgba(0, 0, 0, 0.043); display: flex; flex-direction: column; transition: transform 0.22s, box-shadow 0.22s; }

.fl-card:hover { transform: translateY(-5px); box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 40px; }

.fl-card-icon { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; flex-shrink: 0; }

.fl-card-icon svg { width: 26px; height: 26px; }

.fl-icon-cam { background: rgb(253, 232, 219); }

.fl-icon-bar { background: rgb(224, 240, 228); }

.fl-icon-rec { background: rgb(223, 240, 247); }

.fl-card h3 { font-family: Georgia, serif; font-size: 1.15rem; font-weight: 700; color: rgb(26, 42, 27); margin: 0px 0px 10px; line-height: 1.25; }

.fl-card p { font-size: 0.865rem; color: rgb(107, 122, 108); line-height: 1.72; margin: 0px 0px 24px; flex: 1 1 0%; }

.fl-card-btn { align-self: flex-start; background: rgb(242, 245, 242); color: rgb(45, 74, 46); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 10px 22px; font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.18s, color 0.18s; }

.fl-card-btn:hover { background: rgb(45, 74, 46); color: rgb(255, 255, 255); }

.fl-intel { padding: 52px 24px; background: rgb(255, 255, 255); border-top: 1px solid rgb(234, 237, 233); border-bottom: 1px solid rgb(234, 237, 233); text-align: center; }

.fl-intel-inner { max-width: 600px; margin: 0px auto; }

.fl-intel h2 { font-family: Georgia, serif; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; color: rgb(26, 42, 27); margin: 0px 0px 12px; letter-spacing: -0.01em; }

.fl-intel-desc { font-size: 0.9rem; color: rgb(107, 122, 108); line-height: 1.75; margin: 0px auto 40px; }

.fl-intel-pills { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.fl-pill { display: flex; flex-direction: column; align-items: center; gap: 10px; background: rgb(247, 249, 247); border: 1px solid rgb(228, 233, 227); border-radius: 20px; padding: 22px 24px; min-width: 130px; transition: border-color 0.18s, box-shadow 0.18s; }

.fl-pill:hover { border-color: rgb(36, 52, 71); box-shadow: rgba(36, 52, 71, 0.14) 0px 4px 18px; }

.fl-pill-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgb(238, 245, 239); }

.fl-pill-icon svg { width: 22px; height: 22px; }

.fl-pill-label { font-size: 0.8rem; font-weight: 700; color: rgb(45, 74, 46); text-align: center; line-height: 1.3; }

.fl-cta { padding: 64px 24px 80px; text-align: center; background: rgb(255, 255, 255); }

.fl-cta h2 { font-family: Georgia, serif; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; color: rgb(255, 255, 255); margin: 0px 0px 12px; letter-spacing: -0.01em; }

.fl-cta-desc { font-size: 0.9rem; color: rgba(255, 255, 255, 0.68); line-height: 1.75; max-width: 400px; margin: 0px auto 36px; }

.fl-cta-btn { display: inline-flex; align-items: center; gap: 10px; background: rgb(255, 255, 255); color: rgb(45, 74, 46); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 16px 34px; font-size: 0.97rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: rgba(0, 0, 0, 0.22) 0px 8px 28px; transition: transform 0.2s, box-shadow 0.2s; }

.fl-cta-btn:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.3) 0px 14px 40px; }

.fl-cta-btn svg { flex-shrink: 0; }

.rd-hero { padding: var(--section-gap) 0 0; background: rgb(255, 255, 255); }

.rd-search-wrap { position: relative; max-width: 600px; margin: 24px 0px 0px; }

.rd-search { width: 100%; padding: 16px 52px 16px 20px; border-radius: 50px; border: 2px solid rgba(36, 52, 71, 0.25); font-size: 0.95rem; font-family: inherit; background: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.07) 0px 4px 20px; outline: none; color: var(--char); transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }

.rd-search:focus { border-color: var(--navy-primary); box-shadow: rgba(36, 52, 71, 0.18) 0px 4px 24px; }

.rd-search-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; pointer-events: none; }

.rd-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0px 0px; padding-bottom: 28px; }

.rd-chip { display: flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 50px; border: 2px solid transparent; font-size: 0.85rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.18s; white-space: nowrap; }

.rd-chip-calm { background: var(--lav-lt); color: rgb(122, 106, 176); }

.rd-chip-calm.active, .rd-chip-calm:hover { background: var(--lav); color: rgb(255, 255, 255); border-color: var(--lav); }

.rd-chip-focus { background: var(--sky-lt); color: rgb(42, 106, 132); }

.rd-chip-focus.active, .rd-chip-focus:hover { background: var(--sky); color: rgb(255, 255, 255); border-color: var(--sky); }

.rd-chip-energy { background: var(--yel-lt); color: rgb(138, 98, 0); }

.rd-chip-energy.active, .rd-chip-energy:hover { background: var(--yel); color: rgb(90, 62, 0); border-color: var(--yel); }

.rd-chip-comfort { background: var(--peach-lt); color: rgb(192, 90, 32); }

.rd-chip-comfort.active, .rd-chip-comfort:hover { background: var(--peach); color: rgb(255, 255, 255); border-color: var(--peach); }

.rd-chip-happy { background: rgb(241, 239, 237); color: rgb(138, 98, 0); }

.rd-chip-happy.active, .rd-chip-happy:hover { background: rgb(231, 229, 228); color: rgb(90, 62, 0); border-color: rgb(231, 229, 228); }

.rd-chip-sleep { background: rgb(232, 228, 245); color: rgb(106, 90, 148); }

.rd-chip-sleep.active, .rd-chip-sleep:hover { background: rgb(196, 184, 232); color: rgb(255, 255, 255); border-color: rgb(196, 184, 232); }

.rd-grid-section { background: var(--hu-white-mist); padding: 40px 0px 60px; }

.rd-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }

.rd-results-label { font-size: 0.82rem; color: var(--brown); font-weight: 600; }

.rd-sort { background: rgb(255, 255, 255); border: 1.5px solid rgba(36, 52, 71, 0.25); border-radius: 50px; padding: 7px 14px; font-size: 0.8rem; font-family: inherit; color: var(--char); cursor: pointer; outline: none; }

.rd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

@media (max-width: 860px) {
  .rd-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .rd-grid { grid-template-columns: 1fr; }
}

.rd-card { background: rgb(255, 255, 255); border-radius: 20px; overflow: hidden; box-shadow: var(--sh); cursor: pointer; transition: transform 0.22s, box-shadow 0.22s; position: relative; }

.rd-card:hover { transform: translateY(-5px); box-shadow: rgba(0, 0, 0, 0.13) 0px 14px 42px; }

.rd-card-img { height: 180px; display: flex; align-items: flex-end; padding: 14px; position: relative; overflow: hidden; }

.rd-card-save { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(4px); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.18s; z-index: 2; }

.rd-card-save:hover { background: rgb(255, 255, 255); transform: scale(1.1); }

.rd-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }

.rd-card-badge { background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(4px); color: rgb(255, 255, 255); padding: 3px 10px; border-radius: 50px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; }

.rd-card-body { padding: 16px; }

.rd-card-title { font-weight: 800; font-size: 0.93rem; color: var(--char); margin-bottom: 6px; line-height: 1.35; }

.rd-card-meta { display: flex; align-items: center; gap: 12px; font-size: 0.76rem; color: var(--brown); margin-bottom: 10px; }

.rd-mood-dots { display: flex; gap: 5px; margin-bottom: 10px; }

.rd-mood-dot { font-size: 0.85rem; }

.rd-plate-preview { height: 6px; border-radius: 3px; overflow: hidden; display: flex; margin-top: 2px; }

.rd-plate-seg { height: 100%; transition: width 0.3s; }

.rd-score-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

.rd-score-bar { flex: 1 1 0%; height: 5px; background: rgb(238, 238, 238); border-radius: 3px; overflow: hidden; }

.rd-score-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg,var(--sage),var(--peach)); }

.rd-score-lbl { font-size: 0.7rem; color: var(--brown); }

.rd-empty { text-align: center; padding: 60px 20px; grid-column: 1 / -1; }

.rd-empty-icon { font-size: 3rem; margin-bottom: 12px; }

.rd-loadmore { text-align: center; margin-top: 36px; }

.rp-hero { position: relative; height: 340px; display: flex; align-items: flex-end; padding: 0px; }

@media (max-width: 600px) {
  .rp-hero { height: 240px; }
}

.rp-hero-overlay { position: absolute; inset: 0px; background: linear-gradient(to top, rgba(30, 30, 20, 0.72) 0%, rgba(0, 0, 0, 0.1) 60%); }

.rp-hero-content { position: relative; z-index: 2; padding: 28px 32px; width: 100%; box-sizing: border-box; }

@media (max-width: 600px) {
  .rp-hero-content { padding: 20px; }
}

.rp-mood-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

.rp-mood-tag { background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); color: rgb(255, 255, 255); padding: 4px 12px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; }

.rp-title { font-family: Georgia, serif; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 700; color: rgb(255, 255, 255); line-height: 1.2; margin-bottom: 12px; }

.rp-meta-row { display: flex; gap: 16px; flex-wrap: wrap; }

.rp-meta-item { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.88); font-size: 0.8rem; font-weight: 600; }

.rp-body { background: var(--hu-white-mist); padding: 40px 0px 60px; }

.rp-layout { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; }

@media (max-width: 820px) {
  .rp-layout { grid-template-columns: 1fr; }
}

.rp-section-title { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: var(--char); margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--sage-lt); }

.rp-ingredients { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }

.rp-ingredient { display: flex; align-items: center; gap: 12px; font-size: 0.88rem; color: var(--char); }

.rp-ingredient::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--navy-primary); flex-shrink: 0; }

.rp-ingredient-amt { color: var(--brown); font-size: 0.8rem; margin-left: auto; white-space: nowrap; }

.rp-steps { display: flex; flex-direction: column; gap: 18px; margin-bottom: 32px; }

.rp-step { display: flex; gap: 16px; }

.rp-step-num { width: 32px; height: 32px; border-radius: 50%; background: var(--navy-primary); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; flex-shrink: 0; margin-top: 2px; }

.rp-step-text { font-size: 0.9rem; color: var(--char); line-height: 1.75; }

.rp-plate-wrap { background: rgb(255, 255, 255); border-radius: 20px; padding: 22px; box-shadow: var(--sh); margin-bottom: 22px; }

.rp-plate-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--navy-primary); margin-bottom: 14px; }

.rp-plate-circle { width: 140px; height: 140px; border-radius: 50%; margin: 0px auto 16px; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 18px; }

.rp-plate-key { display: flex; flex-direction: column; gap: 8px; }

.rp-plate-key-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--char); }

.rp-plate-key-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

.rp-science { background: rgb(255, 255, 255); border-radius: 20px; padding: 22px; box-shadow: var(--sh); }

.rp-science-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0px; border-bottom: 1px solid rgb(245, 245, 245); }

.rp-science-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; padding-bottom: 0px; }

.rp-science-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }

.rp-science-label { font-weight: 700; font-size: 0.82rem; color: var(--char); margin-bottom: 2px; }

.rp-science-val { font-size: 0.78rem; color: var(--brown); line-height: 1.5; }

.rp-sticky-card { background: rgb(255, 255, 255); border-radius: 20px; padding: 22px; box-shadow: var(--sh); position: sticky; top: 80px; }

.rp-cta-row { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.pw-overlay { position: fixed; inset: 0px; background: rgba(20, 20, 15, 0.6); backdrop-filter: blur(6px); z-index: 9998; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }

.pw-overlay.open { opacity: 1; pointer-events: all; }

.pw-modal { background: rgb(255, 255, 255); border-radius: 28px; padding: 36px 32px 28px; max-width: 420px; width: 100%; box-shadow: rgba(0, 0, 0, 0.2) 0px 24px 80px; transform: translateY(16px) scale(0.97); transition: transform 0.28s; }

.pw-overlay.open .pw-modal { transform: translateY(0px) scale(1); }

.pw-icon { width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg,var(--sage-lt),var(--yel-lt)); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0px auto 18px; }

.pw-title { font-family: Georgia, serif; font-size: 1.5rem; font-weight: 700; text-align: center; color: var(--char); margin-bottom: 8px; }

.pw-sub { font-size: 0.88rem; color: var(--brown); text-align: center; line-height: 1.7; margin-bottom: 22px; }

.pw-perks { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; }

.pw-perk { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--char); }

.pw-perk-tick { width: 22px; height: 22px; border-radius: 50%; background: rgb(34, 197, 94); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; flex-shrink: 0; }

.pw-actions { display: flex; flex-direction: column; gap: 10px; }

.pw-divider { display: flex; align-items: center; gap: 10px; color: rgb(204, 204, 204); font-size: 0.75rem; margin: 2px 0px; }

.pw-divider::before, .pw-divider::after { content: ""; flex: 1 1 0%; height: 1px; background: rgb(238, 238, 238); }

.pw-continue { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--brown); font-size: 0.82rem; cursor: pointer; font-family: inherit; text-decoration: underline; text-align: center; padding: 4px; transition: color 0.15s; }

.pw-continue:hover { color: var(--navy-primary); }

@media (max-width: 600px) {
  #hmEcoFlow { flex-direction: column; align-items: center; gap: 28px; }
  #hmEcoFlow > div { max-width: 260px !important; }
  #hmEcoFlow > div:not(:last-child)::after { content: "↓" !important; inset: auto auto -20px 50% !important; transform: translateX(-50%) !important; position: absolute !important; font-size: 1.1rem !important; color: var(--navy-primary) !important; font-weight: 700 !important; }
}

#page-home { background: rgb(255, 255, 255); }

.hm-hero { padding: 48px 24px 40px; text-align: center; border-radius: 0px 0px 32px 32px; background: linear-gradient(135deg, rgb(18, 33, 58) 0%, rgb(27, 46, 74) 100%); color: rgb(255, 255, 255); }

.hm-hero-inner { max-width: var(--content-max); margin: 0px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; position: relative; z-index: 1; }

.hm-hero-eyebrow { display: inline-flex; align-items: center; gap: 7px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50px; padding: 5px 14px 5px 10px; font-size: 0.71rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); margin-bottom: 18px; }

.hm-hero h1 { font-family: Georgia, serif; font-size: clamp(2.2rem, 4.5vw, 3.3rem); font-weight: 700; color: rgb(30, 45, 61); line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 18px; }

.hm-hero h1 em { font-style: normal; color: rgb(255, 255, 255); background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-color: initial; background-clip: unset; -webkit-text-fill-color: rgb(255, 255, 255) !important; }

.hm-hero-sub { font-size: 1.05rem; color: var(--brown); line-height: 1.75; max-width: 460px; margin-bottom: 32px; font-weight: 300; }

.hm-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

.hm-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 14px 28px; border-radius: 50px; font-size: 0.94rem; font-weight: 700; cursor: pointer; font-family: inherit; box-shadow: rgba(36, 52, 71, 0.1) 0px 4px 18px; transition: 0.22s; }

.hm-btn-primary:hover { transform: translateY(-2px); box-shadow: rgba(36, 52, 71, 0.15) 0px 7px 26px; }

.hm-btn-outline { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: rgb(30, 45, 61); border: 2px solid rgba(30, 45, 61, 0.18); padding: 12px 26px; border-radius: 50px; font-size: 0.92rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.22s; }

.hm-btn-outline:hover { background: rgb(240, 247, 241); border-color: var(--navy-primary); color: var(--sage-dk); }

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

.hm-fc-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

.hm-fc-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: rgb(138, 122, 114); opacity: 1; margin-bottom: 2px; }

.hm-fc-text { font-size: 0.9rem; font-weight: 600; color: rgb(255, 255, 255); line-height: 1.3; }

.hm-fc-sub { font-size: 0.74rem; color: rgb(160, 150, 143); margin-top: 2px; font-weight: 300; }

.hm-section { padding: var(--section-gap) var(--content-pad); }

.hm-section-inner { max-width: 1100px; margin: 0px auto; }

.hm-eyebrow { font-size: 0.69rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-primary); text-align: center; margin-bottom: 10px; }

.hm-section-title { font-family: Georgia, serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; color: rgb(30, 45, 61); text-align: center; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 10px; }

.hm-section-sub { font-size: 1rem; color: var(--brown); line-height: 1.75; text-align: center; max-width: 560px; margin: 0px auto 48px; font-weight: 300; }

.hm-eco-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.hm-eco-card { background: rgb(255, 255, 255); border-radius: 20px; padding: 26px 22px; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 18px; border: 1px solid rgba(30, 45, 61, 0.06); cursor: pointer; transition: 0.22s; display: flex; flex-direction: column; align-items: flex-start; }

.hm-eco-card:hover { transform: translateY(-4px); box-shadow: rgba(30, 45, 61, 0.12) 0px 10px 36px; }

.hm-eco-icon { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 14px; flex-shrink: 0; }

.hm-eco-card h3 { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 6px; }

.hm-eco-card p { font-size: 0.84rem; color: var(--brown); line-height: 1.65; flex: 1 1 0%; margin-bottom: 14px; }

.hm-eco-link { font-size: 0.78rem; font-weight: 700; color: var(--sage-dk); text-decoration: none; display: flex; align-items: center; gap: 4px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; padding: 0px; transition: gap 0.18s; }

.hm-eco-link:hover { gap: 8px; }

.hm-eco-center-msg { text-align: center; font-family: Georgia, serif; font-size: 1.1rem; color: var(--brown); font-style: italic; margin: 0px 0px 36px; }

.hm-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.hm-feat-card { background: rgb(255, 255, 255); border-radius: 18px; padding: 24px 20px; box-shadow: rgba(30, 45, 61, 0.06) 0px 2px 14px; border: 1px solid rgba(30, 45, 61, 0.05); text-align: center; transition: 0.22s; }

.hm-feat-card:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.1) 0px 8px 28px; }

.hm-feat-icon { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin: 0px auto 14px; }

.hm-feat-card h3 { font-size: 0.98rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 7px; }

.hm-feat-card p { font-size: 0.82rem; color: var(--brown); line-height: 1.65; margin-bottom: 14px; }

.hm-feat-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 16px; border-radius: 50px; font-size: 0.78rem; font-weight: 600; background: transparent; border: 1.5px solid rgba(36, 52, 71, 0.3); color: var(--sage-dk); cursor: pointer; font-family: inherit; transition: 0.18s; }

.hm-feat-btn:hover { background: var(--sage-lt); border-color: var(--navy-primary); }

.hm-profiles-wrap { display: flex; flex-direction: column; align-items: center; gap: 32px; }

.hm-profile-cards { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

.hm-profile-card { background: rgb(255, 255, 255); border-radius: 20px; padding: 22px 20px; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 18px; border: 1px solid rgba(30, 45, 61, 0.06); text-align: center; width: 155px; cursor: pointer; transition: 0.22s; }

.hm-profile-card:hover { transform: translateY(-4px); box-shadow: rgba(30, 45, 61, 0.11) 0px 8px 28px; }

.hm-profile-card.add-card { border: 2px dashed rgba(36, 52, 71, 0.3); background: transparent; }

.hm-profile-card.add-card:hover { background: var(--sage-lt); border-color: var(--navy-primary); }

.hm-profile-avatar { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0px auto 10px; }

.hm-profile-name { font-size: 0.92rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 3px; }

.hm-profile-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 8px; }

.hm-profile-tag { font-size: 0.65rem; font-weight: 600; padding: 2px 8px; border-radius: 50px; background: var(--sage-lt); color: var(--sage-dk); }

.hm-profile-btns { display: flex; gap: 10px; }

.hm-snapshot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 36px; }

.hm-snap-card { background: rgb(255, 255, 255); border-radius: 16px; padding: 20px 16px; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 14px; border: 1px solid rgba(30, 45, 61, 0.06); text-align: center; cursor: pointer; transition: 0.2s; }

.hm-snap-card:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.1) 0px 7px 22px; }

.hm-snap-icon { font-size: 1.6rem; margin-bottom: 8px; }

.hm-snap-label { font-size: 0.82rem; font-weight: 600; color: rgb(30, 45, 61); margin-bottom: 4px; }

.hm-snap-note { font-size: 0.73rem; color: var(--brown); line-height: 1.5; }

.hm-snap-lock { display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; background: var(--yel-lt); color: rgb(122, 85, 0); margin-top: 8px; }

.hm-sharing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.hm-share-card { background: rgb(255, 255, 255); border-radius: 20px; padding: 24px 20px; box-shadow: rgba(30, 45, 61, 0.07) 0px 2px 16px; border: 1px solid rgba(30, 45, 61, 0.06); transition: 0.22s; }

.hm-share-card:hover { transform: translateY(-3px); box-shadow: rgba(30, 45, 61, 0.1) 0px 8px 28px; }

.hm-share-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 12px; }

.hm-share-card h4 { font-size: 0.95rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 6px; }

.hm-share-card p { font-size: 0.8rem; color: var(--brown); line-height: 1.6; margin-bottom: 10px; }

.hm-share-privacy { font-size: 0.72rem; color: var(--sage-dk); font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 4px; }

.hm-share-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border-radius: 50px; font-size: 0.76rem; font-weight: 600; background: var(--sage-lt); color: var(--sage-dk); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; font-family: inherit; transition: 0.18s; }

.hm-share-btn:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.hm-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }

.hm-testi-card { background: transparent; border-radius: 0px; padding: 0px; box-shadow: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; position: relative; }

.hm-testi-stars { color: rgb(245, 200, 66); font-size: 0.9rem; margin-bottom: 12px; letter-spacing: 1px; }

.hm-testi-quote { font-size: 0.88rem; color: var(--brown); line-height: 1.75; font-style: italic; margin-bottom: 16px; }

.hm-testi-name { font-size: 0.88rem; font-weight: 700; color: rgb(30, 45, 61); }

.hm-testi-loc { font-size: 0.74rem; color: var(--brown); margin-top: 2px; }

.hm-cta-band { background: linear-gradient(145deg, rgb(30, 45, 61) 0%, rgb(45, 61, 90) 55%, rgb(58, 80, 96) 100%); padding: var(--section-gap) var(--content-pad); text-align: center; position: relative; overflow: hidden; }

.hm-cta-band::before { content: ""; position: absolute; top: -60px; right: -60px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(36, 52, 71, 0.14) 0%, transparent 70%); pointer-events: none; }

.hm-cta-band h2 { font-family: Georgia, serif; font-size: clamp(1.9rem, 3.5vw, 2.8rem); font-weight: 700; color: rgb(255, 255, 255); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 14px; }

.hm-cta-band p { font-size: 1rem; color: rgba(255, 255, 255, 0.7); line-height: 1.7; max-width: 480px; margin: 0px auto 36px; }

.hm-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.hm-btn-white { display: inline-flex; align-items: center; gap: 8px; background: rgb(255, 255, 255); color: rgb(30, 45, 61); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 13px 28px; border-radius: 50px; font-size: 0.92rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.22s; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 18px; }

.hm-btn-white:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 28px; }

.hm-btn-ghost-white { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.9); border: 1.5px solid rgba(255, 255, 255, 0.25); padding: 11px 26px; border-radius: 50px; font-size: 0.9rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: 0.22s; }

.hm-btn-ghost-white:hover { background: rgba(255, 255, 255, 0.2); }

.hm-newsletter { background: var(--hu-white-mist); padding: 52px 24px; text-align: center; }

.hm-newsletter h2 { font-family: Georgia, serif; font-size: 1.4rem; font-weight: 700; color: rgb(30, 45, 61); margin-bottom: 8px; }

.hm-newsletter p { font-size: 0.9rem; color: var(--brown); margin-bottom: 22px; }

.hm-nl-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.hm-nl-input { padding: 12px 18px; border-radius: 50px; border: 1.5px solid rgba(30, 45, 61, 0.15); font-size: 0.88rem; font-family: inherit; background: rgb(255, 255, 255); color: rgb(30, 45, 61); outline: none; width: 280px; transition: border-color 0.18s; }

.hm-nl-input:focus { border-color: var(--navy-primary); }

.hm-nl-btn { padding: 12px 22px; border-radius: 50px; background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: 0.2s; }

.hm-nl-btn:hover { transform: translateY(-1px); }

#community-hub { background: var(--white, #fff); padding: var(--section-gap) 0 calc(var(--section-gap) + 8px); position: relative; overflow: hidden; }

#community-hub::before { content: ""; position: absolute; top: -120px; right: -120px; width: 500px; height: 500px; background: radial-gradient(circle, rgba(232, 180, 184, 0.12) 0%, transparent 70%); pointer-events: none; }

#community-hub::after { content: ""; position: absolute; bottom: -80px; left: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(36, 52, 71, 0.1) 0%, transparent 70%); pointer-events: none; }

.hub-container { max-width: 1160px; margin: 0px auto; padding: 0px 2rem; position: relative; z-index: 1; }

.hub-header { text-align: center; margin-bottom: 44px; opacity: 0; transform: translateY(20px); animation: 0.6s ease 0.1s 1 normal forwards running hmFadeUp; }

@keyframes hmFadeUp { 
  100% { opacity: 1; transform: translateY(0px); }
}

.hub-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--sage-lt); border: 1px solid rgba(36, 52, 71, 0.25); border-radius: 50px; padding: 5px 16px 5px 10px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-dk); margin-bottom: 16px; }

.hub-title { font-family: Georgia, serif; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 700; color: rgb(30, 45, 61); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 12px; }

.hub-sub { font-size: 1rem; color: var(--brown); line-height: 1.75; max-width: 520px; margin: 0px auto; font-weight: 300; }

.sharing-wrap { opacity: 0; transform: translateY(16px); animation: 0.6s ease 0.25s 1 normal forwards running hmFadeUp; margin-bottom: 32px; }

.sharing-label { font-size: 0.69rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(168, 157, 148); text-align: center; margin-bottom: 11px; }

.sharing-pills { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

.share-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 50px; font-size: 0.8rem; font-weight: 500; cursor: pointer; border: 1.5px solid rgba(44, 62, 92, 0.12); background: rgb(255, 255, 255); color: var(--brown); transition: 0.22s; font-family: inherit; }

.share-pill:hover { border-color: rgb(44, 62, 92); color: rgb(44, 62, 92); background: rgb(246, 248, 251); }

.share-pill.active { background: rgb(44, 62, 92); color: rgb(255, 255, 255); border-color: rgb(44, 62, 92); }

.filter-wrap { opacity: 0; transform: translateY(14px); animation: 0.6s ease 0.35s 1 normal forwards running hmFadeUp; margin-bottom: 36px; }

.filter-scroll { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }

.filter-scroll::-webkit-scrollbar { display: none; }

.filter-chip { flex-shrink: 0; padding: 8px 18px; border-radius: 50px; font-size: 0.82rem; font-weight: 500; cursor: pointer; border: 1.5px solid rgba(36, 52, 71, 0.2); background: rgb(255, 255, 255); color: var(--brown); transition: 0.22s; font-family: inherit; white-space: nowrap; }

.filter-chip:hover { border-color: var(--navy-primary); color: var(--sage-dk); background: rgb(242, 248, 242); }

.filter-chip.active { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); box-shadow: rgba(36, 52, 71, 0.3) 0px 3px 12px; }

.cards-outer { opacity: 0; animation: 0.7s ease 0.45s 1 normal forwards running hmFadeUp; position: relative; }

.cards-outer::before, .cards-outer::after { content: ""; position: absolute; top: 0px; bottom: 20px; width: 48px; z-index: 2; pointer-events: none; }

.cards-outer::before { left: 0px; background: linear-gradient(to right, rgb(255, 255, 255), transparent); }

.cards-outer::after { right: 0px; background: linear-gradient(to left, rgb(255, 255, 255), transparent); }

.cards-track { display: flex; gap: 18px; overflow-x: auto; padding: 12px 48px 28px; scrollbar-width: none; scroll-snap-type: x mandatory; }

.cards-track::-webkit-scrollbar { display: none; }

.c-card { flex-shrink: 0; width: 296px; background: rgb(255, 255, 255); border-radius: 20px; padding: 24px; box-shadow: rgba(44, 62, 92, 0.07) 0px 2px 20px; border: 1px solid rgba(44, 62, 92, 0.06); scroll-snap-align: start; transition: 0.25s; position: relative; overflow: hidden; }

.c-card:hover { transform: translateY(-5px); box-shadow: rgba(44, 62, 92, 0.13) 0px 8px 36px; }

.c-card::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 3px; border-radius: 20px 20px 0px 0px; }

.c-card.accent-sage::before { background: linear-gradient(90deg,var(--sage),#a8c5ab); }

.c-card.accent-pink::before { background: linear-gradient(90deg, rgb(232, 180, 184), rgb(245, 207, 210)); }

.c-card.accent-navy::before { background: linear-gradient(90deg, rgb(44, 62, 92), rgb(74, 106, 154)); }

.c-card.accent-peach::before { background: linear-gradient(90deg, rgb(232, 168, 122), rgb(245, 197, 163)); }

.c-card.accent-lav::before { background: linear-gradient(90deg, rgb(188, 200, 180), rgb(207, 197, 232)); }

.c-card.accent-sky::before { background: linear-gradient(90deg, rgb(80, 101, 125), rgb(168, 213, 228)); }

.c-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }

.c-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; flex-shrink: 0; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 10px; }

.c-name { font-size: 0.87rem; font-weight: 600; color: rgb(43, 43, 43); margin-bottom: 2px; }

.c-time { font-size: 0.72rem; color: rgb(168, 157, 148); }

.c-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 50px; font-size: 0.69rem; font-weight: 600; flex-shrink: 0; }

.tag-sage { background: var(--sage-lt); color: var(--sage-dk); }

.tag-pink { background: #e8f4e9; color: #4a7a4e; }

.tag-navy { background: rgb(238, 241, 246); color: rgb(44, 62, 92); }

.tag-peach { background: #e8f4e9; color: #4a7a4e; }

.tag-lav { background: rgb(221, 229, 216); color: rgb(106, 90, 148); }

.tag-sky { background: rgb(232, 240, 245); color: rgb(42, 106, 132); }

.c-story { font-size: 0.86rem; color: var(--brown); line-height: 1.7; margin-bottom: 14px; font-weight: 300; }

.c-story strong { color: rgb(43, 43, 43); font-weight: 600; }

.c-outcomes { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }

.c-outcome { font-size: 0.71rem; color: rgb(168, 157, 148); background: rgb(250, 248, 245); padding: 3px 9px; border-radius: 50px; border: 1px solid rgba(0, 0, 0, 0.05); }

.c-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.05); }

.c-actions { display: flex; gap: 6px; }

.c-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 500; cursor: pointer; border: 1.5px solid rgba(36, 52, 71, 0.2); background: rgb(255, 255, 255); color: var(--brown); transition: 0.22s; font-family: inherit; }

.c-btn:hover { background: var(--sage-lt); border-color: var(--navy-primary); color: var(--sage-dk); }

.c-btn.saved { background: var(--sage-lt); border-color: var(--navy-primary); color: var(--sage-dk); }

.c-cta { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); transition: 0.22s; font-family: inherit; box-shadow: rgba(36, 52, 71, 0.25) 0px 2px 10px; }

.c-cta:hover { transform: translateY(-1px); box-shadow: rgba(36, 52, 71, 0.1) 0px 4px 16px; }

.scroll-controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 8px; }

.scroll-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(44, 62, 92, 0.15); background: rgb(255, 255, 255); color: rgb(44, 62, 92); font-size: 0.95rem; cursor: pointer; transition: 0.22s; display: flex; align-items: center; justify-content: center; box-shadow: rgba(44, 62, 92, 0.08) 0px 2px 14px; }

.scroll-btn:hover { background: rgb(44, 62, 92); color: rgb(255, 255, 255); border-color: rgb(44, 62, 92); }

.scroll-dots { display: flex; gap: 6px; align-items: center; }

.scroll-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(44, 62, 92, 0.15); transition: 0.22s; cursor: pointer; }

.scroll-dot.active { width: 20px; border-radius: 3px; background: var(--navy-primary); }

.hub-footer { text-align: center; margin-top: 32px; opacity: 1; animation: auto ease 0s 1 normal none running none; }

.hub-footer-note { font-size: 0.82rem; color: rgb(168, 157, 148); margin-bottom: 18px; }

.hub-footer-note span { color: var(--navy-primary); font-weight: 600; }

.hub-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.hub-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(70px); background: var(--sage-dk); color: rgb(255, 255, 255); padding: 12px 24px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; z-index: 9999; transition: transform 0.3s; white-space: nowrap; pointer-events: none; box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 24px; font-family: system-ui, sans-serif; }

.hub-toast.show { transform: translateX(-50%) translateY(0px); }

@media (max-width: 900px) {
  .hm-hero-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hm-hero-sub { margin: 0px auto 28px; }
  .hm-hero-btns { justify-content: center; }
  .hm-eco-grid { grid-template-columns: 1fr 1fr; }
  .hm-feat-grid { grid-template-columns: 1fr 1fr; }
  .hm-snapshot-grid { grid-template-columns: repeat(2, 1fr); }
  .hm-sharing-grid { grid-template-columns: 1fr 1fr; }
  .hm-testi-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .hm-section { padding: 56px 20px; }
  .hm-hero { padding: 52px 20px 10px; }
  .hm-hero + section + .hm-section, .hm-hero + .hm-section { padding-top: 12px; }
  .hm-hero-inner { grid-template-columns: 1fr; }
  .hm-eco-grid, .hm-feat-grid { grid-template-columns: 1fr; }
  .hm-snapshot-grid { grid-template-columns: 1fr 1fr; }
  .hm-sharing-grid { grid-template-columns: 1fr; }
  .hm-testi-grid { grid-template-columns: 1fr; }
  .hub-container { padding: 0px 1.25rem; }
  .cards-outer::before, .cards-outer::after { width: 24px; }
  .cards-track { padding: 10px 24px 24px; }
  .c-card { width: 268px; }
  .hm-profile-cards { gap: 12px; }
  .hm-profile-card { width: 140px; }
  .hm-cta-btns { flex-direction: column; align-items: center; }
}

body { background: rgb(250, 250, 248) !important; color: rgb(43, 43, 43) !important; font-family: Inter, system-ui, -apple-system, sans-serif !important; }

nav, .nav, .navbar, #main-nav, .top-nav, header nav { background: rgba(250, 250, 248, 0.94) !important; backdrop-filter: blur(14px) !important; border-bottom: 1px solid rgb(232, 230, 227) !important; box-shadow: rgba(36, 52, 71, 0.05) 0px 1px 12px !important; }

nav a, .nav a, .navbar a, .nav-link, .nav-item a { color: rgb(36, 52, 71) !important; font-weight: 500 !important; }

nav a:hover, .nav a:hover, .navbar a:hover, .nav-link:hover { color: rgb(231, 201, 201) !important; }

.nav-tab.active, .tab-bar .active, .bottom-nav .active { color: rgb(36, 52, 71) !important; }

.nav-tab.active::after, .tab-bar .active::after { background: rgb(36, 52, 71) !important; }

.btn, button.btn, a.btn { background: linear-gradient(135deg, rgb(36, 52, 71), rgb(49, 70, 95)) !important; color: rgb(255, 255, 255) !important; border-radius: 50px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; box-shadow: rgba(36, 52, 71, 0.18) 0px 3px 14px !important; font-weight: 600 !important; }

.btn:hover, button.btn:hover { box-shadow: rgba(36, 52, 71, 0.25) 0px 6px 20px !important; transform: translateY(-2px) !important; }

.btn-outline { background: transparent !important; color: rgb(36, 52, 71) !important; border: 2px solid rgb(36, 52, 71) !important; border-radius: 50px !important; }

.btn-outline:hover { background: rgb(36, 52, 71) !important; color: rgb(255, 255, 255) !important; }

.btn-ghost { background: transparent !important; color: rgb(36, 52, 71) !important; border: 2px solid rgb(36, 52, 71) !important; border-radius: 50px !important; }

.btn-ghost:hover { background: rgb(36, 52, 71) !important; color: rgb(255, 255, 255) !important; }

.btn-nav, .btn-primary, [class*="primary-btn"], [class*="cta-btn"] { background: linear-gradient(135deg, rgb(36, 52, 71), rgb(49, 70, 95)) !important; color: rgb(255, 255, 255) !important; border-radius: 50px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; }

.btn-secondary, [class*="secondary-btn"] { background: rgb(231, 201, 201) !important; color: rgb(36, 52, 71) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; border-radius: 50px !important; }

.btn-secondary:hover { background: rgb(221, 183, 183) !important; }

.card, [class*="-card"], [class*="card-"], .tile, [class*="-tile"], .recipe-card, .mood-card, .feature-card, .plan-card, .snap-card, .kit-card, .hm-feat-card, .hm-eco-card, .discover-card, .wp-partner-card, .wp-usecase-card, .wp-step { background: rgb(255, 255, 255) !important; border-radius: 22px !important; box-shadow: rgba(36, 52, 71, 0.06) 0px 4px 20px !important; border: 1px solid rgba(36, 52, 71, 0.04) !important; transition: 0.25s !important; }

.card:hover, [class*="-card"]:hover, [class*="card-"]:hover { box-shadow: rgba(36, 52, 71, 0.1) 0px 10px 32px !important; transform: translateY(-3px) !important; }

section, .section, [class*="-section"], #page-home, #page-discover, #page-mood, #page-kids, #page-shop, #page-dashboard, #page-settings { background: rgb(255, 255, 255); }

.hm-eco-section, .dsc-community-band, .wp-section:nth-child(2n+1) { background: rgb(247, 248, 246) !important; }

.hm-testi-section, .mood-section, [class*="mood-bg"], .wp-section:nth-child(2n) { background: rgb(250, 243, 243) !important; }

.kids-section, [class*="kids-bg"] { background: rgb(248, 246, 251) !important; }

.shop-section, [class*="shop-bg"], .hm-snap-section { background: rgb(249, 247, 244) !important; }

h1, h2, h3, h4, h5 { color: rgb(36, 52, 71) !important; font-weight: 700 !important; }

p, li, span:not([class*="badge"]):not([class*="tag"]):not([class*="pill"]) { color: rgb(43, 43, 43); }

.subtitle, .subheading, .eyebrow, [class*="eyebrow"], [class*="subtitle"] { color: rgb(91, 100, 112) !important; }

.text-light, .meta, [class*="meta-"], [class*="-meta"] { color: rgb(125, 133, 144) !important; }

.hero, [class*="-hero"], [class*="hero-"] { background: linear-gradient(135deg, rgb(250, 250, 248) 0%, rgb(245, 241, 241) 100%) !important; }

[class*="hero-title"], [class*="hero"] h1, [class*="hero"] h2 { color: rgb(36, 52, 71) !important; }

input, textarea, select, .search-bar, [class*="search-"] input, [class*="-input"] { background: rgb(255, 255, 255) !important; border: 1px solid rgb(232, 230, 227) !important; border-radius: 16px !important; color: rgb(43, 43, 43) !important; }

input:focus, textarea:focus, select:focus { outline: none !important; border-color: rgb(231, 201, 201) !important; box-shadow: rgba(231, 201, 201, 0.18) 0px 0px 0px 4px !important; }

.tag, .pill, .badge, [class*="-tag"], [class*="-badge"], [class*="-pill"], .wp-partner-badge, .wp-usecase-tag, .mood-tag, .recipe-tag { background: #eef4ec !important; color: rgb(36, 52, 71) !important; border-radius: 50px !important; font-size: 0.78rem !important; font-weight: 600 !important; padding: 4px 12px !important; }

.progress-bar, [class*="progress-"] { background: rgb(232, 230, 227) !important; }

.progress-fill, [class*="-fill"], [class*="progress-bar-fill"] { background: linear-gradient(90deg, rgb(36, 52, 71), rgb(80, 101, 125)) !important; }

.icon-wrap, [class*="icon-bg"], [class*="-icon-wrap"] { background: #eef4ec !important; border-radius: 14px !important; }

.stat-value, .stat-num, [class*="stat-"] b, [class*="metric"] { color: rgb(36, 52, 71) !important; }

.mood-btn.active, [class*="mood-"].active, .mood-active { background: rgb(36, 52, 71) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(36, 52, 71, 0.2) 0px 4px 16px !important; }

.welcome-card h1, .welcome-card h2, .welcome-card p, .greeting-card h1, .greeting-card h2, .greeting-card p, [class*="welcome-"] h1, [class*="welcome-"] h2, [class*="welcome-"] p { color: rgb(255, 255, 255) !important; }

.tab-bar, .bottom-nav, .sticky-tabs, .page-tabs { background: rgba(250, 250, 248, 0.96) !important; border-top: 1px solid rgb(232, 230, 227) !important; backdrop-filter: blur(12px) !important; }

.tab-icon.active, .tab-label.active, .tab-item.active { color: rgb(36, 52, 71) !important; }

hr, .divider, [class*="divider"] { border-color: rgb(232, 230, 227) !important; opacity: 1 !important; }

footer, .footer, #footer, [class*="footer"] { background: rgb(36, 52, 71) !important; color: rgba(255, 255, 255, 0.85) !important; }

footer h1, footer h2, footer h3, footer h4, footer h5, .footer h1, .footer h2, .footer h3, .footer h4, .footer h5 { color: rgb(255, 255, 255) !important; }

footer a, .footer a, footer p, .footer p { color: rgba(255, 255, 255, 0.75) !important; }

footer a:hover, .footer a:hover { color: rgb(231, 201, 201) !important; }

.footer-bottom, [class*="footer-bottom"] { border-top: 1px solid rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.5) !important; }

.wp-eyebrow-sm { color: rgb(231, 201, 201) !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 0.78rem !important; }

.wp-section-title { color: rgb(36, 52, 71) !important; }

.wp-section-sub { color: rgb(91, 100, 112) !important; }

.wp-step-num { background: linear-gradient(135deg, rgb(36, 52, 71), rgb(49, 70, 95)) !important; color: rgb(255, 255, 255) !important; width: 40px !important; height: 40px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; font-size: 1rem !important; margin-bottom: 12px !important; }

.wp-lock-icon { font-size: 2.5rem; margin-bottom: 16px; }

.wp-privacy-band { background: rgb(248, 246, 251) !important; padding: 60px 24px !important; text-align: center !important; }

.wp-cta-band { background: linear-gradient(135deg, rgb(36, 52, 71), rgb(49, 70, 95)) !important; padding: 80px 24px !important; text-align: center !important; color: rgb(255, 255, 255) !important; }

.wp-cta-band h2, .wp-cta-band p { color: rgb(255, 255, 255) !important; }

.wp-btn-white { background: rgb(255, 255, 255) !important; color: rgb(36, 52, 71) !important; border-radius: 50px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; padding: 14px 28px !important; font-weight: 700 !important; cursor: pointer !important; }

.wp-btn-ghost-white { background: transparent !important; color: rgb(255, 255, 255) !important; border: 2px solid rgba(255, 255, 255, 0.5) !important; border-radius: 50px !important; padding: 12px 24px !important; font-weight: 600 !important; cursor: pointer !important; }

.wp-btn-ghost-white:hover { border-color: rgb(231, 201, 201) !important; color: rgb(231, 201, 201) !important; }

.wp-learn-btn { background: transparent !important; color: rgb(36, 52, 71) !important; border: 1.5px solid rgb(214, 211, 209) !important; border-radius: 50px !important; padding: 9px 20px !important; font-weight: 600 !important; cursor: pointer !important; font-size: 0.85rem !important; transition: 0.2s !important; margin-top: 12px !important; }

.wp-learn-btn:hover { border-color: rgb(36, 52, 71) !important; background: rgb(36, 52, 71) !important; color: rgb(255, 255, 255) !important; }

.profile-circle, .avatar, [class*="avatar-"], [class*="-avatar"] { border: 2px solid rgb(232, 230, 227) !important; background: rgb(255, 255, 255) !important; }

.profile-circle:hover { border-color: rgb(231, 201, 201) !important; }

.toast, [class*="toast-"], .snackbar { background: rgb(36, 52, 71) !important; color: rgb(255, 255, 255) !important; border-radius: 14px !important; }

::-webkit-scrollbar { width: 6px; height: 6px; }

::-webkit-scrollbar-track { background: rgb(241, 239, 237); }

::-webkit-scrollbar-thumb { background: rgb(214, 211, 209); border-radius: 99px; }

::-webkit-scrollbar-thumb:hover { background: rgb(184, 181, 178); }

@media (max-width: 768px) {
  h1 { font-size: 2rem !important; }
  h2 { font-size: 1.5rem !important; }
  .card, [class*="-card"] { border-radius: 18px !important; }
}

:root { --navy-primary: #243447; --navy-soft: #31465F; --navy-light: #50657D; --white-mist: #FAFAF8; --warm-white: #FDFDFC; --grey-soft: #F1EFED; --grey-fog: #D6D3D1; --grey-stone: #B8B5B2; --blush-primary: #E7C9C9; --blush-soft: #F2DFDF; --blush-light: #FAEEEE; --sage-primary: #BCC8B4; --sage-soft: #DDE5D8; --text-primary: #2B2B2B; --text-secondary: #5B6470; --text-light: #7D8590; --border-soft: #E8E6E3; --shadow-soft: 0 4px 20px rgba(36,52,71,0.06); --button-primary: #243447; --button-hover: #31465F; --button-secondary: #E7C9C9; --button-secondary-hover: #DDB7B7; --sage: #BCC8B4; --sage-dk: #31465F; --sage-lt: #DDE5D8; --cream: #FAFAF8; --warm: #FDFDFC; --peach: #E7C9C9; --peach-lt: #F2DFDF; --lav: #BCC8B4; --lav-lt: #DDE5D8; --sky: #50657D; --sky-lt: #E8F0F5; --yel: #E7E5E4; --yel-lt: #F1EFED; --char: #2B2B2B; --brown: #5B6470; --red: #C0706E; --r: 20px; --sh: 0 4px 20px rgba(36,52,71,0.06); --tr: all 0.2s ease; }

:root { --nav-h: 68px; --page-top: 24px; --section-gap: 52px; --section-gap-sm: 32px; --card-gap: 18px; --inner-gap: 12px; --content-max: 1140px; --content-pad: 24px; }

.page-shell { max-width: var(--content-max); margin: 0px auto; padding: var(--page-top) var(--content-pad) 72px; }

.page-shell.narrow { max-width: 840px; }

.section-block { margin-bottom: var(--section-gap); }

.section-block.compact { margin-bottom: var(--section-gap-sm); }

.section-block.flush { margin-bottom: 0px; }

.card-grid { display: grid; gap: var(--card-gap); }

.card-grid-2 { display: grid; gap: var(--card-gap); grid-template-columns: repeat(2, 1fr); }

.card-grid-3 { display: grid; gap: var(--card-gap); grid-template-columns: repeat(3, 1fr); }

@media (max-width: 760px) {
  .card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .card-grid-2 { grid-template-columns: 1fr; }
  :root { --section-gap: 40px; --section-gap-sm: 24px; --content-pad: 16px; }
}

@media (max-width: 480px) {
  .card-grid-3 { grid-template-columns: 1fr; }
  :root { --section-gap: 32px; --section-gap-sm: 20px; }
}

.page.active { padding-top: var(--nav-h) !important; }

#page-dashboard.active, #page-kids.active, #page-kids-public.active, #page-home.active,
#page-hero-pulse.active, #page-rhythm-dash.active, #page-places.active,
#page-community-hub.active, #page-rhythm-public.active { padding-top: 0px !important; }
/* heroes sit flush under the fixed nav */
#page-rhythm-public .rhy-header{ padding-top:0 !important; }
#page-community-hub .ch-hero{ margin-top:0 !important; }

@media (max-width: 768px) {
  .page.active { padding-top: 0px !important; }
}

* { margin: 0px; padding: 0px; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { font-family: system-ui, -apple-system, sans-serif; background: var(--hu-white-mist); color: var(--char); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 12px 24px; border-radius: 50px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: var(--tr); font-family: inherit; text-decoration: none; box-shadow: rgba(36, 52, 71, 0.1) 0px 3px 14px; }

.btn:hover { transform: translateY(-2px); box-shadow: rgba(36, 52, 71, 0.15) 0px 6px 20px; }

.btn:active { transform: translateY(0px); }

.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; color: var(--navy-primary); border: 2px solid var(--blush-primary); padding: 10px 22px; border-radius: 50px; font-size: 0.88rem; font-weight: 700; cursor: pointer; transition: var(--tr); font-family: inherit; }

.btn-outline:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.btn-ghost { background: transparent; color: var(--char); border: 2px solid var(--char); padding: 12px 26px; border-radius: 50px; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: var(--tr); font-family: inherit; display: inline-flex; align-items: center; }

.btn-ghost:hover { background: var(--char); color: rgb(255, 255, 255); }

.btn-nav { background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 8px 18px; border-radius: 50px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: var(--tr); font-family: inherit; }

.btn-nav:hover { transform: translateY(-1px); }

.hm-hero { padding: 48px var(--content-pad) 40px; background: linear-gradient(135deg, rgb(18, 33, 58) 0%, rgb(27, 46, 74) 100%); color: rgb(255, 255, 255); border-radius: 0px 0px 32px 32px; }

.hm-hero + section + .hm-section, .hm-hero + .hm-section { padding-top: 16px; }

.hm-eco-section { padding: var(--section-gap) var(--content-pad); }

.hm-feat-section { padding: var(--section-gap) var(--content-pad); }

.hm-snap-section { padding: var(--section-gap) var(--content-pad); }

.hm-testi-section { padding: var(--section-gap) var(--content-pad); }

.hm-section-eyebrow { margin-bottom: 6px; }

.hm-section-title { margin-bottom: 10px; }

.dsc-hero-inner { max-width: var(--content-max); margin: 0px auto; padding: 0 0 var(--section-gap); }

.dsc-season-strip { margin-top: var(--section-gap); }

.dsc-community-band { padding: var(--section-gap) var(--content-pad); }

-planner { margin-top: 0px; }

.mk-planner-week { margin-bottom: var(--section-gap-sm); }

#page-dashboard .mk-section-hd { margin-top: 0px; }

.mk-log-entry + .mk-log-entry { margin-top: 10px; }

#page-kids .kids-hero { background: linear-gradient(135deg, rgb(18, 33, 58) 0%, rgb(27, 46, 74) 100%); padding: 48px 24px 40px; text-align: center; color: rgb(255, 255, 255); border-radius: 0px 0px 32px 32px; overflow: visible; }

.ff-grid { margin-bottom: var(--section-gap-sm); }

.ff-quiz { margin-top: var(--section-gap-sm); margin-bottom: var(--section-gap-sm); }

.ff-dl-grid { margin-bottom: var(--section-gap-sm); }

.container { padding: 0 var(--content-pad); }

.sl { margin-bottom: 6px; }

section > .container, .dsc-flow-section > .container, .dsc-feat-section > .container { padding-left: 0px; padding-right: 0px; }

@media (max-width: 768px) {
  .hm-hero { padding: 36px var(--content-pad) 12px; }
  .dsc-hero-inner { padding: 0 var(--content-pad) var(--section-gap-sm); }
  -stats { gap: 16px; }
  .mk-stat-n { font-size: 1.3rem; }
}

@media (max-width: 480px) {
  .hm-hero { padding: 24px var(--content-pad) 10px; }
  .mk-qa-pill { font-size: 0.76rem; padding: 6px 11px; }
}

:root { --nav-h: 68px; }

nav#mainNav { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 1000; height: var(--nav-h); background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(24px) saturate(180%); border-bottom: 1px solid rgba(0, 0, 0, 0.055); box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 20px; display: flex; align-items: center; justify-content: space-between; padding: 0px 2rem; transition: background 0.3s, box-shadow 0.3s; }

nav#mainNav.scrolled { background: rgba(255, 255, 255, 0.99); box-shadow: rgba(0, 0, 0, 0.07) 0px 2px 28px; }

.nav-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; flex-shrink: 0; }

.nav-logo-text { font-family: Georgia, "Times New Roman", serif; font-size: 1.05rem; font-weight: 700; color: var(--char); letter-spacing: -0.02em; }

.nav-links { display: flex; align-items: center; gap: 0px; flex: 1 1 0%; justify-content: center; flex-wrap: nowrap; overflow: visible; }

.nav-item { position: relative; }

.nav-item > .nav-label { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgba(45, 45, 45, 0.62); font-size: 0.815rem; font-weight: 500; padding: 6px 13px; height: var(--nav-h); cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 4px; letter-spacing: 0.008em; transition: color 0.18s; white-space: nowrap; position: relative; }

.nav-item > .nav-label::after { content: ""; position: absolute; bottom: 12px; left: 13px; right: 13px; height: 1.5px; background: var(--navy-primary); transform: scaleX(0); transform-origin: left center; transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 2px; }

.nav-item > .nav-label:hover, .nav-item.nav-active > .nav-label { color: var(--char); }

.nav-item > .nav-label:hover::after, .nav-item.nav-active > .nav-label::after { transform: scaleX(1); }

.nav-item.nav-pmf > .nav-label { color: rgb(90, 110, 138); }

.nav-item.nav-pmf > .nav-label::after { background: rgb(255, 255, 255); }

.nav-item.nav-pmf > .nav-label:hover { color: rgb(61, 82, 104); }

.nav-item > .nav-label .chev { font-size: 0.44rem; opacity: 0.45; transition: transform 0.2s; margin-top: 1px; }

.nav-item:hover > .nav-label .chev { transform: rotate(180deg); opacity: 0.7; }

.nav-mega { position: fixed; left: 0px; right: 0px; top: var(--nav-h); background: rgba(253, 252, 250, 0.98); backdrop-filter: blur(28px) saturate(160%); border-bottom: 1px solid rgba(0, 0, 0, 0.06); box-shadow: rgba(0, 0, 0, 0.07) 0px 28px 56px, rgba(0, 0, 0, 0.04) 0px 4px 8px; padding: 28px 0px 32px; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); z-index: 999; }

.nav-item:hover .nav-mega, .nav-mega:hover { opacity: 1; pointer-events: all; transform: translateY(0px); }

.mega-inner { max-width: 1060px; margin: 0px auto; padding: 0px 2rem; display: grid; gap: 28px; }

.mega-inner.cols-5 { grid-template-columns: repeat(5, 1fr); }

.mega-inner.cols-4 { grid-template-columns: repeat(4, 1fr); }

.mega-inner.cols-3 { grid-template-columns: repeat(3, 1fr); }

.mega-inner.cols-2 { grid-template-columns: 1.4fr 1fr; }

.mega-section-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-primary); margin-bottom: 12px; grid-column: 1 / -1; }

.mega-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; width: 100%; text-align: left; cursor: pointer; font-family: inherit; transition: background 0.14s, transform 0.14s; text-decoration: none; }

.mega-item:hover { background: rgba(36, 52, 71, 0.07); transform: translateY(-1px); }

.mega-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 4px; }

.mega-text { display: flex; flex-direction: column; padding-top: 1px; }

.mega-label { font-size: 0.82rem; font-weight: 700; color: var(--char); line-height: 1.25; margin-bottom: 2px; }

.mega-sub { font-size: 0.69rem; color: var(--brown); line-height: 1.45; }

.mega-promo { background: linear-gradient(135deg, var(--sage-lt), #e0f5e2); border-radius: 16px; padding: 20px 18px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 140px; }

.mega-promo-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--navy-primary); }

.mega-promo-title { font-family: Georgia, serif; font-size: 1rem; font-weight: 700; color: var(--char); line-height: 1.3; }

.mega-promo-sub { font-size: 0.73rem; color: var(--brown); line-height: 1.5; }

.mega-promo-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--navy-primary); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 7px 15px; font-size: 0.74rem; font-weight: 700; cursor: pointer; font-family: inherit; align-self: flex-start; transition: background 0.15s; }

.mega-promo-btn:hover { background: var(--sage-dk); }

.mega-divider { height: 1px; background: rgba(0, 0, 0, 0.05); grid-column: 1 / -1; margin: 2px 0px; }

.nav-mega.mega-pmf { background: rgba(248, 250, 252, 0.99); }

.mega-pmf .mega-section-label { color: rgb(122, 150, 176); }

.mega-pmf .mega-item:hover { background: rgba(90, 110, 138, 0.06); }

.nav-cta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.btn-outline-nav { background: transparent; color: var(--char); border: 1.5px solid rgba(0, 0, 0, 0.16); padding: 6px 15px; border-radius: 50px; font-size: 0.775rem; font-weight: 600; cursor: pointer; transition: var(--tr); font-family: inherit; }

.btn-outline-nav:hover { border-color: var(--navy-primary); color: var(--navy-primary); }

.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 8px; }

.hamburger span { display: block; width: 21px; height: 1.8px; background: var(--char); border-radius: 2px; transition: transform 0.25s, opacity 0.2s; }

.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }

.hamburger.open span:nth-child(2) { opacity: 0; }

.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu { display: none; position: fixed; top: var(--nav-h); left: 0px; right: 0px; bottom: 0px; background: var(--hu-white-mist); overflow-y: auto; z-index: 998; flex-direction: column; padding: 8px 16px 72px; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.mobile-menu.open { display: flex; transform: translateX(0px); }

.mob-section-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border-width: medium medium 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(0, 0, 0, 0.07); border-image: initial; padding: 16px 4px; cursor: pointer; font-family: inherit; font-size: 0.95rem; font-weight: 700; color: var(--char); letter-spacing: -0.01em; transition: color 0.15s; }

.mob-section-btn:hover { color: var(--navy-primary); }

.mob-section-chevron { font-size: 0.5rem; opacity: 0.4; transition: transform 0.22s; }

.mob-section-btn.open .mob-section-chevron { transform: rotate(180deg); }

.mob-sub-grid { grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 0px 14px; display: none; }

.mob-sub-grid.open { display: grid; }

.mob-item { background: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 14px; padding: 13px 10px 11px; cursor: pointer; font-family: inherit; text-align: center; transition: box-shadow 0.15s, transform 0.15s; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 8px; min-width: 0px; }

.mob-item:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.09) 0px 6px 18px; }

.mob-item-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; margin: 0px auto 7px; }

.mob-item-label { font-size: 0.71rem; font-weight: 700; color: var(--char); line-height: 1.3; }

.mob-item-sub { font-size: 0.6rem; color: var(--brown); margin-top: 2px; line-height: 1.3; }

.mob-cta-row { display: flex; gap: 10px; padding: 20px 4px 0px; }

.mob-cta-row .btn, .mob-cta-row .btn-outline-nav { flex: 1 1 0%; justify-content: center; text-align: center; }

.mob-section-btn.pmf-btn { color: rgb(74, 100, 128); }

.mob-section-btn.pmf-btn:hover { color: rgb(45, 74, 100); }

@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .hamburger { display: flex; }
}

@media (max-width: 768px) {
  #mainNav { display: none !important; }
  .mob-bottom-nav { display: flex; }
}

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--sage-dk); color: rgb(255, 255, 255); padding: 12px 24px; border-radius: 50px; font-size: 0.88rem; font-weight: 600; z-index: 9999; transition: transform 0.3s; white-space: nowrap; pointer-events: none; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; }

.toast.show { transform: translateX(-50%) translateY(0px); }

.page { padding-top: 0px; display: none !important; min-height: 0px !important; height: 0px !important; overflow: hidden !important; }

.nav-label.nav-active { color: var(--sage-dk) !important; font-weight: 700; }

#page-places { background: rgb(255, 255, 255); }

#page-home { background: rgb(255, 255, 255); }

#page-discover { background: rgb(255, 255, 255); }

#page-food-feels { background: rgb(255, 255, 255); }

#page-voice { background: var(--hu-white-mist); }

#page-dashboard { background: rgb(255, 255, 255); }

#page-shop { background: rgb(255, 255, 255); }

.page.active { display: block !important; min-height: 100vh !important; height: auto !important; overflow: visible !important; }

.page:not(.active) { display: none !important; visibility: hidden !important; pointer-events: none !important; position: absolute !important; top: -99999px !important; left: -99999px !important; width: 0px !important; height: 0px !important; overflow: hidden !important; opacity: 0 !important; }

.page.active { position: relative !important; top: auto !important; left: auto !important; width: auto !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

.rc-overlay:not(.open) { display: none !important; }

.fl-modal-bg:not(.fl-open) { display: none !important; }

.sr-overlay:not(.open) { display: none !important; }

section { padding: var(--section-gap) var(--content-pad); }

.container { max-width: var(--content-max); margin: 0px auto; }

.container-sm { max-width: 760px; margin: 0px auto; }

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

.sl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-primary); margin-bottom: 8px; }

.h1 { font-family: Georgia, serif; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.1; color: var(--char); margin-bottom: 16px; }

.h2 { font-family: Georgia, serif; font-size: clamp(1.4rem, 2.8vw, 2rem); font-weight: 700; line-height: 1.15; color: var(--char); margin-bottom: 12px; }

.sub { font-size: 1rem; color: var(--brown); line-height: 1.75; max-width: 580px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); margin-top: 24px; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); margin-top: 24px; }

.card { background: rgb(255, 255, 255); border-radius: var(--r); padding: 24px; box-shadow: var(--sh); border: 1px solid rgba(0, 0, 0, 0.04); transition: var(--tr); }

.card:hover { transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.11) 0px 8px 32px; }

.card-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 14px; }

.card h3 { font-weight: 800; font-size: 0.98rem; margin-bottom: 7px; color: var(--char); }

.card p { font-size: 0.84rem; color: var(--brown); line-height: 1.65; }

.hero { min-height: 0px; background: rgb(255, 255, 255); display: flex; align-items: center; padding: 36px 1.5rem 38px; box-sizing: border-box; }

@media (max-width: 900px) {
  .hero { min-height: 0px; padding: 28px 1.5rem 30px; }
}

@media (max-width: 600px) {
  .hero { min-height: 0px; padding: 24px 1.25rem 26px; }
}

.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; max-width: 1080px; margin: 0px auto; width: 100%; }

.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--sage-lt); border: 1px solid rgba(36, 52, 71, 0.3); border-radius: 50px; padding: 5px 14px; font-size: 0.76rem; font-weight: 700; color: var(--navy-primary); margin-bottom: 14px; }

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0px 24px; }

.hero-visual { background: transparent; border-radius: 0px; display: flex; align-items: center; justify-content: center; width: auto; height: auto; flex-shrink: 0; padding: 0px; overflow: hidden; }

@media (max-width: 900px) {
  .hero-visual { width: 100%; height: auto; max-height: 320px; }
}

.hero-stats { display: flex; gap: 20px; flex-wrap: wrap; }

.stat-n { font-family: Georgia, serif; font-size: 1.6rem; font-weight: 700; color: var(--char); }

.stat-l { font-size: 0.76rem; color: var(--brown); }

.mood-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0px 12px; }

.mood-pill { padding: 9px 18px; border-radius: 50px; font-size: 0.88rem; font-weight: 600; cursor: pointer; border: 2px solid transparent; transition: var(--tr); }

.mood-calm { background: var(--lav-lt); color: rgb(122, 106, 176); }

.mood-calm.active, .mood-calm:hover { background: var(--lav); color: rgb(255, 255, 255); border-color: var(--lav); }

.mood-energy { background: var(--yel-lt); color: rgb(138, 98, 0); }

.mood-energy.active, .mood-energy:hover { background: var(--yel); color: rgb(90, 62, 0); border-color: var(--yel); }

.mood-focus { background: var(--sky-lt); color: rgb(42, 106, 132); }

.mood-focus.active, .mood-focus:hover { background: var(--sky); color: rgb(255, 255, 255); border-color: var(--sky); }

.mood-comfort { background: var(--peach-lt); color: rgb(192, 90, 32); }

.mood-comfort.active, .mood-comfort:hover { background: var(--peach); color: rgb(255, 255, 255); border-color: var(--peach); }

.mood-sleep { background: rgb(232, 228, 245); color: rgb(106, 90, 148); }

.mood-sleep.active, .mood-sleep:hover { background: rgb(196, 184, 232); color: rgb(255, 255, 255); border-color: rgb(196, 184, 232); }

.recipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); margin-top: 20px; }

.recipe-card { background: rgb(255, 255, 255); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); transition: var(--tr); cursor: pointer; }

.recipe-card:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.13) 0px 10px 36px; }

.recipe-img { height: 160px; display: flex; align-items: flex-end; padding: 14px; }

.recipe-badge { background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(4px); color: rgb(255, 255, 255); padding: 3px 10px; border-radius: 50px; font-size: 0.7rem; font-weight: 600; }

.recipe-body { padding: 14px; }

.recipe-title { font-weight: 700; font-size: 0.92rem; margin-bottom: 5px; color: var(--char); }

.recipe-meta { font-size: 0.76rem; color: var(--brown); display: flex; gap: 10px; }

.score-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; }

.score-bar { flex: 1 1 0%; height: 6px; background: rgb(238, 238, 238); border-radius: 3px; overflow: hidden; }

.score-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg,var(--sage),var(--peach)); }

.score-lbl { font-size: 0.7rem; color: var(--brown); }

.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); margin-top: 28px; }

.proof-card { background: rgb(255, 255, 255); border-radius: var(--r); padding: 24px; box-shadow: var(--sh); }

.stars { color: rgb(245, 197, 24); margin-bottom: 10px; }

.cta-band { background: linear-gradient(135deg,#f7f0e8,var(--sage-lt)); padding: 40px 1.5rem; text-align: center; }

.cta-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

.newsletter { background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); padding: 40px 1.5rem; text-align: center; }

.newsletter h2 { font-family: Georgia, serif; font-size: 2.2rem; margin-bottom: 10px; }

.nl-form { display: flex; gap: 10px; max-width: 440px; margin: 20px auto 0px; }

.nl-input { flex: 1 1 0%; padding: 13px 18px; border-radius: 50px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 0.92rem; outline: none; font-family: inherit; }

.nl-btn { background: var(--peach); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 13px 22px; border-radius: 50px; font-weight: 700; cursor: pointer; font-size: 0.92rem; font-family: inherit; transition: var(--tr); }

.nl-btn:hover { background: rgb(232, 144, 90); }

.dash-wrap { background: linear-gradient(160deg,#f0f7f1,var(--cream)); min-height: calc(-64px + 100vh); }

.dash-grid { display: grid; grid-template-columns: 240px 1fr; gap: 20px; max-width: 1280px; margin: 0px auto; padding: 24px 1.5rem; min-width: 0px; }

.dash-sidebar { display: flex; flex-direction: column; gap: 16px; }

.dash-nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--brown); transition: var(--tr); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; font-family: inherit; text-align: left; width: 100%; }

.dash-nav-item:hover, .dash-nav-item.active { background: rgb(255, 255, 255); color: var(--navy-primary); box-shadow: var(--sh); }

.dash-main { display: flex; flex-direction: column; gap: 16px; min-width: 0px; }

.dash-panel { display: flex; flex-direction: column; gap: 16px; }

.dash-card { background: rgb(255, 255, 255); border-radius: var(--r); padding: 20px; box-shadow: var(--sh); }

.dash-card h3 { font-weight: 800; font-size: 1rem; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

.log-row { display: flex; align-items: center; gap: 10px; padding: 9px 0px; border-bottom: 1px solid rgb(240, 236, 230); }

.log-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.add-btn { width: 30px; height: 30px; border-radius: 50%; background: var(--sage-lt); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--navy-primary); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; transition: var(--tr); margin-left: auto; }

.add-btn:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.supp-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0px; border-bottom: 1px solid rgb(240, 236, 230); }

.supp-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.supp-check { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--blush-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--tr); flex-shrink: 0; }

.supp-check.done { background: var(--navy-primary); color: rgb(255, 255, 255); font-size: 0.68rem; }

.ht-drink-icon { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; transition: var(--tr); padding: 8px 6px; border-radius: 14px; min-width: 68px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: transparent; flex-shrink: 0; }

.ht-drink-icon:hover .ht-drink-emoji { transform: scale(1.15); }

.ht-drink-icon.selected .ht-drink-label { color: var(--sage-dk); font-weight: 800; }

.ht-drink-emoji { font-size: 2.2rem; line-height: 1; display: block; transition: transform 0.15s; }

.ht-drink-label { font-size: 0.68rem; font-weight: 600; color: rgb(85, 85, 85); text-align: center; line-height: 1.3; }

.ht-add-icon { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; padding: 8px 6px; border-radius: 14px; min-width: 68px; flex-shrink: 0; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: transparent; transition: var(--tr); }

.ht-log-card { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; background: var(--hu-white-mist); border-radius: 16px; padding: 14px 14px 10px; min-width: 90px; border: 1px solid rgb(232, 228, 222); }

.ht-log-card-emoji { font-size: 2.4rem; line-height: 1; }

.ht-log-card-name { font-size: 0.8rem; font-weight: 600; color: var(--char); text-align: center; }

.ht-log-card-ml { font-size: 0.73rem; color: var(--brown); }

.ht-log-card-time { font-size: 0.7rem; color: var(--brown); }

.ht-log-card-remove { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); border: 1px solid rgb(221, 221, 221); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; cursor: pointer; color: rgb(153, 153, 153); transition: var(--tr); }

.ht-log-card-remove:hover { background: var(--red); color: rgb(255, 255, 255); border-color: var(--red); }

.ht-log-btn { background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 11px 26px; border-radius: 50px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: var(--tr); font-family: inherit; }

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

.ht-add-circle { width: 34px; height: 34px; border-radius: 50%; background: var(--sage-lt); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--navy-primary); font-size: 1.3rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--tr); }

.ht-add-circle:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.drink-type-btn { padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; background: transparent; color: var(--char); font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: var(--tr); font-family: inherit; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }

.drink-type-btn:hover { opacity: 0.65; }

.grocery-cat-btn { padding: 5px 12px; border-radius: 50px; border: 1.5px solid rgb(224, 219, 212); background: rgb(255, 255, 255); color: var(--brown); font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: var(--tr); font-family: inherit; }

.grocery-cat-btn.active, .grocery-cat-btn:hover { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); }

.grocery-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--hu-white-mist); border-radius: 11px; }

.grocery-item.checked { opacity: 0.5; }

.grocery-item.checked .grocery-name { text-decoration: line-through; }

.grocery-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--blush-primary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: var(--tr); font-size: 0.65rem; font-weight: 800; color: rgb(255, 255, 255); }

.grocery-check.done { background: var(--navy-primary); }

.grocery-name { flex: 1 1 0%; font-size: 0.85rem; color: var(--char); }

.grocery-remove { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(204, 204, 204); cursor: pointer; font-size: 1rem; transition: var(--tr); }

.grocery-remove:hover { color: var(--red); }

.mp-week-grid { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 8px; min-width: 780px; }

.mp-day-col { border-radius: 16px; overflow: hidden; background: var(--hu-white-mist); }

.mp-day-col.today { background: var(--sage-lt); box-shadow: 0 0 0 2px var(--sage); }

.mp-day-header { padding: 8px 10px 6px; text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

.mp-day-name { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brown); }

.mp-day-date { font-size: 12px; font-weight: 700; color: var(--char); margin-top: 1px; }

.mp-meal-slot { padding: 5px 7px; }

.mp-meal-type-label { font-size: 9px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: rgb(187, 187, 187); margin-bottom: 3px; }

.mp-meal-card { background: rgb(255, 255, 255); border-radius: 10px; padding: 7px 8px; font-size: 11px; font-weight: 600; color: var(--char); display: flex; align-items: center; gap: 5px; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 6px; cursor: pointer; transition: var(--tr); position: relative; }

.mp-meal-card:hover { transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 10px; }

.mp-remove { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: rgb(192, 112, 110); color: rgb(255, 255, 255); font-size: 9px; display: none; align-items: center; justify-content: center; cursor: pointer; font-weight: 800; border: 1.5px solid rgb(255, 255, 255); }

.mp-meal-card:hover .mp-remove { display: flex; }

.mp-add-slot { background: rgba(255, 255, 255, 0.5); border-radius: 10px; padding: 6px; text-align: center; cursor: pointer; font-size: 16px; color: rgb(204, 204, 204); transition: var(--tr); border: 1.5px dashed rgb(221, 221, 221); }

.mp-add-slot:hover { background: rgb(255, 255, 255); border-color: var(--navy-primary); color: var(--navy-primary); }

.mp-day-view { display: flex; flex-direction: column; gap: 10px; }

.mp-day-meal-row { background: rgb(255, 255, 255); border-radius: 16px; padding: 14px 16px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 12px; display: flex; align-items: center; gap: 14px; }

.mp-day-meal-icon { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }

.mp-day-meal-info { flex: 1 1 0%; min-width: 0px; }

.mp-day-meal-type { font-size: 11px; font-weight: 700; color: var(--navy-primary); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 2px; }

.mp-day-meal-name { font-size: 14px; font-weight: 700; color: var(--char); }

.mp-day-meal-empty { font-size: 13px; color: rgb(187, 187, 187); font-style: italic; }

.mp-day-pill { flex-shrink: 0; padding: 6px 12px; border-radius: 50px; font-size: 11px; font-weight: 700; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-family: inherit; background: var(--hu-white-mist); color: var(--brown); transition: var(--tr); }

.mp-day-pill.active { background: var(--navy-primary); color: rgb(255, 255, 255); }

.mp-lib-chip { flex-shrink: 0; display: flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 50px; cursor: pointer; background: rgb(255, 255, 255); border: 1.5px solid rgb(238, 238, 238); font-size: 11px; font-weight: 700; color: var(--char); transition: var(--tr); white-space: nowrap; }

.mp-lib-chip:hover { border-color: var(--navy-primary); background: var(--sage-lt); color: var(--sage-dk); }

.tag { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 0.75rem; font-weight: 700; }

.tag-sage { background: var(--sage-lt); color: var(--navy-primary); }

.tag-peach { background: var(--peach-lt); color: rgb(192, 90, 32); }

.tag-sky { background: var(--sky-lt); color: rgb(42, 106, 132); }

.tag-yel { background: var(--yel-lt); color: rgb(122, 85, 0); }

.kids-hero { background: rgb(255, 255, 255); padding: var(--section-gap-sm) var(--content-pad) 24px; min-height: auto; }

.kids-hero img, .kids-header-img { width: 100%; max-width: 100%; height: auto; object-fit: contain; object-position: center center; display: block; margin: 0px auto; }

.char-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); margin-top: 28px; }

.char-card { background: rgb(255, 255, 255); border-radius: var(--r); padding: 28px 20px; text-align: center; box-shadow: var(--sh); }

@media (max-width: 768px) {
  .kids-hero { padding: 24px 1rem 20px; }
}

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; margin-top: 32px; }

.shop-card { background: rgb(255, 255, 255); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); transition: var(--tr); cursor: pointer; }

.shop-card:hover { transform: translateY(-3px); box-shadow: rgba(0, 0, 0, 0.11) 0px 8px 28px; }

footer { background: linear-gradient(135deg, rgb(27, 36, 48) 0%, rgb(36, 52, 71) 50%, rgb(46, 76, 99) 100%); color: rgba(255, 255, 255, 0.72); padding: 72px 2rem 0px; position: relative; overflow: hidden; }

footer::before { content: ""; position: absolute; inset: 0px; background-image: radial-gradient(circle at 20% 20%, rgba(36, 52, 71, 0.06) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(46, 76, 99, 0.15) 0%, transparent 50%); pointer-events: none; }

footer::after { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(36, 52, 71, 0.5) 30%, rgba(36, 52, 71, 0.8) 50%, rgba(36, 52, 71, 0.5) 70%, transparent 100%); }

.footer-inner { max-width: 1140px; margin: 0px auto; position: relative; z-index: 1; }

.footer-tagline-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 40px; margin-bottom: 48px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.footer-tagline-row .ft-brand-name { font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; font-weight: 400; color: rgb(255, 255, 255); letter-spacing: -0.01em; }

.footer-tagline-row .ft-brand-name span { color: var(--navy-primary); }

.footer-tagline-row .ft-brand-sub { font-size: 0.82rem; color: rgba(255, 255, 255, 0.4); font-style: italic; letter-spacing: 0.04em; }

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 0px; max-width: 1140px; margin: 0px auto; }

.footer-col + .footer-col, .footer-brand + .footer-col { border-left: 1px solid rgba(255, 255, 255, 0.07); padding-left: 32px; }

.footer-col.partnerships button { white-space: nowrap; }

.footer-brand { padding-right: 40px; }

.footer-col { padding: 0px 20px 0px 32px; }

.footer-brand h3 { font-family: Georgia, "Times New Roman", serif; color: rgb(255, 255, 255); font-size: 1.25rem; font-weight: 400; margin-bottom: 12px; letter-spacing: -0.01em; }

.footer-brand p { font-size: 0.84rem; line-height: 1.75; color: rgba(255, 255, 255, 0.48); margin-bottom: 24px; max-width: 260px; }

.footer-social { display: flex; gap: 10px; }

.social-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; cursor: pointer; transition: var(--tr); color: rgb(255, 255, 255); }

.social-btn:hover { background: rgba(36, 52, 71, 0.25); border-color: rgba(36, 52, 71, 0.5); transform: translateY(-2px); }

.footer-col h4 { font-family: Georgia, "Times New Roman", serif; color: rgba(255, 255, 255, 0.95); font-size: 0.82rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; }

.footer-col h4::after { content: ""; position: absolute; bottom: -1px; left: 0px; width: 24px; height: 1px; background: var(--navy-primary); }

.footer-col button { display: block; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgba(255, 255, 255, 0.52); font-size: 0.83rem; line-height: 1; margin-bottom: 12px; cursor: pointer; font-family: inherit; transition: 0.2s; text-align: left; padding: 2px 0px; position: relative; }

.footer-col button::before { content: ""; position: absolute; left: -8px; top: 50%; transform: translateY(-50%) scaleX(0); width: 4px; height: 4px; border-radius: 50%; background: var(--navy-primary); transition: transform 0.2s; transform-origin: center center; }

.footer-col button:hover { color: rgba(255, 255, 255, 0.92); padding-left: 12px; }

.footer-col button:hover::before { transform: translateY(-50%) scaleX(1); }

.footer-bottom-wrap { margin-top: 60px; padding: 24px 0px; border-top: 1px solid rgba(255, 255, 255, 0.07); position: relative; z-index: 1; }

.footer-bottom { max-width: 1140px; margin: 0px auto; display: flex; justify-content: space-between; align-items: center; font-size: 0.76rem; color: rgba(255, 255, 255, 0.3); letter-spacing: 0.02em; }

.footer-bottom a, .footer-bottom button.footer-legal { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgba(255, 255, 255, 0.3); font-size: 0.76rem; font-family: inherit; cursor: pointer; transition: color 0.2s; padding: 0px; }

.footer-bottom a:hover, .footer-bottom button.footer-legal:hover { color: rgba(255, 255, 255, 0.65); }

.footer-legal-links { display: flex; gap: 20px; align-items: center; }

.footer-legal-links span { opacity: 0.3; }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; gap: 40px 0px; }
  .footer-brand { grid-column: 1 / -1; padding-right: 0px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding-bottom: 32px; margin-bottom: 0px; }
  .footer-brand + .footer-col { border-left-width: medium; border-left-style: none; border-left-color: currentcolor; padding-left: 0px; }
  .footer-col { padding: 0px; }
  .footer-col + .footer-col { border-left-width: medium; border-left-style: none; border-left-color: currentcolor; padding-left: 0px; }
  .footer-tagline-row { flex-direction: column; align-items: flex-start; gap: 6px; }
}

@media (max-width: 600px) {
  footer { padding: 52px 1.25rem 0px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-bottom-wrap { margin-top: 40px; }
}

@media (max-width: 400px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.vj-modal-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.45); z-index: 2000; display: flex; align-items: flex-end; justify-content: center; backdrop-filter: blur(4px); }

.vj-modal { background: rgb(255, 255, 255); border-radius: 24px 24px 0px 0px; padding: 28px 22px 36px; width: 100%; max-width: 540px; box-shadow: rgba(0, 0, 0, 0.18) 0px -8px 40px; }

.vj-handle { width: 40px; height: 4px; background: rgb(224, 219, 212); border-radius: 2px; margin: 0px auto 20px; }

.vj-mic { width: 72px; height: 72px; border-radius: 50%; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0px auto 12px; transition: var(--tr); }

.vj-mic.idle { background: var(--sage-lt); color: var(--navy-primary); }

.vj-mic.listening { background: var(--navy-primary); color: rgb(255, 255, 255); animation: 1.4s ease-in-out 0s infinite normal none running vj-pulse; }

.vj-mic.idle:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.vj-mood-chip { padding: 6px 14px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; cursor: pointer; border: 2px solid transparent; transition: var(--tr); background: var(--hu-white-mist); color: var(--brown); }

.vj-mood-chip.selected { border-color: var(--navy-primary); background: var(--sage-lt); color: var(--sage-dk); }

.vj-trigger { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 50px; border: 1.5px solid var(--sage); background: var(--sage-lt); color: var(--sage-dk); font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: var(--tr); font-family: inherit; }

.vj-trigger:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.dash-action-btn { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgb(224, 219, 212); background: rgb(255, 255, 255); font-size: 0.78rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: var(--tr); color: var(--brown); }

.dash-action-btn:hover { background: var(--navy-primary); color: rgb(255, 255, 255); border-color: var(--navy-primary); }

.prc-tab { padding: 7px 14px; border-radius: 50px; font-size: 11px; font-weight: 700; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: rgba(255, 255, 255, 0.6); color: var(--brown); transition: var(--tr); font-family: inherit; }

.prc-tab.active { background: var(--navy-primary); color: rgb(255, 255, 255); }

.prc-input { width: 100%; padding: 9px 14px; border-radius: 50px; border: 1.5px solid rgb(224, 219, 212); font-size: 13px; font-family: inherit; background: var(--hu-white-mist); outline: none; box-sizing: border-box; }

.prc-ingredient { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; margin-bottom: 6px; }

.prc-ingredient.ok { background: rgb(247, 244, 240); }

.prc-ingredient.expiring { background: rgb(255, 245, 245); }

.prc-ingredient.low { background: rgb(255, 253, 240); }

.prc-recipe-card { background: var(--hu-white-mist); border-radius: 14px; padding: 14px; margin-bottom: 8px; }

.prc-action-chip { display: inline-block; padding: 5px 12px; border-radius: 50px; font-size: 11px; font-weight: 700; cursor: pointer; transition: var(--tr); margin: 2px; }

.kc-prod-card { background: rgb(255, 255, 255); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh); transition: var(--tr); }

.kc-prod-card:hover { transform: translateY(-3px); }

@keyframes vj-pulse { 
  0% { box-shadow: rgba(36, 52, 71, 0.7) 0px 0px 0px 0px; }
  70% { box-shadow: rgba(36, 52, 71, 0) 0px 0px 0px 16px; }
  100% { box-shadow: rgba(36, 52, 71, 0) 0px 0px 0px 0px; }
}

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

:root { --yt-yel: #E7E5E4; --yt-yel-dk: #d4a82a; --yt-yel-lt: #fef9ec; --yt-yel-mid: #fef2c8; --yt-navy: #1a2332; --yt-r: 20px; --yt-r-lg: 24px; --yt-sh: 0 4px 24px rgba(26,35,50,0.07); --yt-sh-h: 0 10px 36px rgba(26,35,50,0.13); --yt-tr: all 0.22s cubic-bezier(.4,0,.2,1); }

.yt-hero { background: linear-gradient(160deg,#fffef7 0%,var(--yt-yel-lt) 45%,#f0f7f1 100%); border-bottom: 1px solid rgba(245, 215, 126, 0.25); padding: 36px 0px 32px; position: relative; overflow: hidden; }

.yt-hero::before { content: ""; position: absolute; top: -60px; right: -60px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(245, 215, 126, 0.18) 0%, transparent 70%); pointer-events: none; }

.yt-hero::after { content: ""; position: absolute; bottom: -40px; left: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(36, 52, 71, 0.1) 0%, transparent 70%); pointer-events: none; }

.yt-hero-inner { max-width: 800px; margin: 0px auto; padding: 0px 24px; position: relative; z-index: 1; }

.yt-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 600; color: var(--brown); opacity: 0.7; margin-bottom: 18px; }

.yt-breadcrumb span { color: var(--navy-primary); }

.yt-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(245, 215, 126, 0.28); border: 1px solid rgba(245, 215, 126, 0.5); border-radius: 50px; padding: 5px 14px 5px 10px; margin-bottom: 14px; }

.yt-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yt-yel-dk); flex-shrink: 0; }

.yt-badge-text { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yt-yel-dk); }

.yt-hero h1 { font-family: Georgia, serif; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: var(--yt-navy); margin-bottom: 10px; }

.yt-hero h1 em { font-style: normal; background: linear-gradient(135deg, rgb(212, 168, 42), rgb(231, 229, 228)) text; -webkit-text-fill-color: transparent; }

.yt-hero p { font-size: 0.96rem; color: var(--brown); line-height: 1.7; max-width: 520px; margin-bottom: 20px; }

.yt-hero-stats { display: flex; gap: 24px; flex-wrap: wrap; }

.yt-stat-n { font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; color: var(--yt-navy); line-height: 1; }

.yt-stat-l { font-size: 0.7rem; color: var(--brown); opacity: 0.75; margin-top: 2px; }

.yt-body-inner { max-width: 800px; margin: 0px auto; padding: 28px 24px 0px; }

.yt-voice-row { display: flex; align-items: center; gap: 10px; background: var(--yt-yel-lt); border: 1.5px dashed rgba(212, 168, 42, 0.35); border-radius: 16px; padding: 13px 16px; margin-bottom: 18px; cursor: pointer; transition: var(--yt-tr); }

.yt-voice-row:hover { background: var(--yt-yel-mid); border-style: solid; }

.yt-voice-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(212, 168, 42, 0.15); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; border: 1px solid rgba(212, 168, 42, 0.2); }

.yt-voice-icon.yt-recording { animation: 1.4s ease-in-out 0s infinite normal none running ytMicPulse; background: rgba(212, 168, 42, 0.3); }

@keyframes ytMicPulse { 
  0%, 100% { box-shadow: rgba(212, 168, 42, 0.4) 0px 0px 0px 0px; }
  50% { box-shadow: rgba(212, 168, 42, 0) 0px 0px 0px 10px; }
}

.yt-voice-vtext { font-size: 0.82rem; color: var(--yt-navy); flex: 1 1 0%; }

.yt-voice-vtext strong { color: var(--yt-yel-dk); font-weight: 700; }

.yt-voice-vtext em { display: block; font-style: italic; font-size: 0.75rem; color: var(--brown); opacity: 0.7; margin-top: 1px; }

.yt-card { background: rgb(255, 255, 255); border-radius: var(--yt-r-lg); box-shadow: var(--yt-sh); border: 1px solid rgba(0, 0, 0, 0.04); overflow: hidden; margin-bottom: 18px; transition: var(--yt-tr); }

.yt-card:hover { box-shadow: var(--yt-sh-h); }

.yt-card-header { padding: 18px 22px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); display: flex; align-items: center; gap: 12px; }

.yt-card-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }

.yt-card-icon.yel { background: var(--yt-yel-mid); }

.yt-card-icon.sage { background: var(--sage-lt); }

.yt-card-title { font-family: Georgia, serif; font-size: 1.02rem; font-weight: 700; color: var(--yt-navy); line-height: 1.2; }

.yt-card-sub { font-size: 0.76rem; color: var(--brown); margin-top: 2px; }

.yt-card-body { padding: 18px 22px 22px; }

.yt-fgroup { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }

.yt-fgroup.full { grid-template-columns: 1fr; }

.yt-flabel { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brown); opacity: 0.8; display: block; margin-bottom: 4px; }

.yt-input, .yt-select { font-family: inherit; font-size: 0.88rem; color: var(--yt-navy); background: var(--hu-white-mist); border: 1.5px solid rgba(0, 0, 0, 0.09); border-radius: 12px; padding: 10px 13px; outline: none; transition: var(--yt-tr); width: 100%; appearance: none; }

.yt-input::placeholder { color: var(--brown); opacity: 0.4; }

.yt-input:focus, .yt-select:focus { border-color: var(--yt-yel-dk); background: rgb(255, 255, 255); box-shadow: rgba(212, 168, 42, 0.12) 0px 0px 0px 3px; }

.yt-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b5b4e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; cursor: pointer; }

.yt-btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: linear-gradient(135deg,var(--yt-yel),var(--yt-yel-dk)); color: var(--yt-navy); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 14px 26px; font-family: inherit; font-size: 0.94rem; font-weight: 800; cursor: pointer; transition: var(--yt-tr); box-shadow: rgba(212, 168, 42, 0.35) 0px 4px 18px; margin-bottom: 12px; }

.yt-btn-primary:hover { transform: translateY(-2px); box-shadow: rgba(212, 168, 42, 0.45) 0px 8px 28px; }

.yt-btn-primary:active { transform: translateY(0px); }

.yt-btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.yt-btn-sec { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--hu-white-mist); color: var(--yt-navy); border: 1.5px solid rgba(0, 0, 0, 0.09); border-radius: 50px; padding: 10px 14px; font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: var(--yt-tr); }

.yt-btn-sec:hover { background: var(--sage-lt); border-color: var(--navy-primary); color: var(--sage-dk); }

.yt-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.06), transparent); margin: 14px 0px; }

.yt-results { display: none; }

.yt-results.visible { display: block; animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 normal both running ytFadeUp; }

@keyframes ytFadeUp { 
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.yt-results-hd { display: flex; align-items: flex-start; gap: 14px; padding: 0px 0px 18px; }

.yt-results-title { font-family: Georgia, serif; font-size: 1.25rem; font-weight: 700; color: var(--yt-navy); }

.yt-results-sub { font-size: 0.78rem; color: var(--brown); margin-top: 3px; }

.yt-score-badge { display: inline-flex; flex-direction: column; align-items: center; background: linear-gradient(135deg,var(--yt-yel-mid),#fff9e0); border: 1.5px solid rgba(212, 168, 42, 0.3); border-radius: 16px; padding: 12px 16px; min-width: 86px; flex-shrink: 0; }

.yt-score-n { font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; color: var(--yt-yel-dk); line-height: 1; }

.yt-score-lbl { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brown); margin-top: 3px; }

.yt-score-desc { font-size: 0.68rem; color: var(--brown); text-align: center; margin-top: 3px; line-height: 1.3; }

.yt-rc { background: rgb(255, 255, 255); border-radius: var(--yt-r); box-shadow: rgba(26, 35, 50, 0.06) 0px 2px 14px; border: 1px solid rgba(0, 0, 0, 0.04); margin-bottom: 13px; overflow: hidden; transition: var(--yt-tr); }

.yt-rc:hover { box-shadow: var(--yt-sh-h); }

.yt-rc-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); }

.yt-rc-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; }

.yt-rc-title { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--yt-navy); }

.yt-rc-body { padding: 14px 18px 16px; }

.yt-meal-row { display: flex; align-items: center; gap: 12px; padding: 8px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); cursor: pointer; transition: var(--yt-tr); }

.yt-meal-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.yt-meal-row:hover { transform: translateX(3px); }

.yt-meal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yt-yel); flex-shrink: 0; transition: background 0.2s; }

.yt-meal-name { font-size: 0.88rem; font-weight: 600; color: var(--yt-navy); flex: 1 1 0%; }

.yt-meal-save { font-size: 0.7rem; font-weight: 700; color: var(--navy-primary); opacity: 0; transition: var(--yt-tr); white-space: nowrap; }

.yt-meal-row:hover .yt-meal-save { opacity: 1; }

.yt-meal-row.yt-saved .yt-meal-dot { background: var(--navy-primary); }

.yt-meal-row.yt-saved .yt-meal-name { color: var(--sage-dk); }

.yt-tip-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); }

.yt-tip-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.yt-tip-icon { font-size: 0.95rem; flex-shrink: 0; margin-top: 1px; }

.yt-tip-text { font-size: 0.86rem; color: var(--brown); line-height: 1.5; }

.yt-tag-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

.yt-ptag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 50px; font-size: 0.76rem; font-weight: 700; border: 1.5px solid transparent; }

.yt-tag-green { background: var(--sage-lt); color: var(--sage-dk); border-color: rgba(36, 52, 71, 0.25); }

.yt-tag-yellow { background: var(--yt-yel-mid); color: rgb(138, 96, 0); border-color: rgba(212, 168, 42, 0.25); }

.yt-tag-blue { background: rgb(232, 240, 248); color: rgb(42, 74, 122); border-color: rgba(42, 74, 122, 0.15); }

.yt-tag-peach { background: var(--peach-lt); color: rgb(154, 74, 24); border-color: rgba(244, 169, 127, 0.3); }

.yt-urg-row { display: flex; align-items: center; gap: 12px; padding: 9px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); }

.yt-urg-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.yt-urg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.yt-urg-label { font-size: 0.86rem; font-weight: 700; color: var(--yt-navy); flex: 1 1 0%; }

.yt-urg-btn { font-size: 0.73rem; font-weight: 700; color: var(--navy-primary); background: var(--sage-lt); padding: 4px 10px; border-radius: 50px; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-family: inherit; transition: var(--yt-tr); }

.yt-urg-btn:hover { background: var(--navy-primary); color: rgb(255, 255, 255); }

.yt-savings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.yt-sav-tile { background: var(--hu-white-mist); border-radius: 14px; padding: 14px; text-align: center; }

.yt-sav-n { font-family: Georgia, serif; font-size: 1.3rem; font-weight: 700; color: var(--yt-navy); line-height: 1; }

.yt-sav-n.green { color: var(--sage-dk); }

.yt-sav-n.yellow { color: var(--yt-yel-dk); }

.yt-sav-l { font-size: 0.68rem; color: var(--brown); margin-top: 4px; line-height: 1.3; }

.yt-vr-bubble { background: linear-gradient(135deg,var(--sage-lt),#f0f9f2); border: 1px solid rgba(36, 52, 71, 0.2); border-radius: var(--yt-r); padding: 16px 18px; margin-bottom: 13px; display: flex; gap: 12px; align-items: flex-start; }

.yt-vr-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,var(--navy-primary),var(--navy-soft)); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; }

.yt-vr-text { font-size: 0.86rem; color: var(--yt-navy); line-height: 1.65; }

.yt-vr-text strong { color: var(--sage-dk); }

.yt-kids-card { background: linear-gradient(135deg, rgb(255, 251, 234) 0%, rgb(240, 249, 242) 100%); border-radius: var(--yt-r-lg); border: 1.5px solid rgba(245, 215, 126, 0.35); box-shadow: var(--yt-sh); padding: 22px; margin-bottom: 18px; position: relative; overflow: hidden; }

.yt-kids-card::before { content: "🎮"; position: absolute; top: -10px; right: -6px; font-size: 4rem; opacity: 0.06; pointer-events: none; }

.yt-kids-title { font-family: Georgia, serif; font-size: 1.05rem; font-weight: 700; color: var(--yt-navy); margin-bottom: 6px; }

.yt-kids-text { font-size: 0.84rem; color: var(--brown); line-height: 1.65; margin-bottom: 14px; }

.yt-kids-btns { display: flex; flex-wrap: wrap; gap: 8px; }

.yt-kids-btn { display: inline-flex; align-items: center; gap: 6px; background: rgb(255, 255, 255); border: 1.5px solid rgba(245, 215, 126, 0.5); border-radius: 50px; padding: 8px 15px; font-family: inherit; font-size: 0.8rem; font-weight: 700; color: var(--yt-navy); cursor: pointer; transition: var(--yt-tr); }

.yt-kids-btn:hover { background: var(--yt-yel-mid); border-color: var(--yt-yel-dk); }

.yt-kids-btn.yt-kids-primary { background: linear-gradient(135deg,var(--yt-yel),var(--yt-yel-dk)); border-color: transparent; box-shadow: rgba(212, 168, 42, 0.3) 0px 3px 12px; }

.yt-kids-btn.yt-kids-primary:hover { transform: translateY(-1px); box-shadow: rgba(212, 168, 42, 0.4) 0px 5px 18px; }

.yt-sec-label { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; margin-top: 8px; }

.yt-sec-label-line { flex: 1 1 0%; height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, 0.07), transparent); }

.yt-sec-label-text { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-primary); }

.yt-loading { display: none; text-align: center; padding: 32px 20px; }

.yt-loading.visible { display: block; }

.yt-loader { display: inline-flex; gap: 6px; margin-bottom: 12px; }

.yt-loader span { width: 8px; height: 8px; border-radius: 50%; background: var(--yt-yel-dk); animation: 1.2s ease-in-out 0s infinite normal none running ytBounce; }

.yt-loader span:nth-child(2) { animation-delay: 0.15s; }

.yt-loader span:nth-child(3) { animation-delay: 0.3s; }

@keyframes ytBounce { 
  0%, 60%, 100% { transform: translateY(0px); opacity: 0.4; }
  30% { transform: translateY(-10px); opacity: 1; }
}

.yt-loading-p { font-size: 0.86rem; color: var(--brown); }

.yt-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--yt-navy); color: rgb(255, 255, 255); padding: 10px 22px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; z-index: 9999; pointer-events: none; opacity: 0; transition: 0.3s; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 20px; }

.yt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0px); }

@media (max-width: 600px) {
  .yt-hero { padding: 28px 0px 24px; }
  .yt-body-inner { padding: 20px 14px 0px; }
  .yt-card-header, .yt-card-body { padding: 14px 16px; }
  .yt-rc-head, .yt-rc-body { padding: 12px 14px; }
  .yt-fgroup { grid-template-columns: 1fr; }
  .yt-btn-grid { grid-template-columns: 1fr 1fr; }
  .yt-savings-grid { grid-template-columns: 1fr 1fr; }
  .yt-results-hd { flex-direction: column; align-items: flex-start; gap: 12px; }
  .yt-kids-btns { flex-direction: column; }
  .yt-kids-btn { width: 100%; justify-content: center; }
}

@media (max-width: 400px) {
  .yt-btn-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  #mms-sanctuary .container > div { grid-template-columns: 1fr !important; gap: 36px !important; }
  #mms-sanctuary .container > div > div:last-child { grid-template-columns: 1fr 1fr; }
  #mms-profiles .container > div { grid-template-columns: 1fr !important; gap: 32px !important; }
}

@media (max-width: 520px) {
  #mms-sanctuary .container > div > div:last-child { grid-template-columns: 1fr 1fr; gap: 10px; }
}

.hamburger { display: flex; }

.hero-grid, .grid-3, .grid-2, .recipe-grid, .proof-grid, .char-grid { grid-template-columns: 1fr 1fr; }

.hero-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

.dash-grid { grid-template-columns: 1fr; }

:root { --bot-nav-h: 68px; --safe-bot: env(safe-area-inset-bottom, 0px); --nav-total: calc(var(--bot-nav-h) + var(--safe-bot)); }

body { padding-bottom: var(--nav-total); }

.mob-bottom-nav { display: none; position: fixed; bottom: 0px; left: 0px; right: 0px; height: var(--bot-nav-h); padding-bottom: var(--safe-bot); background: rgb(255, 255, 255); border-top: 1px solid rgb(236, 232, 226); z-index: 2000; align-items: stretch; box-shadow: rgba(0, 0, 0, 0.08) 0px -4px 24px; }

.mob-nav-btn { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: none; cursor: pointer; padding: 8px 2px 4px; font-family: inherit; color: rgb(160, 150, 138); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; transition: color 0.18s; -webkit-tap-highlight-color: transparent; position: relative; }

.mob-nav-btn .mob-nav-icon { font-size: 1.35rem; line-height: 1; transition: transform 0.18s; }

.mob-nav-btn.active { color: var(--navy-primary); }

.mob-nav-btn.active .mob-nav-icon { transform: translateY(-2px); }

.mob-nav-btn::after { content: ""; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: 0px; height: 3px; background: var(--navy-primary); border-radius: 0px 0px 3px 3px; transition: width 0.2s; }

.mob-nav-btn.active::after { width: 28px; }

.mob-nav-badge { position: absolute; top: 6px; right: calc(50% - 14px); min-width: 16px; height: 16px; background: rgb(232, 64, 64); border-radius: 50px; font-size: 0.55rem; font-weight: 800; color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; padding: 0px 3px; border: 2px solid rgb(255, 255, 255); }

.page { transition: opacity 0.22s, transform 0.22s; }

.page-exit { opacity: 0; transform: translateY(8px); }

.page-enter { animation: 0.28s ease 0s 1 normal forwards running pageIn; }

@keyframes pageIn { 
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.mob-sticky-cta { display: none; position: fixed; bottom: var(--nav-total); left: 0px; right: 0px; padding: 10px 16px 4px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-top: 1px solid rgb(240, 236, 230); z-index: 1900; gap: 10px; }

.mob-sticky-cta .btn, .mob-sticky-cta .btn-outline { flex: 1 1 0%; text-align: center; padding: 13px 10px; font-size: 0.82rem; }

.rd-grid { touch-action: pan-y; }

.rd-card { transition: transform 0.18s, box-shadow 0.18s; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.rd-card:active { transform: scale(0.97); }

@media (max-width: 768px) {
  .btn, .btn-outline, .btn-ghost { min-height: 44px; padding: 12px 20px; }
  .mk-nav-tab { min-height: 44px; }
  .mood-pill { min-height: 40px; padding: 10px 16px; }
  .rc-card-save { min-height: 40px; }
  #mainNav { display: none !important; }
  .mob-bottom-nav { display: flex; }
  .mob-sticky-cta { display: flex; }
  .container { padding: 0px 14px; }
  .hero { min-height: auto; padding: 28px 1rem 24px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
  -inner { overflow-x: auto; }
  #rdGrid { grid-template-columns: 1fr !important; }
  .mdm-grid { grid-template-columns: 1fr !important; }
  .rc-scroll-track { overflow-x: auto; }
  .footer { margin-bottom: 0px; padding-bottom: calc(var(--nav-total) + 20px); }
  .mk-input, .mk-textarea, select.mk-input { min-height: 44px; font-size: 16px; }
  input, textarea, select { font-size: 16px !important; }
}

#pwaInstallBanner { display: none; position: fixed; bottom: calc(var(--nav-total) + 10px); left: 12px; right: 12px; background: rgb(255, 255, 255); border-radius: 18px; padding: 16px 18px; box-shadow: rgba(0, 0, 0, 0.18) 0px 8px 40px; z-index: 3500; align-items: center; gap: 14px; border: 1.5px solid var(--sage-lt); animation: 0.4s ease 0s 1 normal none running slideUp; }

#pwaInstallBanner.show { display: flex; }

@keyframes slideUp { 
  0% { transform: translateY(60px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}

.pwa-banner-icon { font-size: 2.2rem; flex-shrink: 0; }

.pwa-banner-text { flex: 1 1 0%; }

.pwa-banner-title { font-weight: 800; font-size: 0.88rem; color: var(--char); margin-bottom: 2px; }

.pwa-banner-sub { font-size: 0.72rem; color: var(--brown); }

.pwa-banner-btn { padding: 9px 16px; border-radius: 50px; background: var(--navy-primary); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-weight: 700; font-size: 0.78rem; cursor: pointer; font-family: inherit; white-space: nowrap; }

.pwa-banner-close { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 1.1rem; color: var(--brown); cursor: pointer; padding: 4px; flex-shrink: 0; }

#pushPrompt { display: none; position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.5); z-index: 5000; align-items: flex-end; padding: 20px; }

#pushPrompt.show { display: flex; }

.push-card { background: rgb(255, 255, 255); border-radius: 24px; padding: 28px 24px; width: 100%; max-width: 480px; margin: 0px auto; animation: 0.35s ease 0s 1 normal none running slideUp; }

.push-card-icon { font-size: 3rem; text-align: center; margin-bottom: 12px; }

.push-card-title { font-size: 1.1rem; font-weight: 800; color: var(--char); text-align: center; margin-bottom: 8px; }

.push-card-sub { font-size: 0.85rem; color: var(--brown); text-align: center; line-height: 1.6; margin-bottom: 20px; }

.push-card-items { list-style: none; margin-bottom: 22px; display: flex; flex-direction: column; gap: 8px; }

.push-card-items li { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--char); background: var(--hu-white-mist); border-radius: 10px; padding: 9px 12px; }

.push-card-btns { display: flex; flex-direction: column; gap: 10px; }

.food-feels-wrap *, .food-feels-wrap ::before, .food-feels-wrap ::after { box-sizing: border-box; }

.food-feels-wrap { --ff-sage: #243447; --ff-sage-dk: #2e5c32; --ff-sage-mid: #b8d4ba; --ff-sage-lt: #eef6ee; --ff-cream: #faf8f4; --ff-warm: #f4f1eb; --ff-brown: #4a3c30; --ff-char: #252520; --ff-muted: #7a7060; --ff-border: rgba(36,52,71,0.2); --ff-r: 14px; --ff-r-lg: 22px; --ff-shadow: 0 4px 24px rgba(46,92,50,0.07); --ff-shadow-h: 0 14px 44px rgba(46,92,50,0.13); --ff-tr: all 0.28s cubic-bezier(0.25,0.46,0.45,0.94); --ff-serif: 'Playfair Display', 'Georgia', 'Times New Roman', serif; --ff-sans: 'DM Sans', 'Helvetica Neue', Helvetica, sans-serif; font-family: var(--ff-sans); color: var(--ff-char); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; }

.ff-container { max-width: 1160px; margin: 0px auto; padding: 0px 36px; }

.ff-label { font-family: var(--ff-sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ff-sage); display: block; margin-bottom: 10px; }

.ff-title { font-family: var(--ff-serif); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 600; color: var(--ff-sage-dk); line-height: 1.22; margin-bottom: 14px; }

.ff-sub { font-family: var(--ff-sans); font-size: 1.02rem; font-weight: 300; color: var(--ff-muted); line-height: 1.72; max-width: 560px; }

.ff-divider { width: 44px; height: 2px; background: linear-gradient(90deg, var(--ff-sage), transparent); border-radius: 2px; margin: 10px 0px 24px; }

.ff-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-sans); font-size: 0.8rem; font-weight: 500; color: var(--ff-sage-dk); background: var(--ff-sage-lt); border: 1px solid var(--ff-border); border-radius: 50px; padding: 7px 16px; margin-bottom: 28px; }

.ff-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-sans); font-size: 0.9rem; font-weight: 500; border-radius: 50px; padding: 13px 28px; cursor: pointer; transition: var(--ff-tr); text-decoration: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }

.ff-btn-primary { background: var(--ff-sage-dk); color: rgb(255, 255, 255); }

.ff-btn-primary:hover { background: rgb(30, 62, 33); transform: translateY(-1px); box-shadow: rgba(46, 92, 50, 0.28) 0px 10px 28px; }

.ff-btn-outline { background: transparent; color: var(--ff-sage-dk); border: 1.5px solid var(--ff-sage-dk); }

.ff-btn-outline:hover { background: var(--ff-sage-dk); color: rgb(255, 255, 255); transform: translateY(-1px); }

.ff-btn-light { background: rgb(255, 255, 255); color: var(--ff-sage-dk); padding: 15px 36px; font-size: 0.95rem; }

.ff-btn-light:hover { background: var(--ff-sage-lt); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.18) 0px 12px 32px; }

.ff-hero { background: var(--ff-cream); padding: var(--section-gap-sm) 0 0; overflow: hidden; }

.ff-hero-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; min-height: 360px; }

.ff-hero-left { padding-bottom: 40px; }

.ff-hero-heading { font-family: var(--ff-serif); font-size: clamp(2.2rem, 4.8vw, 3.8rem); font-weight: 600; color: var(--ff-sage-dk); line-height: 1.14; margin-bottom: 22px; letter-spacing: -0.01em; }

.ff-heart { color: rgb(201, 168, 126); font-style: normal; }

.ff-hero-sub { font-family: var(--ff-sans); font-size: 1.06rem; font-weight: 300; color: var(--ff-muted); max-width: 430px; line-height: 1.76; margin-bottom: 16px; }

.ff-hero-italic { font-family: var(--ff-serif); font-style: italic; font-size: 0.98rem; color: var(--ff-sage); max-width: 420px; line-height: 1.7; }

.ff-hero-right { height: 500px; display: flex; align-items: center; justify-content: flex-end; }

.ff-hero-right img { max-width: 100%; max-height: 460px; object-fit: contain; }

.ff-feat-bar { background: rgb(255, 255, 255); border-top: 1px solid var(--ff-border); padding: 0px; margin-top: 0px; }

.ff-feat-bar-grid { display: grid; grid-template-columns: repeat(6, 1fr); }

.ff-feat-item { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 24px 14px; text-align: center; border-right: 1px solid var(--ff-border); cursor: pointer; transition: var(--ff-tr); }

.ff-feat-item:last-child { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; }

.ff-feat-item:hover { background: var(--ff-sage-lt); }

.ff-feat-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--ff-sage-lt); display: flex; align-items: center; justify-content: center; transition: var(--ff-tr); font-size: 1.1rem; }

.ff-feat-item:hover .ff-feat-icon { background: var(--ff-sage-mid); transform: scale(1.08); }

.ff-feat-title { font-family: var(--ff-sans); font-size: 0.76rem; font-weight: 500; color: var(--ff-char); line-height: 1.3; }

.ff-texture { background: var(--ff-warm); padding: var(--section-gap-sm) 0; }

.ff-texture-header { text-align: center; margin-bottom: 52px; }

.ff-texture-header .ff-sub { margin: 0px auto; text-align: center; }

.ff-texture-header .ff-divider { margin: 10px auto 24px; }

.ff-texture-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

.ff-texture-card { background: rgb(255, 255, 255); border: 1.5px solid var(--ff-border); border-radius: var(--ff-r); padding: 28px 16px 24px; text-align: center; cursor: pointer; transition: var(--ff-tr); position: relative; overflow: hidden; }

.ff-texture-card:hover { transform: translateY(-5px); box-shadow: var(--ff-shadow-h); border-color: var(--ff-sage-mid); }

.ff-texture-card.ff-sel { border-color: var(--ff-sage-dk); background: var(--ff-sage-lt); }

.ff-tex-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--ff-sage-lt); display: flex; align-items: center; justify-content: center; margin: 0px auto 13px; font-size: 1.5rem; transition: var(--ff-tr); }

.ff-texture-card:hover .ff-tex-icon { transform: scale(1.12); background: var(--ff-sage-mid); }

.ff-tex-name { font-family: var(--ff-serif); font-size: 0.98rem; font-weight: 600; color: var(--ff-sage-dk); margin-bottom: 5px; }

.ff-tex-desc { font-family: var(--ff-sans); font-size: 0.75rem; font-weight: 300; color: var(--ff-muted); line-height: 1.5; }

.ff-library { background: var(--ff-cream); padding: var(--section-gap-sm) 0; }

.ff-library-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; }

.ff-lib-card { background: rgb(255, 255, 255); border: 1px solid var(--ff-border); border-radius: var(--ff-r-lg); padding: 36px 28px; transition: var(--ff-tr); position: relative; overflow: hidden; }

.ff-lib-card::after { content: ""; position: absolute; bottom: 0px; left: 0px; right: 0px; height: 3px; background: linear-gradient(90deg, var(--ff-sage-dk), var(--ff-sage-mid)); opacity: 0; transition: var(--ff-tr); }

.ff-lib-card:hover { transform: translateY(-3px); box-shadow: var(--ff-shadow-h); }

.ff-lib-card:hover::after { opacity: 1; }

.ff-lib-icon { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 20px; }

.ff-lib-name { font-family: var(--ff-serif); font-size: 1.12rem; font-weight: 600; color: var(--ff-sage-dk); margin-bottom: 8px; }

.ff-lib-desc { font-family: var(--ff-sans); font-size: 0.855rem; font-weight: 300; color: var(--ff-muted); line-height: 1.65; }

.ff-lib-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 18px; font-family: var(--ff-sans); font-size: 0.78rem; font-weight: 500; color: var(--ff-sage); background: var(--ff-sage-lt); padding: 5px 14px; border-radius: 50px; cursor: pointer; transition: var(--ff-tr); }

.ff-lib-cta:hover { background: var(--ff-sage-mid); color: var(--ff-sage-dk); }

.ff-recipes { background: var(--ff-warm); padding: var(--section-gap) 0; }

.ff-filters { display: flex; flex-wrap: wrap; gap: 9px; margin: 36px 0px 44px; }

.ff-chip { font-family: var(--ff-sans); font-size: 0.8rem; font-weight: 400; color: var(--ff-muted); background: rgb(255, 255, 255); border: 1.5px solid var(--ff-border); border-radius: 50px; padding: 7px 17px; cursor: pointer; transition: var(--ff-tr); user-select: none; }

.ff-chip:hover { border-color: var(--ff-sage); color: var(--ff-sage-dk); }

.ff-chip.ff-active { background: var(--ff-sage-dk); color: rgb(255, 255, 255); border-color: var(--ff-sage-dk); }

.ff-recipes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.ff-rec-card { background: rgb(255, 255, 255); border: 1px solid var(--ff-border); border-radius: var(--ff-r-lg); overflow: hidden; transition: var(--ff-tr); }

.ff-rec-card:hover { transform: translateY(-3px); box-shadow: var(--ff-shadow-h); }

.ff-rec-thumb { height: 148px; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; }

.ff-rec-body { padding: 18px 22px 22px; }

.ff-rec-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }

.ff-rec-tag { font-family: var(--ff-sans); font-size: 0.68rem; font-weight: 500; color: var(--ff-sage); background: var(--ff-sage-lt); padding: 3px 10px; border-radius: 50px; }

.ff-rec-name { font-family: var(--ff-serif); font-size: 1.02rem; font-weight: 600; color: var(--ff-sage-dk); margin-bottom: 5px; }

.ff-rec-desc { font-family: var(--ff-sans); font-size: 0.815rem; font-weight: 300; color: var(--ff-muted); line-height: 1.6; }

.ff-profile { background: var(--ff-cream); padding: var(--section-gap) 0; }

.ff-profile-inner { display: grid; grid-template-columns: 1fr 1.05fr; gap: 60px; align-items: start; }

.ff-profile-card { background: rgb(255, 255, 255); border: 1px solid var(--ff-border); border-radius: var(--ff-r-lg); padding: 36px; box-shadow: var(--ff-shadow); }

.ff-profile-card-title { font-family: var(--ff-serif); font-size: 1.05rem; font-weight: 600; color: var(--ff-sage-dk); margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--ff-border); }

.ff-pfields { display: flex; flex-direction: column; gap: 16px; }

.ff-pfield-label { font-family: var(--ff-sans); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ff-muted); margin-bottom: 7px; }

.ff-ptags { display: flex; flex-wrap: wrap; gap: 6px; }

.ff-ptag { font-family: var(--ff-sans); font-size: 0.8rem; padding: 5px 12px; border-radius: 50px; background: var(--ff-sage-lt); color: var(--ff-sage-dk); border: 1px solid var(--ff-border); }

.ff-ptag.ff-avoid { background: rgb(254, 240, 240); color: rgb(176, 64, 64); border-color: rgba(176, 64, 64, 0.15); }

.ff-ptag.ff-neutral { background: var(--ff-warm); color: var(--ff-muted); border-color: var(--ff-border); }

.ff-pdivider { height: 1px; background: var(--ff-border); margin: 2px 0px; }

.ff-profile-cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

.ff-tools { background: linear-gradient(155deg, #edf5ed 0%, var(--ff-warm) 60%, var(--ff-cream) 100%); padding: var(--section-gap) 0; }

.ff-tools-header { text-align: center; margin-bottom: 52px; }

.ff-tools-header .ff-sub { margin: 0px auto; }

.ff-tools-header .ff-divider { margin: 10px auto 24px; }

.ff-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.ff-tool-card { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.88); border-radius: var(--ff-r-lg); padding: 34px 28px; transition: var(--ff-tr); display: flex; flex-direction: column; gap: 12px; }

.ff-tool-card:hover { background: rgb(255, 255, 255); transform: translateY(-4px); box-shadow: var(--ff-shadow-h); }

.ff-tool-icon { width: 52px; height: 52px; border-radius: 13px; background: var(--ff-sage-lt); display: flex; align-items: center; justify-content: center; font-size: 1.45rem; transition: var(--ff-tr); }

.ff-tool-card:hover .ff-tool-icon { background: var(--ff-sage-dk); transform: scale(1.06); }

.ff-tool-name { font-family: var(--ff-serif); font-size: 1.06rem; font-weight: 600; color: var(--ff-sage-dk); }

.ff-tool-desc { font-family: var(--ff-sans); font-size: 0.855rem; font-weight: 300; color: var(--ff-muted); line-height: 1.65; flex: 1 1 0%; }

.ff-tool-link { font-family: var(--ff-sans); font-size: 0.8rem; font-weight: 500; color: var(--ff-sage); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; transition: var(--ff-tr); }

.ff-tool-link:hover { color: var(--ff-sage-dk); gap: 8px; }

.ff-cta { background: var(--ff-sage-dk); padding: var(--section-gap) 0; text-align: center; position: relative; overflow: hidden; }

.ff-cta::before { content: ""; position: absolute; top: -120px; right: -120px; width: 480px; height: 480px; border-radius: 50%; background: rgba(255, 255, 255, 0.043); pointer-events: none; }

.ff-cta::after { content: ""; position: absolute; bottom: -160px; left: -80px; width: 420px; height: 420px; border-radius: 50%; background: rgba(255, 255, 255, 0.03); pointer-events: none; }

.ff-cta-inner { position: relative; z-index: 1; }

.ff-cta-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ff-sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; padding: 7px 16px; margin-bottom: 28px; }

.ff-cta-heading { font-family: var(--ff-serif); font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 600; color: rgb(255, 255, 255); line-height: 1.2; margin-bottom: 18px; }

.ff-cta-text { font-family: var(--ff-sans); font-size: 1.04rem; font-weight: 300; color: rgba(255, 255, 255, 0.72); max-width: 480px; margin: 0px auto 36px; line-height: 1.72; }

@media (max-width: 1024px) {
  .ff-texture-grid { grid-template-columns: repeat(4, 1fr); }
  .ff-feat-bar-grid { grid-template-columns: repeat(3, 1fr); }
  .ff-feat-item:nth-child(3) { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; }
  .ff-feat-item:nth-child(6) { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; }
}

@media (max-width: 860px) {
  .ff-hero-inner { grid-template-columns: 1fr; min-height: auto; }
  .ff-hero-right { height: 300px; order: -1; justify-content: center; }
  .ff-hero-right img { max-height: 280px; }
  .ff-hero-left { padding-bottom: 48px; }
  .ff-library-grid { grid-template-columns: repeat(2, 1fr); }
  .ff-tools-grid { grid-template-columns: repeat(2, 1fr); }
  .ff-recipes-grid { grid-template-columns: repeat(2, 1fr); }
  .ff-profile-inner { grid-template-columns: 1fr; gap: 36px; }
  .ff-texture-grid { grid-template-columns: repeat(3, 1fr); }
  .ff-feat-bar-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .ff-container { padding: 0px 20px; }
  .ff-hero { padding: 56px 0px 0px; }
  .ff-texture-grid { grid-template-columns: repeat(2, 1fr); }
  .ff-library-grid, .ff-tools-grid, .ff-recipes-grid { grid-template-columns: 1fr; }
  .ff-feat-bar-grid { grid-template-columns: repeat(2, 1fr); }
  .ff-feat-item:nth-child(2n) { border-right-width: medium; border-right-style: none; border-right-color: currentcolor; }
  .ff-feat-item { border-right: 1px solid var(--ff-border); }
  .ff-feat-item:nth-child(3) { border-right: 1px solid var(--ff-border); }
  .ff-texture { padding: var(--section-gap) 0; }
  .ff-library, .ff-recipes, .ff-profile, .ff-tools { padding: var(--section-gap) 0; }
  .ff-cta { padding: var(--section-gap) 0; }
}

.ff-feat-bar { background: rgb(255, 255, 255); border-top: 1px solid rgba(36, 52, 71, 0.2); padding: 0px; }

.ff-feat-bar-grid { display: grid; grid-template-columns: repeat(6, 1fr); max-width: 1160px; margin: 0px auto; padding: 0px 36px; }

@media (max-width: 1024px) {
  .ff-feat-bar-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
  .ff-feat-bar-grid { grid-template-columns: repeat(2, 1fr); }
}

.ffp-wizard { background: rgb(255, 255, 255); border: 1px solid var(--ff-border); border-radius: var(--ff-r-lg); box-shadow: var(--ff-shadow); overflow: hidden; }

.ffp-progress-bar { height: 4px; background: var(--ff-sage-lt); position: relative; }

.ffp-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ff-sage-dk), var(--ff-sage)); border-radius: 4px; transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1); }

.ffp-step-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px 16px; border-bottom: 1px solid var(--ff-border); }

.ffp-step-dots { display: flex; gap: 7px; }

.ffp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ff-sage-lt); border: 1.5px solid var(--ff-sage-mid); transition: 0.25s; }

.ffp-dot.ffp-dot-done { background: var(--ff-sage-dk); border-color: var(--ff-sage-dk); }

.ffp-dot.ffp-dot-active { background: var(--ff-sage); border-color: var(--ff-sage-dk); transform: scale(1.3); }

.ffp-step-label { font-family: var(--ff-sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-sage); }

.ffp-steps { position: relative; min-height: 260px; }

.ffp-step { padding: 24px 28px 28px; display: none; }

.ffp-step.ffp-step-active { display: block; }

.ffp-step-title { font-family: var(--ff-serif); font-size: 1.1rem; font-weight: 600; color: var(--ff-sage-dk); margin-bottom: 6px; }

.ffp-step-hint { font-size: 0.8rem; font-weight: 300; color: var(--ff-muted); margin-bottom: 18px; line-height: 1.55; }

.ffp-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }

.ffp-chip { font-family: var(--ff-sans); font-size: 0.8rem; font-weight: 400; padding: 7px 15px; border-radius: 50px; border: 1.5px solid var(--ff-border); background: var(--ff-warm); color: var(--ff-char); cursor: pointer; transition: 0.22s; user-select: none; }

.ffp-chip:hover { border-color: var(--ff-sage); background: var(--ff-sage-lt); }

.ffp-chip.ffp-chip-selected { background: var(--ff-sage-dk); color: rgb(30, 45, 61); border-color: var(--ff-sage-dk); }

.ffp-chip.ffp-chip-avoid.ffp-chip-selected { background: rgb(192, 80, 80); border-color: rgb(192, 80, 80); }

.ffp-temp-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 8px; }

.ffp-temp-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 14px; border: 1.5px solid var(--ff-border); background: var(--ff-warm); cursor: pointer; transition: 0.22s; font-size: 0.78rem; font-weight: 400; color: var(--ff-char); font-family: var(--ff-sans); }

.ffp-temp-btn span:first-child { font-size: 1.5rem; }

.ffp-temp-btn:hover { border-color: var(--ff-sage); background: var(--ff-sage-lt); }

.ffp-temp-btn.ffp-chip-selected { background: var(--ff-sage-dk); color: rgb(255, 255, 255); border-color: var(--ff-sage-dk); }

.ffp-safe-input-row { display: flex; gap: 8px; margin-bottom: 12px; }

.ffp-safe-input { flex: 1 1 0%; font-family: var(--ff-sans); font-size: 0.85rem; padding: 10px 16px; border: 1.5px solid var(--ff-border); border-radius: 50px; background: var(--ff-warm); color: var(--ff-char); outline: none; transition: border-color 0.2s; }

.ffp-safe-input:focus { border-color: var(--ff-sage); }

.ffp-safe-add-btn { font-family: var(--ff-sans); font-size: 0.82rem; font-weight: 500; padding: 10px 18px; background: var(--ff-sage-lt); color: var(--ff-sage-dk); border: 1.5px solid var(--ff-sage-mid); border-radius: 50px; cursor: pointer; transition: 0.2s; white-space: nowrap; }

.ffp-safe-add-btn:hover { background: var(--ff-sage-dk); color: rgb(255, 255, 255); border-color: var(--ff-sage-dk); }

.ffp-safe-foods-list { display: flex; flex-wrap: wrap; gap: 7px; min-height: 32px; }

.ffp-safe-food-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; padding: 5px 12px; background: var(--ff-sage-lt); border: 1px solid var(--ff-border); border-radius: 50px; color: var(--ff-sage-dk); }

.ffp-safe-food-remove { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; color: var(--ff-muted); font-size: 0.85rem; padding: 0px; line-height: 1; transition: color 0.2s; }

.ffp-safe-food-remove:hover { color: rgb(192, 80, 80); }

.ffp-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px 24px; border-top: 1px solid var(--ff-border); }

.ffp-nav-back { font-family: var(--ff-sans); font-size: 0.82rem; font-weight: 400; color: var(--ff-muted); background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; padding: 8px 0px; transition: color 0.2s; display: flex; align-items: center; gap: 5px; }

.ffp-nav-back:hover { color: var(--ff-sage-dk); }

.ffp-nav-back:disabled { opacity: 0.3; cursor: default; }

.ffp-nav-next { font-family: var(--ff-sans); font-size: 0.88rem; font-weight: 500; color: rgb(255, 255, 255); background: var(--ff-sage-dk); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 11px 26px; cursor: pointer; transition: 0.22s; display: flex; align-items: center; gap: 6px; }

.ffp-nav-next:hover { background: rgb(30, 62, 33); transform: translateY(-1px); box-shadow: rgba(46, 92, 50, 0.25) 0px 8px 22px; }

.ffp-summary { display: flex; flex-direction: column; gap: 14px; }

.ffp-summary-row { display: flex; flex-direction: column; gap: 5px; }

.ffp-summary-row-label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-sage); }

.ffp-summary-row-tags { display: flex; flex-wrap: wrap; gap: 6px; }

.ffp-summary-tag { font-size: 0.78rem; padding: 4px 12px; border-radius: 50px; background: var(--ff-sage-lt); color: var(--ff-sage-dk); border: 1px solid var(--ff-border); }

.ffp-summary-tag.ffp-avoided { background: rgb(254, 240, 240); color: rgb(192, 80, 80); border-color: rgba(192, 80, 80, 0.2); }

.ffp-summary-divider { height: 1px; background: var(--ff-border); }

.ffp-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }

.ffp-btn-primary { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-sans); font-size: 0.88rem; font-weight: 500; color: rgb(255, 255, 255); background: var(--ff-sage-dk); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; padding: 13px 24px; cursor: pointer; transition: 0.25s; text-decoration: none; }

.ffp-btn-primary:hover { background: rgb(30, 62, 33); transform: translateY(-1px); box-shadow: rgba(46, 92, 50, 0.25) 0px 8px 22px; }

.ffp-btn-outline { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-sans); font-size: 0.88rem; font-weight: 500; color: var(--ff-sage-dk); background: transparent; border: 1.5px solid var(--ff-sage-dk); border-radius: 50px; padding: 12px 24px; cursor: pointer; transition: 0.25s; text-decoration: none; }

.ffp-btn-outline:hover { background: var(--ff-sage-dk); color: rgb(255, 255, 255); transform: translateY(-1px); }

.ffp-btn-add { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-sans); font-size: 0.88rem; font-weight: 500; color: var(--ff-sage-dk); background: var(--ff-sage-lt); border: 1.5px solid var(--ff-sage-mid); border-radius: 50px; padding: 12px 24px; cursor: pointer; transition: 0.25s; text-decoration: none; }

.ffp-btn-add:hover { background: var(--ff-sage-dk); color: rgb(255, 255, 255); border-color: var(--ff-sage-dk); transform: translateY(-1px); }

.ffp-auth-gate { position: fixed; inset: 0px; background: rgba(20, 32, 20, 0.55); backdrop-filter: blur(7px); z-index: 9100; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.28s; }

.ffp-auth-gate.ffp-gate-open { opacity: 1; pointer-events: all; }

.ffp-auth-card { background: rgb(255, 255, 255); border-radius: 26px; max-width: 440px; width: 100%; padding: 44px 40px 40px; box-shadow: rgba(0, 0, 0, 0.2) 0px 28px 70px; text-align: center; transform: scale(0.94) translateY(12px); transition: transform 0.32s cubic-bezier(0.34, 1.04, 0.64, 1); position: relative; }

.ffp-auth-gate.ffp-gate-open .ffp-auth-card { transform: scale(1) translateY(0px); }

.ffp-auth-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--ff-cream); border: 1px solid var(--ff-border); cursor: pointer; font-size: 1rem; color: var(--ff-brown); display: flex; align-items: center; justify-content: center; transition: 0.2s; line-height: 1; }

.ffp-auth-close:hover { background: var(--ff-sage-dk); color: rgb(255, 255, 255); border-color: var(--ff-sage-dk); }

.ffp-auth-icon { font-size: 2.6rem; margin-bottom: 14px; }

.ffp-auth-title { font-family: var(--ff-serif); font-size: 1.5rem; font-weight: 600; color: var(--ff-sage-dk); margin-bottom: 10px; }

.ffp-auth-sub { font-size: 0.88rem; font-weight: 300; color: var(--ff-muted); line-height: 1.65; margin-bottom: 26px; }

.ffp-auth-btns { display: flex; flex-direction: column; gap: 10px; }

.ffp-auth-btn-signin { width: 100%; padding: 13px 20px; background: var(--ff-sage-dk); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; font-family: var(--ff-sans); font-size: 0.92rem; font-weight: 500; cursor: pointer; transition: 0.22s; }

.ffp-auth-btn-signin:hover { background: rgb(30, 62, 33); box-shadow: rgba(46, 92, 50, 0.25) 0px 8px 22px; }

.ffp-auth-btn-guest { width: 100%; padding: 12px 20px; background: transparent; color: var(--ff-sage-dk); border: 1.5px solid var(--ff-sage-mid); border-radius: 50px; font-family: var(--ff-sans); font-size: 0.88rem; font-weight: 400; cursor: pointer; transition: 0.22s; }

.ffp-auth-btn-guest:hover { background: var(--ff-sage-lt); border-color: var(--ff-sage-dk); }

.ffp-auth-note { font-size: 0.72rem; color: var(--ff-muted); margin-top: 14px; line-height: 1.5; }

@media (max-width: 600px) {
  .ffp-temp-options { grid-template-columns: repeat(2, 1fr); }
  .ffp-nav { padding: 14px 18px 20px; }
  .ffp-step { padding: 20px 18px 22px; }
  .ffp-step-header { padding: 16px 18px 12px; }
  .ffp-cta-row { flex-direction: column; }
  .ffp-auth-card { padding: 36px 24px 30px; }
}

.fftool-overlay { display: none; position: fixed; inset: 0px; background: rgba(20, 34, 20, 0.55); z-index: 99999; align-items: center; justify-content: center; padding: 20px; }

.fftool-overlay.fftool-open { display: flex; }

.fftool-modal { background: rgb(255, 255, 255); border-radius: 26px; max-width: 520px; width: 100%; max-height: 88vh; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.25) 0px 32px 80px; position: relative; scrollbar-width: thin; animation: 0.3s cubic-bezier(0.34, 1.04, 0.64, 1) 0s 1 normal none running fftoolIn; }

@keyframes fftoolIn { 
  0% { transform: scale(0.92) translateY(16px); opacity: 0; }
  100% { transform: scale(1) translateY(0px); opacity: 1; }
}

.fftool-close-btn { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--hu-white-mist); border: 1px solid rgba(36, 52, 71, 0.25); cursor: pointer; font-size: 1rem; color: rgb(91, 100, 112); display: flex; align-items: center; justify-content: center; transition: 0.2s; line-height: 1; z-index: 2; }

.fftool-close-btn:hover { background: rgb(49, 70, 95); color: rgb(255, 255, 255); border-color: rgb(49, 70, 95); }

.fftool-header { padding: 36px 36px 22px; border-bottom: 1px solid rgba(36, 52, 71, 0.18); display: flex; align-items: center; gap: 18px; }

.fftool-icon { width: 68px; height: 68px; border-radius: 18px; background: rgb(221, 229, 216); display: flex; align-items: center; justify-content: center; font-size: 2rem; flex-shrink: 0; }

.fftool-title { font-family: "Playfair Display", Georgia, serif; font-size: 1.55rem; font-weight: 600; color: rgb(49, 70, 95); margin-bottom: 6px; line-height: 1.15; }

.fftool-sub { font-size: 0.875rem; font-weight: 300; color: rgb(122, 112, 96); line-height: 1.65; }

.fftool-body { padding: 28px 36px 36px; }

@media (max-width: 600px) {
  .fftool-header { padding: 28px 20px 18px; flex-direction: column; text-align: center; }
  .fftool-body { padding: 20px 20px 28px; }
  .fftool-title { font-size: 1.3rem; }
}

.fflib-overlay { display: none; position: fixed; inset: 0px; background: rgba(20, 34, 20, 0.52); z-index: 99999; align-items: center; justify-content: center; padding: 20px; }

.fflib-overlay.fflib-open { display: flex; }

.fflib-modal { background: rgb(255, 255, 255); border-radius: 26px; max-width: 500px; width: 100%; max-height: 86vh; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.22) 0px 32px 80px; position: relative; scrollbar-width: thin; animation: 0.28s cubic-bezier(0.34, 1.04, 0.64, 1) 0s 1 normal none running fflibIn; }

@keyframes fflibIn { 
  0% { transform: scale(0.93) translateY(14px); opacity: 0; }
  100% { transform: scale(1) translateY(0px); opacity: 1; }
}

.fflib-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: var(--hu-white-mist); border: 1px solid rgba(36, 52, 71, 0.22); cursor: pointer; font-size: 1rem; color: rgb(91, 100, 112); display: flex; align-items: center; justify-content: center; transition: 0.2s; z-index: 2; }

.fflib-close:hover { background: rgb(49, 70, 95); color: rgb(255, 255, 255); border-color: rgb(49, 70, 95); }

.fflib-header { padding: 32px 32px 20px; border-bottom: 1px solid rgba(36, 52, 71, 0.15); display: flex; align-items: center; gap: 16px; }

.fflib-header-icon { width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; flex-shrink: 0; }

.fflib-header-title { font-family: "Playfair Display", Georgia, serif; font-size: 1.45rem; font-weight: 600; color: rgb(49, 70, 95); margin-bottom: 4px; line-height: 1.15; }

.fflib-header-sub { font-size: 0.83rem; font-weight: 300; color: rgb(122, 112, 96); line-height: 1.6; }

.fflib-body { padding: 22px 32px 32px; }

.fflib-input-row { display: flex; gap: 8px; margin-bottom: 16px; }

.fflib-input { flex: 1 1 0%; font-family: inherit; font-size: 0.88rem; padding: 10px 16px; border: 1.5px solid rgba(36, 52, 71, 0.25); border-radius: 50px; background: var(--hu-white-mist); color: rgb(43, 43, 43); outline: none; transition: border-color 0.2s; }

.fflib-input:focus { border-color: rgb(36, 52, 71); }

.fflib-add-btn { font-family: inherit; font-size: 0.83rem; font-weight: 500; padding: 10px 18px; background: rgb(49, 70, 95); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50px; cursor: pointer; transition: 0.2s; white-space: nowrap; }

.fflib-add-btn:hover { background: rgb(46, 92, 50); }

.fflib-section-label { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(36, 52, 71); margin-bottom: 10px; }

.fflib-list { display: flex; flex-direction: column; gap: 7px; min-height: 32px; margin-bottom: 16px; }

.fflib-item { display: flex; align-items: center; justify-content: space-between; background: rgb(244, 249, 244); border: 1px solid rgba(36, 52, 71, 0.2); border-radius: 10px; padding: 9px 14px; font-size: 0.875rem; color: rgb(43, 43, 43); animation: 0.2s ease 0s 1 normal none running fflibSlideIn; }

@keyframes fflibSlideIn { 
  0% { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.fflib-item-remove { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; cursor: pointer; color: rgb(176, 160, 144); font-size: 1rem; padding: 0px 0px 0px 10px; transition: color 0.2s; line-height: 1; }

.fflib-item-remove:hover { color: rgb(192, 80, 80); }

.fflib-empty { font-size: 0.83rem; font-style: italic; color: rgb(176, 160, 144); text-align: center; padding: 16px 0px; }

.fflib-suggestions { display: flex; flex-wrap: wrap; gap: 7px; }

.fflib-suggestion { font-size: 0.78rem; padding: 5px 13px; border-radius: 50px; background: rgb(255, 255, 255); border: 1.5px solid rgba(36, 52, 71, 0.25); color: rgb(49, 70, 95); cursor: pointer; transition: 0.18s; }

.fflib-suggestion:hover { background: rgb(49, 70, 95); color: rgb(255, 255, 255); border-color: rgb(49, 70, 95); }

.fflib-hint { background: rgb(255, 255, 255); border: 1px solid rgba(184, 212, 186, 0.6); border-radius: 14px; padding: 14px 16px; margin-top: 18px; font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: 0.88rem; color: rgb(49, 70, 95); line-height: 1.6; }

@media (max-width: 560px) {
  .fflib-header { padding: 26px 20px 16px; flex-direction: column; text-align: center; }
  .fflib-body { padding: 18px 20px 26px; }
}

.nav-label { font-size: clamp(0.72rem, 1vw, 0.88rem) !important; padding: 6px 8px !important; }

@media (max-width: 1100px) {
  .nav-label { font-size: 0.72rem !important; padding: 5px 6px !important; }
}

@media (max-width: 960px) {
  #mainNav .nav-item:not(:nth-child(-n+6)) { display: none; }
}

.site-header { position: relative; z-index: 20; }

.page-shell { position: relative; z-index: 1; padding-top: 0px; }

.page-hero { padding: 42px 24px 38px; margin: 0px auto; }

.page-content { padding: 32px 24px 56px; }

.section-block { margin: 0px auto 42px; }

.section-heading { font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; margin: 0px 0px 14px; }

.section-intro { margin: 0px auto 24px; max-width: 720px; }

@media (max-width: 768px) {
  .page-hero { padding: 28px 18px 26px; }
  .page-content { padding: 24px 18px 42px; }
  .section-block { margin-bottom: 32px; }
}

.sl { margin-bottom: 6px; }

.h2 { margin-bottom: 10px; }

.newsletter h2 { font-size: 1.7rem; margin-bottom: 8px; }

.discover-hero, #page-discover .hero, .discover-header { overflow: hidden; background: rgb(255, 255, 255) !important; min-height: auto !important; padding: 28px 1.5rem 26px !important; }

.discover-hero img, .discover-header img, #page-discover .hero img { width: 100%; max-width: 100%; display: block; margin: 0px auto; height: clamp(320px, 34vw, 480px) !important; object-fit: contain !important; object-position: center center !important; background: rgb(255, 255, 255) !important; }

@media (max-width: 768px) {
  .discover-hero img, .discover-header img, #page-discover .hero img { height: clamp(220px, 48vw, 320px) !important; }
}

#page-discover .hero, .discover-hero, .discover-header { padding: 10px 1.5rem 8px !important; min-height: auto !important; background: rgb(255, 255, 255) !important; }

#page-discover .hero-grid { gap: 18px !important; align-items: center !important; }

#page-discover .hero img, .discover-hero img, .discover-header img { height: clamp(140px, 18vw, 220px) !important; width: 100% !important; object-fit: contain !important; margin: 0px auto !important; display: block !important; background: rgb(255, 255, 255) !important; }

#page-discover .hero .h1 { margin-bottom: 8px !important; }

#page-discover .hero .sub { margin-bottom: 0px !important; line-height: 1.55 !important; }

@media (max-width: 768px) {
  #page-discover .hero, .discover-hero, .discover-header { padding: 6px 1rem 4px !important; }
  #page-discover .hero img, .discover-hero img, .discover-header img { height: clamp(110px, 28vw, 160px) !important; }
}

#page-home #home-hero-wrap { background: rgb(255, 255, 255) !important; width: 100vw !important; margin-left: calc(50% - 50vw) !important; padding-left: 0px !important; padding-right: 0px !important; overflow: hidden !important; }

#page-home #home-hero-img-box { line-height: 0; background: rgb(255, 255, 255) !important; width: 100% !important; padding: 0px !important; margin: 0px !important; }

#page-home #home-hero-img-box img { max-height: none !important; width: 100% !important; height: auto !important; object-fit: fill !important; display: block !important; }

@media (max-width: 768px) {
  #page-home #home-hero-img-box img { width: 100% !important; height: auto !important; }
}

.prs-pill { display: flex; align-items: center; gap: 6px; padding: 6px 14px 6px 8px; border-radius: 50px; border: 2px solid transparent; background: var(--hu-white-mist); font-size: 0.78rem; font-weight: 700; color: var(--brown); cursor: pointer; transition: 0.18s; white-space: nowrap; font-family: inherit; }

.prs-pill:hover { background: var(--sage-lt); border-color: var(--sage-lt); color: var(--char); }

.prs-pill.active { background: var(--navy-primary); border-color: var(--navy-primary); color: rgb(255, 255, 255); }

.prs-pill-avatar { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; background: rgba(255, 255, 255, 0.5); }

.rd-profile-match { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 4px; background: rgba(255, 255, 255, 0.92); border-radius: 50px; padding: 3px 9px 3px 5px; font-size: 0.62rem; font-weight: 800; color: var(--navy-primary); backdrop-filter: blur(6px); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; }

.rd-profile-match.warn { color: rgb(192, 90, 32); }

.rd-kids-prompt { position: absolute; bottom: 0px; left: 0px; right: 0px; background: linear-gradient(0deg, rgba(26, 42, 28, 0.88), transparent); padding: 16px 14px 10px; border-radius: 0px 0px 18px 18px; }

.rd-kids-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 200, 50, 0.95); color: rgb(58, 40, 0); border-radius: 50px; padding: 3px 10px; font-size: 0.65rem; font-weight: 800; margin-bottom: 5px; }

.rd-kids-step { font-size: 0.7rem; color: rgba(255, 255, 255, 0.9); line-height: 1.4; }

.cook-as-bar { background: rgb(255, 255, 255); border-bottom: 1px solid rgb(236, 232, 226); padding: 10px 0px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.prs-manager-overlay { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.5); z-index: 5000; display: none; align-items: center; justify-content: center; padding: 16px; }

.prs-manager-overlay.open { display: flex; }

.prs-manager-modal { background: rgb(255, 255, 255); border-radius: 24px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.2) 0px 32px 100px; }

.prs-manager-head { padding: 24px 28px 16px; border-bottom: 1px solid rgb(240, 236, 230); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0px; background: rgb(255, 255, 255); z-index: 1; border-radius: 24px 24px 0px 0px; }

.prs-manager-body { padding: 20px 28px 28px; }

.prs-profile-row { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--hu-white-mist); border-radius: 16px; margin-bottom: 10px; cursor: pointer; transition: background 0.18s; border: 2px solid transparent; }

.prs-profile-row:hover { background: rgb(236, 232, 226); }

.prs-profile-row.selected { border-color: var(--navy-primary); background: var(--sage-lt); }

.prs-profile-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; }

.prs-profile-info { flex: 1 1 0%; min-width: 0px; }

.prs-profile-name { font-weight: 800; font-size: 0.92rem; color: var(--char); margin-bottom: 3px; }

.prs-profile-tags { display: flex; gap: 4px; flex-wrap: wrap; }

.prs-tag { font-size: 0.6rem; font-weight: 700; padding: 2px 7px; border-radius: 50px; background: rgba(36, 52, 71, 0.15); color: var(--navy-primary); }

.prs-tag.allergy { background: rgb(242, 223, 223); color: rgb(192, 90, 32); }

.prs-tag.mood { background: rgb(221, 229, 216); color: rgb(90, 74, 138); }

.prs-edit-form { display: none; }

.prs-edit-form.open { display: block; }

.prs-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }

.prs-form-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brown); margin-bottom: 5px; }

.prs-checkbox-group { display: flex; flex-wrap: wrap; gap: 6px; }

.prs-checkbox-btn { padding: 5px 10px; border-radius: 50px; border: 1.5px solid rgb(221, 221, 221); background: rgb(255, 255, 255); font-size: 0.7rem; font-weight: 700; cursor: pointer; font-family: inherit; color: var(--brown); transition: 0.15s; }

.prs-checkbox-btn.on { background: var(--navy-primary); border-color: var(--navy-primary); color: rgb(255, 255, 255); }

@media (max-width: 540px) {
  .prs-form-grid { grid-template-columns: 1fr; }
  .prs-manager-modal { border-radius: 20px; }
}