/* Bmaximum editorial refinement. Brand colours remain the source of truth. */
:root {
  --head: 'Syne', sans-serif;
  --body: 'Plus Jakarta Sans', sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-lift: 0 2px 4px rgb(32 33 34 / 4%), 0 12px 26px -10px rgb(32 33 34 / 12%), 0 28px 54px -24px rgb(32 33 34 / 20%);
}
body, p, li { line-height: 1.6; }
h1, h2, .display, .hero h1, .pdp-copy h1 { font-family: var(--head); letter-spacing: -.035em; }
h3 { font-family: var(--head); }
.hero p, .section-head p, .intro, .community p, .product-info p { line-height: 1.6; }
.hero h1 { font-weight: 600; line-height: 1.06; }
.hero-note { line-height: 1.6; }
.hero, .goals, .community, .routine-banner { position: relative; isolation: isolate; }
.hero::before, .goals::before, .community::before, .routine-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: url('/assets/grain.svg') repeat; opacity: .025; z-index: 3;
}
/* A restrained warm/olive grade ties lifestyle media to the paper and ink. */
.home-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(125deg, #c7352710, #23272218); pointer-events: none; }
.home-slide img, .home-slide video, .goal > img, .community-film video { filter: saturate(.88) contrast(.98); }
.goal > img, .community-film video { background-color: #edf0e9; }
.product-visual, .pdp-image, .standards-photo { box-shadow: var(--shadow-card); }
.button { box-shadow: 0 1px 2px rgb(32 33 34 / 6%), 0 5px 12px -6px rgb(32 33 34 / 18%); }
.button, .product-visual, .journal-card, .goal, .filter, .icon-btn, .locale-btn, .quick-add, .routine-option, .textlink {
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), background-color 220ms var(--ease-out), color 220ms var(--ease-out), border-color 220ms var(--ease-out);
}
.home-slide { transition: opacity 650ms var(--ease-out), visibility 0s 650ms; }
.home-slide.is-active { transition: opacity 650ms var(--ease-out); }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.modal-close { display: grid; place-items: center; }
@media (hover: hover) and (pointer: fine) {
  .button:hover, .quick-add:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
  .product-visual:hover, .journal-card:hover, .goal:hover { transform: translateY(-3px); }
  .product-visual:hover { box-shadow: var(--shadow-lift); }
  .goal:hover { border-color: var(--red); background-color: #e6eae1; }
  .button:active, .quick-add:active { transform: translateY(0); box-shadow: var(--shadow-card); }
}
@media (min-width: 901px) {
  .hero-copy { width: 60%; max-width: 690px; }
  .hero h1 { font-size: clamp(3.4rem, 5.2vw, 5.7rem); max-width: 13ch; }
  .hero::after { background: linear-gradient(90deg, #fafaf8 0%, #fafaf8ef 28%, #fafaf8c2 44%, #fafaf81a 65%, #fafaf800 100%); }
  .standards-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; }
  .standards-photo { margin-right: -28px; transform: translateY(-14px); }
  .standards-grid > :last-child { position: relative; z-index: 1; }
  .community { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; }
  .community-film { margin-right: -54px; }
  .community-content { position: relative; padding: 34px; background: var(--paper); box-shadow: var(--shadow-card); }
  .professionals { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; }
  .pdp-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; }
  .goal-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .hero h1 { font-size: clamp(2.5rem, 10vw, 3.8rem); }
  .community-content { padding-inline: 0; }
  .product-visual { box-shadow: 0 2px 4px rgb(32 33 34 / 4%), 0 8px 18px -10px rgb(32 33 34 / 12%); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .button, .quick-add, .product-visual, .journal-card, .goal { transform: none !important; }
}
