/* Approved complete homepage. Template-scoped so independently maintained shop,
   product, cart and checkout styles keep their existing presentation. */
/* --home-green: the small icons, labels and marks on the homepage's light surfaces (the strip under the hero, the
   categories, the batch band, Reasons, About) take "Links and evidence", the role meant to read on a light page (2.1.0);
   the bright Accent is for the hero's fallback button on the dark surface. Unchanged, both are today's green. */
.shopper-home-complete{--home-ink:var(--ink);--home-muted:var(--ink-2);--home-line:var(--rule);--home-sage:#e7e9e1;--home-green:var(--sk-link,#52695a);--home-ease:var(--ease);color:var(--home-ink)}
.shopper-home-complete :is(h2,h3){color:var(--home-ink);text-wrap:balance}
.shopper-home-complete :is(#categories,#products,#verify){scroll-margin-top:110px}
.shopper-home-complete .shopper-hero__copy>p{max-width:440px}
.shopper-home-complete .shopper-proof{padding-block:12px}
.shopper-home-complete .shopper-proof>span{display:flex;align-items:center;gap:10px}
.shopper-home-complete .shopper-proof .icon{width:19px;height:19px;flex-shrink:0}
.shopper-home-complete .home-category-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:36px;padding-top:24px}
.home-category-links>a{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--home-line);min-height:82px;padding:16px 0;color:var(--home-ink);text-decoration:none;transition:border-color var(--dur-micro) var(--ease),color var(--dur-micro) var(--ease)}
.home-category-links__icon{width:30px;height:30px;flex-shrink:0;color:var(--home-green)}
.home-category-links>a>.icon{width:19px;height:19px;flex-shrink:0;margin-left:auto}
.home-category-links strong{display:block;font-weight:600;font-size:calc(18px * var(--sk-body-scale,1));line-height:1.2}
.home-category-links small{display:block;font-size:calc(14px * var(--sk-ui-scale,1));color:var(--home-muted);margin-top:4px}
.home-category-links>a:hover{color:var(--home-ink);border-color:currentColor}
.shopper-home-complete .rail{padding-block:48px 76px}
.shopper-home-complete .rail__head{gap:24px;flex-wrap:wrap}
.shopper-home-complete .rail__head h2{font-size:clamp(30px,3.2vw,42px)}
.shopper-home-complete .rail .card__plate{height:274px}
.shopper-home-complete .rail .card{min-width:0}
.shopper-home-complete .rail .card__l1 .price{white-space:normal;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;line-height:1.5;font-variant-numeric:tabular-nums}
.shopper-home-complete .rail .price del{font-size:.85em;color:var(--home-muted)}
.shopper-home-complete .rail .card__l2{margin-top:12px;padding-top:10px}
.shopper-home-complete .rail .card__name{overflow-wrap:anywhere}
.shopper-home-complete .rail .card__name>a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
.shopper-home-complete .rail .rgp-product-overlay__btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.home-textlink{display:inline-flex;align-items:center;gap:12px;min-height:44px;color:var(--home-ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;font-weight:500;font-size:calc(16px * var(--sk-body-scale,1))}
.home-textlink:hover{color:var(--home-ink)}
.home-textlink .icon{width:19px;height:19px;flex-shrink:0}
.home-batch{background:var(--home-sage);padding-block:60px}
.home-batch__layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px 80px;align-items:center}
.home-batch__copy{max-width:470px}
.home-batch h2{font-size:clamp(34px,3.3vw,48px);font-weight:600;letter-spacing:-.03em;line-height:1.08;max-width:15ch;margin:0}
.home-batch__lede{font-size:calc(19px * var(--sk-body-scale,1));color:var(--home-muted);line-height:1.6;margin:22px 0 0}
.home-batch__lookup{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:30px;border-top:1px solid #bfc6bd;padding-top:28px}
.home-batch__lookup h3{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0}
.home-batch__lookup p{font-size:calc(16px * var(--sk-body-scale,1));color:var(--home-muted);margin:6px 0 0}
.home-batch__form{min-width:0}
.home-input-group{display:flex;align-items:stretch;width:100%;background:var(--sk-white);border:1px solid #9ca79d;border-radius:var(--sk-radius-control,0px);transition:border-color var(--dur-micro) var(--ease),box-shadow var(--dur-micro) var(--ease)}
.home-input-group:focus-within{border-color:#52695a;box-shadow:0 0 0 2px #52695a26}
.home-input-group input{flex:1 1 0;width:0;min-width:0;min-height:52px;padding:14px;background:transparent;color:var(--home-ink);border:0;border-radius:0;box-shadow:none;font:inherit;font-size:calc(16px * var(--sk-body-scale,1));outline:none}
.home-input-group input::placeholder{color:var(--home-muted);opacity:1}
.home-input-group input:focus-visible{outline:none}
/* The button's outer corners inside the frame's 1px border, its inner side square (2.1.1). */
.home-input-group button{min-height:52px;border:0;border-radius:0 max(0px,calc(var(--sk-radius-control,0px) - 1px)) max(0px,calc(var(--sk-radius-control,0px) - 1px)) 0;background:var(--home-ink);color:var(--sk-white);display:flex;align-items:center;gap:12px;padding:12px 20px;white-space:nowrap;font:inherit;font-weight:500;cursor:pointer;transition:background var(--dur-micro) var(--ease)}
.home-input-group button:hover{background:#3c4c44}
.home-input-group button .icon{width:19px;height:19px}
.shopper-home-complete .home-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:100px;padding-block:76px}
.home-faq h2{font-size:clamp(32px,3.2vw,42px);line-height:1.08;font-weight:600;letter-spacing:-.03em;margin:0}
.home-faq__intro>p{color:var(--home-muted);margin:16px 0;font-size:calc(17px * var(--sk-body-scale,1))}
.home-faq__list{border-top:1px solid var(--home-line);min-width:0}
.home-disclosure{border-bottom:1px solid var(--home-line)}
.home-disclosure h3{font-size:calc(19px * var(--sk-body-scale,1));letter-spacing:0;line-height:1.4;margin:0;padding:0;font-weight:500}
.home-disclosure h3>span{display:block;padding-block:18px}
.home-disclosure h3 button{font:inherit;font-weight:500;width:100%;text-align:left;min-height:72px;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;background:none;color:var(--home-ink);border:0;border-radius:0;line-height:1.4;cursor:pointer}
.home-disclosure h3 button:hover{color:var(--home-ink)}
.shopper-home-complete .home-disclosure__panel{display:grid;grid-template-rows:1fr}
.shopper-home-complete .home-disclosure__panel>div{overflow:hidden;min-height:0}
.home-disclosure.is-enhanced:not(.is-open)>.home-disclosure__panel{grid-template-rows:0fr;visibility:hidden}
.shopper-home-complete .home-disclosure__panel p{font-size:calc(16px * var(--sk-body-scale,1));line-height:1.65;color:var(--home-muted);max-width:62ch;margin:0;padding-bottom:22px}
.shopper-home-complete .home-disclosure__panel p a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;color:var(--home-ink);text-decoration:underline;text-underline-offset:3px}
.home-disclosure h3 .icon{width:20px;height:20px;flex-shrink:0;transition:transform var(--dur-micro) var(--ease)}
.home-disclosure button[aria-expanded=true] .icon{transform:rotate(180deg)}
/* The hidden attribute wins over component display rules, with or without JS. */
.home-disclosure h3>[hidden]{display:none}
@media(max-width:1180px){
 .home-batch__layout{gap:32px 48px}.shopper-home-complete .home-faq{gap:55px}
 .shopper-home-complete .rail .card__plate{height:245px}
}
@media(max-width:900px){
 .shopper-home-complete .home-category-links{gap:20px}.home-category-links>a{gap:10px}.home-category-links strong{font-size:calc(16px * var(--sk-body-scale,1))}.home-category-links small{font-size:calc(13px * var(--sk-ui-scale,1))}
 .home-category-links__icon{width:24px;height:24px}
 .shopper-home-complete .home-faq{grid-template-columns:1fr;gap:28px}
}
@media(max-width:800px){
 .shopper-home-complete .shopper-hero h1 .hero__line{display:block}
 .shopper-home-complete .shopper-vials{min-height:280px;height:280px}
 .shopper-home-complete .shopper-proof{padding-block:14px;min-height:72px;justify-content:center;gap:8px 16px}
 .shopper-home-complete .shopper-proof .icon{width:16px;height:16px}
 .shopper-home-complete .shopper-proof>span{gap:7px}
 .shopper-home-complete .rail{padding-block:36px 44px}
 .shopper-home-complete .rail .card__plate{height:200px}
 .shopper-home-complete .rail__head{gap:14px;margin-bottom:22px}
 .shopper-home-complete .rail .grid{gap:26px 16px}
 .shopper-home-complete .rail .card__l1{margin-top:12px}
 .shopper-home-complete .rail .card__l1 .price{font-size:calc(16px * var(--sk-body-scale,1));gap:4px 6px}
 .shopper-home-complete .rail .tag--sale{font-size:calc(11px * var(--sk-ui-scale,1))}
}
@media(max-width:700px){
 .shopper-home-complete :is(#categories,#products,#verify){scroll-margin-top:90px}
 .shopper-home-complete .home-category-links{grid-template-columns:1fr;gap:0;padding-top:12px}
 .home-category-links>a{min-height:52px;padding-block:10px;gap:14px}.home-category-links strong{font-size:calc(17px * var(--sk-body-scale,1))}.home-category-links small{display:none}.home-category-links__icon{width:25px;height:25px}
 .home-batch{padding-block:44px}.home-batch__layout{grid-template-columns:1fr;gap:26px}.home-batch__copy{max-width:none}
 .home-batch h2{font-size:34px}.home-batch__lede{font-size:calc(17px * var(--sk-body-scale,1));margin-top:18px;line-height:1.55}
 .home-textlink{font-size:calc(15px * var(--sk-ui-scale,1))}

 .home-batch__lookup{grid-template-columns:1fr;gap:17px;padding-top:24px}.home-batch__lookup h3{font-size:23px}.home-batch__lookup p{font-size:calc(15px * var(--sk-ui-scale,1))}
 .home-input-group input{padding:12px}.home-input-group button{padding-inline:14px;gap:7px;font-size:calc(15px * var(--sk-ui-scale,1))}.home-input-group button .icon{width:17px;height:17px}
 .shopper-home-complete .home-faq{padding-block:44px;gap:26px}.home-faq h2{font-size:32px}.home-faq__intro>p{font-size:calc(16px * var(--sk-body-scale,1));margin-block:12px}.home-disclosure h3{font-size:calc(18px * var(--sk-body-scale,1))}.home-disclosure h3 button{min-height:70px;padding-block:16px}
}
@media(max-width:360px){
 .shopper-home-complete .wrap--wide{padding-inline:20px}
 .shopper-home-complete .shopper-hero{padding-inline:20px}.shopper-home-complete .shopper-hero h1{font-size:37px}
 .shopper-home-complete .shopper-proof{align-items:flex-start;flex-direction:column;padding:12px 20px}
 .shopper-home-complete .shopper-vials{min-height:260px;height:260px}
 .shopper-home-complete .rail .grid{gap:24px 12px}.shopper-home-complete .rail .card__plate{height:176px}.shopper-home-complete .rail .card__name{font-size:calc(19px * var(--sk-body-scale,1))}
 .home-input-group button{padding-inline:11px}.home-input-group button .icon{display:none}
}
@media(prefers-reduced-motion:reduce){
 .shopper-home-complete *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
}

/* Signal: approved 30 Oct. Magic UI references/license: docs/homepage-signal/.
   Homepage only; shared card, gate, search and checkout rules stay untouched. */
.shopper-home-complete .shopper-hero{position:relative;isolation:isolate;grid-template-columns:1.05fr 1fr;gap:24px;min-height:620px;padding-block:32px;background:var(--sk-dark-field,var(--home-ink))}
.shopper-home-complete .shopper-hero h1{font-size:clamp(42px,4.4vw,64px)}
.shopper-hero h1 .hero__line+.hero__line{font-weight:400;color:var(--sk-on-dark-2,#c7d2cb)}
.shopper-hero h1.hero__title--even .hero__line+.hero__line{color:inherit} /* Homepage → "the second line": the first's colour (2.1.0). */
.home-hero-eyebrow{display:block;font-size:calc(13px * var(--sk-ui-scale,1));letter-spacing:.06em;color:var(--sk-on-dark-2,#c7d2cb);margin-bottom:16px}
.shopper-home-complete .shopper-hero__copy>p{max-width:38ch}
.shopper-home-complete .shopper-hero__actions{flex-direction:column;align-items:flex-start;gap:16px}
.shopper-home-complete .shopper-hero__actions .btn{position:relative;isolation:isolate;overflow:hidden;font-size:20px;font-weight:700;min-height:56px}
.shopper-home-complete .shopper-textlink{gap:12px;border:0;padding:0}
.shopper-home-complete .shopper-textlink .icon{width:18px;height:18px}
.home-signal-grid{position:absolute;inset:-15px -10px -15px 35%;z-index:-1;pointer-events:none;opacity:.1;mask-image:radial-gradient(ellipse at 65% 50%,#000 5%,transparent 75%)}
.home-signal-grid svg{width:100%;height:100%;stroke:var(--sk-on-dark-2,#c7d2cb);stroke-width:1}
.shopper-hero--promo .home-signal-grid{display:none}
.shopper-home-complete .shopper-vials{height:530px;min-height:530px}
.shopper-home-complete .shopper-promo-image{display:block;height:100%}
.shopper-home-complete .shopper-vial--left{width:76%;height:83%;left:-12%;bottom:10%}
.shopper-home-complete .shopper-vial--right{width:76%;height:83%;right:-10%;bottom:13%}
.shopper-home-complete .shopper-vial--front{width:91%;height:99%;left:3%;bottom:-3%}
.shopper-home-complete .shopper-proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding-block:22px;background:var(--plate)}
.shopper-proof>div{display:flex;gap:14px;align-items:flex-start}
.shopper-home-complete .shopper-proof .icon{width:23px;height:23px;margin-top:2px;color:var(--home-green)}
.shopper-proof strong{display:block;font-size:calc(17px * var(--sk-body-scale,1));font-weight:600;line-height:1.35}
.shopper-proof small{display:block;color:var(--home-muted);font-size:calc(14px * var(--sk-ui-scale,1));line-height:1.4;margin-top:4px}
.home-record-path{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:32px 0 0;padding:0;list-style:none}
.home-record-path::before{content:'';position:absolute;top:23px;height:1px;left:23px;right:calc((100% - 28px)/3 - 23px);background:var(--home-green);opacity:.35;transform-origin:left}
.home-record-path li{position:relative;min-width:0}
.home-record-icon{position:relative;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid #a2afa2;border-radius:50%;background:var(--home-sage);color:var(--home-green);margin-bottom:14px}
.home-record-icon .icon{width:24px;height:24px}
.home-record-path strong{display:block;font-size:calc(16px * var(--sk-body-scale,1));font-weight:600}
.home-record-path small{display:block;color:var(--home-muted);font-size:calc(14px * var(--sk-ui-scale,1));line-height:1.4;max-width:13ch;margin-top:3px}
.home-batch__report{width:100%;max-width:440px;justify-self:center;margin:0}
.home-batch__report>a{position:relative;display:block;text-decoration:none;color:var(--home-ink)}
.home-report-paper{background:var(--sk-white);border:1px solid var(--home-line);box-shadow:0 18px 35px #20282a19;transform:rotate(-2deg);transition:transform var(--dur-expand) var(--ease)}
.home-report-crop{aspect-ratio:1.5;overflow:hidden;border-bottom:1px solid var(--home-line)}
.home-report-crop img{display:block;width:125%;max-width:none;height:auto}
.home-report-detail{padding:24px;display:flex;flex-direction:column;gap:8px}
.home-report-detail>strong{font-size:24px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.home-report-detail>span{font-size:calc(15px * var(--sk-ui-scale,1));color:var(--home-muted)}
.home-report-detail .home-report-label{font-size:calc(13px * var(--sk-ui-scale,1))}
.home-report-detail .home-report-action{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin-top:8px;padding-top:12px;border-top:1px solid var(--home-line);font-size:calc(16px * var(--sk-body-scale,1));font-weight:500;color:var(--home-ink)}
.home-report-action .icon{width:19px;height:19px;flex-shrink:0}
.home-batch__report figcaption{font-size:calc(13px * var(--sk-ui-scale,1));line-height:1.5;color:var(--home-muted);margin-top:22px}
/* Enable transitions only after the initial FAQ fold. */
.home-disclosure.is-ready>.home-disclosure__panel{transition:grid-template-rows var(--dur-expand) var(--ease),visibility var(--dur-expand)}
.home-disclosure.is-ready:not(.is-open)>.home-disclosure__panel{transition-duration:calc(var(--dur-expand)*var(--exit))}
.shopper-home-complete .rail .card__cut{transition:translate var(--dur-expand) var(--ease)}
@media(hover:hover) and (pointer:fine){
 .shopper-home-complete .rail .card:hover .card__cut{translate:0 -4px}
 .home-batch__report>a:hover .home-report-paper{transform:rotate(0) translateY(-4px)}
}
.home-batch__report>a:focus-visible .home-report-paper{transform:rotate(0) translateY(-4px)}
.home-batch__report>a::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--home-green);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-expand) var(--ease)}
.home-batch__report>a:is(:hover,:focus-visible)::after{transform:scaleX(1)}
.shopper-hero__actions .btn::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 20%,#ffffff24 48%,transparent 75%);opacity:0;transform:translateX(-110%);transition:transform var(--dur-panel) var(--ease),opacity var(--dur-micro) var(--ease);z-index:-1}
.shopper-hero__actions .btn:is(:hover,:focus-visible)::after{opacity:1;transform:translateX(110%)}
@media(prefers-reduced-motion:no-preference){
 .home-signal-grid{animation:home-grid-arrive 1.65s var(--ease) both}
 .shopper-home-complete .shopper-hero h1{animation:home-headline-arrive var(--dur-panel) var(--ease) both}
 .home-reveal.is-pending{opacity:0;transform:translateY(12px)}
 .home-reveal.is-revealed{animation:home-section-arrive var(--dur-panel) var(--ease) both}
 .home-record-path.is-revealed::before{animation:home-trace-arrive var(--dur-panel) var(--ease) both}
 .card:focus-within .home-reveal,.home-reveal:focus-within{opacity:1;transform:none;animation:none}
 @keyframes home-section-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
 @keyframes home-headline-arrive{from{opacity:.86;transform:translateY(8px)}to{opacity:1;transform:none}}
 @keyframes home-grid-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:.1;transform:none}}
 @keyframes home-trace-arrive{from{opacity:.1;transform:scaleX(.05)}to{opacity:.35;transform:scaleX(1)}}
}
@media(max-width:1100px) and (min-width:801px){
 .shopper-home-complete .shopper-hero{gap:8px;min-height:560px}
 .shopper-home-complete .shopper-vials{height:450px;min-height:450px}
}
@media(max-width:800px){
 .shopper-home-complete .shopper-hero{min-height:0;padding:24px 24px 16px;gap:2px}
 .shopper-home-complete .shopper-hero h1{font-size:clamp(31px,9.7vw,54px)}
 .home-hero-eyebrow{font-size:calc(12px * var(--sk-ui-scale,1));margin-bottom:12px}
 .shopper-home-complete .shopper-hero__copy>p{margin-top:16px}
 .shopper-home-complete .shopper-hero__actions{margin-top:18px;gap:2px}
 .shopper-home-complete .shopper-hero__actions .btn{min-height:52px}
 .shopper-home-complete .shopper-vials{height:252px;min-height:252px;margin-top:0}
 .shopper-home-complete .shopper-vial--left{width:83%;height:84%;left:-13%;bottom:9%}
 .shopper-home-complete .shopper-vial--right{width:83%;height:84%;right:-11%;bottom:12%}
 .shopper-home-complete .shopper-vial--front{width:96%;height:100%;left:0;bottom:-4%}
 .home-signal-grid{inset:28% -20% -10% -20%}
 .shopper-home-complete .shopper-proof{grid-template-columns:1fr;gap:10px;padding-block:18px;justify-content:normal;align-items:normal}
 .shopper-proof>div{align-items:center;gap:12px;min-height:26px}
 .shopper-home-complete .shopper-proof .icon{width:20px;height:20px;margin:0}
 .shopper-proof strong{font-size:calc(15px * var(--sk-ui-scale,1));font-weight:500}.shopper-proof small{display:none}
 .home-record-path{gap:10px;margin-top:26px}.home-record-path::before{right:calc((100% - 20px)/3 - 23px)}
 .home-record-path strong{font-size:calc(15px * var(--sk-ui-scale,1))}.home-record-path small{font-size:calc(13px * var(--sk-ui-scale,1))}
 .home-batch__report{width:calc(100% - 12px);max-width:440px}
 .home-report-paper{transform:rotate(-1deg)}.home-report-detail{padding:20px}
 .home-report-detail>strong{font-size:22px}.home-report-detail>span{font-size:calc(14px * var(--sk-ui-scale,1))}
}
/* Signal parity (30 Oct 2026): the approved preview's measures, docs/mockups/magicui-codex/style.css.
   Homepage hero and batch section only; the site's other buttons keep their tokens. */
.shopper-home-complete .shopper-hero h1{max-width:none}
.shopper-home-complete .shopper-hero__copy{padding-block:28px}
.shopper-home-complete .shopper-hero__copy>p{color:var(--sk-on-dark-2,#c7d2cb);margin-top:26px}
.shopper-home-complete .shopper-hero__actions{margin-top:32px}
.shopper-home-complete .shopper-hero :is(a,button):focus-visible{outline-color:var(--sk-on-dark-2,#c7d2cb)}
.shopper-home-complete .shopper-hero__actions .btn--primary,
.shopper-home-complete .shopper-hero__actions .btn--primary:hover{background:var(--sk-red);color:var(--sk-white)}
/* The 1px transparent border stays (it draws the button in forced colours); padding is 1px less to keep the preview's box. */
.shopper-home-complete .shopper-hero__actions .btn{gap:36px;padding:13px 23px;line-height:1.5}
.shopper-home-complete .shopper-hero__actions .btn .icon,.shopper-home-complete .shopper-textlink .icon{transition:transform var(--dur-micro) var(--ease)}
.shopper-home-complete .shopper-hero__actions :is(.btn,.shopper-textlink):is(:hover,:focus-visible) .icon{transform:translateX(4px)}
.shopper-home-complete .shopper-textlink{color:var(--sk-on-dark-2,#c7d2cb);line-height:1.5}
.shopper-home-complete .shopper-textlink:hover{color:var(--sk-white)}
.home-scene-rule{position:absolute;left:0;right:0;bottom:7%;height:1px;background:var(--sk-on-dark-2,#c7d2cb);opacity:.16;pointer-events:none}
.home-scene-cross{position:absolute;width:15px;height:15px;color:var(--sk-on-dark-2,#c7d2cb);opacity:.38;pointer-events:none}
.home-scene-cross::before,.home-scene-cross::after{content:'';position:absolute;background:currentColor}
.home-scene-cross::before{width:15px;height:1px;top:7px}
.home-scene-cross::after{width:1px;height:15px;left:7px}
.home-scene-cross--one{top:7%;left:10%}
.home-scene-cross--two{right:0;bottom:7%}
.shopper-home-complete .home-batch{padding-block:76px 40px}
.shopper-home-complete .home-batch__layout{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px 80px}
.shopper-home-complete .home-batch__copy{max-width:560px}
.shopper-home-complete .home-batch h2{font-size:clamp(40px,4vw,58px);font-weight:500;line-height:1.02;letter-spacing:-.025em}
.shopper-home-complete .home-batch__lede{margin-top:26px;max-width:43ch}
.shopper-home-complete .home-record-path{margin:38px 0 28px}
.shopper-home-complete .home-batch__lookup{margin-top:26px;padding-top:30px;border-top-color:#bbc5b9}
.shopper-home-complete .home-batch__lookup h3{font-size:28px;font-weight:500}
@media(max-width:1100px){
 .shopper-home-complete .home-batch__layout{gap:36px}
}
@media(max-width:800px){
 .shopper-home-complete .shopper-hero__copy{padding:0}
 .shopper-home-complete .shopper-hero__copy>p{margin-top:16px}
 .shopper-home-complete .shopper-hero__actions{margin-top:18px}
 .shopper-home-complete .shopper-hero__actions .btn{padding:12px 19px}
 .shopper-home-complete .shopper-textlink{font-size:calc(15px * var(--sk-ui-scale,1));gap:10px}
 .home-scene-cross--one{left:4%;top:12%}
 .home-scene-cross--two{right:3%;bottom:5%}
 .home-scene-rule{left:4%;right:3%;bottom:5%}
 .shopper-home-complete .home-batch{padding-block:42px 32px}
 .shopper-home-complete .home-batch__layout{grid-template-columns:1fr;gap:30px}
 .shopper-home-complete .home-batch__copy{max-width:none}
 .shopper-home-complete .home-batch h2{font-size:clamp(34px,10.8vw,42px)}
 .shopper-home-complete .home-batch__lede{font-size:calc(17px * var(--sk-body-scale,1));margin-top:20px;line-height:1.6}
 .shopper-home-complete .home-record-path{margin:28px 0 20px}
 .shopper-home-complete .home-batch__report{margin-top:4px}
 .shopper-home-complete .home-batch__lookup{grid-template-columns:1fr;margin-top:10px;padding-top:24px;gap:20px}
 .shopper-home-complete .home-batch__lookup h3{font-size:26px}
}
/* Full bleed (30 Oct 2026): the hero's field and grid and the proof strip run to the viewport's edges; their
   content stays on the page's grid (1440 less 64px a side = 1312px). Promotion heroes are the same element. */
.shopper-home-complete :is(.shopper-hero,.shopper-proof){max-width:none}
@media(min-width:1441px){.shopper-home-complete :is(.shopper-hero,.shopper-proof){padding-inline:calc((100% - 1312px)/2)}}
@media(prefers-reduced-motion:reduce){
 .home-reveal{opacity:1!important;transform:none!important;animation:none!important}
 .home-signal-grid,.shopper-home-complete .shopper-hero h1{animation:none!important}
 .shopper-home-complete .rail .card__cut{translate:none!important}
 .home-report-paper,.home-batch__report>a:focus-visible .home-report-paper,.home-batch__report>a:hover .home-report-paper{transform:none}
 .shopper-hero__actions .btn::after{display:none}
 .shopper-home-complete .shopper-hero__actions :is(.btn,.shopper-textlink) .icon{transform:none!important}
}

/* The proof strip with fewer than three items (10 Nov 2026): two share the row in two columns; one sits centred,
   its line and its note on one baseline, so a single fact reads as a statement rather than a leftover column. */
.shopper-home-complete .shopper-proof--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.shopper-home-complete .shopper-proof--n1{grid-template-columns:minmax(0,auto);justify-content:center}
.shopper-proof--n1>div{align-items:center}
.shopper-proof--n1>div>span{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
.shopper-proof--n1 small{margin-top:0}
@media(max-width:800px){
 .shopper-home-complete .shopper-proof--n2{grid-template-columns:1fr}
 .shopper-home-complete .shopper-proof--n1{justify-content:center}
}

/* ------------------------------------------------------------------------------------------------------------------
   The hero's settings of 10 Nov 2026 (a second store's review): a photograph, a second button, a second line, and the words
   alone. Each rule names a class the hero prints only when that setting is used, so a store on the defaults (the
   vials, one button) renders as before. */

/* No orphaned word in the headline: each line balances its own wrap. */
.shopper-home-complete .shopper-hero h1{text-wrap:balance}

/* A second, smaller supporting line. */
.shopper-home-complete .shopper-hero__copy>.shopper-hero__lede-2{margin-top:12px;font-size:calc(16px * var(--sk-body-scale,1));line-height:1.55;color:var(--sk-on-dark-2,#c7d2cb);max-width:46ch}

/* Two buttons side by side; the second outlined in the hero's mist, white text (contrast 15:1 on the field). */
.shopper-hero__buttons{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.shopper-home-complete .shopper-hero__actions .shopper-hero__second{background:transparent;color:var(--sk-on-dark,var(--sk-white));border:1px solid var(--sk-on-dark-2,#c7d2cb);font-weight:600;
  transition:background-color var(--dur-micro) var(--ease),border-color var(--dur-micro) var(--ease)}
.shopper-home-complete .shopper-hero__actions .shopper-hero__second:hover{background:color-mix(in srgb,var(--sk-on-dark,#fff) 8%,transparent);border-color:var(--sk-on-dark,var(--sk-white));color:var(--sk-on-dark,var(--sk-white))}
.shopper-hero__actions .shopper-hero__second::after{display:none}

/* A photograph: the right half, to the hero's edge and its full height, cropped to fit; the words keep the left. */
.shopper-home-complete .shopper-hero--photo{align-items:stretch;padding-block:0;padding-inline-end:0;min-height:clamp(520px,42vw,640px)}
.shopper-home-complete .shopper-hero--photo .shopper-hero__copy{align-self:center;padding-block:56px}
.shopper-hero__media{position:relative;min-width:0;overflow:hidden}
.shopper-hero__media>picture{display:contents}
.shopper-home-complete .shopper-hero__photo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.shopper-hero--photo .home-signal-grid{display:none}

/* The words alone: no empty column. On a computer the headline holds the left and the supporting line and the
   buttons the right, both from the same top line, in a band only as tall as the words; on a phone one column
   that ends where the words end. */
.shopper-home-complete .shopper-hero--bare{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:72px 80px}
.shopper-home-complete .shopper-hero--bare .shopper-hero__copy{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:clamp(40px,5vw,96px);align-items:start;padding-block:0}
.shopper-hero--bare .home-hero-eyebrow{grid-column:1 / -1}
.shopper-home-complete .shopper-hero--bare h1{grid-column:1;grid-row:2 / span 3;max-width:none}
.shopper-home-complete .shopper-hero--bare .shopper-hero__copy>:is(p,.shopper-hero__actions){grid-column:2}
.shopper-home-complete .shopper-hero--bare .shopper-hero__copy>p:first-of-type{margin-top:0}
.shopper-home-complete .shopper-hero--bare .shopper-hero__actions{margin-top:28px}
.shopper-hero--bare .home-signal-grid{inset:-15px -10px -15px 55%}

@media(max-width:800px){
 .shopper-home-complete .shopper-hero--photo{padding:24px 24px 0;min-height:0}
 .shopper-home-complete .shopper-hero--photo .shopper-hero__copy{padding-block:0 28px}
 .shopper-hero__media{margin-inline:-24px;overflow:hidden}
 .shopper-home-complete .shopper-hero__photo{position:static;display:block;width:100%;height:auto;max-height:440px;aspect-ratio:auto}
 .shopper-home-complete .shopper-hero--bare{padding:32px 24px 36px}
 .shopper-home-complete .shopper-hero--bare .shopper-hero__copy{display:block}
 .shopper-home-complete .shopper-hero--bare .shopper-hero__copy>p:first-of-type{margin-top:16px}
 .shopper-home-complete .shopper-hero--bare .shopper-hero__actions{margin-top:18px}
}
@media(max-width:360px){
 .shopper-home-complete .shopper-hero--photo{padding-inline:20px}
 .shopper-hero__media{margin-inline:-20px}
 .shopper-home-complete .shopper-hero--bare{padding-inline:20px}
}

/* The hero's surface (2.1.0, M): a light hero redefines the dark-surface roles on itself, so every word, rule and ring
   that reads them follows: the surface is the homepage's raised panel, the words its text, the quieter words its quieter
   text. */
.shopper-home .shopper-hero--light,.shopper-home-complete .shopper-hero--light{--sk-dark-field:var(--home-panel,var(--panel));--sk-on-dark:var(--home-ink,var(--ink));--sk-on-dark-2:var(--home-muted,var(--ink-2));background:var(--home-panel,var(--panel));color:var(--home-ink,var(--ink))}
.shopper-hero--light .home-signal-grid{opacity:.08}
/* The main button never vanishes into the hero: the accent fill with its words, or an edge in the hero's word colour. */
.shopper-home-complete .shopper-hero__actions .btn--primary.shopper-hero__cta--accent,.shopper-home-complete .shopper-hero__actions .btn--primary.shopper-hero__cta--accent:hover{background:var(--sk-accent);color:var(--sk-accent-ink,var(--sk-white))}
.shopper-home-complete .shopper-hero__actions .btn--primary.shopper-hero__cta--edge{box-shadow:inset 0 0 0 2px var(--sk-on-dark,var(--sk-white))}

/* Reasons and About (2.1.0, both off by default): the Homepage's colours, corners and type scales only. */
.home-reasons{padding-block:56px 8px}
.home-reasons h2{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.02em;margin:0 0 28px;max-width:24ch}
.home-reasons__list{list-style:none;margin:0;padding:0;display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.home-reasons__card{background:var(--home-panel,var(--panel));border-radius:var(--sk-radius-panel,0);padding:24px 24px 28px}
.home-reasons__icon{--icon:24;color:var(--home-green)}
.home-reasons__card h3{font-size:calc(19px * var(--sk-body-scale,1));line-height:1.25;font-weight:600;margin:16px 0 8px}
.home-reasons__card p{margin:0;color:var(--home-muted);font-size:calc(15px * var(--sk-body-scale,1));line-height:1.55}
.home-about{background:var(--home-panel,var(--panel));margin-top:56px;padding-block:64px}
.home-about__in{display:grid;gap:40px;align-items:center}
.home-about__label{margin:0 0 12px;font-size:calc(14px * var(--sk-ui-scale,1));font-weight:600;color:var(--home-green)}
.home-about h2{font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.02em;margin:0;max-width:22ch}
.home-about__text{margin:16px 0 0;max-width:56ch;color:var(--home-muted);font-size:calc(17px * var(--sk-body-scale,1));line-height:1.6}
.home-about__points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
.home-about__points li{display:flex;gap:14px;align-items:flex-start}
.home-about__icon{--icon:22;flex-shrink:0;margin-top:2px;color:var(--home-green)}
.home-about__points h3{margin:0;font-size:calc(17px * var(--sk-body-scale,1));font-weight:600;line-height:1.3}
.home-about__points p{margin:4px 0 0;color:var(--home-muted);font-size:calc(15px * var(--sk-body-scale,1));line-height:1.5}
.home-about__btn{margin-top:32px}
.home-about__figure{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:var(--sk-radius-panel,0);background:var(--home-line)}
.home-about__figure img{display:block;width:100%;height:100%;object-fit:cover}
.home-about__figure figcaption{position:absolute;left:16px;bottom:16px;max-width:calc(100% - 32px);padding:10px 14px;border-radius:var(--sk-radius-control,0);background:var(--sk-dark-field,#20282a);color:var(--sk-on-dark,#fff);font-size:calc(14px * var(--sk-ui-scale,1));line-height:1.4}
@media(min-width:600px){.home-reasons__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){
 .home-reasons__list--3{grid-template-columns:repeat(3,minmax(0,1fr))}
 .home-reasons__list--4{grid-template-columns:repeat(4,minmax(0,1fr))}
 .home-about__in--img{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
}
@media(max-width:800px){.home-reasons{padding-block:40px 0}.home-about{margin-top:40px;padding-block:44px}}