/* HARMOI interface system: brand green, neutral editorial surfaces, fluid controls. */
:root {
  --harmoi-forest: #173f24;
  --harmoi-green: #2e7d32;
  --harmoi-olive: #558b2f;
  --harmoi-sage: #8bc34a;
  --harmoi-pistachio: #c5e1a5;
  --harmoi-mint: #e8f5e9;
  --harmoi-canvas: #f7f9f6;
  --harmoi-surface: #ffffff;
  --harmoi-ink: #151a16;
  --harmoi-copy: #566058;
  --harmoi-line: #dce4dc;
  --harmoi-focus: #6aa43e;
  --harmoi-ease: cubic-bezier(.2, .8, .2, 1);
  --ink: var(--harmoi-ink);
  --ink-soft: #354038;
  --gray: var(--harmoi-copy);
  --gold: var(--harmoi-sage);
  --gold-deep: var(--harmoi-green);
  --gold-light: var(--harmoi-pistachio);
  --jade: var(--harmoi-olive);
  --jade-deep: var(--harmoi-forest);
  --cream: var(--harmoi-mint);
  --cream-deep: #dcebdc;
  --pearl: var(--harmoi-canvas);
  --white: var(--harmoi-surface);
  --line: var(--harmoi-line);
  --forest: var(--harmoi-forest);
  --pistachio: var(--harmoi-pistachio);
  --olive: var(--harmoi-olive);
  --mint: var(--harmoi-mint);
  --sage: var(--harmoi-sage);
  --commerce-forest: var(--harmoi-forest);
  --commerce-green: var(--harmoi-green);
  --commerce-olive: var(--harmoi-olive);
  --commerce-sage: var(--harmoi-sage);
  --commerce-pistachio: var(--harmoi-pistachio);
  --commerce-mint: var(--harmoi-mint);
  --commerce-paper: var(--harmoi-canvas);
  --commerce-white: var(--harmoi-surface);
  --commerce-ink: var(--harmoi-ink);
  --commerce-copy: var(--harmoi-copy);
  --commerce-line: var(--harmoi-line);
  --shadow-sm: 0 3px 12px rgba(17, 38, 24, .06);
  --shadow: 0 14px 36px rgba(17, 38, 24, .1);
  --shadow-lg: 0 28px 70px rgba(17, 38, 24, .14);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Noto Sans SC", sans-serif;
  --serif: "Playfair Display", "Noto Serif SC", "Songti SC", serif;
}

html { background: var(--harmoi-canvas); }
body,
.commerce-page,
.commerce-home {
  color: var(--harmoi-ink);
  background: var(--harmoi-canvas);
  font-family: var(--sans);
  font-optical-sizing: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
}

::selection {
  color: var(--harmoi-ink);
  background: var(--harmoi-pistachio);
}

h1, h2, h3, h4,
.section-tag,
.nav-links a,
.announcement-bar,
.btn-primary,
.btn-ghost {
  letter-spacing: 0;
}

button,
a,
input,
select,
textarea {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Noto Sans SC", sans-serif;
}

/* The navigation is the only glass material. It remains anchored to the viewport edge. */
.commerce-nav,
.commerce-nav.navbar.scrolled,
.commerce-page .commerce-nav {
  position: sticky;
  top: 0;
  z-index: 1200;
  padding: 0;
  background: rgba(250, 252, 249, .86);
  border-bottom: 1px solid rgba(255, 255, 255, .76);
  box-shadow: 0 1px 0 rgba(23, 63, 36, .08), 0 10px 30px rgba(17, 38, 24, .07);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

.commerce-nav .nav-container {
  width: min(100% - 48px, 1400px);
  min-height: 68px;
  padding: 8px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.commerce-nav .nav-logo .logo-img { height: 38px; }
.commerce-nav .nav-links { gap: 28px; }
.commerce-nav .nav-links a {
  color: #344038;
  font-size: 12px;
  font-weight: 550;
  text-transform: none;
}
.commerce-nav .nav-links a::after {
  bottom: -8px;
  height: 2px;
  border-radius: 2px;
  background: var(--harmoi-green);
}
.commerce-nav .nav-links a.active { color: var(--harmoi-forest); }
.commerce-nav .nav-links a.active::after { width: 100%; }

.commerce-nav .nav-links a.creator-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(46, 125, 50, .24);
  border-radius: 999px;
  background: rgba(232, 245, 233, .82);
  color: var(--harmoi-forest);
  font-weight: 650;
  transition:
    transform 120ms var(--harmoi-ease),
    background-color 180ms ease,
    border-color 180ms ease;
}

.commerce-nav .nav-links a.creator-nav-link::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--harmoi-green);
  box-shadow: 0 0 0 4px rgba(139, 195, 74, .16);
}

.commerce-nav .nav-links a.creator-nav-link::after { display: none; }
.commerce-nav .nav-links a.creator-nav-link:hover,
.commerce-nav .nav-links a.creator-nav-link.active {
  border-color: rgba(46, 125, 50, .5);
  background: var(--harmoi-pistachio);
}
.commerce-nav .nav-links a.creator-nav-link:active { transform: scale(.975); }

.mobile-menu a.mobile-creator-link {
  color: var(--harmoi-forest);
  font-weight: 700;
  background: var(--harmoi-mint);
}

.creator-floating-entry {
  position: fixed;
  z-index: 1180;
  top: 50%;
  right: max(14px, env(safe-area-inset-right));
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 0 14px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 999px;
  background: rgba(247, 250, 246, .84);
  color: var(--harmoi-forest);
  box-shadow: 0 14px 34px rgba(17, 38, 24, .18);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  transform: translateY(-50%);
  transition:
    transform 120ms var(--harmoi-ease),
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.creator-floating-entry i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--harmoi-green);
  box-shadow: 0 0 0 5px rgba(139, 195, 74, .16);
}

.creator-floating-entry b {
  color: var(--harmoi-green);
  font-size: 14px;
  font-weight: 500;
  transition: transform 180ms var(--harmoi-ease);
}

.creator-floating-entry:hover {
  border-color: rgba(46, 125, 50, .34);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 42px rgba(17, 38, 24, .22);
}
.creator-floating-entry:hover b { transform: translate(2px, -2px); }
.creator-floating-entry:active { transform: translateY(-50%) scale(.975); }
.creator-floating-entry.is-contextual {
  opacity: 0;
  pointer-events: none;
  transform: translate(10px, -50%) scale(.98);
}
.creator-floating-entry.is-contextual.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, -50%) scale(1);
}

.announcement-bar {
  z-index: 800;
  background: var(--harmoi-forest);
  color: rgba(255, 255, 255, .82);
  font-size: 10px;
  font-weight: 550;
  text-transform: none;
}
.announcement-bar a {
  color: var(--harmoi-pistachio);
  border-color: rgba(197, 225, 165, .55);
}

.nav-icon,
.lang-toggle,
.filter-pill,
.btn-primary,
.btn-ghost,
.btn-buy,
.btn-soon,
.btn-shop,
.product-add,
.product-buy,
#checkoutSubmit,
.lookup-form button,
.icon-add-button,
.creator-application-form button,
.alliance-hero-actions a {
  transition:
    transform 120ms var(--harmoi-ease),
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.nav-icon { border-radius: 50%; }
.nav-icon:hover { background: rgba(197, 225, 165, .42); }
.commerce-nav .lang-toggle {
  border-color: var(--harmoi-line);
  border-radius: 999px;
  color: var(--harmoi-forest);
  background: rgba(255, 255, 255, .56);
}
.commerce-nav .lang-toggle:hover { border-color: var(--harmoi-green); }

.btn-primary,
.btn-ghost,
.btn-buy,
.btn-soon,
.btn-shop {
  min-height: 48px;
  border-radius: 999px;
}
.btn-primary,
.product-add,
.lookup-form button {
  background: var(--harmoi-forest);
  color: white;
  box-shadow: none;
}
.btn-primary:hover,
.product-add:hover,
.lookup-form button:hover {
  background: #20542f;
  box-shadow: 0 10px 24px rgba(23, 63, 36, .16);
  transform: translateY(-1px);
}
.btn-ghost {
  color: var(--harmoi-forest);
  border-color: var(--harmoi-forest);
}
.btn-ghost:hover {
  color: white;
  background: var(--harmoi-forest);
}

.is-pressing,
.btn-primary:active,
.btn-ghost:active,
.btn-buy:active,
.btn-soon:active,
.btn-shop:active,
.product-add:active,
.product-buy:active,
#checkoutSubmit:active,
.lookup-form button:active,
.nav-icon:active,
.lang-toggle:active,
.filter-pill:active,
.icon-add-button:active,
.creator-application-form button:active {
  transform: scale(.975);
}

:focus-visible {
  outline: 2px solid var(--harmoi-focus);
  outline-offset: 4px;
}

.commerce-section,
.concerns-section,
.owner-education,
.journal-commerce,
.advisor-trust,
.authority-system,
.creator-alliance-page .alliance-statement,
.creator-alliance-page .alliance-brands {
  background: var(--harmoi-canvas);
}

.shop-section,
.material-standard,
.commerce-faq,
.commerce-page .product-main,
.policy-content,
.lesson-workspace,
.beginner-pathway {
  background: var(--harmoi-surface);
}

.commerce-trust-band {
  border-color: var(--harmoi-line);
  background: rgba(255, 255, 255, .94);
}
.commerce-trust-band > div + div { border-color: var(--harmoi-line); }
.commerce-trust-band strong { color: var(--harmoi-forest); }

.creator-home-entry {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  min-height: 590px;
  scroll-margin-top: 92px;
  border-top: 1px solid var(--harmoi-line);
  border-bottom: 1px solid var(--harmoi-line);
  background: var(--harmoi-surface);
}

.creator-home-media {
  min-height: 500px;
  overflow: hidden;
  background: var(--harmoi-mint);
}

.creator-home-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--harmoi-ease);
}

.creator-home-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(54px, 7vw, 108px);
}

.creator-home-copy > span {
  color: var(--harmoi-green);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.creator-home-copy h2 {
  max-width: 670px;
  margin: 18px 0 24px;
  color: var(--harmoi-ink);
  font-size: clamp(38px, 4vw, 60px);
  font-weight: 500;
  line-height: 1.06;
}

.creator-home-copy p {
  max-width: 590px;
  color: var(--harmoi-copy);
  font-size: 16px;
  line-height: 1.8;
}

.creator-home-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 34px;
}

.creator-home-actions .text-arrow-link {
  margin: 0;
  color: var(--harmoi-forest);
  font-weight: 650;
}

@media (hover: hover) and (pointer: fine) {
  .creator-home-entry:hover .creator-home-media img { transform: scale(1.018); }
}

.concern-card,
.product-card-commerce,
.journal-commerce-grid article,
.owner-education-card,
.search-result-line,
.order-result,
.lookup-form,
.checkout-empty,
.policies-index,
.policy-material-grid > div,
.lesson-grid article {
  border-color: var(--harmoi-line);
  border-radius: 8px;
  background: var(--harmoi-surface);
  box-shadow: none;
}

.concern-card:hover,
.product-card-commerce:hover,
.journal-commerce-grid article:hover,
.lesson-grid article:hover {
  border-color: #b8cfb5;
  box-shadow: 0 16px 36px rgba(17, 38, 24, .09);
}

.filter-pill {
  border-radius: 999px;
  border-color: var(--harmoi-line);
}
.filter-pill.active,
.filter-pill:hover {
  color: white;
  border-color: var(--harmoi-forest);
  background: var(--harmoi-forest);
}

.product-main-image,
.product-thumbs button { background: #eef2ed; }
.product-thumbs button.active { border-color: var(--harmoi-green); }
.product-availability i,
.checkout-line-image b { background: var(--harmoi-sage); }
.product-buy:hover { background: var(--harmoi-mint); }

.commerce-newsletter,
.edge-purpose,
.hamoy-home,
.checkout-summary,
.policies-hero,
.order-service-band,
.advisor-next {
  background: var(--harmoi-forest);
}
.commerce-footer { background: #102a19; }
.commerce-footer a:hover { color: var(--harmoi-pistachio); }
.cart-drawer,
.search-panel { background: var(--harmoi-canvas); }
.cart-footer { background: white; }

.advisor-hero,
.order-hero { background-color: #e9eeea; }
.advisor-trust > div { border-color: var(--harmoi-line); background: rgba(255, 255, 255, .78); }
.learning-disclosure { border-color: var(--harmoi-line); background: #edf2ee; }

[data-harmoi-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 440ms var(--harmoi-ease), transform 440ms var(--harmoi-ease);
}
[data-harmoi-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .product-card-commerce:hover img,
  .concern-card:hover img,
  .journal-commerce-grid article:hover img {
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
  [data-harmoi-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .commerce-nav,
  .commerce-nav.navbar.scrolled,
  .commerce-page .commerce-nav {
    background: #fafcf9;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .creator-floating-entry {
    background: white;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .commerce-nav,
  .commerce-nav.navbar.scrolled {
    background: white;
    border-bottom-color: var(--harmoi-ink);
  }
}

@media (max-width: 900px) {
  .commerce-nav .nav-links { gap: 18px; }
  .creator-home-entry { grid-template-columns: 1fr; }
  .creator-home-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .creator-home-copy { padding: 64px 36px 72px; }
}

@media (max-width: 600px) {
  .creator-home-media { aspect-ratio: 4 / 3; }
  .creator-home-copy { padding: 52px 24px 60px; }
  .creator-home-copy h2 { font-size: 38px; }
  .creator-home-copy p { font-size: 15px; }
  .creator-home-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .creator-home-actions .btn-primary {
    width: 100%;
    justify-content: center;
  }
  .creator-floating-entry {
    right: max(8px, env(safe-area-inset-right));
    min-height: 44px;
    padding: 0 13px;
    font-size: 11px;
  }
}

@media (max-width: 700px) {
  .commerce-nav .nav-container {
    width: calc(100% - 28px);
    min-height: 58px;
  }
  .commerce-nav,
  .commerce-nav.navbar.scrolled {
    background: rgba(250, 252, 249, .94);
  }
  .commerce-nav .mobile-menu {
    background: rgba(250, 252, 249, .98);
    border-bottom: 1px solid var(--harmoi-line);
  }
}