* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  color-scheme: light;
  --navbar-h: 76px;
  --category-tabs-h: 0px;
  --screen-top-offset: var(--navbar-h);
}

[data-theme="light"] {
  --bg: #f6f4ec;
  --bg-soft: #f6f4ec;
  --panel: #f6f4ec;
  --panel-strong: #f6f4ec;
  --surface: #f6f4ec;
  --surface-alt: #eeecE4;
  --text: #1c1c1a;
  --text-muted: #4a4a45;
  --text-soft: #6e6e68;
  --border: rgba(28, 28, 26, 0.12);
  --border-strong: rgba(16, 132, 126, 0.24);
  --primary: #10847e;
  --primary-dark: #0d6d68;
  --primary-soft: rgba(16, 132, 126, 0.1);
  --accent: #ffb648;
  --shadow: rgba(20, 18, 10, 0.08);
  --hero-glow: none;
  --body-bg: #f6f4ec;
  --logo-ink: #111b32;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1d23;
  --bg-soft: #162930;
  --panel: rgba(17, 32, 39, 0.96);
  --panel-strong: #122229;
  --surface: rgba(20, 37, 45, 0.96);
  --surface-alt: rgba(26, 48, 57, 0.82);
  --text: #edf4f3;
  --text-muted: #b7c3c8;
  --text-soft: #92a4ab;
  --border: rgba(237, 244, 243, 0.1);
  --border-strong: rgba(27, 193, 182, 0.28);
  --primary: #37b9b0;
  --primary-dark: #28a19a;
  --primary-soft: rgba(55, 185, 176, 0.12);
  --accent: #ffc45e;
  --shadow: rgba(0, 0, 0, 0.28);
  --hero-glow: radial-gradient(circle at top, rgba(55, 185, 176, 0.12), transparent 48%);
  --body-bg: linear-gradient(180deg, #0f1d23 0%, #13242c 100%);
  --logo-ink: #f1ebde;
}

html,
body {
  min-height: 100%;
  width: 100%;
  overflow-x: clip;
}

body {
  background: var(--body-bg);
  color: var(--text);
  font-family: "Nunito Sans", sans-serif;
  transition: background 0.25s ease, color 0.25s ease;
}

h1,
h2,
h3 {
  font-family: "Nunito Sans", sans-serif;
}

img {
  max-width: 100%;
}

button,
input {
  font: inherit;
  min-width: 0;
}

a {
  color: inherit;
}

#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;
}

.container {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}

.landing-hero .container {
  width: min(1120px, calc(100% - 2rem));
}

.text-muted {
  color: var(--text-muted);
}

.hidden {
  display: none !important;
}

.screen {
  display: none;
  min-height: 100vh;
  padding-top: 136px;
}

.screen.active {
  display: block;
}

.protocols-page-shell {
  padding-bottom: 3.5rem;
}

.protocols-page-section {
  padding-top: 1rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow:empty,
#hero-eyebrow {
  display: none !important;
}

/* ── Site Header (pill nav) ─────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 0.75rem 1.5rem;
  pointer-events: none;
}

.navbar-pill {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 auto;
  max-width: 1000px;
  height: 65px;
  background: rgba(17, 27, 50, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 22px;
  padding: 0 0.75rem 0 1.3125rem; /* right: 12px, left: 21px */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.22);
  pointer-events: all;
}

/* Logo */
.nav-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo-img {
  height: 30px;
  width: auto;
}

/* Go2 wordmark */
.gh-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: "Comfortaa", "Nunito Sans", system-ui, sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: inherit;
  user-select: none;
  white-space: nowrap;
}
.gh-wordmark sub {
  font-size: 0.58em;
  font-weight: inherit;
  line-height: 1;
  vertical-align: baseline;
  position: relative;
  bottom: -0.08em;
  margin-left: 0.03em;
}

/* Footer copyright line and version tag reuse plain-text subscript
   without the full wordmark typography — smaller shift so "go₂ v1.00"
   reads inline cleanly. */
.footer-copy sub,
.version-tag sub,
.footer-bottom-brand sub {
  font-size: 0.72em;
  font-weight: inherit;
  line-height: 1;
  vertical-align: baseline;
  position: relative;
  bottom: -0.15em;
  margin-left: 0.02em;
}

/* "Sobre a go₂" / "About go₂" — the eyebrow parent is uppercase +
   letter-spaced 0.22em, which would push the subscript miles away and
   render "GO 2". Wrap the brand in .brand-mark to reset both rules so
   "go₂" reads as a tight, lowercase mark inside the letter-spaced label. */
.av-eyebrow .brand-mark {
  text-transform: none;
  letter-spacing: 0;
  /* Noticeably larger than the uppercase letter-spaced neighbors so the
     brand mark reads as the emphasis of the eyebrow, not an afterthought. */
  font-size: 1.75em;
  font-weight: 800;
  line-height: 1;
  margin-left: 0.3em;
  position: relative;
  top: 0.04em;
}
.av-eyebrow .brand-mark sub {
  font-size: 0.6em;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: baseline;
  position: relative;
  bottom: -0.12em;
  margin-left: 0.02em;
}

/* "A go₂ acredita..." lede body copy: use a slightly more visible drop
   than the browser default for consistency with the wordmark treatment. */
.li-lede sub {
  font-size: 0.7em;
  line-height: 1;
  vertical-align: baseline;
  position: relative;
  bottom: -0.18em;
  margin-left: 0.02em;
}

.nav-logo .gh-wordmark,
.nav-logo-img.gh-wordmark {
  font-size: 1.55rem;
  color: #edf4f3;
}

.auth-gate-logo.gh-wordmark {
  font-size: 2.4rem;
}

.auth-logo.gh-wordmark {
  font-size: 2rem;
}

.footer-logo.gh-wordmark {
  font-size: 2.2rem;
}

/* Footer brand mark (image version, same asset as the nav pill). */
.footer-brand-logo {
  height: 42px;
  width: auto;
  display: block;
  margin: 0 0 1rem;
}
[data-theme="dark"] .footer-brand-logo,
[data-theme="light"] .footer-brand-logo {
  /* Asset is cream-on-transparent; the footer is navy in both themes so
     no theme-specific swap needed. */
  filter: none;
}

.footer-bottom-logo.gh-wordmark {
  font-size: 1rem;
}

.pb-sachet-render-logo-img.gh-wordmark {
  font-size: 1.35rem;
  color: #111b32;
}

/* Middle nav links */
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem; /* 32px — matches CLD9 gap-8 */
  flex: 1;
  margin-left: 2rem;
}

.nav-pill-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  background: transparent;
  border: none;
  color: #f1ebde;
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.nav-pill-link:hover {
  color: #ffffff;
}

.nav-pill-link.active {
  color: #ffffff;
}

.nav-pill-link-accent {
  color: #dff726;
}

.nav-pill-link-accent:hover {
  color: #e8ff5c;
}

.nav-pill-link-accent.active {
  color: #dff726;
}

.nav-pill-link .lia-orb {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* Right actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  margin-left: auto;
  flex-shrink: 0;
}

/* Account icon button */
.nav-account-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.nav-account-icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* CTA button */
.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 40px;
  padding: 0 1.5rem;
  background: #dff726;
  color: #111b32;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.nav-cta-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* Cart icon button */
.nav-cart-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.1); /* white/10 — matches CLD9 */
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.nav-cart-icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.nav-cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: #dff726;
  color: #111b32;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ==========================================================================
   Mobile nav — hamburger + dropdown (≤ 760px)
   ========================================================================== */

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.nav-mobile-toggle:hover {
  background: rgba(255, 255, 255, 0.18);
}

.nav-mobile-toggle.is-open {
  background: rgba(255, 255, 255, 0.22);
}

/* Dropdown panel */
.nav-mobile-menu {
  display: none;
  position: absolute;
  top: calc(65px + 0.75rem + 8px); /* navbar height + header padding + gap */
  left: 1.5rem;
  right: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
  background: rgba(17, 27, 50, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 18px;
  padding: 0.5rem;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.35);
  z-index: 950;
  pointer-events: auto;
  animation: navMobileMenuIn 0.18s ease both;
}

@keyframes navMobileMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-mobile-menu.hidden { display: none; }

.nav-mobile-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  background: transparent;
  border: none;
  color: #f1ebde;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
  transition: background 0.12s ease;
}

.nav-mobile-item:hover,
.nav-mobile-item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.nav-mobile-item.is-cta {
  background: #dff726;
  color: #111b32;
  font-weight: 700;
  margin: 0.25rem 0;
}

.nav-mobile-item.is-cta:hover {
  background: #e8ff5c;
}

.nav-mobile-item.is-danger {
  color: #ff9b9b;
}

.nav-mobile-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.35rem 0.5rem;
}

.nav-mobile-account-label {
  padding: 0.5rem 1rem 0.1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.nav-mobile-account-email {
  padding: 0 1rem 0.5rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  word-break: break-all;
}

/* Breakpoint: collapse nav into hamburger on small screens */
@media (max-width: 760px) {
  .nav-links,
  .nav-cta-btn,
  #nav-auth,
  #nav-profile {
    display: none !important;
  }

  .nav-mobile-toggle {
    display: inline-flex;
  }

  .nav-mobile-menu:not(.hidden) {
    display: block;
  }
}

/* nav-profile needs relative for dropdown */
.nav-profile {
  position: relative;
}

.lang-toggle {
  min-width: 84px;
  text-align: center;
}

.language-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.language-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 42px;
  padding: 0.55rem 0.7rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.language-trigger:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.language-trigger-code {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.language-trigger-caret {
  font-size: 0.82rem;
  color: var(--text-soft);
}

.language-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 250px;
  padding: 0.6rem 0;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(20, 53, 70, 0.12);
  z-index: 140;
}

[data-theme="dark"] .language-menu {
  background: #162930;
  color: #edf4f3;
  border-color: rgba(237, 244, 243, 0.1);
}

[data-theme="dark"] .language-option:hover {
  background: rgba(237, 244, 243, 0.06);
}

[data-theme="dark"] .language-option-radio {
  border-color: rgba(237, 244, 243, 0.28);
}

[data-theme="dark"] .language-menu-divider {
  background: rgba(237, 244, 243, 0.08);
}

[data-theme="dark"] .language-option-copy span {
  color: #b7c3c8;
}

[data-theme="dark"] .language-menu-note {
  color: #edf4f3;
}

[data-theme="dark"] .language-menu-note span:not(.lang-flag-emoji) {
  color: #b7c3c8;
}

[data-theme="dark"] .language-menu-note a {
  color: #37b9b0;
}

.lang-flag-emoji {
  font-size: 1.15rem;
  line-height: 1;
}

.language-option {
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  text-align: left;
  cursor: pointer;
}

.language-option:hover {
  background: rgba(17, 27, 50, 0.04);
}

.language-option-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(17, 27, 50, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.language-option.active .language-option-radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff7a1a;
}

.language-option-copy {
  display: grid;
  gap: 0.08rem;
}

.language-option-copy strong {
  font-size: 0.95rem;
  font-weight: 600;
}

.language-option-copy span {
  font-size: 0.83rem;
  color: #5a6478;
}

.language-menu-divider {
  height: 1px;
  background: rgba(17, 27, 50, 0.08);
  margin: 0.35rem 1rem;
}

.language-menu-note {
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem 1rem 0.35rem;
  color: #111b32;
}

.language-menu-note strong {
  display: block;
  font-size: 0.9rem;
  line-height: 1.35;
  margin-bottom: 0.2rem;
}

.language-menu-note a {
  color: #0a63ce;
  font-size: 0.9rem;
  text-decoration: none;
}

.language-menu-note span:not(.lang-flag-emoji) {
  color: #5a6478;
  font-size: 0.9rem;
}

/* Theme toggle (dark/light mode button) — used in the footer */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border, #dbe2ee);
  border-radius: 12px;
  background: #ffffff;
  color: #1c1c1a;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.theme-toggle .theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.theme-toggle:hover,
.btn-text:hover,
.profile-trigger:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

[data-theme="dark"] .theme-toggle {
  background: #111b32;
  border-color: rgba(237, 244, 243, 0.18);
  color: #edf4f3;
}

.nav-profile {
  position: relative;
}

.nav-auth {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: var(--bg);
  font-weight: 800;
}

.avatar-large {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

.profile-dropdown {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  width: 240px;
  padding: 0.75rem;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 16px 30px var(--shadow);
}

.dropdown-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 0.35rem;
}

.dropdown-email {
  padding-bottom: 0.85rem;
  margin-bottom: 0.65rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.9rem;
  word-break: break-word;
}

.profile-dropdown button {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0.85rem 0.75rem;
  border-radius: 14px;
  cursor: pointer;
}

.profile-dropdown button:hover {
  background: var(--primary-soft);
}

/* ── Hero Video ─────────────────────────────────────────── */
.landing-hero-video {
  position: relative;
  width: 100%;
  height: calc(100vh + 136px);
  overflow: hidden;
  margin-top: -136px;
}

.landing-hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 25%, transparent 70%, rgba(0, 0, 0, 0.5) 100%);
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-video-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  left: 0;
  right: 0;
}

.hero-video-title {
  color: #ffffff;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
}

.hero-video-title em {
  font-style: italic;
  font-weight: 800;
}

.hero-video-subtitle {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(14px, 1.6vw, 17px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
  max-width: 640px;
  margin: 0;
}

.hero-video-cta {
  margin-top: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  background: #dff726;
  color: #111b32;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.hero-video-cta:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

/* Mobile hero readability: deeper scrim + halo behind the text block
   so the subtitle and CTA stay legible over bright/busy video frames. */
@media (max-width: 760px) {
  .landing-hero-video::after {
    background:
      radial-gradient(ellipse 70% 55% at 50% 55%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 60%, transparent 85%),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 20%, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
  }
  .hero-video-subtitle {
    color: #ffffff;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  .hero-video-cta {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  }
}

.landing-hero {
  position: relative;
  padding: 1.4rem 0 1.8rem;
}

.landing-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-glow);
  pointer-events: none;
}

.landing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
  justify-items: start;
}

.landing-copy {
  display: grid;
  gap: 0;
  justify-items: start;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  min-width: 0;
  text-align: left;
}

.landing-copy h1 {
  font-size: 35px;
  font-weight: 800;
  letter-spacing: -0.04em;
  word-spacing: 0.04em;
  line-height: 1.1;
  max-width: none;
  margin: 0;
  overflow-wrap: normal;
  white-space: nowrap;
}

.eyebrow-home {
  background: rgba(16, 132, 126, 0.1);
  color: var(--primary);
}

.hero-subtitle {
  max-width: 33ch;
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 450;
  letter-spacing: -0.02em;
  line-height: 1.58;
  margin: 1rem 0 0;
}

.hero-goal-grid {
  width: 100%;
  max-width: 1280px;
  padding-inline: 32px;
  box-sizing: border-box;
  margin-top: 2.7rem;
  margin-inline: auto;
  justify-self: center;
}

.feed-goal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.feed-goal-card {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  aspect-ratio: 1 / 1;
  min-height: 156px;
  padding: 1rem;
  border-radius: 24px;
  border: 1px solid rgba(17, 27, 50, 0.1);
  background: rgba(28, 28, 26, 0.1);
  box-shadow: none;
  cursor: default;
  transition: none;
}

.feed-goal-card span {
  font-size: 0.92rem;
  font-weight: 680;
  letter-spacing: -0.03em;
  text-transform: none;
  color: var(--text);
}

.feed-goal-card-performance,
.feed-goal-card-health,
.feed-goal-card-intelligence,
.feed-goal-card-precision {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(17, 27, 50, 0.18);
  background: #0f1728;
}

.feed-goal-card-performance::after,
.feed-goal-card-health::after,
.feed-goal-card-precision::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 14, 27, 0.08) 0%, rgba(9, 14, 27, 0.22) 42%, rgba(9, 14, 27, 0.58) 100%);
  pointer-events: none;
  z-index: 1;
}

.feed-goal-card-performance span,
.feed-goal-card-health span,
.feed-goal-card-precision span {
  position: relative;
  z-index: 2;
  color: #f7f3eb;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.16);
}

.feed-goal-card-intelligence {
  background: #0f1728;
  border-color: rgba(17, 27, 50, 0.18);
}

.feed-goal-card-intelligence span {
  position: relative;
  z-index: 2;
  color: #f7f3eb;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.16);
}

.feed-goal-card-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.feed-goal-card-video-shell {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.feed-goal-card-video-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 14, 27, 0.08) 0%, rgba(9, 14, 27, 0.16) 40%, rgba(9, 14, 27, 0.46) 100%);
  pointer-events: none;
}

.feed-goal-card-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
}

.feed-goal-card-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: feedGoalCardSlide 24s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform: scale(1.02);
}

.feed-goal-card-slide:nth-child(1) {
  animation-delay: 0s;
  object-position: 40% 48%;
}

.feed-goal-card-slide:nth-child(2) {
  animation-delay: -4s;
  object-position: 42% 30%;
}

.feed-goal-card-slide:nth-child(3) {
  animation-delay: -8s;
  object-position: 60% 48%;
}

.feed-goal-card-slide:nth-child(4) {
  animation-delay: -12s;
  object-position: 52% 32%;
}

.feed-goal-card-slide:nth-child(5) {
  animation-delay: -16s;
  object-position: 50% 46%;
}

.feed-goal-card-slide:nth-child(6) {
  animation-delay: -20s;
  object-position: 56% 46%;
}

.feed-goal-card-health .feed-goal-card-slide {
  animation-duration: 20s;
}

.feed-goal-card-health .feed-goal-card-slide:nth-child(1) {
  animation-delay: 0s;
  object-position: 58% 42%;
}

.feed-goal-card-health .feed-goal-card-slide:nth-child(2) {
  animation-delay: -4s;
  object-position: 54% 34%;
}

.feed-goal-card-health .feed-goal-card-slide:nth-child(3) {
  animation-delay: -8s;
  object-position: 48% 36%;
}

.feed-goal-card-health .feed-goal-card-slide:nth-child(4) {
  animation-delay: -12s;
  object-position: 54% 36%;
}

.feed-goal-card-health .feed-goal-card-slide:nth-child(5) {
  animation-delay: -16s;
  object-position: 48% 42%;
}

.feed-goal-card-precision .feed-goal-card-slide {
  animation-duration: 24s;
}

.feed-goal-card-precision .feed-goal-card-slide:nth-child(1) {
  animation-delay: 0s;
  object-position: 60% 44%;
}

.feed-goal-card-precision .feed-goal-card-slide:nth-child(2) {
  animation-name: feedGoalCardSlideZoomed;
  animation-delay: -4s;
  object-position: 50% 42%;
}

.feed-goal-card-precision .feed-goal-card-slide:nth-child(3) {
  animation-delay: -8s;
  object-position: 52% 48%;
}

.feed-goal-card-precision .feed-goal-card-slide:nth-child(4) {
  animation-delay: -12s;
  object-position: 54% 40%;
}

.feed-goal-card-precision .feed-goal-card-slide:nth-child(5) {
  animation-delay: -16s;
  object-position: 50% 50%;
}

.feed-goal-card-precision .feed-goal-card-slide:nth-child(6) {
  animation-delay: -20s;
  object-position: 52% 42%;
}

[data-theme="dark"] .feed-goal-card {
  border-color: rgba(241, 235, 222, 0.1);
  background: rgba(241, 235, 222, 0.08);
}

[data-theme="dark"] .feed-goal-card-performance,
[data-theme="dark"] .feed-goal-card-health,
[data-theme="dark"] .feed-goal-card-intelligence,
[data-theme="dark"] .feed-goal-card-precision {
  border-color: rgba(241, 235, 222, 0.14);
}

/* ── Lia's Band ─────────────────────────────────────────── */
.lia-band {
  background: #f6f4ec;
  height: 680px;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}

.lia-band .container {
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

.lia-band-left {
  position: absolute;
  left: max(calc(50% - 560px), 1rem);
  top: 6rem;
  width: min(560px, 48%);
  height: calc(100% - 6rem);
  max-height: 720px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  gap: 3.5rem;
}

/* Chat card — compact widget size */
.lia-band-chat-card {
  background: #ffffff;
  border: 1px solid rgba(28, 28, 26, 0.1);
  border-radius: 16px;
  padding: 0.65rem 0.75rem;
  box-shadow: 0 12px 28px rgba(20, 18, 10, 0.07);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lia-band-messages {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.lia-band-msg {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: 90%;
}

.lia-band-msg-user {
  align-self: flex-end;
}

.lia-band-msg-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  padding: 0 0.15rem;
}

.lia-band-msg-user .lia-band-msg-label {
  text-align: right;
}

.lia-band-msg-bubble {
  padding: 0.35rem 0.6rem;
  border-radius: 10px;
  font-size: 0.72rem;
  line-height: 1.45;
}

.lia-band-msg-bubble p {
  margin: 0;
}

.lia-band-msg-bubble-assistant {
  background: #ffffff;
  border: 1px solid rgba(28, 28, 26, 0.1);
}

.lia-band-msg-bubble-user {
  background: rgba(20, 52, 203, 0.07);
  border: 1px solid rgba(20, 52, 203, 0.1);
}

/* Visual composer — compact */
.lia-band-composer-box {
  padding: 0.3rem 0.55rem;
  border-radius: 10px;
  border: 1px solid rgba(28, 28, 26, 0.12);
  background: #fafaf9;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.lia-band-composer-placeholder {
  margin: 0;
  font-size: 0.68rem;
  color: rgba(28, 28, 26, 0.35);
  min-height: 16px;
  padding: 0.05rem 0.1rem;
}

.lia-band-composer-actions {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.lia-band-composer-actions .ai-bot-attach-btn,
.lia-band-composer-actions .ai-bot-send-btn {
  width: 26px;
  height: 26px;
}

.lia-band-composer-actions .ai-bot-action-icon {
  width: 0.65rem;
  height: 0.65rem;
}

.lia-band-composer-actions .ai-bot-send-icon {
  width: 0.7rem;
  height: 0.7rem;
}

.lia-band-composer-actions .ai-bot-voice-btn {
  margin-left: auto;
}

/* ── SLOT 1: Upper content (fixed position, content switches) */
.lia-band-upper {
  position: relative;
}

.lia-band-upper-item {
  display: none;
}

.lia-band-upper-item.lia-band-upper-active {
  display: block;
}

/* Logos for page 2 — centered like the chat card */
.lia-band-logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 1.2rem 0;
}

.lia-band-logo {
  display: block;
  height: auto;
  object-fit: contain;
}

.lia-band-logo-whoop {
  max-height: 30px;
  width: auto;
  max-width: 180px;
}

.lia-band-logo-oura {
  max-height: 34px;
  width: auto;
  max-width: 130px;
}

/* ── SLOT 2: Description text (fixed position, text switches) */
.lia-band-desc-wrap {
  margin-top: -0.5rem;
  position: relative;
}

.lia-band-desc-item {
  display: none;
  margin: 0 auto;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 600;
  line-height: 1.65;
  color: #111b32;
  text-align: center;
  max-width: 380px;
}

.lia-band-desc-item.lia-band-desc-active {
  display: block;
}

/* Keep old .lia-band-desc for any remaining references */
.lia-band-desc {
  margin: 0 auto;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 600;
  line-height: 1.65;
  color: #111b32;
  text-align: center;
  max-width: 380px;
}

/* ── SLOT 3: Dots (never move) */
.lia-band-dots {
  margin-top: -1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.lia-band-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(17, 27, 50, 0.2);
  display: block;
  border: none;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.lia-band-dot-active {
  background: #c8e000;
  width: 12px;
  height: 12px;
}

.lia-band-character {
  position: absolute;
  right: max(calc(50% - 560px), 1rem);
  top: 0;
  width: min(100%, 470px);
}

.lia-band-fox {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 28px rgba(17, 27, 50, 0.08));
}

.lia-band-orb {
  position: absolute;
  width: clamp(46px, 5.6vw, 50px);
  height: auto;
  left: calc(11.2% - 2px);
  top: 36.9%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(53, 97, 255, 0.14));
}

/* ── Formula Band ───────────────────────────────────────── */
.landing-formula-band {
  background: #f1ebde;
  color: #111b32;
  padding: clamp(4rem, 8vw, 5.8rem) 0;
  margin-top: 0;
}

.landing-formula-band .container {
  width: min(1120px, calc(100% - 2rem));
}

.formula-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(2.75rem, 6vw, 5.25rem);
}

.formula-band-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-width: 46rem;
  min-height: 100%;
  text-align: center;
}

.formula-band-intro {
  display: grid;
  justify-items: center;
  align-content: start;
}

.formula-band-copy h2 {
  margin: 0;
  font-size: 35px;
  line-height: 1.02;
  letter-spacing: -0.055em;
  font-weight: 760;
  color: #111b32;
}

.formula-band-body {
  margin: 1.45rem 0 0;
  width: min(100%, 34rem);
  max-width: none;
  font-size: 20px;
  line-height: 1.42;
  letter-spacing: -0.03em;
  font-weight: 610;
  color: rgba(17, 27, 50, 0.85);
}

.formula-band-cta {
  margin-top: 1.05rem;
  padding: 0 1.5rem;
  height: 40px;
  border: 1px solid #dff726;
  border-radius: 12px;
  background: #dff726;
  color: #111b32;
  font-size: 0.875rem;
  font-weight: 760;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.formula-band-cta:hover {
  background: #e8fb57;
  border-color: #e8fb57;
  transform: translateY(-1px);
}

.formula-band-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.7rem);
  width: 100%;
  margin-top: 3rem;
}

.formula-band-point {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1.1rem;
}

.formula-band-point-icon {
  width: 84px;
  height: 84px;
  object-fit: contain;
  display: block;
  filter: brightness(0) saturate(100%);
}

.formula-band-points p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  letter-spacing: -0.02em;
  font-weight: 650;
  color: rgba(17, 27, 50, 0.85);
  text-align: center;
}

.formula-band-media {
  position: relative;
  width: 100%;
  max-width: 100%;
  justify-self: end;
  align-self: start;
}

.formula-band-image {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1.16 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

@keyframes feedGoalCardSlide {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  10% {
    opacity: 1;
    transform: scale(1.01);
  }
  18% {
    opacity: 0;
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

@keyframes feedGoalCardSlideZoomed {
  0% {
    opacity: 1;
    transform: scale(1.12);
  }
  10% {
    opacity: 1;
    transform: scale(1.13);
  }
  18% {
    opacity: 0;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
    transform: scale(1.16);
  }
}

.hero-points {
  display: grid;
  gap: 0.8rem;
  width: 100%;
}

.hero-point {
  width: min(100%, 640px);
  padding: 1rem 1.1rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--border);
  box-shadow: 0 18px 42px var(--shadow);
}

[data-theme="dark"] .hero-point {
  background: rgba(255, 255, 255, 0.03);
}

.hero-point-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: 800;
}

.hero-point strong {
  font-size: 0.96rem;
  line-height: 1.55;
}

.hero-rail {
  display: block;
  width: 100%;
  min-width: 0;
  position: relative;
  z-index: 0;
}

.hero-rail-card,
.process-card,
.collection-card,
.value-card,
.story-card,
.closing-cta-card {
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 24px var(--shadow);
}

.hero-rail-card {
  padding: 1.4rem;
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
}

.hero-rail-card-feed {
  padding: 1.05rem;
}

.hero-rail-top h2 {
  font-size: 1.7rem;
  margin-top: 0.85rem;
  line-height: 1.1;
}

.hero-shelf-note {
  margin-top: 0.95rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hero-rail-card-carousel {
  min-height: 0;
  width: 100%;
  max-width: 1120px;
  padding: 1rem;
  margin: 0 auto;
}

.eyebrow-compact {
  padding: 0.38rem 0.65rem;
  font-size: 0.7rem;
}

.hero-category-list {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 1rem;
}

.hero-category-item {
  padding: 0.95rem 1rem;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.78);
}

[data-theme="dark"] .hero-category-item {
  background: rgba(255, 255, 255, 0.04);
}

.hero-category-item span {
  display: block;
  margin-bottom: 0.22rem;
  color: var(--text-soft);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero-category-item strong {
  font-size: 0.97rem;
  line-height: 1.5;
}

.hero-rail-note {
  color: var(--text-muted);
  line-height: 1.7;
}

.btn-primary,
.btn-secondary {
  border-radius: 14px;
  padding: 0.95rem 1.45rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.btn-primary {
  border: none;
  background: #dff726;
  color: #111b32;
  box-shadow: 0 10px 22px rgba(223, 247, 38, 0.18);
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-1px);
}

.btn-primary:disabled,
.btn-secondary:disabled {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: 1;
}

.btn-primary:disabled {
  background: #bcc8cf;
  color: rgba(255, 255, 255, 0.92);
}

.btn-secondary:disabled {
  background: #e5eaed;
  border-color: #d2dbe0;
  color: #80909a;
}

[data-theme="dark"] .btn-primary:disabled {
  background: #45606b;
  color: rgba(237, 244, 243, 0.82);
}

[data-theme="dark"] .btn-secondary:disabled {
  background: rgba(26, 48, 57, 0.72);
  border-color: rgba(237, 244, 243, 0.08);
  color: #7f949c;
}

.btn-secondary {
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
}

.btn-full {
  width: 100%;
}

.btn-hero {
  min-width: 188px;
  font-size: 1rem;
}

.landing-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 0.5rem 0 2rem;
  color: var(--text-soft);
  font-size: 0.85rem;
}

.landing-footer > span {
  padding: 0.95rem 1rem;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.landing-sections {
  display: grid;
  gap: 2rem;
  padding-bottom: 3.5rem;
}

.feed-browse-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.feed-browse-card {
  display: grid;
  gap: 0.6rem;
  padding: 1.2rem;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 24px var(--shadow);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.feed-browse-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.feed-browse-card h3 {
  font-size: 1.18rem;
  line-height: 1.15;
}

.feed-browse-card p {
  color: var(--text-muted);
  line-height: 1.65;
}

.feed-browse-card-dark {
  background: #111b32;
  border-color: rgba(17, 27, 50, 0.4);
}

.feed-browse-card-dark h3,
.feed-browse-card-dark p {
  color: #f6f4ec;
}

.feed-browse-card-dark .collection-kicker {
  background: rgba(255, 255, 255, 0.08);
  color: #f6f4ec;
}

.feed-browse-card-warm {
  background: linear-gradient(180deg, rgba(255, 182, 72, 0.16), rgba(246, 244, 236, 0.9));
}

.category-page-shell {
  padding-bottom: 3.5rem;
}

.category-page-hero {
  display: grid;
  gap: 0.9rem;
  padding: 1rem 0 1.5rem;
  text-align: left;
  justify-items: stretch;
}

.category-page-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.category-page-hero h1 {
  font-size: clamp(2.3rem, 4.5vw, 4rem);
  line-height: 1.02;
}

.category-results-count {
  padding-top: 0.45rem;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.category-page-copy {
  max-width: 64ch;
  color: var(--text-muted);
  line-height: 1.7;
}

.category-page-note {
  max-width: 64ch;
  margin: 0;
  padding: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
  border-left: 3px solid var(--primary);
  padding-left: 0.75rem;
}

.category-search-row {
  margin-bottom: 1.25rem;
}

.category-sort-bar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.category-tool-group {
  position: relative;
}

.category-tool-group-sort {
  margin-left: auto;
}

.category-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.72rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.category-tool-btn:hover,
.category-tool-btn[aria-expanded="true"] {
  border-color: var(--primary);
  background: var(--surface-alt);
}

.category-tool-icon {
  width: 1rem;
  height: 1rem;
  display: inline-flex;
}

.category-tool-icon svg {
  width: 100%;
  height: 100%;
}

.category-filter-panel,
.category-sort-menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 0;
  z-index: 20;
  min-width: 240px;
  padding: 1rem;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 20px 38px rgba(20, 52, 203, 0.09);
}

.category-filter-panel[hidden],
.category-sort-menu[hidden] {
  display: none !important;
}

.category-sort-menu {
  left: auto;
  right: 0;
  min-width: 220px;
}

.category-filter-panel {
  display: grid;
  gap: 1rem;
}

.category-filter-block {
  display: grid;
  gap: 0.65rem;
}

.category-filter-title,
.category-sort-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.category-filter-options {
  display: grid;
  gap: 0.55rem;
}

.category-filter-option {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--text);
}

.category-filter-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.category-search-input {
  flex: 1;
  width: 100%;
  min-width: 180px;
  min-height: 48px;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.92rem;
}

.category-search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.category-sort-select {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
}

.category-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 0.55rem;
}

.ai-bot-shell {
  display: grid;
  gap: 1.5rem;
  padding-bottom: 3.5rem;
}

.ai-bot-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
  gap: 1.4rem;
  align-items: center;
  padding: 1.35rem 1.45rem;
  border-radius: 32px;
  border: 1px solid rgba(17, 27, 50, 0.08);
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.85) 0, rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, #fbf6eb 0%, #f5efe1 42%, #eef2fb 100%);
  box-shadow: 0 18px 36px rgba(20, 52, 203, 0.08);
  overflow: hidden;
}

.ai-bot-hero-copy-wrap {
  display: grid;
  gap: 0.9rem;
}

.ai-bot-consent-card {
  display: grid;
  gap: 0.9rem;
  max-width: 44rem;
  margin-top: 0.35rem;
  padding: 1.15rem 1.2rem;
  border-radius: 24px;
  border: 1px solid rgba(17, 27, 50, 0.1);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 16px 30px rgba(20, 52, 203, 0.08);
  backdrop-filter: blur(12px);
}

.ai-bot-consent-card h3 {
  font-size: 1.15rem;
  line-height: 1.2;
}

.ai-bot-consent-card p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.7;
}

.ai-bot-consent-check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  color: var(--text);
  line-height: 1.55;
}

.ai-bot-consent-check input {
  margin-top: 0.18rem;
}

.ai-bot-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ai-bot-hero-art-card {
  min-height: 420px;
  display: grid;
  place-items: end center;
  overflow: visible;
}

.ai-bot-hero-character {
  position: relative;
  width: min(100%, 470px);
}

.ai-bot-hero-fox {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 28px rgba(17, 27, 50, 0.08));
}

.ai-bot-hero-orb {
  position: absolute;
  width: clamp(46px, 5.6vw, 50px);
  height: auto;
  left: 11.2%;
  top: 36.9%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(53, 97, 255, 0.14));
}

.ai-bot-hero h1 {
  font-size: clamp(2.3rem, 4.5vw, 4rem);
  line-height: 1.02;
  max-width: 10ch;
}

.ai-bot-copy {
  max-width: 66ch;
  color: var(--text-muted);
  line-height: 1.7;
}

.ai-bot-integrations {
  display: grid;
  width: min(1120px, 100%);
  margin: 1rem auto 0;
}

.ai-bot-integrations-stack {
  display: grid;
  gap: 1rem;
}

.ai-bot-integrations-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border-radius: 26px;
  border: 1px solid rgba(17, 27, 50, 0.08);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.9) 0, rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, #f3f7ff 0%, #f8f4ed 100%);
  box-shadow: 0 16px 30px rgba(20, 52, 203, 0.06);
}

.ai-bot-integrations-copy {
  display: grid;
  gap: 0.45rem;
}

.ai-bot-integrations-head {
  display: grid;
  gap: 0.2rem;
}

.ai-bot-integrations-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.ai-bot-integrations-head h2 {
  margin: 0;
  font-size: clamp(1.15rem, 1.4vw, 1.45rem);
}

.ai-bot-integrations-text,
.ai-bot-integrations-sync,
.ai-bot-integrations-insight {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.ai-bot-integrations-loading {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(17, 27, 50, 0.08);
  background: rgba(255, 255, 255, 0.82);
}

.ai-bot-integrations-spinner {
  width: 28px;
  height: 28px;
  margin: 0;
  flex: 0 0 auto;
  border-width: 3px;
}

.ai-bot-integrations-loading-copy {
  display: grid;
  gap: 0.15rem;
}

.ai-bot-integrations-loading-copy strong,
.ai-bot-integrations-loading-copy p {
  margin: 0;
}

.ai-bot-integrations-loading-copy p {
  color: var(--text-muted);
}

.ai-bot-integrations-notice {
  margin: 0;
  padding: 0.8rem 0.95rem;
  border-radius: 16px;
  border: 1px solid rgba(17, 27, 50, 0.08);
  line-height: 1.6;
}

.ai-bot-integrations-notice-success {
  background: rgba(74, 172, 130, 0.12);
  border-color: rgba(74, 172, 130, 0.2);
  color: #1c5b41;
}

.ai-bot-integrations-notice-error {
  background: rgba(209, 92, 104, 0.1);
  border-color: rgba(209, 92, 104, 0.22);
  color: #8d2c3b;
}

.ai-bot-integrations-notice-info {
  background: rgba(53, 104, 219, 0.08);
  border-color: rgba(53, 104, 219, 0.16);
  color: var(--text);
}

.ai-bot-integrations-insight {
  color: var(--text);
}

.ai-bot-integrations-debug,
.ai-bot-integrations-summary,
.ai-bot-integrations-issues {
  display: grid;
  gap: 0.25rem;
}

.ai-bot-whoop-dashboard {
  display: grid;
  grid-template-columns: minmax(300px, 1.35fr) repeat(2, minmax(220px, 1fr));
  gap: 0.8rem;
  align-items: start;
}

.ai-bot-whoop-panel {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem 0.95rem;
  border-radius: 18px;
  border: 1px solid rgba(17, 27, 50, 0.08);
  background: rgba(255, 255, 255, 0.82);
}

.ai-bot-whoop-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.ai-bot-whoop-panel-head span {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text);
}

.ai-bot-whoop-panel-head small {
  color: var(--text-soft);
  font-size: 0.75rem;
}

.ai-bot-whoop-activity-list,
.ai-bot-whoop-compare-list {
  display: grid;
  gap: 0.65rem;
}

.ai-bot-whoop-activity-row,
.ai-bot-whoop-compare-row {
  display: grid;
  gap: 0.35rem;
}

.ai-bot-whoop-activity-meta,
.ai-bot-whoop-compare-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ai-bot-whoop-activity-meta strong,
.ai-bot-whoop-compare-meta strong {
  color: var(--text);
}

.ai-bot-whoop-activity-meta span,
.ai-bot-whoop-compare-meta span {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.ai-bot-whoop-activity-meta strong,
.ai-bot-whoop-activity-meta span,
.ai-bot-whoop-compare-meta strong,
.ai-bot-whoop-compare-meta span {
  min-width: 0;
}

.ai-bot-whoop-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(17, 27, 50, 0.08);
}

.ai-bot-whoop-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary) 0%, rgba(20, 117, 206, 0.82) 100%);
}

.ai-bot-integrations-issue {
  margin: 0;
  color: #8d2c3b;
  line-height: 1.6;
}

.ai-bot-integrations-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.2rem;
}

.ai-bot-integration-metric {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(17, 27, 50, 0.08);
  background: rgba(255, 255, 255, 0.86);
  font-size: 0.92rem;
  color: var(--text-muted);
}

.ai-bot-integration-metric strong {
  color: var(--text);
}

.ai-bot-integration-provider {
  display: grid;
  gap: 0.85rem;
  justify-items: end;
}

.ai-bot-integration-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.95rem;
  border-radius: 20px;
  border: 1px solid rgba(17, 27, 50, 0.08);
  background: rgba(255, 255, 255, 0.88);
}

.ai-bot-integration-logo {
  width: auto;
  height: 22px;
  display: block;
  object-fit: contain;
}

.ai-bot-integration-logo-text {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 28px;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: rgba(17, 27, 50, 0.08);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.ai-bot-integration-status {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.ai-bot-integration-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ai-bot-integration-disconnect {
  opacity: 0.9;
}

.ai-bot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 1.25rem;
  align-items: start;
}

.ai-bot-auth-gate {
  display: grid;
  place-items: center;
  min-height: 360px;
}

.ai-bot-auth-gate-card {
  width: min(560px, 100%);
  padding: 2rem;
  border-radius: 28px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 18px 36px rgba(20, 52, 203, 0.06);
  text-align: center;
}

.ai-bot-gate-avatar {
  width: 112px;
  height: 112px;
  object-fit: cover;
  object-position: center 8%;
  border-radius: 28px;
  display: block;
  margin: 0 auto 1rem;
  background: transparent;
  box-shadow: none;
}

.ai-bot-auth-gate-card h2 {
  font-size: clamp(1.8rem, 3.8vw, 2.5rem);
  line-height: 1.08;
  margin-bottom: 0.8rem;
}

.ai-bot-auth-gate-card p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.ai-bot-chat-panel,
.ai-bot-stack-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 1.25rem;
  box-shadow: 0 18px 36px rgba(20, 52, 203, 0.06);
}

.ai-bot-chat-panel {
  background: linear-gradient(180deg, #fffaf2 0%, #ffffff 100%);
}

.ai-bot-stack-panel {
  background: linear-gradient(180deg, #f7f8fd 0%, #ffffff 100%);
}

[data-theme="dark"] .ai-bot-chat-panel {
  background: linear-gradient(180deg, rgba(9, 18, 24, 0.98) 0%, rgba(16, 30, 37, 0.96) 100%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .ai-bot-consent-card {
  background: rgba(10, 21, 28, 0.88);
  border-color: rgba(237, 244, 243, 0.12);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .ai-bot-stack-panel {
  background: linear-gradient(180deg, rgba(12, 23, 29, 0.98) 0%, rgba(18, 34, 42, 0.96) 100%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .ai-bot-integrations-card {
  background:
    radial-gradient(circle at 18% 18%, rgba(48, 72, 95, 0.34) 0, rgba(48, 72, 95, 0) 36%),
    linear-gradient(135deg, rgba(11, 22, 29, 0.98) 0%, rgba(17, 31, 39, 0.96) 100%);
  border-color: rgba(237, 244, 243, 0.12);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

[data-theme="dark"] .ai-bot-integration-badge-wrap,
[data-theme="dark"] .ai-bot-integration-metric {
  background: rgba(15, 28, 35, 0.92);
  border-color: rgba(237, 244, 243, 0.12);
}

[data-theme="dark"] .ai-bot-integration-logo-text {
  background: rgba(237, 244, 243, 0.08);
  color: var(--text);
}

[data-theme="dark"] .ai-bot-integrations-loading {
  background: rgba(15, 28, 35, 0.92);
  border-color: rgba(237, 244, 243, 0.12);
}

[data-theme="dark"] .ai-bot-whoop-panel {
  background: rgba(15, 28, 35, 0.92);
  border-color: rgba(237, 244, 243, 0.12);
}

[data-theme="dark"] .ai-bot-whoop-bar {
  background: rgba(237, 244, 243, 0.12);
}

[data-theme="dark"] .ai-bot-integrations-notice-success {
  background: rgba(74, 172, 130, 0.16);
  border-color: rgba(74, 172, 130, 0.25);
  color: #c6f0dc;
}

[data-theme="dark"] .ai-bot-integrations-notice-error,
[data-theme="dark"] .ai-bot-integrations-issue {
  background: rgba(209, 92, 104, 0.12);
  border-color: rgba(209, 92, 104, 0.24);
  color: #ffbcc6;
}

[data-theme="dark"] .ai-bot-integrations-notice-info {
  background: rgba(53, 104, 219, 0.14);
  border-color: rgba(116, 153, 232, 0.2);
  color: var(--text);
}

.ai-bot-bloodwork-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: start;
}

.ai-bot-prompt-label,
.ai-bot-message-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.ai-bot-prompt {
  margin-top: 0.5rem;
  padding: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
}

.ai-bot-input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.ai-bot-input:focus {
  outline: none;
}

.ai-bot-chat {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.2rem;
  margin-bottom: 1rem;
}

.ai-bot-message-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: end;
  max-width: 92%;
}

.ai-bot-message-row-user {
  margin-left: auto;
  grid-template-columns: minmax(0, 1fr);
}

.ai-bot-message-avatar {
  width: 44px;
  height: 44px;
  object-fit: cover;
  object-position: center 3%;
  clip-path: inset(0 round 16px);
  transform: scale(2.18);
  transform-origin: center top;
  border-radius: 16px;
  background: transparent;
  border: none;
  box-shadow: 0 8px 18px rgba(20, 52, 203, 0.08);
}

.ai-bot-message {
  display: grid;
  gap: 0.38rem;
  padding: 1rem 1.05rem;
  border-radius: 22px;
}

.ai-bot-message p {
  margin: 0;
  line-height: 1.65;
}

.ai-bot-message-actions {
  margin-top: 0.45rem;
}

.ai-bot-message-cta {
  border: none;
  border-radius: 999px;
  padding: 0.72rem 1rem;
  background: var(--primary);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(16, 132, 126, 0.18);
}

[data-theme="dark"] .ai-bot-message-cta {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.ai-bot-message-user {
  margin-left: auto;
  background: rgba(20, 52, 203, 0.08);
  border: 1px solid rgba(20, 52, 203, 0.1);
}

.ai-bot-message-assistant {
  background: #ffffff;
  border: 1px solid var(--border);
}

[data-theme="dark"] .ai-bot-message-assistant {
  background: rgba(26, 48, 57, 0.88);
  border-color: rgba(237, 244, 243, 0.12);
}

[data-theme="dark"] .ai-bot-message-user {
  background: rgba(55, 185, 176, 0.16);
  border-color: rgba(55, 185, 176, 0.24);
}

.ai-bot-typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 1.2em;
}

.ai-bot-typing-indicator span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted, #999);
  animation: ai-bot-typing-bounce 1.2s infinite ease-in-out;
}

.ai-bot-typing-indicator span:nth-child(1) { animation-delay: 0s; }
.ai-bot-typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.ai-bot-typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ai-bot-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

#ai-bot-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ai-bot-stack-panel {
  display: grid;
  gap: 1rem;
}

.ai-bot-composer {
  margin-top: auto;
}

.ai-bot-composer-box {
  display: grid;
  gap: 0.8rem;
  padding: 0.75rem 0.8rem;
  border-radius: 28px;
  border: 1px solid rgba(28, 28, 26, 0.12);
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(20, 18, 10, 0.08);
}

[data-theme="dark"] .ai-bot-composer-box {
  background: rgba(13, 25, 31, 0.96);
  border-color: rgba(237, 244, 243, 0.12);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
}

.ai-bot-compose-input {
  width: 100%;
  min-height: 56px;
  max-height: 180px;
  padding: 0.35rem 0 0 0.4rem;
  resize: vertical;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.6;
}

.ai-bot-compose-input:focus {
  outline: none;
}

.ai-bot-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.ai-bot-attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(28, 28, 26, 0.12);
  background: #ffffff;
  color: #1c1c1a;
  font: inherit;
  cursor: pointer;
  flex: 0 0 auto;
}

[data-theme="dark"] .ai-bot-attach-btn {
  background: rgba(26, 48, 57, 0.9);
  border-color: rgba(237, 244, 243, 0.12);
  color: #edf4f3;
}

.ai-bot-action-icon {
  width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
}

.ai-bot-action-icon svg {
  width: 100%;
  height: 100%;
}

.ai-bot-voice-btn.is-recording {
  border-color: #d95d5d;
  background: rgba(217, 93, 93, 0.12);
  color: #a23b3b;
}

.ai-bot-voice-btn {
  margin-left: auto;
}

.ai-bot-asset-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.ai-bot-asset-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text);
}

.ai-bot-asset-chip button {
  border: none;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.9rem;
  cursor: pointer;
}

.ai-bot-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #050505;
  color: #ffffff;
  cursor: pointer;
  flex: 0 0 auto;
}

.ai-bot-send-icon {
  width: 1.14rem;
  height: 1.14rem;
  transform: translateX(0.03rem);
}

.ai-bot-stack-top {
  display: grid;
  gap: 0.45rem;
  text-align: center;
}

.ai-bot-stack-top h2 {
  margin-top: 0.7rem;
  margin-bottom: 0;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.ai-bot-stack-list {
  display: grid;
  gap: 0.85rem;
}

.ai-bot-stack-group {
  display: grid;
  gap: 0.85rem;
}

.ai-bot-stack-group-head {
  display: grid;
  gap: 0.25rem;
  padding: 0.15rem 0.1rem 0;
}

.ai-bot-stack-group-head h3 {
  font-size: 1rem;
  line-height: 1.3;
}

.ai-bot-stack-group-head p {
  color: var(--text-muted);
  line-height: 1.55;
}

.ai-bot-stack-group-list {
  display: grid;
  gap: 0.85rem;
}

.ai-bot-stack-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  padding: 0.8rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid var(--border);
}

[data-theme="dark"] .ai-bot-stack-item {
  background: rgba(26, 48, 57, 0.88);
  border-color: rgba(237, 244, 243, 0.12);
}

.ai-bot-stack-image {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  background: var(--surface-alt);
}

.ai-bot-stack-image-contain {
  object-fit: contain;
  object-position: center center;
  padding: 0.18rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 244, 236, 0.9));
}

[data-theme="dark"] .ai-bot-stack-image-contain {
  background: linear-gradient(180deg, rgba(23, 36, 43, 0.92), rgba(15, 29, 35, 0.96));
}

.ai-bot-stack-body {
  display: grid;
  gap: 0.45rem;
}

.ai-bot-stack-body p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.ai-bot-stack-meta {
  display: grid;
  gap: 0.35rem;
}

.ai-bot-stack-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ai-bot-stack-brand {
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-bot-stack-dose {
  color: var(--primary);
  font-weight: 800;
  font-size: 0.96rem;
}

.ai-bot-stack-supply {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ai-bot-stack-supply span {
  display: inline-flex;
  align-items: center;
  padding: 0.26rem 0.55rem;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

[data-theme="dark"] .ai-bot-stack-supply span {
  background: rgba(13, 25, 31, 0.9);
  border-color: rgba(237, 244, 243, 0.1);
  color: #c8d4d8;
}

.ai-bot-stack-timing {
  color: var(--text-soft);
  font-size: 0.88rem;
}

.ai-bot-actions {
  display: grid;
  gap: 0.75rem;
}

.ai-bot-note {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.6;
}

.landing-section {
  position: relative;
}

.section-heading {
  margin-bottom: 1rem;
}

.section-heading h2 {
  margin-top: 0.8rem;
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 18ch;
}

.section-copy {
  margin-top: 0.6rem;
  max-width: 60ch;
  color: var(--text-muted);
  line-height: 1.7;
}

.feature-band,
.values-section,
.merchandising-section,
.story-section,
.packs-section {
  padding: 1.5rem 0 0;
}

.hero-how-it-works {
  width: 100%;
}

.hero-how-it-works .section-heading {
  margin-bottom: 1.6rem;
}

.hero-how-it-works .section-heading h2 {
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: none;
  text-align: center;
  white-space: nowrap;
}

.process-grid,
.collection-grid,
.values-grid,
.story-grid,
.pack-grid {
  display: grid;
  gap: 1rem;
}

.process-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.process-card,
.value-card,
.story-card {
  padding: 1.3rem;
  border-radius: 28px;
}

.process-step,
.collection-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.62rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.process-step {
  margin-bottom: 0.9rem;
  color: var(--primary);
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.18em;
}

.process-card h3,
.collection-card h3,
.value-card h3,
.story-card h2 {
  margin-bottom: 0.45rem;
}

.process-card h3 {
  font-size: 1.18rem;
}

.process-card p,
.collection-card p,
.value-card p,
.story-card p,
.impact-list li,
.closing-cta-card p {
  color: var(--text-muted);
  line-height: 1.7;
}

.process-card p {
  color: var(--text-soft);
}

.collection-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pack-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.collection-card {
  min-height: 220px;
  padding: 1.35rem;
  border-radius: 20px;
  background: var(--surface);
}

.collection-card-warm {
  background: linear-gradient(180deg, rgba(16, 132, 126, 0.03), rgba(255, 255, 255, 0.98)), var(--surface);
}

.collection-card-dark {
  background: linear-gradient(180deg, rgba(255, 182, 72, 0.06), rgba(255, 255, 255, 0.98)), var(--surface);
}

.collection-kicker {
  margin-bottom: 1rem;
  color: var(--primary);
  background: var(--primary-soft);
}

.pack-card {
  display: grid;
  gap: 1rem;
  padding: 1.35rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 24px var(--shadow);
}

.pack-card-warm {
  background: linear-gradient(180deg, rgba(255, 182, 72, 0.06), rgba(255, 255, 255, 0.98)), var(--surface);
}

.pack-card-dark {
  background: linear-gradient(180deg, rgba(16, 132, 126, 0.04), rgba(255, 255, 255, 0.98)), var(--surface);
}

.pack-card-top h3 {
  margin-top: 0.65rem;
  margin-bottom: 0.5rem;
  font-size: 1.55rem;
}

.pack-card-kicker,
.pack-card-focus span {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.62rem;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pack-card-kicker {
  color: var(--primary);
  background: var(--primary-soft);
}

.pack-card-audience {
  color: var(--text-muted);
  line-height: 1.7;
}

.pack-card-focus {
  display: grid;
  gap: 0.45rem;
  padding: 0.95rem 1rem;
  border-radius: 22px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
}

.pack-card-focus span {
  width: fit-content;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.55);
}

.pack-card-focus strong {
  font-size: 0.98rem;
  line-height: 1.55;
}

.pack-card-list {
  display: grid;
  gap: 0.7rem;
}

.pack-card-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.pack-card-overview span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.62);
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pack-stack-group {
  display: grid;
  gap: 0.6rem;
}

.pack-stack-head {
  display: grid;
  gap: 0.18rem;
  padding-inline: 0.15rem;
}

.pack-stack-head strong {
  font-size: 0.96rem;
}

.pack-stack-head span {
  color: var(--text-muted);
  line-height: 1.55;
}

[data-theme="dark"] .pack-card-overview span {
  background: rgba(255, 255, 255, 0.04);
}

.values-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.values-grid .value-card:last-child {
  grid-column: span 3;
}

.story-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.story-card h2 {
  font-size: 2rem;
  line-height: 1.08;
}

.story-card p + p {
  margin-top: 0.8rem;
}

.impact-card {
  background:
    linear-gradient(180deg, rgba(17, 27, 50, 0.06), rgba(255, 255, 255, 0.96)),
    var(--surface);
}

[data-theme="dark"] .impact-card {
  background:
    linear-gradient(180deg, rgba(241, 235, 222, 0.06), rgba(26, 37, 64, 0.96)),
    var(--surface);
}

.impact-list {
  list-style: none;
  margin-top: 1rem;
}

.impact-list li {
  position: relative;
  padding-left: 1.25rem;
}

.impact-list li + li {
  margin-top: 0.7rem;
}

.impact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--primary);
}

.closing-cta-card {
  padding: 1.6rem;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(135deg, rgba(16, 132, 126, 0.06), rgba(255, 182, 72, 0.06)), var(--surface);
}

.closing-cta-card h2 {
  margin: 0.85rem auto 0.65rem;
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 16ch;
}

.closing-cta-card p {
  max-width: 62ch;
  margin: 0 auto 1.2rem;
}

.auth-container,
.confirm-container,
.loading-container {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: calc(100vh - 88px);
  padding: 1.5rem 0 2.5rem;
}

.auth-logo {
  width: 150px;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 1.6rem;
}

.auth-card,
.confirm-card {
  width: min(440px, 100%);
  padding: 2rem;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px var(--shadow);
}

.auth-card h2,
.confirm-card h2 {
  font-size: 2rem;
  margin-bottom: 0.35rem;
}

.auth-card .text-muted {
  margin-bottom: 1.5rem;
}

.auth-step-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.auth-helper {
  margin: 0.15rem 0 1.1rem;
  color: var(--text-soft);
  line-height: 1.6;
}

.auth-card h2.hidden,
.auth-card .text-muted.hidden,
.auth-step-badge.hidden,
.auth-helper.hidden,
.auth-forgot-link.hidden {
  display: none;
}

.auth-helper.is-error {
  display: block;
  color: #e05252;
  font-size: 0.82rem;
  margin-top: 0.35rem;
  text-align: center;
}

.auth-helper.is-error a {
  color: #0f8f86;
  cursor: pointer;
  text-decoration: underline;
}

.auth-forgot-link {
  display: block;
  font-size: 0.82rem;
  color: #0f8f86;
  cursor: pointer;
  text-decoration: none;
  margin-top: 0.35rem;
  text-align: right;
}

.auth-forgot-link:hover {
  text-decoration: underline;
}

[data-theme="dark"] .auth-helper.is-error {
  color: #f07070;
}

[data-theme="dark"] .auth-helper.is-error a {
  color: #37b9b0;
}

[data-theme="dark"] .auth-forgot-link {
  color: #37b9b0;
}

.auth-actions {
  display: grid;
  gap: 0.85rem;
}

.auth-email-suggestions {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 4px;
  margin-bottom: 0.75rem;
}

.auth-email-suggestions.hidden {
  display: none;
}

.auth-email-suggestion {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  width: 100%;
  border-bottom: 1px solid var(--border);
}

.auth-email-suggestion:last-child {
  border-bottom: none;
}

.auth-email-suggestion:hover {
  background: var(--surface-raised, rgba(0,0,0,0.04));
}

.auth-email-suggestion.hidden {
  display: none;
}

.auth-suggestion-icon {
  display: flex;
  align-items: center;
  color: var(--text-soft);
  flex-shrink: 0;
}

.auth-suggestion-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.auth-suggestion-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-suggestion-email {
  font-size: 0.75rem;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  padding: 0.8rem 1rem;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.auth-google-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(66, 133, 244, 0.45);
  background: #fbfdff;
}

.auth-google-btn.hidden {
  display: none;
}

.auth-google-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.auth-google-mark svg {
  width: 100%;
  height: 100%;
}

.google-auth-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.google-auth-modal.hidden {
  display: none;
}

.google-auth-modal-card {
  background: #fff;
  border-radius: 16px;
  padding: 2rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  min-width: 280px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

[data-theme="dark"] .google-auth-modal-card {
  background: #1e1e1e;
}

.google-auth-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: #888;
  line-height: 1;
}

.google-auth-modal-label {
  font-weight: 700;
  font-size: 1rem;
  margin: 0;
  color: var(--text);
}

.google-auth-modal-error {
  font-size: 0.85rem;
  color: #e53e3e;
  margin: 0;
  text-align: center;
}

.google-auth-modal-error.hidden {
  display: none;
}

.google-profile-modal-card {
  width: 320px;
  gap: 1rem;
  align-items: stretch;
}

.google-profile-modal-sub {
  font-size: 0.875rem;
  color: var(--text-soft);
  margin: 0;
  text-align: center;
}

.google-profile-skip-btn {
  background: none;
  border: none;
  color: var(--text-soft);
  font-size: 0.82rem;
  cursor: pointer;
  text-align: center;
  padding: 0.25rem;
}

.google-profile-skip-btn:hover {
  color: var(--text);
}

.auth-primary-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
}

.auth-switch {
  margin-top: 1rem;
  color: var(--text-muted);
  text-align: center;
}

.auth-switch a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: none;
}

.version-tag {
  margin-top: 1rem;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.input-group {
  width: 100%;
}

.input-group label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.input-field {
  width: 100%;
  padding: 0.95rem 1rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-field:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.input-field::placeholder {
  color: var(--text-soft);
}

.survey-container,
.dash-container {
  width: min(980px, calc(100vw - 2rem));
  padding-bottom: 3rem;
}

/* Meu Protocolo (post-purchase) */
.meu-protocolo-container {
  width: min(980px, calc(100vw - 2rem));
  padding-bottom: 3rem;
}

/* ── Meus Pedidos & Minhas Assinaturas shared layout ── */
.meus-pedidos-container {
  width: min(720px, calc(100vw - 2rem));
  padding-bottom: 3rem;
}

.meus-pedidos-header {
  text-align: center;
  padding: 3rem 0 0.5rem;
  margin-bottom: 2rem;
}

.meus-pedidos-title {
  font-size: clamp(2.3rem, 4.5vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  color: var(--text);
  margin: 0 0 0.4rem;
}

.meus-pedidos-subtitle {
  font-size: 0.93rem;
  color: var(--text-muted);
  margin: 0;
}

.meus-pedidos-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 4rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
}

.meus-pedidos-empty h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.meus-pedidos-empty p {
  font-size: 0.9rem;
  max-width: 34ch;
  margin: 0;
  line-height: 1.55;
}

.meus-pedidos-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Pedido card ── */
.pedido-card {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  box-shadow: 0 2px 10px rgba(20,18,10,0.05);
}

[data-theme="dark"] .pedido-card {
  background: rgba(26,48,57,0.55);
}

.pedido-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.pedido-id {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0f8f86;
  display: block;
  margin-bottom: 0.15rem;
}

.pedido-date {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.pedido-recurrence-badge {
  display: inline-flex;
  align-items: center;
  height: 1.55rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: rgba(15,143,134,0.1);
  color: #0f8f86;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

[data-theme="dark"] .pedido-recurrence-badge {
  background: rgba(15,207,196,0.12);
  color: #0fcfc4;
}

/* ── Order tracking steps ── */
.pedido-tracking {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.pedido-track-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.pedido-track-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border, #dbe2ee);
  border: 2px solid var(--border, #dbe2ee);
  flex-shrink: 0;
  z-index: 1;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pedido-track-line {
  position: absolute;
  top: 5px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--border, #dbe2ee);
  z-index: 0;
  transition: background 0.2s ease;
}

.pedido-track-step.is-done .pedido-track-dot {
  background: #0f8f86;
  border-color: #0f8f86;
}

.pedido-track-step.is-done .pedido-track-line {
  background: #0f8f86;
}

.pedido-track-step.is-active .pedido-track-dot {
  background: #fff;
  border-color: #0f8f86;
  box-shadow: 0 0 0 3px rgba(15,143,134,0.2);
}

.pedido-track-label {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.35rem;
  line-height: 1.3;
}

.pedido-track-step.is-done .pedido-track-label,
.pedido-track-step.is-active .pedido-track-label {
  color: #0f8f86;
}

[data-theme="dark"] .pedido-track-step.is-active .pedido-track-dot {
  background: #1a3039;
}

/* ── Pedido items ── */
.pedido-items {
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.pedido-items li {
  font-size: 0.84rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
}

.pedido-ing-name { font-weight: 600; }
.pedido-ing-qty { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; }

.pedido-sachets {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pedido-mini-sachet {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pedido-mini-sachet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.pedido-mini-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.pedido-mini-tags {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.pedido-mini-tag {
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(15,143,134,0.1);
  color: #0b6f68;
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

[data-theme="dark"] .pedido-mini-tag {
  background: rgba(15,143,134,0.2);
  color: #37b9b0;
}

.pedido-mini-ings {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.pedido-mini-ing {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text);
}

.pedido-mini-qty {
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Assinatura card ── */
.assinatura-card {
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 2px 10px rgba(20,18,10,0.05);
}

[data-theme="dark"] .assinatura-card {
  background: rgba(26,48,57,0.55);
}

.assinatura-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.assinatura-status-badge {
  display: inline-flex;
  align-items: center;
  height: 1.55rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: rgba(34,197,94,0.1);
  color: #16a34a;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

[data-theme="dark"] .assinatura-status-badge {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
}

.assinatura-items {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

.assinatura-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.assinatura-meta strong { color: var(--text); }

.assinatura-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.assinatura-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 1.75rem;
  padding: 0 0.75rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(220, 38, 38, 0.35);
  color: #dc2626;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}

.assinatura-cancel-btn:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.6);
  color: #b91c1c;
}

.assinatura-cancel-btn:focus-visible {
  outline: 2px solid rgba(220, 38, 38, 0.4);
  outline-offset: 2px;
}

[data-theme="dark"] .assinatura-cancel-btn {
  border-color: rgba(248, 113, 113, 0.4);
  color: #f87171;
}

[data-theme="dark"] .assinatura-cancel-btn:hover {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.65);
  color: #fca5a5;
}

.assinatura-card {
  transition: opacity 0.4s ease, transform 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease;
  max-height: 1000px;
  overflow: hidden;
}

.assinatura-card-cancelling {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-color: transparent !important;
  pointer-events: none;
}

.mp-header {
  margin-bottom: 2rem;
}

.mp-header h2 {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
}

.mp-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
}

.mp-empty-icon {
  color: var(--text-muted);
  opacity: 0.4;
  margin-bottom: 1.5rem;
}

.mp-empty-state h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.mp-empty-state p {
  color: var(--text-muted);
  max-width: 400px;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.mp-start-btn {
  padding: 12px 28px;
  background: #dff726;
  color: #111b32;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.mp-start-btn:hover {
  background: #e8fb57;
}

.mp-finalized {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mp-order-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
}

.mp-order-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.mp-order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.mp-order-item:last-child {
  border-bottom: none;
}

.ai-intake-row {
  align-items: center;
}

.ai-known-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.ai-known-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.ai-intake-card {
  padding: 1.35rem;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px var(--shadow);
}

.ai-intake-card label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.ai-intake-input {
  width: 100%;
  min-height: 160px;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  font: inherit;
  line-height: 1.65;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ai-intake-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.ai-intake-chat {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.ai-intake-message {
  display: grid;
  gap: 0.35rem;
  max-width: 78%;
  padding: 1rem 1.05rem;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid var(--border);
}

.ai-intake-message-assistant {
  margin-right: auto;
}

.ai-intake-message-label {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
}

.ai-intake-message p {
  margin: 0;
  line-height: 1.65;
}

.ai-intake-actions {
  margin-top: 1.1rem;
}

.progress-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
  margin-bottom: 1rem;
}

.progress-copy h2 {
  font-size: 2rem;
}

.progress-copy p {
  margin-top: 0.45rem;
  max-width: 54ch;
}

.progress-pill {
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  color: var(--text-soft);
  white-space: nowrap;
}

.progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(17, 27, 50, 0.05);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

[data-theme="dark"] .progress-bar {
  background: rgba(255, 255, 255, 0.08);
}

.progress-fill {
  width: 0;
  height: 100%;
  background: var(--primary);
  transition: width 0.25s ease;
}

.question {
  padding: 1.7rem;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px var(--shadow);
}

.question h3 {
  font-size: 1.65rem;
  margin-bottom: 0.4rem;
}

.question p {
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.input-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.options {
  display: grid;
  gap: 0.75rem;
}

.extras-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.extra-card {
  padding: 1.05rem;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
}

.extra-label {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}

.upload-meta,
.extra-note {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.upload-meta strong {
  color: var(--text);
}

.option {
  padding: 1rem 1.1rem;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.option:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
}

.option.selected,
.option.multi-selected {
  border-color: rgba(17, 27, 50, 0.45);
  background: var(--primary-soft);
}

[data-theme="dark"] .option.selected,
[data-theme="dark"] .option.multi-selected {
  border-color: rgba(241, 235, 222, 0.45);
}

.survey-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.2rem;
}

.spinner {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 4px solid rgba(17, 27, 50, 0.1);
  border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
  margin-bottom: 1.2rem;
}

[data-theme="dark"] .spinner {
  border-color: rgba(241, 235, 222, 0.12);
  border-top-color: var(--primary);
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.dashboard-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 1.3rem;
}

.dash-header h2 {
  margin: 0.8rem 0 0.35rem;
  font-size: clamp(2rem, 4vw, 3rem);
}

.profile-summary,
.warning-panel,
.trust-card,
.stack-card,
.empty-stack {
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 24px var(--shadow);
}

.profile-summary {
  padding: 1.2rem 1.25rem;
  border-radius: 24px;
}

.profile-summary-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 1.2rem;
  align-items: start;
}

.profile-summary-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.profile-summary-name {
  font-weight: 800;
  font-size: 1rem;
}

.profile-summary-email {
  font-size: 0.88rem;
  color: var(--text-soft);
}

.profile-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

.profile-detail-row {
  padding: 0.85rem 0.95rem;
  border-radius: 18px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
}

.profile-detail-label {
  display: block;
  color: var(--text-soft);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.3rem;
}

.profile-detail-value {
  font-size: 0.9rem;
  line-height: 1.5;
}

.warning-panel {
  padding: 1.1rem 1.2rem;
  border-radius: 20px;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(16, 132, 126, 0.08), rgba(255, 182, 72, 0.06));
}

.warning-panel h3 {
  font-size: 1.1rem;
  margin-bottom: 0.45rem;
}

.warning-panel p {
  color: var(--text-muted);
  line-height: 1.65;
}

.warning-panel p + p {
  margin-top: 0.45rem;
}

.stack-card {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  border-radius: 22px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.stack-media {
  position: relative;
  min-height: 100%;
  background: var(--bg-soft);
}

.stack-card-img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transform: scale(0.9);
  object-fit: cover;
  display: block;
}

.stack-card-img-contain {
  object-fit: contain;
  object-position: center center;
  padding: 0.5rem 0.7rem 0.32rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 244, 236, 0.9));
}

[data-theme="dark"] .stack-card-img-contain {
  background: linear-gradient(180deg, rgba(23, 36, 43, 0.92), rgba(15, 29, 35, 0.96));
}

.stack-card-body {
  padding: 1.4rem;
}

.stack-card-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: start;
  margin-bottom: 0.7rem;
}

.stack-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}

.stack-card-header h3 {
  font-size: 1.8rem;
}

.category-tag,
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.category-tag {
  color: var(--primary);
  background: var(--primary-soft);
}

.badge-training {
  color: var(--primary);
  background: var(--primary-soft);
}

.badge-bedtime {
  color: #a8b8ff;
  background: rgba(168, 184, 255, 0.16);
}

.btn-remove {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text-soft);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.btn-remove:hover {
  color: #ff8585;
  border-color: rgba(255, 133, 133, 0.45);
}

.stack-card-dose {
  color: var(--primary);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 0.55rem;
}

.stack-card-brand {
  margin-top: 0.35rem;
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.stack-card-supply {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.stack-card-supply span {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.why-card {
  padding: 1rem 1.05rem;
  border-radius: 20px;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  margin-bottom: 0.9rem;
}

.why-label {
  display: inline-flex;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.why-card p,
.stack-card-desc,
.stack-card-timing,
.trust-card p,
.trust-card li,
.disclaimer,
.order-item,
.confirm-note {
  color: var(--text-muted);
  line-height: 1.7;
}

.stack-card-desc {
  margin-bottom: 0.75rem;
}

.stack-card-timing {
  font-size: 0.92rem;
}

.add-supplement-section,
.order-section {
  margin-top: 1.4rem;
}

.add-supplement-section {
  padding: 0;
}

.add-supplement-section h3,
.trust-card h3,
.recurrence-section h3 {
  font-size: 1.45rem;
  margin-bottom: 0.4rem;
}

.add-supplement-section p {
  margin-bottom: 1rem;
}

.add-supplement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.85rem;
}

.add-supplement-row .input-field {
  margin-bottom: 0;
}

.btn-add {
  min-width: 128px;
}

.trust-card {
  padding: 1.4rem;
  border-radius: 28px;
  margin-bottom: 1.2rem;
}

.trust-card ul {
  list-style: none;
  margin-top: 0.35rem;
}

.trust-card li {
  position: relative;
  padding-left: 1.4rem;
}

.trust-card li + li {
  margin-top: 0.4rem;
}

.trust-card li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--primary);
}

.recurrence-head {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.recurrence-recommendation {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 0.92rem;
}

.recurrence-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.recurrence-opt strong {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.recurrence-opt span {
  color: var(--text-muted);
  line-height: 1.5;
}

.recurrence-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(16, 132, 126, 0.12);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.btn-order {
  width: 100%;
  margin: 1.25rem 0 0.8rem;
}

.dashboard-disclaimer {
  margin-top: 1.2rem;
  text-align: center;
}

.empty-stack {
  padding: 2rem;
  border-radius: 24px;
  text-align: center;
}

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

.checkout-container {
  display: grid;
  gap: 1.25rem;
  min-height: calc(100vh - 88px);
  padding: 1.5rem 0 2.5rem;
}

.checkout-header {
  display: grid;
  gap: 0.55rem;
}

.checkout-header h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.checkout-stepper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-bottom: 2rem;
}

.checkout-step {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.checkout-step:hover {
  transform: translateY(-1px);
}

.checkout-step.is-active,
.checkout-step.is-complete {
  border-color: rgba(15, 143, 134, 0.35);
  background: rgba(15, 143, 134, 0.08);
}

.checkout-step-index {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  font-weight: 800;
  flex-shrink: 0;
}

.checkout-step.is-active .checkout-step-index,
.checkout-step.is-complete .checkout-step-index {
  background: rgba(15, 143, 134, 0.14);
  border-color: rgba(15, 143, 134, 0.28);
  color: #0f8f86;
}

.checkout-step-copy {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.checkout-step-copy strong {
  font-size: 0.98rem;
  color: var(--text-strong);
}

.checkout-step-copy span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.8fr);
  gap: 1.2rem;
  align-items: start;
}

.checkout-main,
.checkout-sidebar {
  display: grid;
  gap: 1rem;
}

.checkout-card {
  padding: 1.35rem;
  border-radius: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px var(--shadow);
}

.checkout-card-head,
.checkout-summary-top,
.checkout-summary-row,
.checkout-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.checkout-card-head {
  margin-bottom: 1rem;
}

.checkout-card-head span,
.checkout-summary-top span,
.checkout-summary-row span,
.checkout-summary-item span {
  color: var(--text-soft);
  font-size: 0.88rem;
}

.checkout-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

.checkout-form-grid .input-field {
  margin-bottom: 0;
}

.checkout-cep-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
}

.checkout-cep-row .input-field {
  margin-bottom: 0;
}

.checkout-cep-search-btn {
  margin-bottom: 0;
  white-space: nowrap;
  padding: 0.9rem 1rem;
}

.checkout-cep-search-btn[disabled] {
  opacity: 0.75;
  cursor: progress;
}

.checkout-autofill-locked {
  background: #eceff3;
  border-color: #d4dbe3;
  color: #5a6672;
}

[data-theme="dark"] .checkout-autofill-locked {
  background: rgba(237, 244, 243, 0.08);
  border-color: rgba(237, 244, 243, 0.16);
  color: #c8d4d8;
}

.checkout-field-span-2 {
  grid-column: 1 / -1;
}

.checkout-payment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.checkout-payment-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.72rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.checkout-payment-option:hover {
  transform: translateY(-1px);
}

.checkout-payment-option.selected {
  border-color: rgba(17, 27, 50, 0.45);
  background: var(--primary-soft);
  color: var(--primary);
}

[data-theme="dark"] .checkout-payment-option.selected {
  border-color: rgba(241, 235, 222, 0.45);
}

.checkout-payment-note {
  margin-bottom: 1rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.checkout-payment-block h4 {
  margin-bottom: 0.75rem;
  font-size: 0.92rem;
  color: var(--text-strong);
}

.checkout-option-list {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.checkout-check-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.45;
  cursor: pointer;
}

.checkout-check-option input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.checkout-inline-note {
  margin: -0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.checkout-actions {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.checkout-summary-card {
  position: sticky;
  top: calc(var(--screen-top-offset) + 1rem);
}

.checkout-summary-top {
  margin-bottom: 1rem;
}

.checkout-summary-meta {
  display: grid;
  gap: 0.6rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.checkout-summary-row strong {
  text-align: right;
}

.checkout-summary-list {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.checkout-summary-mini-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: stretch;
  padding: 0.72rem;
  border-radius: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.checkout-summary-mini-media {
  width: 86px;
  aspect-ratio: 43 / 58;
  min-height: 116px;
  height: 116px;
  border-radius: 14px;
  overflow: hidden;
  background: #eef1f4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.checkout-summary-mini-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.checkout-summary-mini-body {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: 0.1rem 0;
}

.checkout-summary-mini-head {
  display: grid;
  gap: 0.12rem;
  min-width: 0;
}

.checkout-summary-mini-kicker {
  color: #0f8f86;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.checkout-summary-mini-head strong {
  color: var(--text-strong);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.22;
}

.checkout-summary-mini-head span:not(.checkout-summary-mini-kicker) {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.checkout-summary-mini-ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.24rem;
  max-height: 5.1rem;
  overflow: auto;
}

.checkout-summary-mini-ingredients li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
  align-items: baseline;
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.25;
}

.checkout-summary-mini-ingredients .mp-ing-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.checkout-summary-mini-ingredients .mp-ing-qty {
  color: var(--text-muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.checkout-summary-group {
  display: grid;
  gap: 0.55rem;
}

.checkout-summary-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.checkout-summary-group-head:hover {
  background: rgba(15, 143, 134, 0.06);
  border-color: rgba(15, 143, 134, 0.3);
}

.checkout-summary-group-head-text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.checkout-summary-group-head-text strong {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkout-summary-group-head-text span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.checkout-summary-group-arrow {
  flex-shrink: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.checkout-summary-group.is-open .checkout-summary-group-head {
  border-color: rgba(15, 143, 134, 0.35);
}

.checkout-summary-group-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.55rem;
}

.checkout-total-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0;
  margin: 0.25rem 0 0.9rem;
  border-top: 1px solid var(--border);
}

.checkout-promo-box {
  margin: 0.2rem 0 0.2rem;
  padding: 0.75rem 0 0.25rem;
  border-top: 1px solid var(--border);
}
.checkout-promo-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.45rem;
}
.checkout-promo-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.checkout-promo-row .input-field {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: inherit;
  font-size: 0.95rem;
}
.checkout-promo-apply {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.checkout-promo-error {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: #c4323e;
}
.checkout-promo-applied {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  background: rgba(55, 185, 176, 0.12);
  color: #0b6f68;
  font-size: 0.88rem;
}
.checkout-promo-applied-label {
  font-weight: 500;
  opacity: 0.85;
}
.checkout-promo-applied strong {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.checkout-promo-remove {
  margin-left: auto;
  appearance: none;
  border: none;
  background: transparent;
  color: currentColor;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
  opacity: 0.75;
}
.checkout-promo-remove:hover { opacity: 1; }

.checkout-summary-row.checkout-summary-promo-applied {
  color: #0b6f68;
  font-weight: 500;
}
.checkout-summary-row.checkout-summary-promo-applied strong {
  font-weight: 700;
}

.checkout-total-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.checkout-total-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-strong);
  text-align: right;
}

.checkout-total-period {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0.15rem;
}

[data-theme="dark"] .checkout-summary-group-head:hover {
  background: rgba(15, 207, 196, 0.08);
  border-color: rgba(15, 207, 196, 0.35);
}

[data-theme="dark"] .checkout-summary-group.is-open .checkout-summary-group-head {
  border-color: rgba(15, 207, 196, 0.4);
}

[data-theme="dark"] .checkout-summary-mini-card {
  background: rgba(237, 244, 243, 0.05);
  border-color: rgba(237, 244, 243, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .checkout-summary-mini-media {
  background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .checkout-step.is-active,
[data-theme="dark"] .checkout-step.is-complete {
  border-color: rgba(15, 207, 196, 0.35);
  background: rgba(15, 207, 196, 0.08);
}

/* Checkout field validation */
.input-field.is-invalid {
  border-color: #e05252;
}
.input-field.is-invalid:focus {
  border-color: #e05252;
  box-shadow: 0 0 0 4px rgba(224, 82, 82, 0.15);
}
.checkout-field-error {
  display: block;
  font-size: 0.82rem;
  color: #e05252;
  margin-top: 0.35rem;
  line-height: 1.3;
}
.checkout-card-brand {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-left: 0.5rem;
  vertical-align: middle;
}
.checkout-review {
  padding: 1.25rem 0;
}
.checkout-review-section {
  margin-bottom: 1.25rem;
}
.checkout-review-section h4 {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-strong);
}
.checkout-review-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  padding: 0.3rem 0;
  color: var(--text);
}
.checkout-review-total {
  font-size: 1.1rem;
  font-weight: 800;
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  margin-top: 0.5rem;
}
[data-theme="dark"] .checkout-field-error {
  color: #f07070;
}
[data-theme="dark"] .input-field.is-invalid {
  border-color: #f07070;
}

.checkout-summary-item {
  padding: 0.8rem 0.85rem;
  border-radius: 18px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  align-items: flex-start;
}

.checkout-summary-item-ingredients {
  display: block;
}

.checkout-summary-ingredient-bullets {
  margin: 0;
  max-height: none;
  overflow: visible;
}

.checkout-summary-item div {
  display: grid;
  gap: 0.22rem;
}

.confirm-icon {
  width: 68px;
  height: 68px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 1rem;
  font-size: 1.6rem;
  background: var(--primary);
  color: var(--bg);
}

.order-details {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: 20px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  text-align: left;
}

.order-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.order-detail-row span {
  color: var(--text-soft);
}

.order-items {
  padding-top: 0.8rem;
}

.order-item + .order-item {
  margin-top: 0.35rem;
}

/* ── Lia Orb (canvas-based) ── */
.lia-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lia-orb {
  flex-shrink: 0;
  display: block;
  width: 18px;
  height: 18px;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}

/* ── Category Tabs ── */
.category-tabs {
  position: fixed;
  top: var(--navbar-h);
  left: 0;
  right: 0;
  z-index: 99;
  backdrop-filter: blur(14px);
  background: var(--panel);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  overflow: visible;
  border-bottom: 1px solid var(--border);
}

.category-tabs::after {
  display: none;
}

[data-theme="light"] .category-tabs {
  box-shadow: 0 10px 30px rgba(18, 60, 74, 0.08);
}

[data-theme="dark"] .category-tabs {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}

body[data-screen="auth"] .category-tabs,
body[data-screen="loading"] .category-tabs {
  display: none;
}

.category-tabs-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  width: min(1220px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 0.85rem 0;
  justify-content: center;
  position: relative;
  overflow-x: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.category-tabs-inner::-webkit-scrollbar {
  display: none;
}

.cat-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: "Nunito Sans", sans-serif;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.72rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  overflow: visible;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cat-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(191, 238, 255, 0.36);
  opacity: 0;
  transform: scale(0.96);
  transform-origin: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: -1;
}

.cat-tab::after {
  display: none;
}

.cat-tab-static {
  cursor: default;
}

.cat-tab-secondary {
  color: var(--text-soft);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cat-tab-cta {
  color: #fff;
  background: linear-gradient(135deg, #0e7a86 0%, #123c4a 100%);
  border-color: transparent;
  box-shadow: 0 16px 32px rgba(18, 60, 74, 0.18);
}

.cat-tab-cta::before {
  background: rgba(255, 255, 255, 0.12);
}

.cat-tab-cta-label {
  display: inline-flex;
  align-items: center;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: inherit;
}

[data-theme="light"] .cat-tab::before {
  background: rgba(191, 238, 255, 0.36);
}

[data-theme="dark"] .cat-tab::before {
  background: rgba(241, 235, 222, 0.12);
}

[data-theme="dark"] .cat-tab-cta {
  background: linear-gradient(135deg, #4db3c1 0%, #285863 100%);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
}

.cat-tab:hover::before,
.cat-tab:focus-visible::before,
.cat-tab.active::before {
  opacity: 1;
  transform: scale(1);
}

.cat-tab:hover,
.cat-tab:focus-visible {
  color: var(--text);
  transform: translateY(-1px);
}

.cat-tab.active::before {
  background: rgba(228, 231, 237, 0.9);
}

[data-theme="dark"] .cat-tab.active::before {
  background: rgba(104, 115, 123, 0.42);
}

.cat-tab-cta:hover,
.cat-tab-cta:focus-visible,
.cat-tab-cta.active {
  color: #fff;
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .cat-tab::before,
  .cat-tab::after {
    display: none;
  }
}

.cat-tab.active {
  color: var(--primary);
  font-weight: 700;
  border-color: rgba(18, 60, 74, 0.08);
}

.cat-tab-cta.active {
  color: #fff;
  border-color: transparent;
}

/* ── Hero Carousel ── */
.hero-carousel-window {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  border-radius: 20px;
}

.hero-carousel {
  display: flex;
  gap: 1rem;
  width: max-content;
  max-width: none;
  transition: transform 0.45s ease;
  will-change: transform;
}

.hero-supplement-card {
  flex: 0 0 calc((100% - 2rem) / 3);
  min-width: 0;
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  overflow: hidden;
}

.hero-supplement-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: none;
}

.hero-supplement-body {
  display: grid;
  gap: 0.55rem;
}

.hero-supplement-tag {
  display: inline-flex;
  width: fit-content;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-supplement-body h3 {
  font-size: 1.02rem;
  line-height: 1.25;
}

.hero-supplement-body p {
  color: var(--text-muted);
  line-height: 1.55;
  font-size: 0.84rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 430px;
}

.hero-supplement-meta {
  display: grid;
  gap: 0.28rem;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #ffffff;
}

[data-theme="dark"] .hero-supplement-meta {
  background: rgba(255, 255, 255, 0.04);
}

.hero-supplement-meta span {
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-supplement-shell {
  display: grid;
  gap: 1rem;
}

.hero-supplement-card {
  display: grid;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.72);
}

[data-theme="dark"] .hero-supplement-card {
  background: rgba(255, 255, 255, 0.04);
}

.hero-supplement-image {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}

.hero-supplement-body {
  display: grid;
  gap: 0.85rem;
  padding: 1rem 1.05rem 1.1rem;
}

.hero-supplement-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-supplement-card h3 {
  font-size: 1.35rem;
  line-height: 1.1;
}

.hero-supplement-card p {
  color: var(--text-muted);
  line-height: 1.65;
  display: block;
  min-height: 0;
}

.hero-supplement-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

.hero-supplement-timing {
  color: var(--text-soft);
  font-size: 0.82rem;
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-supplement-meta strong {
  font-size: 0.82rem;
  line-height: 1.5;
}

.hero-catalog-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

.hero-carousel-nav {
  display: inline-flex;
  gap: 0.55rem;
}

.hero-carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  font-size: 1.15rem;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.hero-carousel-arrow:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  background: var(--surface-alt);
}

.hero-rail-card-warm {
  background:
    linear-gradient(180deg, rgba(17, 27, 50, 0.08), rgba(255, 255, 255, 0.94)),
    var(--surface) !important;
}

@media (max-width: 1024px) {
  .feed-browse-grid {
    grid-template-columns: 1fr 1fr;
  }

  .feed-goal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-supplement-card {
    flex-basis: calc((100% - 1rem) / 2);
  }
}

@media (max-width: 640px) {
  .landing-footer,
  .feed-goal-grid,
  .feed-browse-grid {
    grid-template-columns: 1fr;
  }

  .hero-supplement-card {
    flex-basis: 100%;
  }
}

[data-theme="dark"] .hero-rail-card-warm {
  background:
    linear-gradient(180deg, rgba(241, 235, 222, 0.1), rgba(26, 37, 64, 0.9)),
    var(--surface) !important;
}

/* ── Product Scroll Row ── */
.product-scroll-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  padding: 0.5rem 0 1rem;
}

/* ── Product Cards ── */
.product-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 8px 20px var(--shadow);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card-clickable {
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px var(--shadow);
}

.product-card-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.product-card-img-contain {
  object-fit: contain;
  object-position: center 79%;
  padding: 0 0.1rem 0.28rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 244, 236, 0.9));
}

[data-theme="dark"] .product-card-img-contain {
  background: linear-gradient(180deg, rgba(23, 36, 43, 0.92), rgba(15, 29, 35, 0.96));
}

/* Bottle frame: centers PNG bottles with breathing room */
.product-card-img-frame {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 244, 236, 0.9));
  box-sizing: border-box;
}

[data-theme="dark"] .product-card-img-frame {
  background: linear-gradient(180deg, rgba(23, 36, 43, 0.92), rgba(15, 29, 35, 0.96));
}

.product-card-img-frame .product-card-img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center center;
  transform: translateY(7%);
  padding: 0;
  background: none;
}

.product-card-body {
  padding: 1rem 1.1rem 1.15rem;
  display: grid;
  gap: 0.42rem;
}

.product-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.product-card-topline .product-card-category {
  margin-bottom: 0;
}

.product-card-category {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: var(--primary-soft);
  margin-bottom: 0.5rem;
}

.product-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
  background: rgba(17, 27, 50, 0.06);
}

.product-card-name {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}

.product-card-brand {
  margin: 0 0 0.4rem;
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.product-card-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.55;
  margin-bottom: 0.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card-sponsored {
  margin: -0.1rem 0 0.1rem;
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 700;
}

.product-card-reviews {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.05rem;
}

.product-card-stars {
  color: #1f1c5a;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

[data-theme="dark"] .product-card-stars {
  color: #ffc45e;
  text-shadow: 0 0 10px rgba(255, 196, 94, 0.18);
}

.product-card-review-copy {
  color: var(--text-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.product-card-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.55rem;
}

.product-card-timing {
  font-size: 0.78rem;
  color: var(--text-soft);
}

.product-card-action {
  padding: 0.45rem 0.78rem;
  border-radius: 999px;
  border: 1px solid rgba(31, 28, 90, 0.14);
  background: #ffffff;
  color: #1f1c5a;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.product-card-link {
  text-decoration: none;
}

.product-card-action:hover {
  transform: translateY(-1px);
  border-color: rgba(31, 28, 90, 0.32);
  background: rgba(31, 28, 90, 0.04);
}

.protocol-stack-shell {
  display: grid;
  gap: 2rem;
  padding-bottom: 3.5rem;
}

.protocol-stack-back {
  justify-self: start;
}

.protocol-stack-hero {
  display: grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

.protocol-stack-visual {
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 8px 20px var(--shadow);
  overflow: hidden;
}

.protocol-stack-image {
  width: 100%;
  display: block;
}

.protocol-stack-copy {
  display: grid;
  gap: 1rem;
}

.protocol-stack-copy h1 {
  margin: 0;
}

.protocol-stack-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.protocol-stack-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.72rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--primary);
  background: var(--primary-soft);
}

.protocol-stack-section {
  display: grid;
  gap: 1rem;
}

.protocol-stack-section-heading {
  margin-bottom: 0;
}

.protocol-stack-ingredients {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.protocol-stack-ingredient-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 8px 20px var(--shadow);
}

.protocol-stack-ingredient-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 244, 236, 0.9));
}

.protocol-stack-ingredient-image-contain {
  object-fit: contain;
  object-position: center 79%;
  padding: 0.15rem;
}

.protocol-stack-ingredient-copy {
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.protocol-stack-ingredient-category {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}

.protocol-stack-ingredient-copy h3 {
  margin: 0;
  font-size: 1.05rem;
}

.protocol-stack-ingredient-copy p {
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}

.protocol-stack-ingredient-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.2rem;
}

.protocol-stack-ingredient-meta span {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.58rem;
  border-radius: 999px;
  background: rgba(16, 132, 126, 0.08);
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 700;
}

@media (max-width: 900px) {
  .protocol-stack-hero,
  .protocol-stack-ingredients {
    grid-template-columns: 1fr;
  }

  .protocol-stack-ingredient-card {
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .protocol-stack-ingredient-card {
    grid-template-columns: 1fr;
  }

  .protocol-stack-ingredient-image {
    height: 180px;
  }
}

/* ── Favorites / Browse Section ── */
.browse-section,
.favorites-section {
  padding: 1.5rem 0 0;
}

/* ── Site Footer ── */
.site-footer {
  margin-top: auto;
  position: relative;
  isolation: isolate;
  padding: 2.5rem 0 1.5rem;
  border-top: 1px solid rgba(237, 244, 243, 0.1);
  background: #111b32;
  color: #edf4f3;
  transition: background 0.25s ease, color 0.25s ease;
}

.site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: inherit;
  z-index: -1;
  pointer-events: none;
}

/* Light mode → footer is dark navy */
[data-theme="light"] .site-footer {
  background: #111b32;
  border-top-color: rgba(237, 244, 243, 0.1);
  color: #edf4f3;
}
/* Dark mode → footer is warm beige */
[data-theme="dark"] .site-footer {
  background: #f6f4ec;
  border-top-color: rgba(28, 28, 26, 0.12);
  color: #1c1c1a;
}

.footer-logo-light { display: block; }
.footer-logo-dark  { display: none; }
[data-theme="light"] .footer-logo-light { display: block; }
[data-theme="light"] .footer-logo-dark  { display: none; }
[data-theme="dark"]  .footer-logo-light { display: none; }
[data-theme="dark"]  .footer-logo-dark  { display: block; }

[data-theme="light"] .site-footer .footer-col h4,
[data-theme="light"] .site-footer .footer-payments h4,
[data-theme="light"] .site-footer .footer-social > span,
[data-theme="light"] .site-footer .footer-bottom-brand,
[data-theme="light"] .site-footer .footer-bottom-rich > span {
  color: #edf4f3;
}

[data-theme="dark"] .site-footer .footer-col h4,
[data-theme="dark"] .site-footer .footer-payments h4,
[data-theme="dark"] .site-footer .footer-social > span,
[data-theme="dark"] .site-footer .footer-bottom-brand,
[data-theme="dark"] .site-footer .footer-bottom-rich > span {
  color: #1c1c1a;
}

[data-theme="light"] .site-footer .footer-brand p,
[data-theme="light"] .site-footer .footer-col > p,
[data-theme="light"] .site-footer .footer-col a,
[data-theme="light"] .site-footer .footer-social,
[data-theme="light"] .site-footer .footer-copy {
  color: #b7c3c8;
}

[data-theme="dark"] .site-footer .footer-brand p,
[data-theme="dark"] .site-footer .footer-col > p,
[data-theme="dark"] .site-footer .footer-col a,
[data-theme="dark"] .site-footer .footer-social,
[data-theme="dark"] .site-footer .footer-copy {
  color: #4a4a45;
}

[data-theme="light"] .site-footer .footer-col a:hover {
  color: #37b9b0;
}

[data-theme="dark"] .site-footer .footer-col a:hover {
  color: #10847e;
}

[data-theme="light"] .site-footer .footer-bottom {
  border-top-color: rgba(237, 244, 243, 0.1);
  color: #edf4f3;
}

[data-theme="dark"] .site-footer .footer-bottom {
  border-top-color: rgba(28, 28, 26, 0.12);
  color: #6e6e68;
}

[data-theme="light"] .site-footer .footer-input {
  background: rgba(237, 244, 243, 0.06);
  border-color: rgba(237, 244, 243, 0.15);
  color: #edf4f3;
}

[data-theme="light"] .site-footer .footer-input::placeholder {
  color: #92a4ab;
}

[data-theme="dark"] .site-footer .footer-input {
  background: rgba(28, 28, 26, 0.06);
  border-color: rgba(28, 28, 26, 0.15);
  color: #1c1c1a;
}

[data-theme="dark"] .site-footer .footer-input::placeholder {
  color: #6e6e68;
}

[data-theme="light"] .site-footer .footer-social-link {
  color: #edf4f3;
}

[data-theme="dark"] .site-footer .footer-social-link {
  color: #4a4a45;
}

[data-theme="light"] .site-footer .footer-social-link img.footer-social-icon {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

[data-theme="light"] .site-footer .footer-social-link:hover img.footer-social-icon {
  opacity: 0.72;
}

[data-theme="dark"] .site-footer .footer-social-link img.footer-social-icon {
  filter: none;
  opacity: 1;
}

[data-theme="light"] .site-footer .payment-logo-card {
  background: transparent;
  border: none;
  padding: 0;
}

[data-theme="light"] .site-footer .language-trigger {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(237, 244, 243, 0.18);
  color: #edf4f3;
}

[data-theme="light"] .site-footer .language-menu {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(237, 244, 243, 0.18);
  color: #edf4f3;
}

[data-theme="light"] .site-footer .language-option {
  background: transparent;
  color: #edf4f3;
}

[data-theme="light"] .site-footer .language-trigger-caret {
  color: #92a4ab;
}

[data-theme="light"] .site-footer .language-option-copy span {
  color: #b7c3c8;
}

[data-theme="light"] .site-footer .language-menu-note {
  color: #edf4f3;
}

[data-theme="light"] .site-footer .language-menu-note a {
  color: #37b9b0;
}

[data-theme="light"] .site-footer .language-menu-note span:not(.lang-flag-emoji) {
  color: #b7c3c8;
}

/* Popover (.language-menu) has a cream surface even inside the dark footer,
   so restore navy/slate text on its inner content in light mode — otherwise
   the near-white overrides above leave "PT-BR", "EN", and the sales note
   unreadable on the light popover background. */
[data-theme="light"] .site-footer .language-menu .language-option-copy strong {
  color: #111b32;
}
[data-theme="light"] .site-footer .language-menu .language-option-copy span {
  color: #5a6478;
}
[data-theme="light"] .site-footer .language-menu .language-menu-note {
  color: #111b32;
}
[data-theme="light"] .site-footer .language-menu .language-menu-note strong {
  color: #111b32;
}
[data-theme="light"] .site-footer .language-menu .language-menu-note span:not(.lang-flag-emoji) {
  color: #5a6478;
}
[data-theme="light"] .site-footer .language-menu .language-menu-note a {
  color: #0a63ce;
}

[data-theme="dark"] .site-footer .language-trigger,
[data-theme="dark"] .site-footer .language-menu,
[data-theme="dark"] .site-footer .language-option {
  background: rgba(28, 28, 26, 0.06);
  border-color: rgba(28, 28, 26, 0.14);
  color: #1c1c1a;
}

[data-theme="dark"] .site-footer .language-trigger-caret,
[data-theme="dark"] .site-footer .language-option-copy span,
[data-theme="dark"] .site-footer .language-menu-note span:not(.lang-flag-emoji),
[data-theme="dark"] .site-footer .language-menu-note a {
  color: #92a4ab;
}

/* Dark mode: popover surface is dark, so the option strong labels
   ("Português"/"English") and the radio outline need to shift to cream
   to stay legible. Matches the strong-label tone already used by the
   "Você está comprando na Go2 Brasil" line in this popover. */
[data-theme="dark"] .site-footer .language-menu .language-option-copy strong {
  color: #f4efe4;
}
[data-theme="dark"] .site-footer .language-menu .language-option-radio {
  border-color: rgba(244, 239, 228, 0.6);
}
.footer-shell {
  display: grid;
  gap: 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2rem;
}

.footer-grid-rich {
  grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr));
  align-items: start;
}

.footer-brand p {
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.7;
}

.footer-logo {
  width: 160px;
  border-radius: 0;
  box-shadow: none;
  display: block;
}

.footer-col h4 {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  color: var(--text);
  letter-spacing: -0.01em;
}

.footer-col a {
  display: block;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.88rem;
  padding: 0.3rem 0;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--primary);
}

.footer-col > p {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.footer-payments {
  display: grid;
  gap: 1.35rem;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

.footer-payments-head {
  display: grid;
  gap: 0.6rem;
}

.footer-payments h4,
.footer-social > span {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

.payment-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.payment-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 40px;
  padding: 0;
  border: none;
  background: transparent;
}

.payment-logo-img {
  height: 28px;
  width: auto;
  display: block;
}

.payment-logo-img-light-theme,
.payment-logo-img-dark-theme {
  display: none;
}

[data-theme="light"] .payment-logo-img-light-theme {
  display: block;
}

[data-theme="dark"] .payment-logo-img-dark-theme {
  display: block;
}

.payment-logo-img-visa {
  height: 31px;
}

/* Google Pay uses the default .payment-logo-img height (28px) so the
   text size matches mastercard / maestro. */

.payment-logo-img-pix {
  height: 38px;
}

.footer-social {
  display: grid;
  gap: 0.6rem;
  padding-top: 0.3rem;
  border-top: none;
  color: var(--text-soft);
}

.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text-muted);
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: none;
  background: transparent;
}

.footer-social-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  opacity: 0.72;
}

.footer-bottom-rich {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-bottom-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* Language dropdown opens upward when in footer */
.footer-bottom-controls .language-menu {
  top: auto;
  bottom: calc(100% + 0.6rem);
}

.footer-bottom-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-bottom-logo {
  width: 110px;
  height: auto;
  display: block;
}

.footer-bottom-rich .footer-copy {
  text-align: right;
}

/* Lia Chat Panel */
.lia-chat-panel {
  display: none;
  position: fixed;
  right: 1.1rem;
  bottom: calc(1.1rem + 48px + 14px);
  z-index: 130;
  width: 370px;
  height: 520px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  flex-direction: column;
  overflow: hidden;
}

.lia-chat-panel.open {
  display: flex;
}

.lia-chat-panel.is-chat .lia-chat-panel-header,
.lia-chat-panel.is-chat .lia-chat-panel-footer {
  display: none;
}

.lia-chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.lia-chat-panel-title {
  font-size: 16px;
  font-weight: 700;
  color: #111b32;
}

.lia-chat-panel-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #111b32;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.lia-chat-panel-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  text-align: center;
  overflow-y: auto;
}

.lia-chat-panel.is-chat .lia-chat-panel-body {
  display: block;
  padding: 0;
  text-align: left;
}

.lia-chat-panel-avatar-wrap {
  position: relative;
  width: 120px;
  margin-bottom: 1.2rem;
}

.lia-chat-panel-avatar {
  width: 120px;
  height: auto;
  display: block;
}

.lia-chat-panel-orb {
  position: absolute;
  width: 16px;
  height: 16px;
  bottom: 60%;
  left: 10%;
  border-radius: 50%;
}

.lia-chat-panel-heading {
  font-size: 16px;
  font-weight: 700;
  color: #111b32;
  margin: 0 0 0.6rem;
}

.lia-chat-panel-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: #555;
  margin: 0;
  max-width: 300px;
}

.lia-chat-panel-footer {
  padding: 16px 20px;
  display: flex;
  justify-content: center;
}

.lia-chat-panel-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #dff726;
  color: #111b32;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.lia-chat-panel-cta:hover {
  background: #e8fb57;
  transform: translateY(-1px);
}

/* Lia orb FAB — only visible on protocol-builder */
.lia-orb-fab {
  display: none;
  position: fixed;
  right: calc(1.1rem + 48px + 10px);
  bottom: 1.1rem;
  z-index: 120;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

body[data-screen="protocol-builder"] .lia-orb-fab {
  display: inline-flex;
}

body[data-screen="protocol-builder"] .lia-bubble {
  display: none !important;
}

.lia-chat-panel.is-chat .pb-lia-chat-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}

.lia-chat-panel.is-chat .pb-lia-chat-msgs {
  flex: 1;
  max-height: none;
  min-height: 0;
}

.lia-chat-panel.is-chat .pb-lia-composer {
  margin-top: auto;
}

.lia-orb-fab-img {
  width: 38px;
  height: 38px;
  display: block;
  border-radius: 50%;
}

.lia-orb-fab-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  white-space: nowrap;
  padding: 8px 14px;
  background: #111b32;
  color: #f1ebde;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.lia-orb-fab-tooltip::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #111b32;
  border-right: none;
}

.lia-orb-fab:hover .lia-orb-fab-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.whatsapp-support {
  display: none !important;
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  text-decoration: none;
}

.whatsapp-tooltip {
  display: none;
}

.whatsapp-logo {
  width: 48px;
  height: 48px;
  display: block;
}

.footer-subscribe {
  display: flex;
  gap: 0.5rem;
}

.footer-input {
  flex: 1;
  margin-bottom: 0;
  padding: 0.7rem 0.85rem;
  font-size: 0.88rem;
}

.footer-sub-btn {
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(28, 28, 26, 0.12);
  color: #6e6e68;
  font-size: 0.82rem;
}

.footer-copy {
  white-space: normal;
}

.site-footer,
.site-footer * {
  color-scheme: light;
}

.site-footer .language-trigger,
.site-footer .language-menu,
.site-footer .language-option {
  border-color: rgba(28, 28, 26, 0.14);
  background: rgba(28, 28, 26, 0.06);
  color: #1c1c1a;
}

/* Footer-scoped color tweak only — keep the button's border/background
   from the base .theme-toggle rule so it stays visible. */
.site-footer .theme-toggle {
  color: var(--text);
}

.site-footer .language-trigger-caret,
.site-footer .language-option-copy span,
.site-footer .language-menu-note span:not(.lang-flag-emoji),
.site-footer .language-menu-note a {
  color: #7c786f;
}

.site-footer .language-menu-note span:not(.lang-flag-emoji),
.site-footer .language-menu-note a {
  font-size: 0.92rem;
  line-height: 1.55;
}

.site-footer .language-menu-note strong,
.footer-bottom-rich > span {
  color: #1c1c1a;
}

[data-theme="light"] .site-footer .theme-toggle {
  color: #1c1c1a !important;
}

[data-theme="dark"] .site-footer .theme-toggle {
  color: #edf4f3 !important;
}

[data-theme="light"] .footer-bottom-rich > span {
  color: #1c1c1a;
}

[data-theme="light"] .site-footer .language-menu-note strong {
  color: #111b32;
}

[data-theme="dark"] .footer-bottom-rich > span,
[data-theme="dark"] .site-footer .language-menu-note strong {
  color: #edf4f3;
}

.footer-bottom-logo-light { display: block; }
.footer-bottom-logo-dark  { display: none; }
[data-theme="light"] .footer-bottom-logo-light { display: block; }
[data-theme="light"] .footer-bottom-logo-dark  { display: none; }
[data-theme="dark"] .footer-bottom-logo-light  { display: none; }
[data-theme="dark"] .footer-bottom-logo-dark   { display: block; }

/* Adjust screen padding for category tabs */
body[data-screen="landing"] .screen {
  padding-top: var(--screen-top-offset);
}

body[data-screen="category-page"] .screen,
body[data-screen="protocols-page"] .screen,
body[data-screen="stack-detail"] .screen {
  padding-top: calc(var(--screen-top-offset) + 10px);
}

body[data-screen="ai-bot"] .screen {
  padding-top: calc(var(--screen-top-offset) + 56px);
}

body[data-screen="info-page"] .screen {
  padding-top: var(--screen-top-offset);
}

body[data-screen="dashboard"] .screen,
body[data-screen="order-confirm"] .screen {
  padding-top: calc(var(--screen-top-offset) + 0.5rem);
}

body[data-screen="order-confirm"] .site-footer .footer-copy {
  display: none;
}

/* Meus Pedidos has a prominent title + subtitle at the top and needs
   more breathing room than the cart/checkout screens. */
body[data-screen="meus-pedidos"] .screen {
  padding-top: calc(var(--screen-top-offset) + 2.25rem);
}

.meu-protocolo-container .mp-header {
  margin-bottom: 1.5rem;
}

body[data-screen="protocol-builder"] .screen {
  min-height: auto;
  background: #f1ebde;
}

body[data-screen="protocol-builder"] {
  background: #f1ebde;
}
[data-theme="dark"] body[data-screen="protocol-builder"],
[data-theme="dark"] body[data-screen="protocol-builder"] .screen {
  background: #f1ebde;
}

.category-tabs {
  top: var(--navbar-h);
}

.info-page-container {
  display: grid;
  gap: 1.5rem;
  padding-bottom: 3.5rem;
}

.info-page-hero {
  display: grid;
  gap: 0.9rem;
  padding: 3rem 0 0.5rem;
  text-align: center;
}

.info-page-hero h1 {
  font-size: clamp(2.3rem, 4.5vw, 4rem);
  line-height: 1.02;
}

.info-page-copy {
  max-width: 64ch;
  color: var(--text-muted);
  line-height: 1.7;
}

.info-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.info-page-card {
  padding: 1.25rem;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 18px 36px rgba(20, 52, 203, 0.05);
}

.info-page-card h3 {
  margin-bottom: 0.65rem;
  font-size: 1.05rem;
}

.info-page-card p {
  color: var(--text-muted);
  line-height: 1.7;
}

.info-page-card-whatsapp {
  cursor: pointer;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.info-page-card-whatsapp:hover {
  border-color: #25d366;
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.25), 0 18px 36px rgba(37, 211, 102, 0.12);
  transform: translateY(-2px);
}

.info-page-card-whatsapp:hover h3 {
  color: #25d366;
  transition: color 0.3s ease;
}

.account-form-card {
  width: min(480px, 100%);
  padding: 2rem;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 10px 24px var(--shadow);
  display: grid;
  gap: 1.2rem;
}

.account-form-card .input-group {
  display: grid;
  gap: 0.35rem;
}

.account-form-card .input-group label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-muted);
}

.acct-field-row {
  border-bottom: 1px solid var(--border);
  padding: 0.9rem 0;
}

.acct-field-row:last-child {
  border-bottom: none;
}

.acct-field-display {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.acct-field-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  width: 160px;
  flex-shrink: 0;
}

.acct-field-value {
  flex: 1;
  min-width: 0;
  font-size: 0.97rem;
  color: var(--text);
  word-break: break-word;
}

@media (max-width: 520px) {
  .acct-field-display {
    flex-wrap: wrap;
  }
  .acct-field-label {
    width: 100%;
  }
  .acct-field-value {
    flex: 1 1 auto;
  }
}

.acct-edit-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  flex-shrink: 0;
}

.acct-edit-btn:hover {
  background: var(--primary-soft, rgba(66,133,244,0.08));
}

.acct-field-edit {
  padding-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.acct-field-edit.hidden {
  display: none;
}

.acct-edit-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

.account-form-card .account-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.account-form-card .account-actions {
  display: flex;
  gap: 0.8rem;
  padding-top: 0.4rem;
}

.account-form-card .account-section-label {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
  .navbar {
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
  }

  .nav-search {
    max-width: 100%;
  }

  .nav-right {
    justify-content: flex-start;
    gap: 0.55rem;
  }

  .stack-card {
    grid-template-columns: 1fr;
  }

  .stack-media {
    min-height: 220px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid-rich {
    grid-template-columns: 1fr 1fr;
  }

  .category-tabs-inner {
    width: calc(100% - 1.5rem);
    justify-content: flex-start;
    gap: 0.5rem;
    padding-inline: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .category-tool-group-sort {
    margin-left: 0;
  }

  .category-filter-panel,
  .category-sort-menu {
    min-width: min(100vw - 2rem, 280px);
  }

  .profile-summary-grid,
  .recurrence-options,
  .checkout-layout,
  .checkout-stepper,
  .checkout-form-grid,
  .extras-grid,
  .profile-details,
  .input-row,
  .ai-bot-hero,
  .ai-bot-grid,
  .process-grid,
  .collection-grid,
  .pack-grid,
  .values-grid,
  .story-grid,
  .landing-grid {
    grid-template-columns: 1fr;
  }

  .checkout-cep-row {
    grid-template-columns: 1fr;
  }

  .checkout-cep-search-btn {
    width: 100%;
  }

  .progress-row,
  .survey-nav,
  .landing-footer,
  .add-supplement-row,
  .auth-actions {
    flex-direction: column;
  }

  .auth-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .auth-primary-actions {
    grid-template-columns: 1fr;
  }

  .landing-footer {
    align-items: flex-start;
  }

  .survey-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .category-page-hero-top {
    flex-direction: column;
    align-items: flex-start;
  }

  .ai-bot-hero {
    padding: 1.15rem 1rem;
    text-align: center;
    grid-template-columns: minmax(0, 1fr);
  }

  .ai-bot-integrations-card {
    grid-template-columns: 1fr;
    justify-items: stretch;
    text-align: left;
  }

  .ai-bot-whoop-dashboard {
    grid-template-columns: 1fr;
  }

  .ai-bot-bloodwork-dashboard {
    grid-template-columns: 1fr;
  }

  .ai-bot-integration-provider {
    justify-items: stretch;
  }

  .ai-bot-integration-badge-wrap,
  .ai-bot-integration-actions {
    justify-content: space-between;
  }

  .ai-bot-hero-copy-wrap {
    justify-items: center;
  }

  .ai-bot-hero h1 {
    max-width: none;
  }

  .ai-bot-hero-art-card {
    min-height: 320px;
  }

  .ai-bot-hero-fox {
    width: 100%;
  }

  .ai-bot-hero-character {
    width: min(100%, 320px);
  }

  .ai-bot-hero-orb {
    width: clamp(40px, 9vw, 46px);
    left: 11.2%;
    top: 37.2%;
  }

  .checkout-summary-card {
    position: static;
  }

  .add-supplement-row {
    display: flex;
  }
}

@media (max-width: 560px) {
  .navbar {
    padding: 0.65rem 0.65rem;
  }

  .nav-logo-img {
    height: 36px;
  }

  .nav-right {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .nav-text-btn,
  .nav-cart-btn {
    width: 100%;
    justify-content: center;
  }


  .language-menu {
    right: 50%;
    transform: translateX(50%);
  }

  .container,
  .survey-container,
  .dash-container {
    width: calc(100vw - 1.25rem);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid-rich {
    grid-template-columns: 1fr;
  }

  .footer-subscribe {
    flex-direction: column;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-rich .footer-copy {
    text-align: center;
  }

  .whatsapp-support {
    right: 0.75rem;
    bottom: 0.75rem;
    width: 44px;
    height: 44px;
  }

  .whatsapp-logo {
    width: 24px;
    height: 24px;
  }

  .landing-copy h1 {
    font-size: 2.2rem;
    max-width: 9.6ch;
    white-space: normal;
  }

  .landing-formula-band {
    padding: 3rem 0;
    margin-top: 1.8rem;
  }

  .landing-formula-band .container {
    width: calc(100% - 2rem);
  }

  .formula-band-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .formula-band-copy {
    display: grid;
    max-width: none;
    gap: 0;
  }

  .formula-band-intro {
    justify-items: center;
  }

  .formula-band-copy h2 {
    font-size: 2.3rem;
  }

  .formula-band-body {
    max-width: 100%;
    font-size: 1.12rem;
  }

  .formula-band-points {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-top: 1.8rem;
  }

  .formula-band-points p {
    font-size: 0.98rem;
  }

  .formula-band-image {
    aspect-ratio: 1.08 / 0.9;
  }

  .hero-subtitle {
    font-size: 0.96rem;
    max-width: 31ch;
  }

  .hero-goal-grid {
    margin-top: 2rem;
    padding-inline: 0;
  }

  .feed-goal-card {
    min-height: 146px;
    border-radius: 22px;
    padding: 0.9rem;
  }

  .hero-how-it-works .section-heading h2 {
    white-space: normal;
  }

  .ai-intake-message {
    max-width: 100%;
  }

  .ai-bot-message,
  .ai-bot-stack-item {
    max-width: 100%;
    grid-template-columns: 1fr;
  }

  .ai-bot-stack-image {
    width: 100%;
    height: 180px;
  }

  .section-heading h2,
  .story-card h2,
  .closing-cta-card h2 {
    max-width: none;
    font-size: 2rem;
  }

  .auth-card,
  .confirm-card,
  .question,
  .profile-summary,
  .warning-panel,
  .stack-card-body,
  .trust-card,
  .hero-rail-card,
  .process-card,
  .collection-card,
  .pack-card,
  .value-card,
  .story-card,
  .closing-cta-card {
    padding: 1.15rem;
  }

  .hero-actions,
  .survey-nav {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    display: grid;
  }

  .btn-primary,
  .btn-secondary,
  .btn-add {
    width: 100%;
  }

  .add-supplement-row {
    flex-direction: column;
  }

  .stack-card-header h3 {
    font-size: 1.45rem;
  }
}

/* ── About Page v2 — scoped palette: #111b32 navy / #e4f658 lime / #f0ebdf cream ── */
/* #sobre-nos + .about-v2 are display:contents so all sticky chapters share
   .landing-info-stack as their containing block — without this the av-values
   sticky pin range collapses to 0, leaving a visible gap before #impacto-social */
#sobre-nos.landing-info-section {
  display: contents;
}
.about-v2 {
  display: contents;
}

.about-v2 {
  --av-navy: #111b32;
  --av-lime: #e4f658;
  --av-cream: #f0ebdf;
  --av-navy-ink: rgba(17, 27, 50, 0.72);
  --av-navy-soft: rgba(17, 27, 50, 0.15);
  --av-cream-ink: rgba(240, 235, 223, 0.75);
  --av-cream-soft: rgba(240, 235, 223, 0.15);
  color: var(--av-navy);
  font-feature-settings: "ss01", "cv02", "tnum";
}

.about-v2 * {
  box-sizing: border-box;
}

.av-inner {
  width: min(1120px, calc(100% - 2.5rem));
  margin: 0 auto;
}

/* Eyebrow label */
.av-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--av-navy);
  margin: 0 0 1.5rem;
}

.av-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

.av-eyebrow--dark { color: var(--av-navy); }
.av-eyebrow--on-navy { color: var(--av-lime); }

/* Primary button */
.av-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  border: none;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}

.av-btn--primary {
  background: var(--av-lime);
  color: var(--av-navy);
  box-shadow: 0 6px 16px rgba(17, 27, 50, 0.1);
}

.av-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(228, 246, 88, 0.45), 0 4px 10px rgba(17, 27, 50, 0.12);
}

.av-btn--lg {
  padding: 1.2rem 2.25rem;
  font-size: 1rem;
}

/* ── Landing info stack (merged Sobre Nós / Impacto Social / Notícias / Contato) ── */
.landing-info-stack { display: block; }
.landing-info-section {
  scroll-margin-top: var(--navbar-h);
}

/* Hero video + Simplifique band participate in the sticky-scale chain on landing */
body[data-screen="landing"] .landing-hero-video,
body[data-screen="landing"] .landing-formula-band {
  position: sticky;
  top: 0;
  transition: transform 0.8s cubic-bezier(0.17, 1.1, 0.42, 1), filter 0.5s ease;
  will-change: transform, filter;
  transform-origin: center top;
}

/* Anchor for /sobre-nos: scroll-margin on the first av-* chapter since #sobre-nos is display:contents */
.av-first-view { scroll-margin-top: var(--navbar-h); }
body[data-screen="landing"] .landing-formula-band {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Editorial palette shared by Impacto Social / Notícias / Contato ── */
#impacto-social.landing-info-section {
  background: #f0ebdf;
  color: #111b32;
}
#noticias.landing-info-section {
  background: #111b32;
  color: #f0ebdf;
}
#contato.landing-info-section {
  background: #f0ebdf;
  color: #111b32;
}

#impacto-social.landing-info-section,
#noticias.landing-info-section,
#contato.landing-info-section {
  position: sticky;
  top: 0;
  /* Let the section grow to fit its content instead of clipping at 100vh.
     On short laptop viewports the Contato form + heading + 3-up cards exceed
     the viewport; fixed height + overflow:hidden + justify-content:center
     was clipping both the eyebrow pill at top and the submit button at bottom. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--navbar-h) + 3rem) 0 3rem;
  font-family: "Nunito Sans", sans-serif;
  transition: transform 0.8s cubic-bezier(0.17, 1.1, 0.42, 1), filter 0.5s ease;
  will-change: transform, filter;
  transform-origin: center top;
}

.li-inner {
  width: min(1200px, 92%);
  margin: 0 auto;
}

.li-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #111b32;
  padding: 0.3rem 0.7rem;
  background: #e4f658;
  border-radius: 100px;
  margin-bottom: 1.25rem;
}
.li-eyebrow--on-navy {
  background: #e4f658;
  color: #111b32;
}

.li-section-head {
  max-width: 760px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.li-section-head h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 1.25rem;
}
.li-section-head h2 em {
  font-style: italic;
  font-weight: 500;
  position: relative;
  display: inline-block;
}
.li-section-head h2 em::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.08em;
  height: 0.28em;
  background: #e4f658;
  z-index: -1;
  border-radius: 3px;
}
.li-lede {
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: 1.55;
  margin: 0;
  color: inherit;
  opacity: 0.85;
}

/* Impacto Social — split photo + text + pillar list */
.li-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4.5rem;
  align-items: center;
}
.li-split-media {
  border-radius: 1.5rem;
  overflow: hidden;
  aspect-ratio: 2528 / 1696;
  background: #e7e1d2;
  box-shadow: 0 24px 48px rgba(17, 27, 50, 0.12);
}
.li-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.li-split-text h2 {
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 700;
  margin: 0 0 1.1rem;
}
.li-split-text h2 em {
  font-style: italic;
  font-weight: 500;
  position: relative;
  display: inline-block;
}
.li-split-text h2 em::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.08em;
  height: 0.28em;
  background: #e4f658;
  z-index: -1;
  border-radius: 3px;
}
.li-split-text .li-lede {
  margin: 0 0 2rem;
  max-width: 520px;
}
.li-pillars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
}
.li-pillars li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(17, 27, 50, 0.14);
}
.li-pillar-num {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: #111b32;
  opacity: 0.5;
  padding-top: 0.15rem;
}
.li-pillars li h3 {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #111b32;
  letter-spacing: -0.01em;
}
.li-pillars li p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #1c2a4a;
  opacity: 0.8;
}

/* Notícias — 3-up grid on navy */
.li-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.li-news-card {
  padding: 2rem 1.75rem;
  border: 1px solid rgba(240, 235, 223, 0.16);
  border-radius: 1rem;
  background: rgba(240, 235, 223, 0.04);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.li-news-card:hover {
  background: rgba(240, 235, 223, 0.08);
  border-color: rgba(240, 235, 223, 0.28);
  transform: translateY(-2px);
}
.li-card-kicker {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #e4f658;
  margin-bottom: 1rem;
}
.li-news-card h3 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
  color: #f0ebdf;
  line-height: 1.2;
}
.li-news-card p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(240, 235, 223, 0.75);
}
.li-lede--on-navy { color: rgba(240, 235, 223, 0.8); }

/* Contato — 3-up grid on cream, WhatsApp primary */
.li-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.li-contact-card {
  padding: 2.25rem 1.75rem;
  border: 1px solid rgba(17, 27, 50, 0.14);
  border-radius: 1rem;
  background: #fff;
  color: #111b32;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.li-contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(17, 27, 50, 0.08);
  border-color: rgba(17, 27, 50, 0.3);
}
.li-contact-card--primary {
  background: #e4f658;
  border-color: #e4f658;
}
.li-contact-card--primary:hover { background: #d9eb42; }
.li-contact-card--static {
  background: transparent;
  cursor: default;
}
.li-contact-card--static:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(17, 27, 50, 0.14);
}
.li-contact-card .li-card-kicker {
  color: #111b32;
  opacity: 0.55;
  margin-bottom: 0.75rem;
}
.li-contact-card h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.li-contact-card p {
  margin: 0 0 1.25rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(17, 27, 50, 0.75);
}
.li-card-cta {
  font-size: 0.95rem;
  font-weight: 700;
  color: #111b32;
  margin-top: auto;
}

/* Contact form */
.li-contact-form {
  margin-top: 0;
  padding-top: 0;
}
.li-contact-form-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111b32;
  margin: 0 0 2rem;
  text-align: center;
}
.li-contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
  max-width: 760px;
  margin: 0 auto;
}
.li-contact-form-grid .field-full { grid-column: 1 / -1; }
.li-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.li-form-field label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #111b32;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.li-form-req { color: #c0392b; }
.li-form-field input,
.li-form-field select,
.li-form-field textarea {
  padding: 0.82rem 1rem;
  border: 1.5px solid rgba(17, 27, 50, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: #111b32;
  font-size: 0.97rem;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.li-form-field input::placeholder,
.li-form-field textarea::placeholder { color: rgba(17, 27, 50, 0.38); }
.li-form-field input:focus,
.li-form-field select:focus,
.li-form-field textarea:focus {
  border-color: #111b32;
  box-shadow: 0 0 0 3px rgba(17, 27, 50, 0.07);
}
.li-form-field input.li-form-invalid,
.li-form-field select.li-form-invalid,
.li-form-field textarea.li-form-invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.08);
}
.li-form-field textarea {
  min-height: 140px;
  resize: vertical;
}
.li-form-field 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='%23111b32' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}
.li-form-submit {
  max-width: 760px;
  margin: 1.75rem auto 0;
  text-align: center;
}
.li-form-submit button {
  background: #e4f658;
  color: #111b32;
  border: none;
  padding: 0.95rem 2.5rem;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  letter-spacing: -0.01em;
}
.li-form-submit button:hover {
  background: #d9eb42;
  transform: translateY(-1px);
}
.li-form-success {
  display: none;
  max-width: 760px;
  margin: 2rem auto 0;
  padding: 2.5rem 2rem;
  background: #f6fbee;
  border: 1.5px solid #c6e050;
  border-radius: 14px;
  text-align: center;
}
.li-form-success.visible { display: block; }
.li-form-success p {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111b32;
  margin: 0;
}
.li-form-wa-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.82rem 1rem;
  border: 1.5px solid rgba(17, 27, 50, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: #111b32;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.li-form-wa-link:hover {
  border-color: #25d366;
  background: #f0fdf4;
}
.li-form-wa-number {
  font-size: 0.97rem;
  font-weight: 600;
}
.li-form-wa-cta {
  font-size: 0.87rem;
  color: #25d366;
  font-weight: 700;
}
.li-form-alt {
  max-width: 760px;
  margin: 1.25rem auto 0;
  text-align: center;
  font-size: 0.88rem;
  color: rgba(17, 27, 50, 0.55);
}
.li-form-alt a {
  color: #111b32;
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Responsive */
@media (max-width: 900px) {
  .li-split { grid-template-columns: 1fr; gap: 2.5rem; }
  .li-news-grid, .li-contact-grid { grid-template-columns: 1fr; }
  /* On mobile, the stacked content in Impacto Social / Notícias / Contato
     exceeds 100vh, so the sticky + fixed-height + overflow:hidden + center
     combo clips both the eyebrow pill at the top and the CTA at the bottom.
     Let these sections flow naturally on mobile instead. */
  #impacto-social.landing-info-section,
  #noticias.landing-info-section,
  #contato.landing-info-section {
    position: static;
    height: auto;
    min-height: 0;
    overflow: visible;
    justify-content: flex-start;
    padding: calc(var(--navbar-h) + 2rem) 0 3rem;
  }
}
@media (max-width: 640px) {
  .li-contact-form-grid { grid-template-columns: 1fr; }
  .li-contact-form-grid .field-full { grid-column: 1; }
}

/* ── FIRST VIEW (stats strip on top, hero below) ── */
.av-first-view {
  height: calc(100vh - var(--navbar-h));
  display: flex;
  flex-direction: column;
}
.av-first-view .av-stats { order: -1; }
.av-first-view .av-hero { order: 0; }

/* ── Sticky-scale chapters inside Sobre Nós (inspired by UIcore on-scroll sticky-scale) ── */
.about-v2 .av-first-view,
.about-v2 .av-pillars,
.about-v2 .av-science,
.about-v2 .av-values {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  transition: transform 0.8s cubic-bezier(0.17, 1.1, 0.42, 1), filter 0.5s ease;
  will-change: transform, filter;
  transform-origin: center top;
}

.about-v2 .av-first-view {
  /* Opaque cream surface so the previous section (formula band, similar but
     slightly lighter cream) can't bleed through the top of the sticky pin.
     Extra padding-top gives more cushion below the nav pill. */
  background: var(--av-cream);
  padding-top: calc(var(--navbar-h) + 2.5rem);
  box-sizing: border-box;
}
.about-v2 .av-pillars,
.about-v2 .av-science,
.about-v2 .av-values {
  padding-top: calc(var(--navbar-h) + 1.5rem);
}

.about-v2 .av-science,
.about-v2 .av-values {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 0;
}

.about-v2 .av-values-grid { border-top: 1px solid var(--av-navy-soft); }

/* ── HERO ── */
.av-hero {
  background: var(--av-cream);
  padding: 3rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.av-hero::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -200px;
  width: 460px;
  height: 460px;
  background: var(--av-lime);
  border-radius: 50%;
  opacity: 0.35;
  filter: blur(80px);
  pointer-events: none;
}

.av-hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 5rem;
  align-items: center;
  position: relative;
}

.av-hero-text h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 1.5rem;
  color: var(--av-navy);
}

.av-hero-text h1 em {
  font-style: italic;
  color: var(--av-navy);
  font-weight: 500;
  position: relative;
  display: inline-block;
}

.av-hero-text h1 em::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.08em;
  height: 0.32em;
  background: var(--av-lime);
  z-index: -1;
  border-radius: 4px;
}

.av-lede {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.55;
  color: var(--av-navy-ink);
  max-width: 520px;
  margin: 0 0 2.5rem;
}

.av-hero-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.av-hero-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--av-navy-ink);
  font-weight: 600;
}

.av-hero-media {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--av-navy);
  box-shadow: 0 30px 60px rgba(17, 27, 50, 0.15);
}

.av-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

.av-hero-caption {
  position: absolute;
  bottom: 1.1rem;
  left: 1.1rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--av-cream);
  background: rgba(17, 27, 50, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.4rem 0.7rem;
  border-radius: 100px;
}

/* ── STATS BAND ── */
.av-stats {
  background: var(--av-navy);
  color: var(--av-cream);
  padding: 1.5rem 0;
  overflow: hidden;
}

.av-stats-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: space-between;
  align-items: center;
}

.av-stats span {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--av-cream);
  position: relative;
  padding-left: 1.25rem;
}

.av-stats span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--av-lime);
  border-radius: 50%;
  transform: translateY(-50%);
}

/* ── MANIFESTO (removed) ── */
.av-manifesto h2 u::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.08em;
  height: 0.3em;
  background: var(--av-lime);
  z-index: -1;
  border-radius: 3px;
}

/* ── PILLARS on navy ── */
.av-pillars {
  background: var(--av-navy);
  color: var(--av-cream);
  padding: 4rem 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}

.av-section-head {
  margin-bottom: 4rem;
  max-width: 720px;
}

.av-section-head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.av-pillars .av-section-head h2,
.av-cta h2 {
  color: var(--av-cream);
}

.av-section-head h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  font-weight: 600;
}

.av-pillar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--av-cream-soft);
}

.av-pillar-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  padding: 2.5rem 2rem;
  border-bottom: 1px solid var(--av-cream-soft);
  align-items: start;
}

.av-pillar-list li:nth-child(odd) {
  border-right: 1px solid var(--av-cream-soft);
  padding-left: 0;
}

.av-pillar-list li:nth-child(even) {
  padding-right: 0;
}

.av-num {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--av-lime);
  font-weight: 700;
  font-feature-settings: "tnum";
  padding-top: 0.35rem;
}

.av-pillar-list h3 {
  font-size: 1.45rem;
  margin: 0 0 0.65rem;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--av-cream);
  line-height: 1.2;
}

.av-pillar-list p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--av-cream-ink);
  margin: 0;
  max-width: 380px;
}

/* ── SCIENCE split ── */
.av-science {
  background: var(--av-cream);
  padding: 7rem 0;
}

.av-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 5rem;
  align-items: center;
}

.av-split-media {
  border-radius: 1.5rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #e7e1d2;
  box-shadow: 0 24px 48px rgba(17, 27, 50, 0.1);
}

.av-split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.av-split-text h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  font-weight: 600;
  color: var(--av-navy);
}

.av-split-text p {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--av-navy-ink);
  margin: 0 0 1.75rem;
  max-width: 520px;
}

.av-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.av-check-list li {
  position: relative;
  padding-left: 2rem;
  font-size: 0.98rem;
  color: var(--av-navy);
  font-weight: 500;
}

.av-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--av-lime);
  border-radius: 50%;
}

.av-check-list li::after {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.75em;
  width: 0.55rem;
  height: 0.3rem;
  border-left: 2px solid var(--av-navy);
  border-bottom: 2px solid var(--av-navy);
  transform: rotate(-45deg);
}

/* ── VALUES ── */
.av-values {
  background: var(--av-cream);
  padding: 0 0 7rem;
}

.av-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--av-navy-soft);
  border-bottom: 1px solid var(--av-navy-soft);
}

.av-value {
  padding: 2.75rem 1.75rem;
  border-right: 1px solid var(--av-navy-soft);
}

.av-value:last-child { border-right: none; }

.av-num-sm {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--av-navy);
  font-weight: 700;
  font-feature-settings: "tnum";
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 1rem;
}

.av-num-sm::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 2px;
  background: var(--av-lime);
  transform: translateY(-50%);
}

.av-value h4 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  color: var(--av-navy);
  font-weight: 600;
}

.av-value p {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--av-navy-ink);
  margin: 0;
}

/* ── IMPACT on lime ── */
.av-impact {
  background: var(--av-lime);
  color: var(--av-navy);
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
}

.av-impact-inner {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 5rem;
  align-items: center;
}

.av-impact-text .av-eyebrow { color: var(--av-navy); }

.av-impact-text h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
  font-weight: 600;
  color: var(--av-navy);
}

.av-impact-text p {
  font-size: 1.08rem;
  line-height: 1.65;
  color: rgba(17, 27, 50, 0.78);
  margin: 0;
  max-width: 520px;
}

.av-impact-media {
  border-radius: 1.5rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 24px 48px rgba(17, 27, 50, 0.18);
}

.av-impact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── CTA on navy ── */
.av-cta {
  background: var(--av-navy);
  color: var(--av-cream);
  padding: 8rem 0;
  text-align: center;
}

.av-cta h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 1rem;
  font-weight: 700;
  color: var(--av-cream);
}

.av-cta-sub {
  font-size: 1.1rem;
  color: var(--av-cream-ink);
  margin: 0 0 2.5rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .av-hero-inner,
  .av-split,
  .av-impact-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .av-hero { padding: 6rem 0 4.5rem; }
  .av-hero-media { aspect-ratio: 16 / 10; }
  .av-split-media,
  .av-impact-media { aspect-ratio: 16 / 10; }
  .av-pillar-list { grid-template-columns: 1fr; }
  .av-pillar-list li,
  .av-pillar-list li:nth-child(odd),
  .av-pillar-list li:nth-child(even) {
    border-right: none;
    padding: 2rem 0;
  }
  .av-values-grid { grid-template-columns: repeat(2, 1fr); }
  .av-value:nth-child(2) { border-right: none; }
  .av-value:nth-child(-n + 2) { border-bottom: 1px solid var(--av-navy-soft); }
  .av-stats-inner { gap: 1.25rem 2rem; }
}

@media (max-width: 600px) {
  .av-hero,
  .av-pillars,
  .av-science,
  .av-values,
  .av-impact,
  .av-cta { padding-left: 0; padding-right: 0; }
  .av-pillars,
  .av-science,
  .av-impact { padding-top: 5rem; padding-bottom: 5rem; }
  .av-values { padding-bottom: 5rem; }
  .av-cta { padding-top: 5.5rem; padding-bottom: 6rem; }
  .av-stats span { font-size: 0.7rem; padding-left: 1rem; }
  .av-values-grid { grid-template-columns: 1fr; }
  .av-value { border-right: none; border-bottom: 1px solid var(--av-navy-soft); }
  .av-value:last-child { border-bottom: none; }
  .av-section-head { margin-bottom: 2.5rem; }
  .av-hero-text h1 { line-height: 1.02; }
}

/* ── Protocol Builder: realistic sachet render (replaces bubble chips) ── */
/* Clean up the legacy shell/drop-zone styling so the new render shows through */
.pb-sachet-shell--render {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}
.pb-sachet--render {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  gap: 0 !important;
  width: 100% !important;
  border-radius: 0 !important;
}
.pb-sachet--render::before,
.pb-sachet--render::after { display: none !important; }

.pb-sachet-render {
  --pb-sachet-render-width: min(100%, 334px);
  --pb-sachet-render-base-height: 504px;
  --pb-sachet-extra-rows: 0;
  --pb-sachet-window-ink: #17213f;
  --pb-sachet-window-edge: rgba(17, 27, 50, 0.14);
  --pb-sachet-window-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -12px 14px -14px var(--pb-sachet-window-edge);
  width: var(--pb-sachet-render-width);
  height: calc(var(--pb-sachet-render-base-height) + (var(--pb-sachet-extra-rows) * 1.95rem));
  margin: 0 auto;
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.05), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.05)),
    linear-gradient(180deg, #fbfaf6 0%, #f4f2ec 100%);
  box-shadow:
    0 28px 55px rgba(20, 25, 35, 0.18),
    0 6px 12px rgba(20, 25, 35, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -18px 20px -22px rgba(120, 111, 92, 0.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow 0.3s ease;
}

/* Heat-sealed inner border with subtle diagonal hatch */
.pb-sachet-render::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 12px solid transparent;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(120, 115, 100, 0.10) 0 1px,
      transparent 1px 5px
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Side tear notches near upper third */
.pb-sachet-render::after {
  content: "";
  position: absolute;
  top: 22%;
  left: -1px;
  width: 14px;
  height: 16px;
  background: var(--bg, #f6f7f9);
  border-radius: 0 9px 9px 0;
  box-shadow: calc(var(--pb-sachet-render-width) - 12px) 0 0 0 var(--bg, #f6f7f9);
  z-index: 3;
  pointer-events: none;
}

.pb-sachet-render-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.7rem 1.62rem 1rem;
}

.pb-sachet-render-logo-img {
  display: none;
}

.pb-sachet-render-window {
  margin: 0 1.62rem;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 0;
  background: linear-gradient(160deg, #0f8f86, #5dcaa5);
  transition: background 0.3s ease;
  padding: 1.4rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  box-shadow: var(--pb-sachet-window-shadow);
}

.pb-sachet-render-body {
  flex: 0 0 auto;
  margin: 0.9rem 1.62rem 0;
  padding: 0 0 2.35rem;
  background: transparent;
  color: #111b32;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: center;
  text-align: center;
  position: relative;
}

.pb-sachet-render-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.85rem;
  height: 0.95rem;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(107, 100, 84, 0.18));
  pointer-events: none;
}

.pb-sachet-render-name {
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
  color: #111b32;
  display: flex;
  align-items: center;
  gap: 0.04em;
}

.pb-sachet-render-name-logo {
  height: 1em;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0.05em;
}

.pb-sachet-render-name-suffix {
  font-weight: 700;
}

.pb-sachet-render-subtitle {
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  color: #111b32;
}

.pb-sachet-render-ingredients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  overflow: visible;
  max-height: none;
  width: 100%;
  align-items: center;
}

.pb-sachet-render-ingredient {
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pb-sachet-window-ink);
  line-height: 1.3;
  letter-spacing: 0;
  animation: pbSachetRenderFadeIn 0.3s ease both;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 0;
  padding: 0;
  background: transparent;
  text-align: center;
}

.pb-sachet-render-placeholder {
  margin: 0;
  font-family: "Nunito Sans", system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--pb-sachet-window-ink) 86%, white 14%);
  letter-spacing: 0.01em;
  text-align: center;
  align-self: center;
  justify-self: center;
}

@keyframes pbSachetRenderFadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Per-stack-category gradients (applied via data-stack attribute) */
.pb-sachet-render[data-stack="morning"] .pb-sachet-render-window,
.pb-sachet-render[data-stack="rise"] .pb-sachet-render-window {
  background: linear-gradient(180deg, #e8b94a 0%, #f3d27c 45%, #fbecb8 100%);
  box-shadow: none;
}
.pb-sachet-render[data-stack="preworkout"] .pb-sachet-render-window,
.pb-sachet-render[data-stack="pre"] .pb-sachet-render-window {
  background: linear-gradient(180deg, #7cce6b, #d8ffd0);
}
.pb-sachet-render[data-stack="night"] .pb-sachet-render-window,
.pb-sachet-render[data-stack="sleep"] .pb-sachet-render-window {
  background: linear-gradient(180deg, #001f65, #6895fd);
  --pb-sachet-window-ink: #f5f7ff;
  --pb-sachet-window-edge: rgba(5, 12, 38, 0.5);
  --pb-sachet-window-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -14px 18px -16px rgba(5, 12, 38, 0.6);
}
.pb-sachet-render[data-stack="muscle"] .pb-sachet-render-window {
  background: linear-gradient(45deg, #121521, #38476b, #b6192e, #ffc1ac);
  --pb-sachet-window-ink: #f7f3ee;
  --pb-sachet-window-edge: rgba(9, 12, 24, 0.5);
  --pb-sachet-window-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -14px 18px -16px rgba(9, 12, 24, 0.6);
}
.pb-sachet-render[data-stack="focus"] .pb-sachet-render-window {
  background: linear-gradient(45deg, #082122, #295b53, #19b35c, #fcff9a);
  --pb-sachet-window-ink: #f4fbf7;
  --pb-sachet-window-edge: rgba(4, 20, 20, 0.44);
  --pb-sachet-window-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -14px 18px -16px rgba(4, 20, 20, 0.56);
}
.pb-sachet-render[data-stack="daily"] .pb-sachet-render-window {
  background: linear-gradient(45deg, #000b21, #003f82, #4ca2b5, #ffd27f);
  --pb-sachet-window-ink: #f6f8fc;
  --pb-sachet-window-edge: rgba(3, 11, 33, 0.48);
  --pb-sachet-window-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -14px 18px -16px rgba(3, 11, 33, 0.58);
}

/* Flavor tint on the flavor bubble (subtitle) only. */
.pb-sachet-render .pb-sachet-render-subtitle {
  background: transparent;
  border-color: transparent;
}

/* Dark mode: card stays light (product shot), bump shadow contrast */
[data-theme="dark"] .pb-sachet-render {
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.45),
    0 3px 8px rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.07);
}

/* ── Lia Floating Bubble & Side Panel ── */

.lia-bubble {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 3000;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #0f8f86;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(15, 143, 134, 0.38);
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lia-bubble svg {
  width: 14px;
  height: 14px;
}

.lia-bubble:hover {
  background: #0d7e76;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(15, 143, 134, 0.46);
}

[data-theme="dark"] .lia-bubble {
  background: #37b9b0;
  color: #0f1d23;
  box-shadow: 0 4px 18px rgba(55, 185, 176, 0.32);
}

[data-theme="dark"] .lia-bubble:hover {
  background: #28a19a;
}

.lia-panel {
  position: fixed;
  bottom: calc(1.25rem + 56px + 12px);
  right: 1.25rem;
  width: 380px;
  max-width: calc(100vw - 2rem);
  height: 520px;
  max-height: calc(100vh - 120px);
  z-index: 4000;
  background: var(--surface, #f6f4ec);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.lia-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

[data-theme="dark"] .lia-panel {
  background: var(--panel, rgba(17, 32, 39, 0.98));
  border-color: rgba(237, 244, 243, 0.1);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

.lia-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

[data-theme="dark"] .lia-panel-head {
  border-bottom-color: rgba(237, 244, 243, 0.1);
}

.lia-panel-head h3 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0;
}

.lia-panel-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text-muted);
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.lia-panel-close:hover {
  background: var(--surface-alt);
  color: var(--text);
}

.lia-panel-chat {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.lia-panel-msg {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  max-width: 88%;
}

.lia-panel-msg-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.lia-panel-msg-bubble {
  padding: 0.65rem 0.85rem;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.55;
}

.lia-panel-msg-bubble p {
  margin: 0;
}

.lia-panel-msg-bubble p + p {
  margin-top: 0.5rem;
}

.lia-panel-msg.is-assistant {
  align-self: flex-start;
}

.lia-panel-msg.is-assistant .lia-panel-msg-bubble {
  background: var(--primary-soft, rgba(16, 132, 126, 0.1));
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.lia-panel-msg.is-user {
  align-self: flex-end;
  align-items: flex-end;
}

.lia-panel-msg.is-user .lia-panel-msg-bubble {
  background: var(--primary, #10847e);
  color: #fff;
  border-bottom-right-radius: 4px;
}

[data-theme="dark"] .lia-panel-msg.is-assistant .lia-panel-msg-bubble {
  background: rgba(55, 185, 176, 0.12);
}

.lia-panel-loading-dots {
  display: flex;
  gap: 4px;
  padding: 0.5rem 0.2rem;
}

.lia-panel-loading-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary, #10847e);
  animation: mp-dot-pulse 1.2s infinite ease-in-out;
}

.lia-panel-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.lia-panel-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes mp-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

/* ── Lia Suggestion Pills ── */
.lia-panel-suggestions {
  padding: 0.5rem 1rem 0.25rem;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.lia-panel-suggestions-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #8a929f);
  margin-bottom: 0.5rem;
}
.lia-panel-suggestions-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.lia-panel-suggestion-pill {
  background: rgba(15, 143, 134, 0.08);
  color: #0f8f86;
  border: 1px solid rgba(15, 143, 134, 0.25);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.3;
  text-align: left;
}
.lia-panel-suggestion-pill:hover {
  background: rgba(15, 143, 134, 0.16);
  border-color: rgba(15, 143, 134, 0.45);
}
[data-theme="dark"] .lia-panel-suggestions {
  border-top-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .lia-panel-suggestion-pill {
  background: rgba(15, 143, 134, 0.12);
  border-color: rgba(15, 143, 134, 0.3);
  color: #1ec2b7;
}
[data-theme="dark"] .lia-panel-suggestion-pill:hover {
  background: rgba(15, 143, 134, 0.22);
  border-color: rgba(15, 143, 134, 0.5);
}

.lia-panel-composer {
  display: flex;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  align-items: flex-end;
}

[data-theme="dark"] .lia-panel-composer {
  border-top-color: rgba(237, 244, 243, 0.1);
}

.lia-panel-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
  font-size: 0.88rem;
  font-family: inherit;
  resize: none;
  background: var(--surface-alt, #eeece4);
  color: var(--text);
  line-height: 1.45;
  min-height: 40px;
  max-height: 120px;
  overflow-y: auto;
}

.lia-panel-input:focus {
  outline: none;
  border-color: #0f8f86;
}

[data-theme="dark"] .lia-panel-input {
  background: rgba(26, 48, 57, 0.72);
  border-color: rgba(237, 244, 243, 0.12);
  color: #edf4f3;
}

.lia-panel-send {
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  background: #0f8f86;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.lia-panel-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.lia-panel-send:not(:disabled):hover {
  background: #0d7e76;
}

[data-theme="dark"] .lia-panel-send {
  background: #37b9b0;
  color: #0f1d23;
}

[data-theme="dark"] .lia-panel-send:not(:disabled):hover {
  background: #28a19a;
}

@media (max-width: 640px) {
  .lia-panel {
    width: calc(100vw - 1rem);
    right: 0.5rem;
  }

  .lia-bubble {
    bottom: 1.25rem;
    right: 1.25rem;
  }
}

/* ── Meu Protocolo Dashboard ── */

@keyframes mp-shimmer {
  0% { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

/* Notification banner */
.mp-notification-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(255, 249, 236, 0.92);
  border: 1px solid rgba(244, 168, 61, 0.44);
  border-radius: 14px;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #7a5000;
}

.mp-notification-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.mp-notification-text {
  flex: 1;
  font-weight: 600;
}

.mp-notification-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  color: #7a5000;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}

.mp-notification-dismiss:hover {
  opacity: 1;
}

[data-theme="dark"] .mp-notification-banner {
  background: rgba(80, 55, 0, 0.28);
  border-color: rgba(255, 196, 94, 0.28);
  color: #ffc45e;
}

[data-theme="dark"] .mp-notification-dismiss {
  color: #ffc45e;
}

/* Header */
.mp-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
  position: relative;
  text-align: center;
}

.mp-header .mp-header-left {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.mp-back-row {
  display: flex;
  margin-bottom: 0.85rem;
}

.mp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  background: transparent;
  border: 1px solid var(--border, #dbe2ee);
  border-radius: 999px;
  color: var(--text, #17213f);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.mp-back-btn svg {
  flex-shrink: 0;
}

.mp-back-btn:hover {
  background: rgba(16, 132, 126, 0.08);
  border-color: var(--primary, #10847e);
  color: var(--primary, #10847e);
}

.mp-back-btn:active {
  transform: translateX(-1px);
}

[data-theme="dark"] .mp-back-btn {
  color: #edf4f3;
  border-color: rgba(237, 244, 243, 0.18);
}

[data-theme="dark"] .mp-back-btn:hover {
  background: rgba(55, 185, 176, 0.14);
  border-color: #37b9b0;
  color: #37b9b0;
}

.dash-header .mp-title,
.mp-title {
  font-family: "Comfortaa", sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #17213f;
  margin: 0.15rem 0 0.3rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.mp-subtitle {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 0 auto;
  max-width: 480px;
  line-height: 1.55;
  text-align: center;
}

.mp-next-delivery-pill {
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  background: var(--primary-soft, rgba(16, 132, 126, 0.1));
  color: var(--primary, #10847e);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.3rem;
}

[data-theme="dark"] .mp-title {
  color: #edf4f3;
}

[data-theme="dark"] .mp-next-delivery-pill {
  background: rgba(55, 185, 176, 0.14);
  color: #37b9b0;
}

/* Stack grid */
.mp-stack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 320px));
  gap: 1rem;
  margin-bottom: 2rem;
  justify-content: center;
  /* Prevent the grid from stretching every card to match the tallest
     expanded one — collapsed cards must keep their natural height. */
  align-items: start;
}

.mp-stack-grid.is-single {
  grid-template-columns: minmax(280px, 320px);
  justify-content: center;
}

/* Skeleton cards */
.mp-skeleton-card {
  background: linear-gradient(
    90deg,
    #e5e8ec 25%,
    #eef0f3 50%,
    #e5e8ec 75%
  );
  background-size: 600px 100%;
  animation: mp-shimmer 1.4s infinite linear;
  border-radius: 22px;
  height: 320px;
}

[data-theme="dark"] .mp-skeleton-card {
  background: linear-gradient(
    90deg,
    rgba(20, 37, 45, 0.88) 25%,
    rgba(28, 50, 60, 0.72) 50%,
    rgba(20, 37, 45, 0.88) 75%
  );
  background-size: 600px 100%;
  animation: mp-shimmer 1.4s infinite linear;
}

/* Empty / error states */
.mp-empty-state,
.mp-error-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
}

.mp-empty-state p,
.mp-error-state p {
  margin-bottom: 1.1rem;
  font-size: 0.95rem;
}

.mp-empty-state-welcome {
  padding: 4rem 1.5rem;
}

.mp-empty-state-welcome .mp-empty-title {
  font-family: "Comfortaa", sans-serif;
  font-size: 1.35rem;
  color: var(--text, #17213f);
  margin: 0 0 1.5rem;
  font-weight: 600;
  line-height: 1.35;
}

[data-theme="dark"] .mp-empty-state-welcome .mp-empty-title {
  color: #edf4f3;
}

/* Stack card */
.mp-stack-card {
  position: relative;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--border, #dbe2ee);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 2px 10px rgba(20, 18, 10, 0.05);
  transition: box-shadow 0.2s ease;
}

/* Hover-to-reveal "remove stack" X button in the top-right corner */
.mp-stack-remove-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(20, 18, 10, 0.55);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.mp-stack-card:hover .mp-stack-remove-btn,
.mp-stack-card:focus-within .mp-stack-remove-btn,
.mp-stack-remove-btn:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.mp-stack-remove-btn:hover {
  background: #d9342c;
}

.mp-stack-remove-btn:focus-visible {
  outline: 2px solid #d9342c;
  outline-offset: 2px;
}

/* Always show on touch devices (no hover) */
@media (hover: none) {
  .mp-stack-remove-btn {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Remove-stack confirmation modal ──────────────────────────────────── */
.mp-remove-stack-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: mpRemoveFadeIn 0.18s ease both;
}

.mp-remove-stack-modal.hidden { display: none; }

@keyframes mpRemoveFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mp-remove-stack-card {
  width: min(420px, 100%);
  background: var(--surface, #f6f4ec);
  border-radius: 20px;
  padding: 1.75rem 1.75rem 1.5rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  text-align: center;
  animation: mpRemoveCardIn 0.22s ease both;
}

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

.mp-remove-stack-title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text, #1a1a1a);
}

.mp-remove-stack-body {
  margin: 0 0 1.5rem;
  color: var(--text-soft, #5a5a5a);
  font-size: 0.95rem;
  line-height: 1.5;
}

.mp-remove-stack-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Primary: keep stack (lime) */
.mp-remove-stack-keep {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 700;
}

/* Secondary: destructive confirm (white button with red text) */
.mp-remove-stack-confirm {
  appearance: none;
  width: 100%;
  padding: 0.85rem 1rem;
  background: #ffffff;
  color: #d9342c;
  border: 1px solid #e6c9c6;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mp-remove-stack-confirm:hover {
  background: #fff4f3;
  border-color: #d9342c;
}

[data-theme="dark"] .mp-remove-stack-card {
  background: #1e1e1e;
}

[data-theme="dark"] .mp-remove-stack-title {
  color: #f5f5f5;
}

[data-theme="dark"] .mp-remove-stack-body {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="dark"] .mp-remove-stack-confirm {
  background: transparent;
  color: #ff7a70;
  border-color: rgba(255, 120, 110, 0.35);
}

[data-theme="dark"] .mp-remove-stack-confirm:hover {
  background: rgba(255, 120, 110, 0.1);
  border-color: #ff7a70;
}

/* Prevent background scroll while modal is open */
body.mp-modal-open {
  overflow: hidden;
}

.mp-stack-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 4px 18px rgba(20, 18, 10, 0.1);
}

[data-theme="dark"] .mp-stack-card {
  background: rgba(17, 27, 33, 0.72);
  border-color: rgba(237, 244, 243, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 2px 10px rgba(0, 0, 0, 0.22);
}

[data-theme="dark"] .mp-stack-card:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 18px rgba(0, 0, 0, 0.36);
}

/* Stack image placeholder */
.mp-stack-img-wrap {
  height: 180px;
  width: 100%;
  border-radius: 18px 18px 0 0;
  background: #eef1f4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  color: #aab2c0;
  font-size: 0.76rem;
  overflow: hidden;
  flex-shrink: 0;
}

[data-theme="dark"] .mp-stack-img-wrap {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(237, 244, 243, 0.3);
}

.mp-stack-img-icon {
  font-size: 2rem;
  opacity: 0.4;
}

.mp-stack-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Stack body */
.mp-stack-body {
  padding: 1rem 1.1rem 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  text-align: center;
}

.mp-stack-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f8f86;
}

[data-theme="dark"] .mp-stack-kicker {
  color: #0fcfc4;
}

.mp-stack-name-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.mp-stack-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: #17213f;
  margin: 0;
  line-height: 1.25;
}

[data-theme="dark"] .mp-stack-name {
  color: #f5f7fa;
}

.mp-unsaved-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f4a83d;
  flex-shrink: 0;
}

.mp-ingredient-count {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

.mp-flavor-label {
  display: inline-flex;
  align-self: center;
  margin: 0;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  background: rgba(15, 143, 134, 0.08);
  color: #0f6f68;
  font-size: 0.74rem;
  font-weight: 800;
}

[data-theme="dark"] .mp-flavor-label {
  background: rgba(91, 205, 184, 0.14);
  color: #8ce0d3;
}

.mp-unsaved-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* Ingredient bullet list */
.mp-ingredient-bullets {
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: left;
  width: 100%;
  overflow-y: auto;
  min-height: 110px;
  max-height: 110px;
}

.mp-ingredient-bullets li {
  font-size: 0.82rem;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
}

.mp-ing-name {
  font-weight: 600;
}

.mp-ing-qty {
  font-size: 0.76rem;
  color: var(--text-muted);
  white-space: nowrap;
}

[data-theme="dark"] .mp-ingredient-bullets li {
  color: #edf4f3;
}

/* Quick preview pills */
.mp-preview-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.15rem;
}

.mp-preview-pill {
  display: inline-flex;
  align-items: center;
  height: 1.6rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: var(--primary-soft, rgba(16, 132, 126, 0.08));
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

[data-theme="dark"] .mp-preview-pill {
  background: rgba(55, 185, 176, 0.1);
  color: var(--text);
}

button.mp-overflow-pill,
.mp-overflow-pill {
  background: var(--surface-alt, #eeece4);
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease;
}

button.mp-overflow-pill:hover,
.mp-overflow-pill:hover {
  background: rgba(15, 143, 134, 0.14);
  color: #0f8f86;
}

button.mp-overflow-pill:focus-visible {
  outline: 2px solid #0f8f86;
  outline-offset: 2px;
}

[data-theme="dark"] button.mp-overflow-pill,
[data-theme="dark"] .mp-overflow-pill {
  background: rgba(26, 48, 57, 0.82);
}

[data-theme="dark"] button.mp-overflow-pill:hover,
[data-theme="dark"] .mp-overflow-pill:hover {
  background: rgba(15, 207, 196, 0.18);
  color: #0fcfc4;
}

/* Cadence badge */
.mp-cadence-badge {
  display: inline-flex;
  align-items: center;
  height: 1.6rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: rgba(15, 143, 134, 0.1);
  color: #0f8f86;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  margin-top: 0.2rem;
  align-self: flex-start;
}

[data-theme="dark"] .mp-cadence-badge {
  background: rgba(15, 207, 196, 0.12);
  color: #0fcfc4;
}

/* Expand button */
.mp-expand-btn {
  background: none;
  border: none;
  border-top: 1px solid var(--border, rgba(23, 33, 63, 0.1));
  width: 100%;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f8f86;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.mp-expand-btn:hover {
  background: rgba(15, 143, 134, 0.05);
  text-decoration: underline;
}

[data-theme="dark"] .mp-expand-btn {
  border-top-color: rgba(237, 244, 243, 0.08);
  color: #0fcfc4;
}

[data-theme="dark"] .mp-expand-btn:hover {
  background: rgba(15, 207, 196, 0.06);
}

/* Expanded detail section */
.mp-stack-detail {
  display: none;
  padding: 0.85rem 1.1rem 1rem;
  flex-direction: column;
  gap: 0.55rem;
  border-top: 1px solid var(--border, rgba(23, 33, 63, 0.1));
}

.mp-stack-detail.is-expanded {
  display: flex;
}

[data-theme="dark"] .mp-stack-detail {
  border-top-color: rgba(237, 244, 243, 0.08);
}

/* Stack context bar (inside expanded detail, reflects selected plan) */
.mp-stack-context-bar {
  background: rgba(15, 143, 134, 0.05);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.4;
}

[data-theme="dark"] .mp-stack-context-bar {
  background: rgba(15, 207, 196, 0.08);
  color: rgba(237, 244, 243, 0.7);
}

/* Ingredient rows */
.mp-ingredient-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(23, 33, 63, 0.07);
  outline: none;
}

.mp-ingredient-row:last-of-type {
  border-bottom: none;
}

[data-theme="dark"] .mp-ingredient-row {
  border-bottom-color: rgba(237, 244, 243, 0.06);
}

.mp-ingredient-name {
  flex: 1;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--text);
}

.mp-ingredient-amount {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.mp-ingredient-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #5d6882;
  font-size: 1rem;
  line-height: 1;
  padding: 0.1rem 0.25rem;
  opacity: 0;
  transition: color 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
}

.mp-ingredient-row:hover .mp-ingredient-remove,
.mp-ingredient-remove:focus {
  opacity: 1;
}

.mp-ingredient-remove:hover {
  color: #e05252;
}

/* Add supplement button */
.mp-add-btn {
  border: 1px dashed var(--border, #dbe2ee);
  background: none;
  border-radius: 12px;
  padding: 0.55rem 1rem;
  width: 100%;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f8f86;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease;
}

.mp-add-btn:hover {
  background: rgba(15, 143, 134, 0.05);
}

[data-theme="dark"] .mp-add-btn {
  border-color: rgba(237, 244, 243, 0.14);
  color: #0fcfc4;
}

[data-theme="dark"] .mp-add-btn:hover {
  background: rgba(15, 207, 196, 0.06);
}

/* Inline add input row */
.mp-add-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.mp-add-search-wrap {
  position: relative;
  display: block;
}

.mp-add-suggestions {
  margin-top: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0.3rem;
}

.mp-add-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text);
  transition: background 0.12s ease;
}

.mp-add-suggestion:hover,
.mp-add-suggestion:focus-visible {
  background: rgba(15, 143, 134, 0.1);
  outline: none;
}

.mp-add-suggestion-name {
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}

.mp-add-suggestion-dose {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}

.mp-add-suggestion-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 0.65rem 0.7rem;
  cursor: default;
  pointer-events: none;
}

[data-theme="dark"] .mp-add-suggestions {
  background: rgba(17, 27, 33, 0.92);
  border-color: rgba(237, 244, 243, 0.12);
}

[data-theme="dark"] .mp-add-suggestion:hover,
[data-theme="dark"] .mp-add-suggestion:focus-visible {
  background: rgba(15, 207, 196, 0.12);
}

.mp-add-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--text);
  outline: none;
  min-width: 0;
}

.mp-add-input:focus {
  border-color: #0f8f86;
}

[data-theme="dark"] .mp-add-input {
  background: rgba(17, 27, 33, 0.9);
  border-color: rgba(237, 244, 243, 0.14);
  color: #edf4f3;
}

.mp-add-confirm-btn {
  border: none;
  border-radius: 10px;
  padding: 0.5rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  background: #0f8f86;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.mp-add-confirm-btn:hover {
  background: #0d7e76;
}

[data-theme="dark"] .mp-add-confirm-btn {
  background: #37b9b0;
  color: #0f1d23;
}

/* Edit actions row */
.mp-edit-actions {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}

.mp-lia-btn {
  flex: 1;
  border: 1px solid var(--border);
  background: none;
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease;
  white-space: nowrap;
}

.mp-lia-btn:hover {
  background: var(--surface-alt);
}

[data-theme="dark"] .mp-lia-btn {
  border-color: rgba(237, 244, 243, 0.12);
}

[data-theme="dark"] .mp-lia-btn:hover {
  background: rgba(26, 48, 57, 0.72);
}

.mp-save-btn {
  flex: 1;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  background: #dff726;
  color: #111b32;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

.mp-save-btn:hover {
  transform: translateY(-1px);
}

/* Subscription section */
.mp-sub-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.4rem 1.5rem;
  margin-bottom: 2rem;
}

[data-theme="dark"] .mp-sub-section {
  background: rgba(20, 37, 45, 0.72);
  border-color: rgba(237, 244, 243, 0.1);
}

.mp-sub-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 0.85rem;
}

.mp-sub-plan-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.mp-sub-plan-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
}

.mp-sub-plan-price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-muted);
}

.mp-sub-plan-price::before {
  content: "·";
  margin-right: 0.75rem;
  opacity: 0.4;
}

.mp-sub-change-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: #0f8f86;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: auto;
}

[data-theme="dark"] .mp-sub-change-link {
  color: #37b9b0;
}

.mp-sub-next-delivery {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.mp-sub-actions {
  display: flex;
  gap: 1.25rem;
  border-top: 1px solid var(--border);
  padding-top: 0.85rem;
  flex-wrap: wrap;
}

[data-theme="dark"] .mp-sub-actions {
  border-top-color: rgba(237, 244, 243, 0.08);
}

.mp-sub-action-link {
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}

.mp-sub-action-link:hover {
  color: var(--text);
}

.mp-sub-action-link.is-destructive:hover {
  color: #e05252;
}

/* Confirmation modal */
.mp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.46);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 1.25rem;
}

.mp-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.75rem;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.16);
}

[data-theme="dark"] .mp-modal {
  background: rgba(20, 37, 45, 0.98);
  border-color: rgba(237, 244, 243, 0.12);
}

.mp-modal h4 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 0.6rem;
}

.mp-modal p {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 1.25rem;
}

.mp-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

.mp-modal-close-btn {
  border: 1px solid var(--border);
  background: none;
  border-radius: 10px;
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s ease;
}

.mp-modal-close-btn:hover {
  background: var(--surface-alt);
}

.mp-modal-wa-btn {
  border: none;
  border-radius: 10px;
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  background: #25d366;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: background 0.15s ease;
}

.mp-modal-wa-btn:hover {
  background: #1db954;
}

/* Responsive */
@media (max-width: 640px) {
  .mp-stack-grid {
    grid-template-columns: 1fr;
  }

  .mp-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .mp-title {
    font-size: 1.65rem;
  }

  .mp-edit-actions {
    flex-direction: column;
  }

  .mp-add-input-row {
    flex-direction: column;
  }

  .mp-add-confirm-btn {
    width: 100%;
  }

  .mp-sub-plan-row {
    flex-wrap: wrap;
  }

  .mp-sub-change-link {
    margin-left: 0;
  }
}

/* ── Retention Modal ── */

.mp-retention-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 33, 63, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.mp-retention-backdrop.is-visible {
  opacity: 1;
}

[data-theme="dark"] .mp-retention-backdrop {
  background: rgba(0, 0, 0, 0.62);
}

.mp-retention-modal {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2rem 1.75rem;
  max-width: 440px;
  width: 90%;
  position: relative;
  box-shadow: 0 12px 48px rgba(23, 33, 63, 0.14);
}

[data-theme="dark"] .mp-retention-modal {
  background: rgba(18, 34, 41, 0.98);
  border-color: rgba(237, 244, 243, 0.12);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.mp-retention-close {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--text-muted);
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.mp-retention-close:hover {
  background: var(--surface-alt);
  color: var(--text);
}

/* Step content */
.mp-retention-step {
  display: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.mp-retention-step.is-active {
  display: block;
}

.mp-retention-step.is-visible {
  opacity: 1;
}

.mp-retention-title {
  font-family: "Comfortaa", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: #17213f;
  margin: 0 0 0.45rem;
  padding-right: 1.5rem;
  line-height: 1.3;
}

[data-theme="dark"] .mp-retention-title {
  color: #edf4f3;
}

.mp-retention-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0 0 1.4rem;
  line-height: 1.5;
}

/* Option buttons (Step 1) */
.mp-retention-options {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.mp-retention-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.mp-retention-option:hover {
  background: var(--primary-soft, rgba(16, 132, 126, 0.06));
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

[data-theme="dark"] .mp-retention-option {
  border-color: rgba(237, 244, 243, 0.1);
}

[data-theme="dark"] .mp-retention-option:hover {
  background: rgba(55, 185, 176, 0.08);
  border-color: rgba(27, 193, 182, 0.28);
}

.mp-retention-option.is-muted {
  border-color: rgba(23, 33, 63, 0.08);
}

[data-theme="dark"] .mp-retention-option.is-muted {
  border-color: rgba(237, 244, 243, 0.06);
}

.mp-retention-option.is-muted:hover {
  background: rgba(23, 33, 63, 0.03);
  border-color: rgba(23, 33, 63, 0.12);
  transform: none;
}

[data-theme="dark"] .mp-retention-option.is-muted:hover {
  background: rgba(237, 244, 243, 0.03);
  border-color: rgba(237, 244, 243, 0.08);
}

.mp-retention-option-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--primary-soft, rgba(16, 132, 126, 0.1));
  color: var(--primary, #10847e);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.mp-retention-option.is-muted .mp-retention-option-icon {
  background: rgba(23, 33, 63, 0.06);
  color: var(--text-muted);
}

[data-theme="dark"] .mp-retention-option-icon {
  background: rgba(55, 185, 176, 0.12);
  color: #37b9b0;
}

[data-theme="dark"] .mp-retention-option.is-muted .mp-retention-option-icon {
  background: rgba(237, 244, 243, 0.06);
  color: var(--text-muted);
}

.mp-retention-option-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
}

.mp-retention-option.is-muted .mp-retention-option-label {
  color: var(--text-muted);
  font-weight: 600;
}

/* Step body text */
.mp-retention-body {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

/* Action rows */
.mp-retention-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Discount badge */
.mp-retention-discount-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #d4ff4f;
  color: #17213f;
  font-size: 1.1rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.4rem 1.2rem;
  margin: 0 0 1.25rem;
  letter-spacing: -0.01em;
}

/* De-emphasized cancel text link */
.mp-retention-skip-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0.25rem 0;
  text-align: center;
  width: 100%;
  transition: color 0.15s ease;
}

.mp-retention-skip-link:hover {
  color: var(--text);
}

/* Back link */
.mp-retention-back-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1rem;
  transition: color 0.15s ease;
}

.mp-retention-back-link:hover {
  color: var(--text);
}

/* "Gerenciar assinatura" trigger link */
.mp-sub-manage-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.15s ease;
}

.mp-sub-manage-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--text);
}

/* Toast notification */
.mp-toast {
  position: fixed;
  bottom: 1.75rem;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: #17213f;
  color: #f5f7fa;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  z-index: 9200;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}

.mp-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

[data-theme="dark"] .mp-toast {
  background: #edf4f3;
  color: #0f1d23;
}

@media (max-width: 640px) {
  .mp-retention-modal {
    padding: 1.6rem 1.25rem;
  }

  .mp-toast {
    width: calc(100% - 2.5rem);
    text-align: center;
    white-space: normal;
  }
}

/* ==========================================================================
   Auth Gate — friendly sign-up invitation screen
   ========================================================================== */

/* The gate screen is the positioning context for the blurred background */
#auth-gate {
  position: relative;
  overflow: hidden;
}

.auth-gate-container {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: calc(100vh - 88px);
  padding: 1.25rem 1rem 2rem;
}

/* Full-viewport blurred preview of /escolha-seu-sache behind the card */
.auth-gate-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: blur(14px) saturate(1.05);
  opacity: 0.6;
}

/* Override the shell so it spreads wider and isn't forced to full viewport height */
.auth-gate-bg-shell {
  max-width: 1100px !important;
  min-height: 0 !important;
  padding: 3rem 1.5rem !important;
  gap: 1.25rem !important;
}

.auth-gate-bg::after {
  /* Tint to keep the card readable over the blurred imagery */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(246, 244, 236, 0.30),
    rgba(246, 244, 236, 0.60)
  );
}

[data-theme="dark"] .auth-gate-bg::after {
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 20, 0.40),
    rgba(20, 20, 20, 0.75)
  );
}

.auth-gate-card {
  width: min(680px, 100%);
  background: var(--surface, #f6f4ec);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2rem 2.5rem 1.75rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
  text-align: center;
  animation: authGateFadeIn 0.4s ease both;
}

@keyframes authGateFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-gate-logo-link {
  display: inline-block;
  margin-bottom: 1.25rem;
}

.auth-gate-logo {
  width: 130px;
  height: auto;
}

.auth-gate-badge {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  background: rgba(15, 143, 134, 0.12);
  color: #0f8f86;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 0.7rem;
}

.auth-gate-title {
  font-size: 1.6rem;
  line-height: 1.22;
  margin: 0 0 1rem;
  color: var(--text, #1a1a1a);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.auth-gate-perks {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.6rem;
  text-align: left;
}

.auth-gate-perks li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0.9rem;
  background: var(--surface-alt, rgba(255, 255, 255, 0.6));
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.auth-gate-perks li:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 143, 134, 0.35);
}

.auth-gate-perk-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(15, 143, 134, 0.12);
  color: #0f8f86;
}
.auth-gate-perk-icon--lia {
  background: transparent;
  border-radius: 50%;
  overflow: hidden;
}
.auth-gate-perk-icon--lia img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.auth-gate-perk-icon--stack {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(237, 245, 247, 0.94));
  border: 1px solid rgba(15, 143, 134, 0.22);
  overflow: hidden;
}

.auth-gate-perk-icon--stack img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  object-position: 50% 52%;
  transform: scale(1.12);
  filter: drop-shadow(0 1px 1.5px rgba(8, 38, 50, 0.18));
}

.auth-gate-perk-icon--progress {
  background: linear-gradient(145deg, #1f98a4, #17717c);
  color: #f7fffd;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  line-height: 0;
}

.auth-gate-perk-icon--progress::before {
  content: "";
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 5.5v14h15' stroke='%23F7FFFD' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 15 10.9 11.4 13.8 13.3 18.2 8.6' stroke='%23F7FFFD' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 8.6h1.7v1.7' stroke='%23F7FFFD' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.auth-gate-perks strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, #1a1a1a);
  margin-bottom: 0.15rem;
}

.auth-gate-perks li > div > span {
  display: block;
  font-size: 0.85rem;
  color: var(--text-soft, #5a5a5a);
  line-height: 1.45;
}

.auth-gate-actions {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.auth-gate-primary {
  font-size: 1rem;
  padding: 0.95rem 1.2rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.auth-gate-google {
  width: 100%;
}

.auth-gate-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-soft, #8a8a8a);
  font-size: 0.8rem;
}

.auth-gate-divider::before,
.auth-gate-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-gate-secondary {
  appearance: none;
  background: transparent;
  border: none;
  color: #0f8f86;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.auth-gate-secondary:hover {
  color: #0a6a63;
}

.auth-gate-footnote {
  margin: 1.25rem 0 0;
  font-size: 0.78rem;
  color: var(--text-soft, #8a8a8a);
}

@media (max-width: 520px) {
  .auth-gate-card {
    padding: 1.75rem 1.25rem 1.5rem;
    border-radius: 18px;
  }
  .auth-gate-title {
    font-size: 1.35rem;
  }
  .auth-gate-sub {
    font-size: 0.92rem;
  }
  .auth-gate-perks li {
    padding: 0.75rem 0.85rem;
  }
}

[data-theme="dark"] .auth-gate-card {
  background: #1a1a1a;
  border-color: #2a2a2a;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .auth-gate-perks li {
  background: #222;
  border-color: #2e2e2e;
}

/* Keep the language trigger button light in all themes/contexts. */
.language-trigger,
[data-theme="dark"] .language-trigger,
[data-theme="light"] .site-footer .language-trigger,
[data-theme="dark"] .site-footer .language-trigger {
  background: #ffffff;
  color: #111b32;
  border-color: rgba(17, 27, 50, 0.2);
}

.language-trigger:hover,
[data-theme="dark"] .language-trigger:hover,
[data-theme="light"] .site-footer .language-trigger:hover,
[data-theme="dark"] .site-footer .language-trigger:hover {
  background: #ffffff;
  border-color: rgba(17, 27, 50, 0.34);
}

.language-trigger-caret,
[data-theme="dark"] .language-trigger-caret,
[data-theme="light"] .site-footer .language-trigger-caret,
[data-theme="dark"] .site-footer .language-trigger-caret {
  color: #4b5563;
}

/* ── Mercado Pago PIX overlay ─────────────────────────────── */
.mp-pix-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.mp-pix-modal {
  background: var(--surface, #fff);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 420px;
  width: 100%;
  text-align: center;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.mp-pix-modal h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}

.mp-pix-amount {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent, #00b37e);
  margin: 0 0 1rem;
}

.mp-pix-instructions {
  color: var(--text-muted, #666);
  font-size: 0.875rem;
  margin: 0 0 1rem;
}

.mp-pix-qr {
  width: 200px;
  height: 200px;
  margin: 0 auto 1.25rem;
  display: block;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 0.5rem;
}

.mp-pix-copy-wrap {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.mp-pix-code-input {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 0.375rem;
  background: var(--surface-alt, #f5f5f5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-pix-note {
  font-size: 0.8rem;
  color: var(--text-muted, #666);
  margin: 0 0 1.25rem;
}