/* Homepage motion is progressive enhancement: no content starts hidden.
   home-scroll.js supplies transforms only when motion is appropriate. */
body[data-page="home"] .hero-film-video{transform:translate3d(0,var(--scroll-y,0px),0) scale(var(--scroll-scale,1));transform-origin:50% 50%}
body[data-page="home"] .hero-copy{transform:translate3d(0,var(--scroll-y,0px),0);opacity:var(--scroll-opacity,1)}
.hero-scroll-shade{position:absolute;inset:0;z-index:1;background:#050807;opacity:var(--scroll-darken,0);pointer-events:none}
body[data-page="home"] .hero-copy:focus-within{transform:none!important;opacity:1!important}

/* Product spotlight: more room for the existing vial art, unchanged controls. */
#featuredGrid .pcard{box-shadow:0 12px 32px rgba(21,51,39,.045)}
#featuredGrid .pcard-art{height:clamp(230px,22vw,286px);background:radial-gradient(ellipse at 50% 72%,#dfe7dc 0%,#f1f3ec 52%,#f7f8f2 100%)}
#featuredGrid .pcard-art .vial-mockup{width:clamp(180px,18vw,240px);height:clamp(224px,21vw,276px);flex-basis:auto}
#featuredGrid .pcard-art .vial-photo{width:100%;height:100%;filter:drop-shadow(4px 14px 10px #18312826);transition:transform .45s ease}
@media(hover:hover) and (pointer:fine){#featuredGrid .pcard:hover .vial-photo{transform:translateY(-5px) scale(1.025)}}

/* Vial -> lot -> COA. This diagram intentionally contains no sample results. */
.doc-story{position:relative;background:linear-gradient(135deg,#102b23,#183f32 65%,#15372c)}
.doc-story-intro{max-width:740px;margin-bottom:clamp(32px,5vw,64px)}
.documentation-sec .doc-story-intro p{max-width:62ch;margin-bottom:0}
.doc-story-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
.doc-story-visual{margin:0;min-width:0}
.doc-stage{position:relative;height:455px;isolation:isolate;border:1px solid #d5e2cf26;border-radius:24px;background:radial-gradient(ellipse at 40% 62%,#4e6b544d,transparent 68%),linear-gradient(150deg,#ffffff09,#ffffff02)}
.doc-stage-kicker{position:absolute;top:24px;left:26px;color:#d7aa81;font:600 .64rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.doc-vial{position:absolute;left:3%;top:46px;width:51%;height:360px}
.doc-vial img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 16px #05170f66)}
.doc-lot-callout{position:absolute;left:9%;right:3%;bottom:44px;padding:10px 12px;border:1px solid #f0a06699;border-radius:7px;background:#132e27f5;box-shadow:0 10px 24px #06130d33;transition:border-color .3s,box-shadow .3s}
.doc-lot-callout span,.doc-help-note span{display:block;margin-bottom:4px;color:#f0a066;font-size:.6rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.doc-lot-callout strong,.doc-help-note strong{display:block;color:#fffdf8;font-size:.79rem;font-weight:600;line-height:1.4}
.doc-record{position:absolute;right:5%;top:78px;width:44%;padding:20px 18px;border:1px solid #fff;border-radius:9px;background:#f8f7f2;color:#183d30;box-shadow:0 16px 36px #04180f38;transform:rotate(3deg);transition:transform .45s,box-shadow .45s}
.doc-record-kicker{display:block;margin-bottom:12px;color:#85502f;font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.doc-record-title{display:block;margin-bottom:16px;font-size:1.15rem;font-weight:700;letter-spacing:-.03em;line-height:1.15}
.doc-record-field{padding:9px 0;border-top:1px solid #173c3024}
.doc-record-field span{display:block;color:#67726b;font-size:.6rem;line-height:1.3}
.doc-record-field strong{display:block;margin-top:3px;font-size:.72rem;font-weight:600;line-height:1.4}
.doc-record-foot{display:block;margin-top:12px;color:#67726b;font-size:.58rem;line-height:1.4}
.doc-help-note{position:absolute;bottom:15px;left:25px;right:25px;padding:8px 12px;border-left:2px solid #879d8b;background:#122e26;opacity:.85;transition:border-color .3s,background .3s}
.doc-help-note span{display:inline;margin-right:8px}.doc-help-note strong{display:inline}
.doc-stage-track{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}
.doc-stage-track span{padding-top:10px;border-top:2px solid #56725f;color:#d4dfd5;font-size:.68rem;font-weight:600;letter-spacing:.04em;transition:color .3s,border-color .3s}
.doc-story-visual figcaption{margin-top:14px;max-width:52ch;color:#bdccbf;font-size:.72rem;line-height:1.6}
.doc-story-steps{list-style:none;margin:0;padding:0}
.doc-story-step{padding:24px 0;border-bottom:1px solid #7b92764d}
.doc-story-step:first-child{padding-top:0}
.doc-story-step:last-child{border-bottom:0}
.doc-story-step .doc-number{display:block;margin-bottom:14px;font:600 .7rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#f0a066}
.doc-story-step h3{margin:0 0 12px;color:#fffdf8;font-size:clamp(1.3rem,2.2vw,1.8rem);line-height:1.15}
.documentation-sec .doc-story-step p{margin-bottom:18px;font-size:.95rem;line-height:1.7}
.doc-story-link{display:inline-flex;align-items:center;gap:14px;min-height:44px;color:#f0b68f;font-size:.85rem;font-weight:600;text-decoration:none}
.doc-story-link:hover{color:#fffdf8;text-decoration:underline;text-underline-offset:4px}
.doc-story-link:focus-visible{outline:2px solid #f0b68f;outline-offset:5px;border-radius:2px}
.doc-story-footer{margin-top:32px}
.story-motion-enabled .doc-stage-track span{color:#a7b9ac}
.story-motion-enabled[data-story-active="0"] .doc-stage-track span:nth-child(1),.story-motion-enabled[data-story-active="1"] .doc-stage-track span:nth-child(2),.story-motion-enabled[data-story-active="2"] .doc-stage-track span:nth-child(3){border-color:#f0a066;color:#f0b68f}
.story-motion-enabled[data-story-active="0"] .doc-lot-callout{box-shadow:0 0 0 4px #e995521c,0 10px 24px #06130d33;border-color:#f0a066}
.story-motion-enabled[data-story-active="1"] .doc-record{transform:rotate(0deg) translateY(-4px);box-shadow:0 0 0 3px #e995524d,0 16px 36px #04180f38}
.story-motion-enabled[data-story-active="2"] .doc-help-note{border-color:#f0a066;background:#234538;opacity:1}
@media(min-width:992px) and (min-height:700px){
  .story-motion-enabled .doc-story-visual{position:sticky;top:calc(var(--nav-h,80px) + 24px)}
  .story-motion-enabled .doc-story-step{min-height:clamp(260px,42vh,420px);display:flex;flex-direction:column;justify-content:center;padding-block:32px}
  .story-motion-enabled .doc-story-step:last-child{min-height:clamp(320px,50vh,480px)}
}
@media(max-width:991.98px){
  .doc-story-grid{grid-template-columns:1fr;gap:28px}
  .doc-story-visual{max-width:560px;width:100%;margin-inline:auto}
  .doc-story-step{padding-block:25px}
  .doc-story-step:first-child{padding-top:12px}
  .documentation-sec .doc-story-step p{max-width:62ch}
}
@media(max-width:560px){
  .doc-stage{height:415px;border-radius:18px}
  .doc-stage-kicker{left:18px;top:20px;font-size:.58rem}
  .doc-vial{left:0;top:58px;width:53%;height:300px}
  .doc-record{right:5%;top:66px;width:46%;padding:15px 12px}
  .doc-record-title{font-size:1rem;margin-bottom:12px}
  .doc-record-kicker{font-size:.54rem;margin-bottom:10px}
  .doc-record-field{padding-block:7px}
  .doc-record-field strong{font-size:.65rem}
  .doc-record-foot{font-size:.54rem;margin-top:8px}
  .doc-lot-callout{left:8%;right:0;bottom:56px;padding:8px}
  .doc-lot-callout span{font-size:.52rem}.doc-lot-callout strong{font-size:.65rem}
  .doc-help-note{left:16px;right:16px;bottom:13px;padding:7px 9px}
  .doc-help-note span{font-size:.52rem}.doc-help-note strong{font-size:.68rem}
  .doc-stage-track{gap:10px;margin-top:15px}
  .doc-stage-track span{font-size:.62rem}
  #featuredGrid .pcard-art .vial-mockup{width:190px;height:230px}
}
@media(prefers-reduced-motion:reduce){
  body[data-page="home"] .hero-film-video,body[data-page="home"] .hero-copy{transform:none!important;opacity:1!important}
  .hero-scroll-shade{opacity:0!important}
  #featuredGrid .vial-photo,.doc-record,.doc-lot-callout,.doc-help-note,.doc-stage-track span{transition:none!important}
  #featuredGrid .pcard:hover .vial-photo{transform:none}
  .story-motion-enabled .doc-story-visual{position:static}
  .story-motion-enabled .doc-story-step{min-height:0}
}