:root {
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 180ms;
  --dur-med: 500ms;
  --dur-slow: 700ms;
}

html.js [data-reveal] { opacity: 0; transform: translateY(20px); }
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}

.card { transition: transform var(--dur-med) var(--ease-spring), background-color var(--dur-med) var(--ease-spring); }
.card--media img { transition: transform var(--dur-slow) var(--ease-out-expo); }
/* Product figures in padded cards need rounded image corners on every edge. */

.btn { transition: background-color var(--dur-fast) var(--ease-out-expo), transform var(--dur-fast) var(--ease-out-expo); }
.btn:active { transform: scale(0.97); }

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  transition: box-shadow var(--dur-med) var(--ease-out-expo), background-color var(--dur-med) var(--ease-out-expo);
}
.nav.is-scrolled { box-shadow: 0 1px 0 rgba(14, 15, 12, 0.08), 0 8px 24px -16px rgba(14, 15, 12, 0.18); }

/* Preserve the compact nav height while restoring the Contact pill's width. */
.nav-links a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
}

.nav-links a:not(.btn) {
  background-image: linear-gradient(var(--primary), var(--primary));
  background-position: left calc(100% - 3px);
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition: background-size 240ms var(--ease-out-expo);
}
.nav-links a:not(.btn):hover,
.nav-links a:not(.btn):focus-visible,
.nav-links a:not(.btn)[aria-current="page"] {
  background-size: 100% 2px;
  text-decoration: none;
}

html.js .steprail[data-reveal] li + li::before { transform: scaleX(0); transform-origin: left; }
html.js .steprail[data-reveal] .node { opacity: 0; transform: scale(0.6); }
html.js .steprail[data-reveal].is-visible li + li::before {
  transform: scaleX(1);
  transition: transform 900ms var(--ease-out-expo);
}
html.js .steprail[data-reveal].is-visible .node {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--dur-med) var(--ease-out-expo), transform var(--dur-med) var(--ease-spring);
}
html.js .steprail[data-reveal].is-visible li:nth-child(2) .node { transition-delay: 80ms; }
html.js .steprail[data-reveal].is-visible li:nth-child(3) .node { transition-delay: 160ms; }

@media (hover: hover) {
  a.card:hover, .card--link:hover { transform: translateY(-4px); }
  .card--media:hover img { transform: scale(1.03); }
  .btn--primary:hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal], html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html.js .steprail[data-reveal] li + li::before,
  html.js .steprail[data-reveal] .node,
  html.js .steprail[data-reveal].is-visible li + li::before,
  html.js .steprail[data-reveal].is-visible .node {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Attic hero */
.hero-attic, .hero-photo {
  --hero-scrim: linear-gradient(100deg, rgba(14,15,12,.85) 0%, rgba(14,15,12,.55) 45%, rgba(14,15,12,.15) 100%);
  min-height: 72vh;
  display: flex;
  align-items: center;
  color: white;
  background-image: var(--hero-scrim), var(--hero-image);
  background-position: center;
  background-size: cover;
}
.hero-attic { --hero-image: url('/assets/img/attic-hero.jpg'); }
.hero-photo--gone4good {
  --hero-image: url('/assets/img/hero-gone4good.jpg');
  /* this plate is brighter than the others, so the scrim carries more weight */
  --hero-scrim: linear-gradient(100deg, rgba(14,15,12,.92) 0%, rgba(14,15,12,.72) 45%, rgba(14,15,12,.35) 100%);
}
.hero-photo--sporelock { --hero-image: url('/assets/img/hero-sporelock.jpg'); }
.hero-photo--about {
  --hero-image: url('/assets/img/hero-about.jpg');
  /* warm, evenly lit plate — needs the heaviest scrim of the set */
  --hero-scrim: linear-gradient(100deg, rgba(14,15,12,.94) 0%, rgba(14,15,12,.78) 45%, rgba(14,15,12,.42) 100%);
}
.hero-attic__content, .hero-photo > .container { width: 100%; }
/* the copy column keeps its comfortable measure; the grid handles the split */
.hero-attic__content.grid > div > * { max-width: 680px; }
.hero-attic__content > * { max-width: 680px; }
.hero-attic h1, .hero-photo h1 { color: white; }
.hero-attic .eyebrow, .hero-photo .eyebrow { color: var(--primary-neutral); }
.hero-attic .body-lg, .hero-photo .body-lg { color: rgba(255,255,255,.85); }
.hero-attic__content > p:not(.eyebrow):not(.body-lg) { color: rgba(255,255,255,.85); }
.hero-attic .btn--tertiary, .hero-photo .btn--tertiary {
  color: white;
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
}
.hero-photo .btn--tertiary:hover,
.hero-attic .btn--tertiary:hover,
.hero-attic .btn--tertiary:focus-visible { background: rgba(255,255,255,.1); }

.result-figure { margin: 0; }
.result-image { position: relative; }
.result-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 24px;
}
.result-badge {
  position: absolute;
  z-index: 1;
  top: var(--sp-3);
  left: var(--sp-3);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.result-badge--before { background: var(--ink); color: white; }
.result-badge--after { background: var(--primary); color: var(--on-primary); }
.results-grid--small { max-width: 880px; }
.results-quote {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--sp-8);
  border-left: 4px solid var(--primary);
  background: var(--canvas-soft);
  border-radius: var(--radius-card);
}
.results-quote cite { font-style: normal; font-weight: 600; }

.home-video__card,
.product-video__card { max-width: 880px; margin-inline: auto; overflow: hidden; }
.home-video__card video,
.product-video__card video { display: block; width: 100%; border-radius: var(--radius-card); }

.profit-cta { position: relative; overflow: hidden; }
.spore-drift { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.profit-cta__content { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .hero-attic { min-height: 60vh; }
  .results-quote { padding: var(--sp-6); }
}

/* ---- Macro whitespace ---------------------------------------------------- */
@media (min-width: 1024px) {
  .band { padding-block: 80px; }
  .band--hero { padding-block: 104px; }
  .band--dark { padding-block: 88px; }
  .footer { padding-top: 64px; }
}

/* ==========================================================================
   Clickable product figures
   ========================================================================== */
.figure-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-input);
  overflow: hidden;
}
.figure-link img { transition: transform var(--dur-slow) var(--ease-out-expo); }
.figure-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) {
  .figure-link:hover img { transform: scale(1.04); }
}

/* ==========================================================================
   Interactive step rail — product thumbnail + numbered node
   ========================================================================== */
.step-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
  padding: var(--sp-2);
  border-radius: var(--radius-input);
  transition: transform var(--dur-med) var(--ease-spring),
              background-color var(--dur-med) var(--ease-out-expo);
}
.step-figure {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--canvas);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 2px var(--canvas-soft);
  transition: box-shadow var(--dur-med) var(--ease-out-expo),
              transform var(--dur-med) var(--ease-spring);
}
.step-figure img { width: 78%; height: 78%; object-fit: contain; }
.steprail .step-figure .node {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  font-size: var(--caption-size);
  box-shadow: 0 0 0 3px var(--canvas);
}
.steprail--compact .step-figure { width: 52px; height: 52px; }
.steprail--compact .step-figure .node { width: 22px; height: 22px; }
/* current step reads as "you are here" */
.steprail li[aria-current] .step-figure { box-shadow: inset 0 0 0 2px var(--primary); }
.steprail li[aria-current] .step-name { color: var(--ink); }
/* connector line re-centred on the taller thumbnail circles */
.steprail li + li::before {
  top: calc(var(--sp-2) + 36px);
  right: calc(50% + 44px);
  left: calc(-50% + 44px);
}
.steprail--compact li + li::before {
  top: calc(var(--sp-2) + 26px);
  right: calc(50% + 34px);
  left: calc(-50% + 34px);
}
/* the hero rail sits directly under its own product photos — numbers only */
.steprail--paired .step-figure { display: none; }
.steprail--paired li + li::before {
  top: calc(var(--sp-2) + 20px);
  right: calc(50% + 28px);
  left: calc(-50% + 28px);
}
@media (hover: hover) {
  a.step-link:hover .step-figure {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 2px var(--primary);
  }
  a.step-link:hover .step-name { color: var(--ink); }
}
a.step-link:active { transform: scale(0.98); }
.step-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.band--dark .steprail .step-figure .node { box-shadow: 0 0 0 3px var(--ink); }
@media (max-width: 640px) {
  .steprail .step-figure { width: 48px; height: 48px; }
  .steprail .step-product { display: none; }
  .steprail li + li::before {
    top: calc(var(--sp-2) + 24px);
    right: calc(50% + 32px);
    left: calc(-50% + 32px);
  }
}

/* ==========================================================================
   Profit calculator checklist icons
   ========================================================================== */
.check-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--primary-pale);
  color: var(--ink-deep);
  display: grid;
  place-items: center;
  transition: transform var(--dur-med) var(--ease-spring),
              background-color var(--dur-med) var(--ease-out-expo);
}
@media (hover: hover) {
  .check-item:hover .check-icon { transform: scale(1.06); background: var(--primary-neutral); }
}

/* ==========================================================================
   Resource library language filter
   ========================================================================== */
.lang-filter {
  display: inline-flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--canvas);
  border-radius: var(--radius-pill);
}
.lang-filter__btn {
  min-height: 36px;
  padding: 0 var(--sp-5);
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--body-sm-size);
  font-weight: 600;
  color: var(--body);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out-expo),
              color var(--dur-fast) var(--ease-out-expo);
}
.lang-filter__btn.is-active { background: var(--primary); color: var(--on-primary); }
@media (hover: hover) {
  .lang-filter__btn:not(.is-active):hover { background: var(--primary-neutral); }
}
.lang-filter__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.lang-filter__empty { margin-top: var(--sp-4); }
.download-row[hidden], section[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .figure-link img,
  .step-link,
  .step-figure,
  .check-icon,
  .lang-filter__btn { transition: none; }
  .figure-link:hover img,
  a.step-link:hover .step-figure,
  a.step-link:active,
  .check-item:hover .check-icon { transform: none; }
}

/* number badges must stay legible sitting over a product photo */
.steprail .step-figure .node { background: var(--canvas); color: var(--body); }
.steprail--current li:not([aria-current]) .step-figure .node {
  background: var(--canvas);
  color: var(--body);
  box-shadow: inset 0 0 0 1px var(--mute), 0 0 0 3px var(--canvas);
}
.steprail li[aria-current] .step-figure .node {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: 0 0 0 3px var(--canvas);
}

/* ==========================================================================
   Liquid hero canvas (WebGL) + image loading states
   ========================================================================== */
.hero-ripple__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-out-expo);
  pointer-events: none;
}
.hero-ripple__canvas.is-ready { opacity: 1; }
.hero-attic { position: relative; }
/* The ink scrim lives inside .hero-attic's background-image, which the canvas
   paints over — so when the canvas is active the scrim is re-applied on top of
   it. Same gradient values as the background layer; keep the two in sync. */
.hero-ripple::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--hero-scrim);
}
.hero-attic__content { position: relative; z-index: 2; }

/* Loading state: a shimmer sits BEHIND the image and is covered once it paints.
   Deliberately never hides the image itself — if this JS ever fails to run, the
   worst case is an unseen shimmer, not missing content. */
/* The gradient is scoped to the loading state only. Applying it unconditionally
   made it visible around object-fit:contain product shots, which read as a
   stray off-colour panel behind the bottle. */
html.js .card-figure:has(img[loading="lazy"]:not(.is-loaded)),
html.js .result-image:has(img[loading="lazy"]:not(.is-loaded)),
html.js .media-frame:has(img[loading="lazy"]:not(.is-loaded)) {
  background-image: linear-gradient(100deg, var(--canvas-soft) 30%, #f4f5f0 50%, var(--canvas-soft) 70%);
  background-size: 220% 100%;
  animation: skeleton-sweep 1400ms linear infinite;
}
@keyframes skeleton-sweep {
  from { background-position: 120% 0; }
  to   { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .card-figure, html.js .result-image, html.js .media-frame { animation: none; }
  .hero-ripple__canvas { transition: none; }
}

/* availability constraint (e.g. Spore Lock: Canada only) */
.availability-note {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-6);
  padding: var(--sp-2) var(--sp-4);
  background: var(--primary-pale);
  color: var(--ink-deep);
  border-radius: var(--radius-pill);
  font-size: var(--body-sm-size);
  font-weight: 600;
}
.availability-note__flag { color: var(--primary); }
.band--dark .availability-note { background: rgba(255,255,255,.1); color: var(--canvas); }

/* ==========================================================================
   Language switcher (EN / FR / ES)
   ========================================================================== */
.nav-lang { display: flex; align-items: center; }
.lang-switch {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--canvas-soft);
  border-radius: var(--radius-pill);
}
.lang-switch__btn {
  min-height: 30px;
  padding: 0 var(--sp-3);
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--caption-size);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--body);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out-expo),
              color var(--dur-fast) var(--ease-out-expo);
}
.lang-switch__btn.is-active { background: var(--primary); color: var(--on-primary); }
@media (hover: hover) {
  .lang-switch__btn:not(.is-active):hover { background: var(--primary-neutral); }
}
.lang-switch__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* decorative flag drawn in CSS so the note stays a pure translatable string */
.availability-note::before { content: "⚑"; color: var(--primary); }

/* photo heroes keep their two-column layout: copy over the plate, product card opaque */
.hero-photo { position: relative; }
.hero-photo > .container { position: relative; z-index: 2; }
.hero-photo li, .hero-photo p { color: rgba(255,255,255,.88); }
.hero-photo .card { background: var(--canvas); color: var(--body); }
.hero-photo .card h1, .hero-photo .card h2, .hero-photo .card h3 { color: var(--ink); }
.hero-photo .availability-note { background: rgba(255,255,255,.12); color: var(--canvas); }

/* Product figures: the figure owns the corner radius and clips its image, so an
   image radius can never disagree with the panel it sits in. */
.card-figure { overflow: hidden; }
.card-figure > img { border-radius: 0 !important; }

/* --- Typography: no orphan words on centred copy --- */
h1, h2, h3, .display-mega, .display-xxl, .display-xl, .display-md, .display-sm {
  text-wrap: balance;
}
.center p, .band--dark p, .body-lg, blockquote p { text-wrap: pretty; }
/* the dark CTA lead was breaking one word onto its own line */
.band--dark .center p, .band--dark .container.center p {
  max-width: 46ch;
  margin-inline: auto;
  text-wrap: balance;
}

/* --- Language switcher: green is reserved for CTAs and the step rail
   (see tokens.css), so the active state is ink and it is separated from the
   Contact button rather than sitting flush against it. --- */
.nav-lang { margin-left: var(--sp-2); padding-left: var(--sp-4); position: relative; }
.nav-lang::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: rgba(14, 15, 12, .14);
}
.lang-switch { background: transparent; padding: 0; gap: 0; }
.lang-switch__btn {
  min-height: 28px;
  padding: 0 var(--sp-2);
  color: var(--mute);
  letter-spacing: .06em;
}
.lang-switch__btn.is-active {
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
@media (hover: hover) {
  .lang-switch__btn:not(.is-active):hover { background: transparent; color: var(--ink); }
}
@media (max-width: 900px) {
  .nav-lang { margin-left: 0; padding-left: 0; }
  .nav-lang::before { display: none; }
}

/* ==========================================================================
   Legal pages (privacy, terms) — long-form reading measure
   ========================================================================== */
.legal-prose { max-width: 100ch; }
.legal-prose h2 { margin-top: var(--sp-12); }
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p, .legal-prose ul { margin-bottom: var(--sp-4); }
.legal-prose ul { padding-left: var(--sp-6); display: grid; gap: var(--sp-2); }
.legal-prose a { text-decoration: underline; text-decoration-color: var(--primary); text-underline-offset: 3px; }
.legal-prose .caption { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--canvas-soft); }

/* consent / anti-bot checkbox on the app request form */
.consent-check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  font-size: var(--body-sm-size);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.consent-check input {
  width: 22px;
  height: 22px;
  flex: none;
  accent-color: var(--primary);
  cursor: pointer;
}

/* testimonial: discrete quoted lines, not one merged sentence */
.results-quote .quote-line {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-line);
  margin-bottom: var(--sp-4);
}
.results-quote .quote-line:last-of-type { margin-bottom: var(--sp-6); }