/* Home page sections — from Docs/reference/index.html. Used from F1 on. */

/* Hero */
.hero { padding: .5rem .5rem 0; }
.hero-card { position: relative; isolation: isolate; min-height: 600px; overflow: hidden; border-radius: 0 0 2rem 2rem; background: #dfe9e5; }
.hero-card > img, .hero-card > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Below 1024px the copy spans the whole card, so the photo stays washed out behind it. */
.hero-fade-x { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238,243,239,.95) 0%, rgba(238,243,239,.84) 45%, rgba(238,243,239,.6) 75%, rgba(238,243,239,.4) 100%); }
.hero-fade-y { position: absolute; inset: 0; background: linear-gradient(to top, rgba(216,228,223,.35), transparent, rgba(255,255,255,.1)); }
.hero-inner { position: relative; max-width: 80rem; margin: 0 auto; display: flex; min-height: 600px; align-items: center; padding: 4rem 2rem; }
.hero-copy { position: relative; z-index: 10; display: flex; max-width: 680px; flex-direction: column; gap: 1.75rem; }
.hero-eyebrow { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .28em; color: #2d705f; }
.hero h1 { max-width: 9em; font-size: 2.5rem; line-height: .99; font-weight: 600; letter-spacing: -0.045em; color: #20322d; text-wrap: balance; }
.hero h1 span { color: #347c68; }
.hero-lead { max-width: 520px; font-size: 1.125rem; line-height: 1.625; color: #61716c; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.btn-hero { display: inline-flex; height: 3.5rem; align-items: center; gap: .75rem; padding: 0 1.75rem; border-radius: 9999px; background: #20322d; color: #fff; font-size: .875rem; font-weight: 600; transition: transform .15s; }
.btn-hero:hover { transform: translateY(-2px); }
.link-hero { font-size: .875rem; font-weight: 600; color: #347c68; text-underline-offset: 4px; }
.link-hero:hover { text-decoration: underline; }
.trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; max-width: 80rem; margin: 0 auto; padding: 2rem 1rem; }
.trust li { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .875rem; font-weight: 500; }
.trust svg { color: var(--primary); }

.categories { display: grid; gap: 1rem; margin-top: 1rem; }
.cat { position: relative; display: flex; height: 9rem; align-items: center; justify-content: space-between; overflow: hidden; padding: 1.5rem; border: 1px solid var(--border); border-radius: 1.35rem; background: var(--card); transition: transform .15s; }
.cat:hover { transform: translateY(-2px); }
.cat.accent { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
.cat-copy { position: relative; z-index: 10; display: flex; flex-direction: column; gap: .25rem; }
.cat-copy b { font-size: 1.25rem; font-weight: 600; }
.cat-copy span { font-size: .875rem; color: var(--muted-foreground); }
.cat.accent .cat-copy span { color: color-mix(in srgb, var(--primary-foreground) 80%, transparent); }
.cat-imgs { display: flex; align-items: center; }
.cat-imgs img { width: 6rem; height: 6rem; object-fit: cover; border-radius: .75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); transition: transform .15s; }
.cat-imgs img:first-child { transform: rotate(-6deg); }
.cat-imgs img:last-child { margin-left: -2rem; transform: rotate(6deg); }
.cat:hover .cat-imgs img { transform: rotate(0); }
/* A category's own image is shown alone, a little larger. */
.cat-imgs.single img { width: 7rem; height: 7rem; margin-left: 0; transform: rotate(-4deg); }
.cat .members-badge { position: absolute; top: .875rem; right: .875rem; z-index: 20; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.cat.accent .members-badge { background: var(--primary-foreground); }
.cat-arrow { position: absolute; bottom: 1rem; right: 1rem; opacity: 0; transition: opacity .15s; }
.cat:hover .cat-arrow { opacity: 1; }

/* Promo: headline panel over a brand + CTA panel, beside the box photo with two crossing ribbons.
   Phones stack photo, headline, then brand + CTA. */
.promo-banner.promo-split { display: grid; grid-template-areas: "photo" "head" "foot"; gap: 0; padding: 0; overflow: hidden; border-top: .375rem solid var(--primary); }
.split-head { grid-area: head; display: flex; flex-direction: column; justify-content: center; gap: .875rem; padding: 1.75rem 1.5rem; background: var(--secondary); }
.promo-split .split-head .title { font-size: 2.25rem; line-height: 1.05; font-weight: 400; letter-spacing: -0.035em; }
.split-head .title b { font-weight: 700; color: var(--primary); }
/* "U.S.-based company" label with a small flag. */
.us-badge { display: inline-flex; align-items: center; gap: .625rem; font-family: var(--font-mono); font-size: .6875rem; line-height: 1; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-foreground); }
.us-badge svg { width: 1.375rem; height: auto; flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .1); }
.promo-split .split-head .sub { max-width: 24rem; font-size: 1rem; line-height: 1.5; }
.split-foot { grid-area: foot; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 1.5rem; border-top: 1px solid var(--border); background: var(--card); }
.split-cta { display: flex; flex-direction: column; align-items: flex-start; gap: .625rem; }
.promo-split .btn-primary { align-self: flex-start; }
.split-photo { grid-area: photo; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
/* promo-trio.webp: the three vials stand in the left half; crops keep them and give up the empty right side. */
.split-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% 50%; }
/* Vertical text strips, turned to read bottom-up and tilted in opposite directions so they cross. */
.split-ribbon { position: absolute; top: -25%; height: 150%; width: 2rem; overflow: hidden; writing-mode: vertical-rl; line-height: 2rem; text-align: center; white-space: nowrap; background: var(--primary); color: var(--primary-foreground); font-family: var(--font-mono); font-size: .6875rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; box-shadow: 0 6px 18px rgb(0 0 0 / .2); }
.split-ribbon.r1 { right: 16%; transform: rotate(187deg); }
.split-ribbon.r2 { right: 7%; transform: rotate(174deg); background: color-mix(in srgb, var(--primary) 72%, #000); }

/* Process */
.process-head { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 48rem; margin: 0 auto; text-align: center; }
/* Layered vial: home.js sets --pp-open/--pp-cap/--pp-stopper/--pp-scan/--pp-progress (0–1) on .pp-process.
   Unset (no JS) they fall back to 0, a closed vial. Only transforms and opacity change while scrolling. */
/* Top-aligned in the page flow: the vial is the scroll anchor there, so accordion height changes must not move it. */
.pp-body { display: grid; align-items: start; gap: 2.5rem; margin-top: 3rem; }
.pp-steps { max-width: 33rem; }
.pp-step { position: relative; padding: 1.125rem 0 1.125rem 2rem; border-bottom: 1px solid var(--border); }
.pp-step::before { content: ''; position: absolute; left: .25rem; top: 1.75rem; width: .4375rem; height: .4375rem; border-radius: 9999px; background: var(--border); transition: background-color .3s, box-shadow .3s; }
.pp-step[data-active]::before { background: var(--primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--primary) 12%, transparent); }
.pp-step button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--muted-foreground); transition: color .2s; }
.pp-step button:hover, .pp-step[data-active] button { color: var(--foreground); }
.pp-num { font-family: var(--font-mono); font-size: .6875rem; font-weight: 400; opacity: .6; }
.pp-panel { display: flex; flex-direction: column; gap: .875rem; padding-top: .75rem; }
.pp-panel[hidden] { display: none; }
.pp-panel p { max-width: 28rem; font-size: .9375rem; line-height: 1.65; color: var(--muted-foreground); }
.pp-process[data-pp-ready] .pp-step[data-active] .pp-panel { animation: rise .6s var(--ease-rise) both; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li { padding: .25rem .75rem; border: 1px solid var(--border); border-radius: 9999px; background: var(--card); font-family: var(--font-mono); font-size: .75rem; }

.pp-visual { position: relative; width: 100%; max-width: 32rem; margin: 0 auto; }
.pp-visual[hidden] { display: none; }
/* Square stage; inline-size containment lets the scan line move in cqi (= stage height) with a transform. */
.pp-stage { position: relative; aspect-ratio: 1; isolation: isolate; overflow: hidden; container-type: inline-size; }
.pp-halo { position: absolute; inset: 10%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--card) 70%, transparent), transparent 68%); }
.pp-axis { position: absolute; left: 50%; top: 13%; height: 65%; border-left: 1px dashed color-mix(in srgb, var(--primary) 19%, transparent); opacity: var(--pp-open, 0); }
.pp-shadow { position: absolute; left: 33%; bottom: 6%; width: 34%; height: 3%; border-radius: 50%; background: color-mix(in srgb, var(--foreground) 19%, transparent); filter: blur(10px); transform: scaleX(calc(1 - var(--pp-open, 0) * .18)); }
.pp-layer { position: absolute; inset: 0; pointer-events: none; }
.pp-layer img { width: 100%; height: 100%; object-fit: contain; user-select: none; }
.pp-process[data-pp-ready] .pp-layer { will-change: transform; }
/* Closed: cap and stopper sit 19% / 11% lower, on the neck; open (1): their place in the exploded image. */
.pp-layer-body { z-index: 2; clip-path: inset(39% 0 0); transform: translateY(-3%); }
.pp-layer-stopper { z-index: 3; clip-path: inset(25% 0 60%); transform: translateY(calc((1 - var(--pp-stopper, 0)) * 11%)); }
.pp-layer-cap { z-index: 4; clip-path: inset(0 0 75%); transform: translateY(calc((1 - var(--pp-cap, 0)) * 19%)); }
.pp-scan { position: absolute; left: 31%; top: 49%; z-index: 5; width: 38%; height: 1px; background: linear-gradient(90deg, transparent, #9fcdb7, transparent); box-shadow: 0 0 10px #b8e7c5; opacity: var(--pp-scan, 0); transform: translateY(calc(var(--pp-progress, 0) * 36cqi)); }
.pp-marker { position: absolute; right: 0; top: 44%; z-index: 6; max-width: 25%; padding: .3rem 0 .3rem .625rem; border-left: 1px solid color-mix(in srgb, var(--primary) 38%, transparent); font-family: var(--font-mono); font-size: .625rem; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); }
.pp-marker::before { content: ''; position: absolute; right: 100%; top: 50%; width: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--primary) 38%, transparent); }
.pp-caption { display: flex; justify-content: space-between; gap: 1rem; padding: 0 1rem; font-family: var(--font-mono); font-size: .6875rem; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
.pp-progress { height: 2px; margin: .875rem 1rem 0; overflow: hidden; border-radius: 2px; background: var(--border); }
.pp-progress i { display: block; height: 100%; background: var(--primary); transform-origin: left; transform: scaleX(var(--pp-progress, 0)); }
/* The slider and the scroll hint only make sense once home.js runs. */
.pp-controls, .pp-hint { display: none; }
.pp-process[data-pp-ready] .pp-controls { display: flex; align-items: center; gap: 1rem; margin: 1rem 1rem 0; }
.pp-controls label { font-family: var(--font-mono); font-size: .6875rem; white-space: nowrap; color: var(--muted-foreground); }
.pp-controls input { width: 100%; height: 1.5rem; accent-color: var(--primary); cursor: ew-resize; }
.pp-note { margin-top: .875rem; font-family: var(--font-mono); font-size: .6875rem; line-height: 1.5; text-align: center; color: var(--muted-foreground); }

/* Wide screens (home.js adds .is-pinned): the section is 3 screens tall and its content sticks under the header,
   so the vial opens over ~2 screens of scrolling. The heading moves above the steps in the left column, so the vial
   gets the full column height: the stage is as tall as the screen minus its caption, progress, slider and note (~9rem).
   The 1fr rows above and below take the spare height, so the left column stays centred next to the taller vial. */
.pp-process.is-pinned { height: 300vh; padding: 0; }
.pp-process.is-pinned .pp-pin { position: sticky; top: var(--pp-top, 4rem); display: flex; height: calc(100vh - var(--pp-top, 4rem)); flex-direction: column; justify-content: center; overflow: hidden; padding: 1rem 0; }
.pp-process.is-pinned .pp-pin > .container { display: grid; width: 100%; height: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". visual" "head visual" "steps visual" "hint visual" ". visual"; column-gap: 3rem; }
.pp-process.is-pinned .pp-body { display: contents; }
.pp-process.is-pinned .process-head { grid-area: head; align-items: flex-start; max-width: 34rem; margin: 0; gap: .75rem; text-align: left; }
.pp-process.is-pinned .process-head .h2 { font-size: clamp(1.875rem, 2.6vw, 2.5rem); }
.pp-process.is-pinned .pp-steps { grid-area: steps; margin-top: 1.5rem; }
.pp-process.is-pinned .pp-visual { grid-area: visual; align-self: center; max-width: min(100%, calc(100vh - var(--pp-top, 4rem) - 9rem)); }
.pp-process.is-pinned .pp-hint { grid-area: hint; display: block; margin-top: 1rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }

.ship-img img { width: 100%; height: 100%; object-fit: cover; }

/* Shipping */
.shipping { padding-top: 6rem; padding-bottom: 6rem; scroll-margin-top: 7rem; }
.shipping-grid { display: grid; gap: 3rem; }
.ship-img { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 1.65rem; background: var(--secondary); }
.ship-chip { position: absolute; bottom: 1rem; left: 1rem; display: flex; align-items: baseline; gap: .5rem; padding: .75rem 1rem; border-radius: .75rem; background: color-mix(in srgb, var(--card) 95%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ship-chip b { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; letter-spacing: -0.025em; color: var(--primary); }
.ship-chip span { font-size: .875rem; color: var(--muted-foreground); }
.ship-copy { display: flex; flex-direction: column; gap: 2rem; }
.ship-intro { display: flex; flex-direction: column; gap: .75rem; }
.features { display: grid; gap: 1.5rem 2rem; }
.features div { display: flex; flex-direction: column; gap: .375rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.features dt { font-weight: 600; }
.features dd { font-size: .875rem; line-height: 1.625; color: var(--muted-foreground); }

/* FAQ */
.faq-grid { display: grid; gap: 3rem; }
.faq-intro { display: flex; flex-direction: column; gap: 1rem; }
.faq-intro p.muted { max-width: 24rem; line-height: 1.625; }
.faq-intro a { font-size: .875rem; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 767px) {
  /* Phones: copy on top, the vial-focused crop below it at its own ratio, so neither covers the other. */
  .hero-card { display: flex; flex-direction: column; min-height: 0; background: #eef3ef; }
  .hero-card > picture { order: 2; display: block; }
  .hero-card > picture > img { position: static; height: auto; aspect-ratio: 938 / 533; }
  .hero-inner { order: 1; width: 100%; min-height: 0; padding: 2.5rem 1.5rem 1.75rem; }
  .hero-fade-x, .hero-fade-y { display: none; }
  /* The vial leads on phones; the accordion below can change height without moving it. */
  .pp-visual { grid-row: 1; }
  .pp-steps { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-step::before, .pp-step button { transition: none; }
  .pp-process[data-pp-ready] .pp-step[data-active] .pp-panel { animation: none; }
  .pp-scan { display: none; }
}
@media print {
  .pp-panel[hidden] { display: flex; }
  .pp-controls { display: none !important; }
}
@media (min-width: 640px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .hero { padding: 1rem 1rem 0; }
  .hero-card { min-height: 680px; border-radius: 1.65rem; }
  .hero-card > picture > img { object-position: right center; }
  .hero-inner { min-height: 680px; padding: 5rem 3rem; }
  .hero h1 { font-size: 4.25rem; }
  .hero-lead { font-size: 1.25rem; }
  .trust { grid-template-columns: repeat(4, 1fr); padding: 2rem; }
  /* One row of equal cards, however many categories the admin shows. */
  .categories { grid-auto-flow: column; grid-auto-columns: 1fr; }
  .pp-body { grid-template-columns: repeat(2, 1fr); gap: 3rem; margin-top: 4rem; }
  .pp-step button { font-size: 1.25rem; }
}
@media (min-width: 1280px) {
  /* Hero photo is 3:1 with the vials on its right half: tie the card height to that ratio and scale the
     headline with the viewport so the copy stays on the empty left side instead of over the vials. */
  .hero-card, .hero-inner { min-height: max(560px, calc((100vw - 2rem) / 3)); }
  .hero h1 { font-size: clamp(2.75rem, 3.7vw, 4.25rem); }
  .hero-lead { max-width: 420px; }
  .hero-fade-x { background: linear-gradient(90deg, rgba(238,243,239,.95) 0%, rgba(238,243,239,.8) 28%, rgba(238,243,239,.25) 45%, rgba(238,243,239,0) 60%); }
}
@media (min-width: 768px) {
  .promo-banner.promo-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows: 1fr auto; grid-template-areas: "head photo" "foot photo"; }
  .split-head { padding: 2.5rem; }
  .promo-split .split-head .title { font-size: 2.75rem; }
  .split-foot { padding: 1.25rem 2.5rem; }
  .split-photo { min-height: 22rem; aspect-ratio: auto; }
  .split-ribbon { width: 2.25rem; line-height: 2.25rem; font-size: .75rem; }
}
@media (min-width: 1024px) {
  .promo-split .split-head .title { font-size: 3.5rem; }
  .shipping-grid { grid-template-columns: repeat(2, 1fr); align-items: center; }
  .faq-grid { grid-template-columns: 1fr 1.4fr; }
}