/* Packaging concept and the buyer's scan experience */
[hidden] { display: none !important; }
.buyer-demo { background: #e8dfcc; }
.buyer-demo .section-head { align-items: start; }
.buyer-demo .section-head a { text-underline-offset: 4px; }
.journey-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.journey-tabs button { min-height: 48px; padding: 11px 19px; border: 1px solid #183029; color: #183029; background: transparent; }
.journey-tabs button[aria-selected="true"] { background: #183029; color: #faf7ef; }
.journey-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; border: 1px solid rgba(24,48,41,.2); background: #f5efe2; }
.journey-copy { padding: clamp(26px,5vw,64px); }
.journey-copy h3 { font: 400 clamp(2rem,3.7vw,3.4rem)/1.08 "Newsreader",Georgia,serif; margin: 0 0 22px; }
.journey-copy > p { max-width: 45ch; }
.journey-copy .eyebrow { color: #75602e; }
.journey-copy .button { margin-top: 16px; color: #faf7ef; background: #183029; }
.journey-copy .source-note { font-size: .875rem; }
.pack-stage { min-width: 0; padding: 50px 20px 38px; background: radial-gradient(ellipse at 40% 20%,#eee9dc,#d3c9b0); display: grid; place-items: center; }
.jar { width: 268px; max-width: 100%; padding-top: 28px; position: relative; filter: drop-shadow(10px 18px 14px rgba(52,43,24,.16)); }
.jar-lid { height: 31px; position: absolute; top: 0; left: 5%; width: 90%; border-radius: 9px 9px 4px 4px; background: repeating-linear-gradient(90deg,#383d2f 0 3px,#535a44 3px 5px); box-shadow: inset 0 4px 3px #7c8165; }
.jar-glass { min-height: 405px; padding: 27px 15px 32px; border: 2px solid #a59970; border-radius: 30px 30px 34px 34px; background: linear-gradient(90deg,rgba(255,255,255,.6),transparent 14%,transparent 85%,rgba(77,64,35,.15)),radial-gradient(ellipse at 27% 37%,#cdbb96 0 5px,#e3d4b7 6px 9px,transparent 10px) 0 0/24px 29px,#bfae85; }
.jar-label { padding: 22px 17px 15px; background: #fbf6e9; border: 1px solid #d8c9a7; text-align: center; color: #183029; }
.jar-brand { display: block; font: 600 9px/1.5 "DM Sans",sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.jar-leaf { display: block; width: 40px; height: 40px; margin: 15px auto 10px; }
.jar-label h4 { font: 400 36px/.98 "Newsreader",Georgia,serif; margin: 0; letter-spacing: -.025em; }
.jar-product { margin: 16px 0 0; font: 600 11px/1.5 "DM Sans",sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.jar-promise { margin: 10px 0 15px; font: 400 12px/1.45 "DM Sans",sans-serif; }
.jar-scan { display: flex; gap: 10px; text-align: left; align-items: center; border-top: 1px solid #b5bca9; padding-top: 12px; }
.jar-scan img { width: 63px; height: 63px; flex-shrink: 0; }
.jar-scan a { font: 600 11px/1.45 "DM Sans",sans-serif; text-underline-offset: 3px; }
.jar-weight { display: block; margin-top: 12px; font: 400 9px/1.4 "DM Sans",sans-serif; letter-spacing: .04em; }
.shelf-caption { margin: 27px 0 0; font: 500 14px/1.5 "DM Sans",sans-serif; text-align: center; }
.shelf-caption span { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; }
.phone-stage { padding: 26px 16px; background: #d5dccf; }
.phone-frame { width: min(100%,390px); margin: auto; padding: 8px; border-radius: 30px; background: #182820; box-shadow: 0 15px 40px rgba(24,48,41,.16); }
.phone-frame iframe { display: block; width: 100%; height: 650px; border: 0; border-radius: 23px; background: #f9f5eb; }
.kept-jar .jar-glass { min-height: 310px; padding: 82px 20px 55px; }
.kept-jar .jar-label { padding: 24px 14px; background: #163529; color: #f8f0dd; border: 0; }
.kept-jar .jar-label h4 { font-size: 31px; margin: 15px 0; }
.jar-refill { margin: 0; font: 400 11px/1.5 "DM Sans",sans-serif; }
.permanent-code { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 16px auto 0; padding: 6px 9px; background: #fffdf6; color: #183029; text-align: left; font: 500 10px/1.4 "DM Sans",sans-serif; text-underline-offset: 3px; }
.permanent-code img { width: 44px; height: 44px; background: white; flex-shrink: 0; }
.pilot .evidence-detail { color: #d0d7cb; margin-top: 30px; border-color: #516254; }
.bridge { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; margin-top: 40px; border-top: 1px solid rgba(242,236,223,.25); padding-top: 30px; }
.bridge h3 { font: 400 2rem/1.15 "Newsreader",Georgia,serif; margin: 0; }
.bridge p { color: #d0d7cb; margin: 0; }
.research-plan { margin-bottom: 48px; }
.research-plan h3 { font: 400 2rem/1.15 "Newsreader",Georgia,serif; margin: 0 0 22px; }
.research-lanes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid rgba(19,37,29,.3); }
.research-lanes article { padding: 24px; }
.research-lanes article + article { border-left: 1px solid rgba(19,37,29,.3); }
.research-lanes article h4 { font: 500 1.5rem/1.2 "Newsreader",Georgia,serif; margin: 14px 0; }
.research-lanes article small { font-weight: 600; }
.research-lanes article p { margin: 0; }
.research-plan > p { max-width: 85ch; }
.research-plan details { margin-top: 24px; }
.research-examples { padding-left: 22px; max-width: 86ch; }
.research-examples li { margin: 16px 0; }
.outreach { margin-top: 35px; }
.outreach h3 { margin: 0 0 14px; font: 400 2rem/1.2 "Newsreader",Georgia,serif; }
.outreach > p { max-width: 85ch; }
.test-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.test-list li { padding-top: 20px; border-top: 1px solid #919b87; }
.test-list strong { display: block; margin-bottom: 8px; }
@media(max-width:840px) {
  .journey-panel,.bridge,.research-lanes,.test-list { grid-template-columns: 1fr; }
  .journey-tabs { gap: 6px; }
  .journey-tabs button { flex: 1; padding: 10px 8px; font-size: .875rem; }
  .journey-copy { padding: 28px 24px; }
  .pack-stage { padding: 36px 16px; }
  .bridge { gap: 20px; }
  .research-lanes article { padding: 24px 0; }
  .research-lanes article + article { border-left: 0; border-top: 1px solid rgba(19,37,29,.3); }
}