/* Van Peptides, components */

/* ============ buttons ============ */
.btn {
 display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
 font-family: var(--font-sans); font-size: var(--text-base); font-weight: 500;
 line-height: 1; padding: 15px 26px; border-radius: var(--r-md);
 border: 1px solid transparent; cursor: pointer; text-decoration: none;
 transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
 border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn--sage { background: var(--sage); color: var(--white); }
.btn--sage:hover { background: var(--olive); color: var(--white); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn--outline:hover { border-color: var(--olive); color: var(--olive); background: rgba(124,138,107,0.07); }
.btn--pill { border-radius: var(--r-pill); padding: 18px 32px; }
.btn--sm { font-size: var(--text-sm); padding: 10px 18px; }
.btn--block { width: 100%; }
.btn[disabled].btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; transform: none; }

/* ============ tagline bar ============ */
.tagbar {
 background: var(--cream); border-bottom: 1px solid var(--rule);
 font-size: 11px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
 color: var(--charcoal); font-weight: 500;
}
.tagbar__inner { display: flex; justify-content: center; align-items: center; gap: var(--s-5);
 min-height: 38px; text-align: center; flex-wrap: wrap; }
.tagbar__dot { color: var(--oat); }

/* ============ header ============ */
.site-header { background: var(--cream); position: relative; z-index: 20; }
.site-header__inner {
 display: flex; align-items: center; gap: var(--s-6);
 min-height: 166px; padding-top: var(--s-3); padding-bottom: var(--s-3);
 max-width: var(--max);
}
/* ---- brand lockup ----
 Sized from the reference: roundel 128px tall, VAN caps ~47px cap-height,
 whole block ~400x150 on desktop. */
.brand { display: flex; align-items: center; gap: 30px; text-decoration: none; flex: 0 0 auto; }
.brand__mark { width: auto; height: 128px; flex: 0 0 auto; display: block; }
.brand__type { display: flex; flex-direction: column; align-items: center; }
.brand__word {
 font-family: var(--font-serif); font-size: 67px; line-height: 1; color: var(--ink);
 letter-spacing: 0.25em; text-indent: 0.25em; font-weight: 400;
}
.brand__sub {
 display: flex; align-items: center; gap: 10px; width: 100%;
 font-size: 13px; letter-spacing: var(--track-eyebrow); text-indent: var(--track-eyebrow);
 color: var(--sage); text-transform: uppercase; margin-top: 12px; font-weight: 400;
}
.brand__sub::before.brand__sub::after {
 content: ""; flex: 1 1 auto; height: 1px; background: var(--sage); opacity: 0.7; min-width: 14px;
}
/* the footer keeps a compact version of the same lockup */
.site-footer .brand { gap: 14px; }
.site-footer .brand__mark { height: 62px; }
.site-footer .brand__word { font-size: 32px; letter-spacing: 0.15em; text-indent: 0.15em; }
.site-footer .brand__sub { font-size: 9px; margin-top: 5px; gap: 7px; }
/* auto margins on both sides optically centre the nav between lockup and CTA */
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 44px; }
.site-nav a {
 font-size: 17.5px; color: var(--ink); text-decoration: none; position: relative; padding: 4px 0;
}
.site-nav a::after {
 content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
 background: var(--sage); transform: scaleX(0); transform-origin: left;
 transition: transform var(--dur-base) var(--ease-out);
}
.site-nav a:hover::after.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header__cta { margin-left: 24px; padding: 16px 26px; font-size: 14.5px; white-space: nowrap; }
.header__login { margin-left: 14px; padding: 15px 22px; font-size: 12.5px; letter-spacing: var(--track-eyebrow); text-transform: uppercase; white-space: nowrap; }
.site-nav a { white-space: nowrap; }
.site-nav a.site-nav__mobile-only { display: none; }
/* The header now surfaces a persistent Log in pill at every breakpoint,
 so hide the in-drawer duplicate to avoid a double entry. */
.header__cart {
 /* Hidden site-wide: cart replaced by prescription plan selector.
 Kept in markup for graceful degradation and to avoid touching every page. */
 display: none !important;
}
.header__cart svg { width: 21px; height: 21px; display: block; }
.nav-toggle { display: none; }

@media (max-width: 960px) {
 .site-header__inner { min-height: 104px; gap: var(--s-4); }
 .brand { gap: 16px; }
 .brand__mark { height: 74px; }
 .brand__word { font-size: 39px; letter-spacing: 0.16em; text-indent: 0.16em; }
 .brand__sub { font-size: 8.5px; margin-top: 7px; gap: 7px; }
 .site-nav { display: none; font-size: 15.5px; }
 .site-nav.is-open {
 display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
 align-items: flex-start; gap: var(--s-4); background: var(--cream); padding: var(--s-5) var(--gutter);
 border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); box-shadow: var(--sh-md);
 }
 .header__cta { display: none; }
 /* Keep the login pill visible at tablet + mobile too. It sits before the
 nav-toggle so the toggle stays flush right. */
 .header__login {
 display: inline-flex;
 margin-left: auto;
 padding: 10px 18px;
 font-size: 12px;
 letter-spacing: var(--track-eyebrow);
 text-transform: uppercase;
 white-space: nowrap;
 }
 .site-nav { margin-right: 0; }
 .header__cart { margin-left: 12px; }
 .nav-toggle {
 display: inline-flex; margin-left: 12px; background: none; border: 1px solid var(--rule-strong);
 border-radius: var(--r-sm); padding: 8px 12px; font-size: var(--text-sm); color: var(--ink); cursor: pointer;
 }
}

/* ============ hero ============ */
.hero { padding: 0; overflow: hidden; }
.hero__grid {
 display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
 align-items: start; gap: var(--s-6);
}
.hero__copy { padding: 14px 0 54px; max-width: 680px; }
.hero__title {
 font-size: var(--text-hero); line-height: 1.04; letter-spacing: var(--track-display);
 margin: 0 0 46px;
}
.nowrap { white-space: nowrap; }
.hero__title .u { position: relative; white-space: nowrap; display: inline-block; }
/* swash sits directly under the accented word 'human' */
.hero__title .u svg.swash {
 position: absolute; left: 0; right: 0; bottom: -0.12em;
 width: 100%; height: 0.28em;
 overflow: visible; pointer-events: none;
}
.hero__title .u svg.swash path {
 fill: var(--sage); stroke: none; opacity: 0.85;
 clip-path: inset(0 100% 0 0);
 animation: swash-wipe 900ms var(--ease-out) 1200ms forwards;
}
@keyframes swash-wipe { to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
 .hero__title .u svg.swash path { animation: none; clip-path: inset(0 0 0 0); }
}
.hero__sub { font-size: 19px; line-height: 1.62; max-width: 21em; margin-bottom: 33px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-4); }

.hero__art { position: relative; margin-top: -52px; }
.hero__art img {
 width: calc(100% + 24px); border-radius: 0; object-fit: cover;
 max-width: none;
 margin-right: -24px;
}
@media (max-width: 900px) {
 .hero { padding-top: var(--s-5); }
 .hero__grid { grid-template-columns: 1fr; }
 .hero__copy { padding: 0 0 var(--s-5); }
 .hero__title { margin-bottom: var(--s-5); }
 .hero__sub { font-size: var(--text-lg); margin-bottom: var(--s-5); }
 .hero__art { margin-top: 0; }
 .hero__art img { width: 100%; margin-right: 0; }
}

/* ============ home product cards ============
 Reference geometry (1504px-wide reference, scaled to a 1440 layout):
 card 183px tall, warm cream ground on a 1px oat rule, vial 150px tall standing on
 the card baseline, compound title in the display serif at ~44px, palm line-art
 flush right.
 Iteration 3: the vial art was re-cut at 842x1160 (was 235x340) with the compound name
 re-set larger and darker, and the display size stepped up to 176px desktop / 156px
 tablet / 136px mobile so the label reads. Card heights grew with it so the bottle still
 stands on the baseline without bleeding past the card edge. */
.homecards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: 0; }
@media (max-width: 900px) { .homecards { margin-top: var(--s-5); } }
.homecard {
 position: relative; display: grid;
 grid-template-columns: 134px minmax(0, 1fr) auto;
 align-items: center; column-gap: 36px;
 height: 214px;
 background: var(--card-bg); border: 1px solid rgba(201, 180, 138, 0.6);
 border-radius: 10px; padding: 12px 26px 22px 34px; text-decoration: none;
 transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out),
 transform var(--dur-base) var(--ease-out);
}
.homecard:hover { box-shadow: var(--sh-md); border-color: var(--oat); transform: translateY(-2px); }
.homecard__thumb {
 position: absolute; left: 30px; bottom: 20px;
 height: 176px; width: auto; display: block;
}
.homecard__body { grid-column: 2; display: block; align-self: center; padding-bottom: 2px; }
.homecard__title {
 display: block; font-family: var(--font-serif); font-weight: 400; font-size: 44px;
 color: var(--ink); line-height: 1.02; letter-spacing: -0.005em; margin: 0;
}
.homecard__eyebrow {
 display: block; font-size: 11.5px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
 color: var(--olive); margin: 10px 0 7px;
}
.homecard__rule { display: block; width: 96px; height: 1px; background: var(--oat); margin-bottom: 14px; }
.homecard__copy { display: block; font-size: 15px; line-height: 1.5; color: var(--charcoal); margin: 0; }
.homecard__palm {
 grid-column: 3; height: 112px; width: auto; align-self: center; flex: 0 0 auto;
 opacity: 1; margin-right: 6px;
}
@media (max-width: 1080px) {
 .homecard { grid-template-columns: 120px minmax(0, 1fr) auto; column-gap: 24px; padding-left: 20px; padding-right: 18px; height: 196px; }
 .homecard__thumb { left: 20px; height: 156px; }
 .homecard__title { font-size: 36px; }
 .homecard__palm { height: 84px; }
}
@media (max-width: 820px) {
 .homecards { grid-template-columns: 1fr; gap: var(--s-4); }
 .homecard { height: auto; min-height: 192px; grid-template-columns: 118px minmax(0, 1fr) auto; column-gap: 20px; padding-left: 18px; }
 .homecard__thumb { left: 18px; height: 152px; }
 .homecard__title { font-size: 34px; }
 .homecard__palm { display: none; }
}

/* ============ trust bar ============ */
.trustbar {
 position: relative; overflow: hidden; margin-top: var(--s-4);
 min-height: 107px; display: flex; align-items: center;
 background: var(--sage-mid); border-radius: 10px; color: var(--ink);
}
.trustbar__grid {
 position: relative; z-index: 2; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr);
 padding: var(--s-4) var(--s-6);
}
.trustbar__col { display: flex; align-items: center; gap: var(--s-4); padding-right: var(--s-5); }
.trustbar__col + .trustbar__col { border-left: 1px solid rgba(48,41,31,0.16); padding-left: var(--s-6); }
.trustbar__icon {
 width: 52px; height: 52px; flex: 0 0 auto; border: 1px solid rgba(48,41,31,0.3);
 border-radius: 50%; display: grid; place-items: center; color: var(--ink);
}
.trustbar__icon svg { width: 26px; height: 26px; }
.trustbar__title {
 font-size: 11.5px; font-weight: 600; letter-spacing: var(--track-label);
 color: var(--ink); margin: 0 0 4px;
}
.trustbar__copy { font-size: var(--text-sm); color: rgba(48,41,31,0.78); margin: 0; }
/* coastal-hills engraving on the right end of the band, lifted straight from the
 reference and keyed to transparency so it sits on the sage ground */
.trustbar__hills {
 position: absolute; right: 0; bottom: 0; height: 100%; width: auto;
 z-index: 1; opacity: 0.9; pointer-events: none; display: block;
}
@media (max-width: 900px) {
 .trustbar__grid { grid-template-columns: 1fr; gap: var(--s-4); }
 .trustbar__col + .trustbar__col { border-left: 0; padding-left: 0; border-top: 1px solid rgba(48,41,31,0.16); padding-top: var(--s-4); }
 .trustbar__hills { display: none; }
}

/* ============ ruo strip ============ */
.ruostrip { display: flex; align-items: center; gap: var(--s-4); margin: var(--s-7) 0 var(--s-8); }
.ruostrip__line { flex: 1 1 auto; height: 1px; background: var(--rule); }
.ruostrip__badge { display: flex; align-items: center; gap: var(--s-3); font-size: var(--text-sm); color: var(--charcoal); }
.ruostrip__badge svg { width: 30px; height: 30px; color: var(--sage); flex: 0 0 auto; }

/* ============ page header ============ */
.pagehead { padding-block: var(--s-8) var(--s-6); }
.pagehead h1 { font-size: clamp(2.25rem, 4.2vw, 3.4rem); }
.pagehead .lede { max-width: 40em; }
.breadcrumb { font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase;
 color: var(--olive); margin-bottom: var(--s-5); }
.breadcrumb a { color: var(--olive); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.trustline {
 display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); list-style: none; padding: 0;
 margin: var(--s-5) 0 0; font-size: var(--text-xs); text-transform: uppercase;
 letter-spacing: var(--track-label); color: var(--olive);
}
.trustline li { margin: 0; }

/* ============ generic cards / grids ============ */
.grid { display: grid; gap: var(--s-5); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.card {
 background: rgba(255,253,249,0.6); border: 1px solid var(--rule); border-radius: var(--r-md);
 padding: var(--s-5); transition: box-shadow var(--dur-base) var(--ease-out),
 border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
a.card { text-decoration: none; display: block; }
a.card:hover { box-shadow: var(--sh-md); border-color: var(--oat); transform: translateY(-2px); }
.card__title { font-family: var(--font-serif); font-size: var(--text-xl); color: var(--ink); margin: 0 0 var(--s-2); }
.card__meta { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--olive); }
.card__copy { font-size: var(--text-sm); color: var(--charcoal); margin: var(--s-3) 0 0; }
.card__img { border-radius: var(--r-sm); margin-bottom: var(--s-4); background: var(--sand); }

.product-card__price { font-family: var(--font-mono); font-size: var(--text-base); color: var(--ink); }
.product-card__foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: var(--s-4); gap: var(--s-3); }

.chip {
 display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 500;
 letter-spacing: var(--track-label); text-transform: uppercase; color: var(--olive);
 background: var(--sage-tint); border-radius: var(--r-pill); padding: 5px 10px;
}
.badge-pass {
 display: inline-flex; align-items: center; gap: 8px; background: var(--sage-tint);
 color: var(--olive); border-radius: var(--r-pill); padding: 6px 14px; font-size: 11px;
 font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
}
.badge-fail { background: rgba(160, 60, 40, 0.12); color: #8C3A26; }

/* ============ definition lists / spec tables ============ */
.dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-4) var(--s-6); margin: 0; }
.dl > div { min-width: 0; }
.dl dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--olive); margin: 0; }
.dl dd { margin: 4px 0 0; color: var(--ink); font-size: var(--text-sm); overflow-wrap: anywhere; }
.dl dd.mono { font-family: var(--font-mono); }
.panel { border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--s-6); background: rgba(255,253,249,0.5); }
.panel + .panel { margin-top: var(--s-5); }
.panel__title { font-family: var(--font-serif); font-size: var(--text-2xl); margin: 0 0 var(--s-5); color: var(--ink); }

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r-md); background: rgba(255,253,249,0.5); }
.table-wrap table { min-width: 620px; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover { background: var(--oat-tint); }

/* ============ compliance block ============ */
.compliance {
 margin: var(--s-8) 0 0; background: var(--oat-tint); border-radius: var(--r-md);
 padding: var(--s-6); font-size: var(--text-sm); line-height: 1.65; color: var(--charcoal);
}
.compliance strong.compliance__label {
 display: block; margin-bottom: var(--s-2); font-size: var(--text-xs);
 text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--olive); font-weight: 600;
}

/* ============ accordion ============ */
.acc { border-top: 1px solid var(--rule); }
.acc details { border-bottom: 1px solid var(--rule); }
.acc summary {
 cursor: pointer; padding: var(--s-4) 0; font-family: var(--font-serif); font-size: var(--text-lg);
 color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: var(--s-4);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; color: var(--sage); font-family: var(--font-sans); font-size: var(--text-xl); line-height: 1; }
.acc details[open] summary::after { content: "–"; }
.acc details > div { padding: 0 0 var(--s-5); font-size: var(--text-sm); max-width: 62em; }

/* ============ CoA card ============ */
.coacard { border: 1px solid var(--oat); border-radius: var(--r-md); background: rgba(255,253,249,0.7); padding: var(--s-5); }
.coacard__dl { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--s-4); font-size: var(--text-sm); margin: var(--s-4) 0 0; }
.coacard__dl dt { color: var(--charcoal); margin: 0; }
.coacard__dl dd { margin: 0; color: var(--ink); text-align: right; }
.coacard__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* ============ PDP ============ */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.pdp__media img { border-radius: var(--r-md); }

/* On PDPs, narrow every content section so the page reads focused rather than
   sprawling across a 1290px container. Header, footer, and the tag bar keep the
   standard --max width because they hold navigation, not product content. */
.page-pdp main > .wrap,
.page-pdp main .wrap.section--tight,
.page-pdp main section.wrap { max-width: 1120px; }
@media (max-width: 900px) {
  .page-pdp main > .wrap,
  .page-pdp main .wrap.section--tight,
  .page-pdp main section.wrap { max-width: var(--max); }
}
.pdp__price { font-family: var(--font-mono); font-size: var(--text-2xl); color: var(--ink); }
.pdp__row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; margin: var(--s-5) 0; }
.pdp__row--plan { display: block; margin: var(--s-4) 0 var(--s-5); }
.pdp__row--plan .btn { width: 100%; max-width: 420px; margin-top: 4px; }

/* ============ plan selector (Monthly / 3 / 6 months) ============ */
.plans { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; margin: 22px 0 6px; }
.plans .plan {
 display: grid; grid-template-columns: auto 1fr auto; align-items: center;
 gap: 16px; padding: 18px 20px;
 background: var(--white); border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
 cursor: pointer; position: relative; max-width: 460px;
 transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.plans .plan:hover { border-color: var(--sage); }
.plans .plan input[type="radio"] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plans .plan__radio {
 width: 20px; height: 20px; border-radius: 50%;
 border: 1.5px solid var(--rule-strong); background: var(--cream);
 display: inline-block; position: relative; flex: 0 0 20px;
 transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.plans .plan__radio::after {
 content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sage);
 transform: scale(0); transition: transform var(--dur-base) var(--ease-out);
}
.plans .plan input[type="radio"]:checked ~ .plan__radio { border-color: var(--sage); background: var(--white); }
.plans .plan input[type="radio"]:checked ~ .plan__radio::after { transform: scale(1); }
.plans .plan input[type="radio"]:focus-visible ~ .plan__radio { outline: 2px solid var(--sage); outline-offset: 2px; }
.plans .plan:has(input[type="radio"]:checked) { border-color: var(--sage); background: rgba(124,138,107,0.06); box-shadow: 0 1px 2px rgba(48,41,31,0.04); }
.plans .plan__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.plans .plan__label { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); letter-spacing: -0.005em; line-height: 1.15; }
.plans .plan__badge {
 display: inline-block; margin-left: 6px; padding: 2px 8px;
 font-family: var(--font-body); font-size: 10.5px; letter-spacing: var(--track-eyebrow); text-transform: uppercase;
 color: var(--olive); background: rgba(124,138,107,0.16); border-radius: var(--r-pill); vertical-align: middle; font-weight: 500;
}
.plans .plan__hint { font-size: 12.5px; color: var(--charcoal); }
.plans .plan__price { font-family: var(--font-mono); font-size: 1.35rem; color: var(--ink); white-space: nowrap; }
/* Display-only pricing pills for prescription flow, no plan selection at PDP.
 Renders the same visual row as .plans but without radio interaction, since
 billing cadence is decided at checkout after provider approval. */
.plans--display { margin: 22px 0 18px; }
.plans--display .plan {
 grid-template-columns: 1fr auto;
 cursor: default;
}
.plans--display .plan:hover { border-color: var(--rule-strong); }
@media (max-width: 640px) {
 .plans .plan { padding: 16px; gap: 12px; }
 .plans .plan__label { font-size: 1.05rem; }
 .plans .plan__price { font-size: 1.2rem; }
}
.qty { display: inline-flex; align-items: center; border: 1px solid var(--rule-strong); border-radius: var(--r-md); }
.qty button { background: none; border: 0; padding: 12px 14px; cursor: pointer; color: var(--ink); font-size: var(--text-base); }
.qty input { width: 46px; border: 0; background: none; text-align: center; font-family: var(--font-mono); color: var(--ink); }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ============ forms ============ */
.field { margin-bottom: var(--s-4); }
.field label { display: block; font-size: var(--text-xs); text-transform: uppercase;
 letter-spacing: var(--track-label); color: var(--olive); margin-bottom: 6px; }
.field input.field select.field textarea {
 width: 100%; font-family: var(--font-sans); font-size: var(--text-base); color: var(--ink);
 background: var(--white); border: 1px solid var(--rule-strong); border-radius: var(--r-sm);
 padding: 12px 14px;
}
.field input:focus.field select:focus.field textarea:focus { outline: 2px solid var(--olive); outline-offset: 1px; }
.field .hint { font-size: var(--text-xs); color: var(--charcoal); margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }
.err { color: #8C3A26; font-size: var(--text-sm); margin-top: var(--s-2); }

.ack { display: flex; gap: var(--s-3); font-size: var(--text-sm); color: var(--charcoal); align-items: flex-start; }
.ack input[type="checkbox"] { margin-top: 5px; width: 17px; height: 17px; accent-color: var(--sage); flex: 0 0 auto; }
.ack + .ack { margin-top: var(--s-5); }
.ack strong { display: block; color: var(--ink); margin-bottom: 2px; }

/* ============ cart ============ */
.cart-grid { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: var(--s-7); align-items: start; }
@media (max-width: 900px) { .cart-grid { grid-template-columns: 1fr; } }
.cart-line { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.cart-line img { border-radius: var(--r-sm); }
.cart-line__name { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--ink); text-decoration: none; }
.cart-line__meta { font-size: var(--text-xs); color: var(--charcoal); margin-top: 4px; }
.cart-line__price { font-family: var(--font-mono); text-align: right; color: var(--ink); }
.summary-row { display: flex; justify-content: space-between; font-size: var(--text-sm); padding: 8px 0; }
.summary-row--total { border-top: 1px solid var(--rule); margin-top: var(--s-3); padding-top: var(--s-4);
 font-size: var(--text-base); color: var(--ink); font-weight: 500; }
.summary-row .mono { color: var(--ink); }

/* ============ steps ============ */
.steps { display: flex; gap: var(--s-5); list-style: none; padding: 0; margin: 0 0 var(--s-7);
 font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--track-label); }
.steps li { display: flex; align-items: center; gap: 8px; color: var(--oat); }
.steps li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.steps li[aria-current="step"] { color: var(--olive); font-weight: 600; }
.steps li.is-done { color: var(--sage); }

/* ============ gate modal ============ */
.gate {
 position: fixed; inset: 0; z-index: 100; display: none;
 align-items: center; justify-content: center; padding: var(--s-5);
 background: rgba(48, 41, 31, 0.72); backdrop-filter: blur(6px);
}
.gate.is-open { display: flex; }
.gate__panel {
 width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
 background: var(--cream); border-radius: var(--r-lg); padding: var(--s-7);
 box-shadow: var(--sh-lg);
}
.gate__panel h2 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-bottom: var(--s-4); }
.gate__list { list-style: none; padding: 0; margin: var(--s-3) 0 0; font-size: var(--text-sm); }
.gate__list li { display: flex; gap: var(--s-3); }
.gate__list li::before { content: "·"; color: var(--sage); font-weight: 700; }
.gate__actions { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-6); }
@media (min-width: 560px) { .gate__actions { flex-direction: row; } .gate__actions > * { flex: 1 1 0; } }
.gate__fine { font-size: var(--text-xs); margin-top: var(--s-5); color: var(--charcoal); }
body.gate-open .site-shell { filter: blur(8px); }

/* ============ footer ============ */
.site-footer { border-top: 1px solid var(--rule); background: var(--cream-warm); margin-top: var(--s-9); }
.site-footer__grid {
 display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-6); padding-block: var(--s-8) var(--s-7);
}
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h3 { font-family: var(--font-sans); font-size: var(--text-xs); text-transform: uppercase;
 letter-spacing: var(--track-eyebrow); color: var(--olive); margin-bottom: var(--s-4); font-weight: 600; }
.site-footer ul { list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--charcoal); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-ruo { border-top: 1px solid var(--rule); padding-block: var(--s-5); font-size: var(--text-xs);
 color: var(--charcoal); display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; }
.pay-placeholder {
 border: 1px dashed var(--oat); border-radius: var(--r-sm); padding: var(--s-3) var(--s-4);
 font-size: var(--text-xs); color: var(--charcoal); margin-top: var(--s-4); max-width: 320px;
}

/* ============ misc ============ */
.pdf-frame { width: 100%; height: 720px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--white); }
.note {
 border-left: 2px solid var(--sage); padding: var(--s-2) 0 var(--s-2) var(--s-4);
 font-size: var(--text-sm); color: var(--charcoal); background: none; margin: var(--s-5) 0;
}
.figure figcaption { font-size: var(--text-xs); color: var(--charcoal); margin-top: var(--s-3); }
.toc { font-size: var(--text-sm); }
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-8); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--s-6); } }
.sticky-cta {
 position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--cream);
 border-top: 1px solid var(--rule); padding: var(--s-3) var(--gutter); display: none;
 justify-content: space-between; align-items: center; gap: var(--s-4); box-shadow: var(--sh-md);
}
.sticky-cta.is-visible { display: flex; }
@media (min-width: 900px) { .sticky-cta { display: none !important; } }
.empty-state { text-align: center; padding: var(--s-9) 0; }
.empty-state svg { width: 68px; height: 68px; margin: 0 auto var(--s-5); color: var(--oat); }

/* --- compliance block eyebrow (used by legal page renderer) --- */
.compliance strong.eyebrow {
 display: block;
 margin-bottom: var(--s-2);
}

/* ============ small-screen header refinements ============ */
@media (max-width: 560px) {
 .tagbar { font-size: 9px; letter-spacing: 0.14em; }
 .tagbar__inner { gap: 10px; min-height: 34px; flex-wrap: nowrap; }
 .tagbar__dot { display: none; }
 .site-header__inner { min-height: 86px; gap: var(--s-3); }
 .brand { gap: 12px; }
 .brand__mark { height: 58px; }
 .brand__word { font-size: 29px; letter-spacing: 0.16em; text-indent: 0.16em; }
 .brand__sub { font-size: 7.5px; margin-top: 5px; gap: 5px; }
 .header__cart svg { width: 18px; height: 18px; }
 .nav-toggle { padding: 7px 10px; font-size: 12.5px; }
}

@media (max-width: 560px) {
 .homecard {
 height: auto; min-height: 0; grid-template-columns: 102px minmax(0, 1fr);
 column-gap: 16px; padding: 16px 16px; align-items: center;
 }
 .homecard__thumb { position: static; height: 136px; margin: 0 auto; }
 .homecard__body { grid-column: 2; }
 .homecard__title { font-size: 30px; }
 .homecard__eyebrow { font-size: 10px; letter-spacing: 0.16em; margin: 8px 0 6px; }
 .homecard__rule { width: 64px; margin-bottom: 10px; }
 .homecard__copy { font-size: 14px; line-height: 1.45; }
}

/* ============================================================================
 Responsive fix pass, iteration 4 (mobile-forward sweep)
 Each block below closes a defect found by tools/mobile_sweep.py at
 375/390/414/768/1024/1280/1440. Ordered last in the file so it wins on
 equal specificity; nothing here changes copy, layout intent or gate logic.
 ========================================================================= */

/* --- 1. reserved --- gutter on wraps is now handled at source via
 padding-block on .section/.section--tight/.site-footer__grid/.footer-ruo. */

/* --- 2. header scale tier for 961–1180px ---
 The desktop lockup (128px roundel + 67px VAN + 65px nav gaps + pill CTA)
 needs ~1180px. At 1024 the nav wrapped, the cart glyph collided with "FAQ"
 and the CTA pushed the document 75px past the viewport. This tier keeps the
 full desktop header but at a size that fits. */
@media (min-width: 961px) and (max-width: 1180px) {
 .site-header__inner { min-height: 132px; gap: var(--s-4); }
 .brand { gap: 20px; }
 .brand__mark { height: 92px; }
 .brand__word { font-size: 46px; letter-spacing: 0.2em; text-indent: 0.2em; }
 .brand__sub { font-size: 10px; margin-top: 8px; gap: 8px; }
 .site-nav { gap: 30px; font-size: 16px; left: 0; }
 .site-nav a { white-space: nowrap; }
 .header__cta { margin-left: 14px; padding: 13px 18px; font-size: 13.5px; white-space: nowrap; }
 .header__login { margin-left: 10px; padding: 13px 20px; font-size: 13px; }
 .header__cart { margin-left: 18px; }
}

/* --- 3. touch target sizing (WCAG 2.5.5, 44x44) ---
 Controls that exist to be pressed get 44x44 at every width; navigation link
 text is held to the AA floor (2.5.8, 24x24) on pointer-first viewports so the
 header and footer keep their reference proportions. */
.qty button { min-width: 44px; min-height: 44px; padding: 0; }
.qty input { min-height: 44px; width: 48px; }
.btn--sm { min-height: 44px; padding: 11px 18px; }
.cart-line__name { display: inline-flex; align-items: center; min-height: 44px; }
.header__cart { min-height: 44px; min-width: 44px; justify-content: flex-end; }

@media (max-width: 1024px) {
 .nav-toggle { min-height: 44px; min-width: 44px; padding: 10px 14px; justify-content: center; }
 .header__cart { padding-left: 6px; opacity: 0.9; }
 .site-nav.is-open a { display: flex; align-items: center; min-height: 44px; width: 100%; }
 /* footer nav is the primary wayfinding on mobile, so it gets full 44px rows */
 .site-footer li { margin-bottom: 0; }
 .site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
 /* breadcrumbs stay compact: WCAG 2.5.8 AA (24x24) rather than AAA (44x44),
 because a 44px breadcrumb row would dominate every page head on a phone */
 .breadcrumb a.breadcrumb span { display: inline-flex; align-items: center; min-height: 26px; }
}

/* the middot separators in the tagline bar are decorative, but oat on cream is
 1.8:1 and they sit next to 11px type, warm grey clears 4.5:1 */
.tagbar__dot { color: #6F685A; }

/* --- 4. contrast: small text on cream needed olive, not sage/oat ---
 sage #7C8A6B on cream is 3.2:1 and oat #C9B48A is 1.8:1, both fail 4.5:1
 at the 7.5–12px sizes they were used at. Olive #4E5A3E is 6.4:1. */
.brand__sub { color: var(--olive); }
.brand__sub::before.brand__sub::after { background: var(--sage); opacity: 0.75; }
.steps li { color: var(--charcoal); }
.steps li::before { background: var(--oat); }
.steps li.is-done { color: var(--olive); }
.steps li.is-done::before { background: var(--olive); }

/* --- 5. small-viewport wrapping repairs ---------------------------------- */

/* the Tax row's value ("Calculated at fulfilment") is far longer than a price,
 and space-between with no gap let it collide with its own label at 375 */
.summary-row { gap: var(--s-4); align-items: baseline; }
.summary-row > :last-child { text-align: right; }

/* "RESEARCH USE ONLY" broke to two lines inside its pill in the cart line
 because the details column is ~137px at 375 */
@media (max-width: 560px) {
 .chip { font-size: 9px; letter-spacing: 0.1em; padding: 5px 9px; white-space: nowrap; }
}

/* Two button/label pairs in the CoA page head are inline runs inside a <p> with
 an inline margin-left. On a phone the second item wrapped and kept the 12px
 indent, so the buttons no longer shared a left edge and the tested-on date
 split across lines. Stack them instead. The !important is required only to
 beat the inline margin-left; nothing else here overrides author styles. */
@media (max-width: 560px) {
 .pagehead p:has(> .btn) {
 display: flex; flex-direction: column; align-items: stretch; gap: 12px;
 }
 .pagehead p:has(> .btn) > .btn { margin-left: 0 !important; }
 .pagehead p:has(> .badge-pass) {
 display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
 }
 .pagehead p:has(> .badge-pass) > * + * { margin-left: 0 !important; }
}

/* --- 6. remaining target sizes on pointer viewports ---
 Header nav links were 37px tall and footer links 15px. The header has 166px of
 height to spare, so both get real hit areas; the hover underline is nudged up
 to stay optically attached to the text now that the box is taller. */
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.site-nav a::after { bottom: 6px; }
@media (min-width: 1025px) {
 /* below this the mobile rule above already gives footer links a full 44px row */
 .site-footer ul a { display: inline-flex; align-items: center; min-height: 26px; }
}

/* --- 7. last two target-size gaps ---
 "Shop" and "FAQ" were tall enough but only 32-43px wide, and the breadcrumb
 hit-area rule was scoped to phones so desktop crumbs stayed 15px tall. */
.site-nav a { min-width: 44px; justify-content: center; }
.breadcrumb a.breadcrumb span { display: inline-flex; align-items: center; min-height: 26px; }

/* ============================================================================
 /shop/ two-product cards (2026-07 rebuild)
 The catalogue is down to two SKUs, so each card carries a PDP-scale vial
 photograph and TWO explicit CTAs: "Learn more" (outline, navigates) and
 "Add to cart" (filled sage, no navigation). The card is a container, not an
 anchor, so the two actions stay unambiguous.
 ========================================================================= */
.shopgrid {
 display: grid; gap: var(--s-5);
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 max-width: 900px;
}
.shopcard {
 display: flex; flex-direction: column;
 background: var(--card-bg);
 border: 1px solid rgba(201, 180, 138, 0.6);
 border-radius: 12px;
 padding: 28px;
 transition: box-shadow var(--dur-base) var(--ease-out),
 border-color var(--dur-base) var(--ease-out);
}
.shopcard:hover { box-shadow: var(--sh-md); border-color: var(--oat); }
.shopcard__media { text-align: center; margin-bottom: var(--s-5); }
.shopcard__media img {
 height: 260px; width: auto; max-width: 100%;
 border-radius: var(--r-sm); background: var(--sand);
}
.shopcard__eyebrow {
 margin: 0; font-size: var(--text-xs); font-weight: 500; text-transform: uppercase;
 letter-spacing: var(--track-label); color: var(--olive);
}
.shopcard__title {
 font-family: var(--font-serif); font-weight: 400; font-size: 40px; line-height: 1.1;
 letter-spacing: var(--track-display); color: var(--ink); margin: 10px 0 0;
}
.shopcard__spec { margin: 12px 0 0; font-size: var(--text-sm); color: var(--charcoal); }
.shopcard__lede { margin: 12px 0 0; font-size: var(--text-sm); line-height: 1.6; color: var(--charcoal); }
.shopcard__chiprow { margin: 16px 0 0; }
.shopcard__foot { margin-top: auto; padding-top: var(--s-5); }
.shopcard__price {
 font-family: var(--font-mono); font-size: 20px; color: var(--ink);
 margin: 0 0 var(--s-4); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.shopcard__pricenote {
 font-family: var(--font-sans); font-size: 11px; font-weight: 500; text-transform: uppercase;
 letter-spacing: var(--track-label); color: var(--olive);
}
.shopcard__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.shopcard__cta { flex: 1 1 auto; min-height: 48px; white-space: nowrap; }
.shopcard__cta.is-added { background: var(--olive); border-color: var(--olive); }
.shopcard__note { margin: 14px 0 0; font-size: var(--text-xs); }
.shopcard__note a { color: var(--olive); }
.shopgrid__note {
 margin: var(--s-5) 0 0; max-width: 46em;
 font-size: var(--text-sm); color: var(--charcoal);
}
.shop-bulk { background: rgba(255, 253, 249, 0.6); }

@media (max-width: 700px) {
 .shopgrid { grid-template-columns: 1fr; gap: var(--s-4); }
 .shopcard { padding: 20px; }
 .shopcard__media img { height: 200px; }
 .shopcard__title { font-size: 32px; }
 .shopcard__ctas { flex-direction: column; gap: 10px; }
 .shopcard__cta { flex: 1 1 auto; width: 100%; min-height: 48px; }
}

/* /shop/ page head: prose left, one-time-purchase note right, so the two product
 cards clear the fold on a 900px-tall desktop viewport. */
.shophead { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.shophead .prose p { margin: 0; }
.shophead__note {
 border-left: 2px solid var(--sage); padding: 2px 0 2px var(--s-4);
 font-size: var(--text-sm); line-height: 1.6; color: var(--charcoal);
}
@media (max-width: 860px) {
 .shophead { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* Vertical rhythm on /shop/: with only two cards left, the page head was pushing
 both of them a full viewport down on a 900px-tall desktop screen. Scoped with
 :has() so no other page's spacing moves; browsers without :has() simply keep
 the previous, looser rhythm. */
.wrap.pagehead:has(.shophead) { padding-top: var(--s-6); padding-bottom: var(--s-4); }
section.wrap.section--tight:has(.shopgrid) { padding-top: var(--s-5); }
@media (max-width: 700px) {
 .wrap.pagehead:has(.shophead) { padding-top: var(--s-5); }
}
.shop-bulk { max-width: 900px; } /* align with .shopgrid measure */

/* =========================================================================
 .shopgrid--wide, nine-SKU catalogue variant (added 2026-08, batch 1).
 The base .shopgrid is capped at 900px, which tops out at two columns and
 was correct for a two-SKU catalogue. This modifier ONLY widens the track
 and raises the cap; every .shopcard rule above is untouched.
 ========================================================================= */
.shopgrid--wide { max-width: 1180px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .shopgrid--wide { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .shopgrid--wide { grid-template-columns: 1fr; } }

/* ============================================================
 .shopcard--horiz, Compact horizontal card variant (2026-08)
 Reference: user-supplied mock from Aug 2 2026. Adds a small vial
 thumbnail on the left, name + eyebrow + one-line lede in the
 middle, decorative palm silhouette on the right, and a two-CTA
 footer beneath (Learn more + Start Treatment). Base .shopcard
 rules above are untouched, this is an append-only overlay.
 ============================================================ */
.shopgrid--horiz {
 max-width: 1180px;
 grid-template-columns: repeat(2, 1fr);
 gap: 22px;
}
@media (max-width: 900px) { .shopgrid--horiz { grid-template-columns: 1fr; } }

.shopcard--horiz {
 display: grid;
 grid-template-columns: 116px 1fr 76px;
 grid-template-areas:
 "media body palm"
 "foot foot foot";
 gap: 20px;
 padding: 22px 24px 24px;
 align-items: center;
}
.shopcard--horiz .shopcard__media {
 grid-area: media;
 margin: 0;
 width: 116px;
 height: 132px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.shopcard--horiz .shopcard__media img {
 width: auto;
 max-width: 100%;
 max-height: 132px;
 height: auto;
 object-fit: contain;
 filter: drop-shadow(0 4px 10px rgba(48, 41, 31, 0.10));
}
.shopcard--horiz .shopcard__body { grid-area: body; min-width: 0; }
.shopcard--horiz .shopcard__palm {
 grid-area: palm;
 width: 76px;
 height: 132px;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0.75;
}
.shopcard--horiz .shopcard__palm svg {
 width: 62px;
 height: auto;
 color: var(--sage);
}
.shopcard--horiz .shopcard__eyebrow {
 margin: 0 0 6px;
 font-size: 10px;
 letter-spacing: 0.24em;
 text-transform: uppercase;
 color: var(--olive);
 font-weight: 500;
}
.shopcard--horiz .shopcard__title {
 margin: 0 0 8px;
 font-family: "Playfair Display", Georgia, serif;
 font-size: 26px;
 font-weight: 500;
 letter-spacing: -0.01em;
 color: var(--ink);
 line-height: 1.15;
}
.shopcard--horiz .shopcard__lede {
 margin: 0;
 font-size: 13.5px;
 line-height: 1.55;
 color: var(--charcoal);
}
.shopcard--horiz .shopcard__foot {
 grid-area: foot;
 margin: 0;
 padding-top: 18px;
 border-top: 1px solid rgba(201, 180, 138, 0.35);
}
.shopcard--horiz .shopcard__ctas { display: flex; gap: 10px; }
.shopcard--horiz .shopcard__cta {
 flex: 1 1 0;
 min-height: 42px;
 padding: 10px 16px;
 font-size: 14px;
 white-space: nowrap;
}

/* Featured pair (Sema + Tirz), same card, slight lift + accent border */
.shopgrid--featured {
 max-width: 1180px;
 grid-template-columns: repeat(2, 1fr);
 gap: 22px;
 margin-bottom: 32px;
}
@media (max-width: 900px) { .shopgrid--featured { grid-template-columns: 1fr; } }
.shopcard--featured {
 border-color: var(--oat);
 box-shadow: 0 8px 24px rgba(48, 41, 31, 0.08);
 background: linear-gradient(180deg, #FCF7EC 0%, var(--cream) 100%);
}
.shopcard--featured .shopcard__title { font-size: 28px; }
.section-heading {
 max-width: 1180px;
 margin: 0 auto 14px;
 padding: 0 4px;
 font-family: "Inter", system-ui, sans-serif;
 font-size: 11px;
 letter-spacing: 0.24em;
 text-transform: uppercase;
 color: var(--olive);
 font-weight: 500;
}

@media (max-width: 600px) {
 .shopcard--horiz {
 grid-template-columns: 96px 1fr;
 grid-template-areas:
 "media body"
 "foot foot";
 gap: 16px;
 padding: 18px 18px 20px;
 }
 .shopcard--horiz .shopcard__palm { display: none; }
 .shopcard--horiz .shopcard__media { width: 96px; height: 112px; }
 .shopcard--horiz .shopcard__media img { max-height: 112px; }
 .shopcard--horiz .shopcard__title { font-size: 22px; }
 .shopcard--horiz .shopcard__lede { font-size: 13px; }
 .shopcard--horiz .shopcard__ctas { flex-direction: row; gap: 8px; }
 .shopcard--horiz .shopcard__cta { min-height: 44px; font-size: 13px; padding: 10px 12px; }
}

/* -----------------------------------------------------------------
 Category sections (Weight Loss / Daily Wellness / Sexual Health)
 Big display header + numbered eyebrow, horiz card grid below
 ----------------------------------------------------------------- */
.category {
 padding: 72px 0 40px;
 position: relative;
}
.category + .category { padding-top: 48px; }
.category__inner { position: relative; }
.category__head {
 display: grid;
 grid-template-columns: 1fr;
 gap: 8px;
 margin-bottom: 32px;
 max-width: 46em;
}
.category__num {
 font-family: var(--font-mono);
 font-size: 11px;
 letter-spacing: 0.22em;
 color: var(--olive);
 margin: 0;
 text-transform: uppercase;
}
.category__title {
 font-family: var(--font-display);
 font-weight: 500;
 font-size: clamp(40px, 5.4vw, 68px);
 line-height: 1.02;
 letter-spacing: -0.018em;
 color: var(--ink);
 margin: 0 0 4px;
}
.category__sub {
 font-family: var(--font-body);
 font-size: 16px;
 line-height: 1.55;
 color: var(--charcoal);
 margin: 8px 0 0;
 max-width: 44em;
}
@media (max-width: 640px) {
 .category { padding: 48px 0 24px; }
 .category__title { font-size: clamp(40px, 12vw, 64px); }
 .category__sub { font-size: 14px; }
}

.section-eyebrow {
 font-family: var(--font-mono);
 font-size: 11px;
 letter-spacing: 0.22em;
 color: var(--olive);
 text-transform: uppercase;
 margin: 0 0 8px;
}

/* -----------------------------------------------------------------
 How it works, staggered numbered steps
 ----------------------------------------------------------------- */
.howitworks {
 padding: 96px 0 72px;
 background:
 linear-gradient(180deg, rgba(200,180,138,0.10) 0%, rgba(248,239,225,0) 60%),
 var(--cream);
 position: relative;
}
.howitworks__head {
 max-width: 46em;
 margin: 0 0 40px;
}
.howitworks__title {
 font-family: var(--font-display);
 font-weight: 500;
 font-size: clamp(48px, 8vw, 96px);
 line-height: 0.98;
 letter-spacing: -0.02em;
 color: var(--ink);
 margin: 0 0 12px;
}
.howitworks__sub {
 font-family: var(--font-body);
 font-size: 16px;
 line-height: 1.55;
 color: var(--charcoal);
 margin: 0;
 max-width: 42em;
}
.hiw-steps {
 list-style: none;
 padding: 0;
 margin: 0;
 display: grid;
 gap: 24px;
 counter-reset: hiw;
}
.hiw-step {
 position: relative;
 border: 1px solid var(--oat);
 border-radius: 14px;
 padding: 32px 32px 28px;
 background: rgba(255,255,255,0.55);
 max-width: 780px;
}
.hiw-step--01 { margin-left: 0; }
.hiw-step--02 { margin-left: auto; margin-right: auto; }
.hiw-step--03 { margin-left: auto; margin-right: 0; }
.hiw-step__num {
 font-family: var(--font-mono);
 font-size: 11px;
 letter-spacing: 0.22em;
 color: var(--olive);
 margin: 0 0 12px;
}
.hiw-step__title {
 font-family: var(--font-display);
 font-weight: 500;
 font-size: 32px;
 line-height: 1.05;
 letter-spacing: -0.015em;
 color: var(--ink);
 margin: 0 0 10px;
}
.hiw-step__copy {
 font-family: var(--font-body);
 font-size: 15px;
 line-height: 1.6;
 color: var(--charcoal);
 margin: 0;
 max-width: 40em;
}
.howitworks__foot { margin: 40px 0 0; }
@media (max-width: 900px) {
 .howitworks { padding: 64px 0 48px; }
 .hiw-step { padding: 24px; }
 .hiw-step--01.hiw-step--02.hiw-step--03 { margin: 0; }
 .hiw-step__title { font-size: 26px; }
}

/* -----------------------------------------------------------------
 FAQ, on-home accordion
 ----------------------------------------------------------------- */
.faq { padding: 72px 0 96px; }
.faq__head { max-width: 46em; margin: 0 0 32px; }
.faq__title {
 font-family: var(--font-display);
 font-weight: 500;
 font-size: clamp(44px, 6vw, 72px);
 line-height: 1;
 letter-spacing: -0.02em;
 color: var(--ink);
 margin: 0 0 12px;
}
.faq__sub {
 font-family: var(--font-body);
 font-size: 16px;
 line-height: 1.55;
 color: var(--charcoal);
 margin: 0;
}
.faq__sub a { color: var(--olive); text-decoration: underline; text-underline-offset: 3px; }
.faq__list {
 display: grid;
 gap: 0;
 border-top: 1px solid var(--oat);
 max-width: 900px;
}
.faq-item {
 border-bottom: 1px solid var(--oat);
 padding: 0;
}
.faq-item__q {
 font-family: var(--font-display);
 font-weight: 500;
 font-size: 22px;
 line-height: 1.25;
 color: var(--ink);
 padding: 22px 44px 22px 4px;
 cursor: pointer;
 list-style: none;
 position: relative;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
 content: "";
 position: absolute;
 right: 8px;
 top: 50%;
 width: 12px;
 height: 12px;
 border-right: 1.5px solid var(--olive);
 border-bottom: 1.5px solid var(--olive);
 transform: translateY(-70%) rotate(45deg);
 transition: transform 200ms ease;
}
.faq-item[open] .faq-item__q::after {
 transform: translateY(-30%) rotate(-135deg);
}
.faq-item__a {
 padding: 0 44px 24px 4px;
}
.faq-item__a p {
 font-family: var(--font-body);
 font-size: 15px;
 line-height: 1.65;
 color: var(--charcoal);
 margin: 0;
 max-width: 60em;
}
@media (max-width: 640px) {
 .faq { padding: 48px 0 64px; }
 .faq-item__q { font-size: 18px; padding: 18px 36px 18px 2px; }
 .faq-item__a { padding: 0 36px 20px 2px; }
}

/* -----------------------------------------------------------------
 Mobile-only tweaks (2026-08 pivot)
 - Hide the top trust tagbar on phones
 - Hide the desktop trust panel on phones (mobile version below hero)
 - Show a compact trust panel between hero and first category
 ----------------------------------------------------------------- */
@media (max-width: 768px) {
 .tagbar { display: none; }
 .trustbar { display: none; }
 .ruostrip { padding-block: 32px 0; }
}

.trust-mobile {
 display: none;
}

@media (max-width: 768px) {
 .trust-mobile {
 display: block;
 margin: 8px 0 8px;
 padding: 0 20px;
 }
 .trust-mobile__panel {
 background: rgba(200, 180, 138, 0.42);
 border-radius: 14px;
 padding: 18px 20px;
 }
 .trust-mobile__row {
 display: grid;
 grid-template-columns: 44px 1fr;
 align-items: center;
 gap: 14px;
 padding: 12px 0;
 }
 .trust-mobile__row + .trust-mobile__row {
 border-top: 1px solid rgba(48, 41, 31, 0.14);
 }
 .trust-mobile__icon {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 border: 1px solid rgba(48, 41, 31, 0.35);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--ink);
 }
 .trust-mobile__icon svg { width: 22px; height: 22px; }
 .trust-mobile__title {
 font-family: var(--font-mono);
 font-size: 11px;
 letter-spacing: 0.14em;
 color: var(--ink);
 text-transform: uppercase;
 margin: 0 0 3px;
 line-height: 1.25;
 }
 .trust-mobile__copy {
 font-family: var(--font-body);
 font-size: 14px;
 color: var(--charcoal);
 margin: 0;
 line-height: 1.4;
 }
}

/* =========================================================================
 Iteration 5 - motion + spacing pass
 Appended last so it wins on equal specificity. Adds: button hover lift with
 sage shadow, a single section-rhythm scale, alternating section tint,
 wrap-width dividers, and a transition repair for cards that are both
 stagger children and tilt hosts. No colour outside the locked token set.
 ========================================================================= */

/* --- 1. full-bleed safety -------------------------------------------------
 .section--tint paints a 100vw pseudo-element. `overflow-x: clip` prevents a
 horizontal scrollbar without creating a scroll container, so position:sticky
 and scroll-linked motion keep working. */
html { overflow-x: clip; }

/* --- 2. button hover lift + sage shadow --------------------------------- */
.btn {
 transition: background var(--dur-base) var(--ease-out),
 color var(--dur-base) var(--ease-out),
 border-color var(--dur-base) var(--ease-out),
 box-shadow var(--dur-base) var(--ease-out),
 transform var(--dur-fast) var(--ease-out);
}
.btn:hover {
 transform: translateY(-2px);
 box-shadow: 0 12px 32px -12px rgba(78, 90, 62, 0.45);
}
.btn--outline:hover { box-shadow: 0 10px 26px -14px rgba(78, 90, 62, 0.32); }
.btn:active { transform: translateY(0); box-shadow: 0 6px 16px -10px rgba(78, 90, 62, 0.4); }
.btn[disabled]:hover.btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }

/* --- 3. section rhythm ---------------------------------------------------
 One gap token drives every major section. Adjacent sections each contribute
 half, so the space between two sections lands on the full clamp value. */
:root { --section-gap: clamp(56px, 8vw, 128px); }

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: calc(var(--section-gap) / 2); }
.pagehead { padding-block: clamp(36px, 4.4vw, 64px) calc(var(--section-gap) / 2); }

/* hero to first content section gets the full gap, not half */
.category { padding-block: clamp(48px, 6vw, 88px); }
.category + .category { padding-top: clamp(48px, 6vw, 88px); }
.howitworks { padding-block: var(--section-gap) calc(var(--section-gap) * 0.75); }
.faq { padding-block: calc(var(--section-gap) * 0.75) var(--section-gap); }

/* --- 4. alternating section tint ---------------------------------------- */
.section--tint { position: relative; isolation: isolate; }
.section--tint::before {
 content: "";
 position: absolute;
 z-index: -1;
 top: 0;
 bottom: 0;
 left: 50%;
 width: 100vw;
 transform: translateX(-50%);
 background: linear-gradient(180deg, var(--cream) 0%, #F4E9D2 100%);
 pointer-events: none;
}

/* --- 5. wrap-width divider between same-background neighbours ------------ */
.section--divide {
 background-image: linear-gradient(90deg, rgba(228, 214, 186, 0.4), rgba(228, 214, 186, 0.4));
 background-repeat: no-repeat;
 background-position: top center;
 background-size: min(100% - (var(--gutter) * 2), var(--max)) 1px;
}
.section--tight:not(.section--tint) + .section--tight:not(.section--tint):not(.section--divide) {
 background-image: linear-gradient(90deg, rgba(228, 214, 186, 0.4), rgba(228, 214, 186, 0.4));
 background-repeat: no-repeat;
 background-position: top center;
 background-size: min(100% - (var(--gutter) * 2), var(--max)) 1px;
}

/* --- 6. tilt + stagger transition repair ---------------------------------
 scripts/motion.js writes an inline `transition: transform 300ms` on every
 [data-tilt] host. When that host is also a stagger child the inline value
 drops the opacity transition, so the card would pop instead of fade. This
 restores both channels. Scoped to no-preference so the reduced-motion block
 in motion.css (loaded after this file) still wins. */
@media (prefers-reduced-motion: no-preference) {
 [data-reveal-stagger] > [data-tilt] {
 transition:
 opacity 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
 transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
 }
}

/* --- 7. card + media polish --------------------------------------------- */
.shopcard {
 transition: box-shadow var(--dur-base) var(--ease-out),
 border-color var(--dur-base) var(--ease-out),
 transform var(--dur-slow) var(--ease-out);
}
.pdp__media.lift { border-radius: var(--r-md); }
.figure.lift { border-radius: var(--r-md); overflow: hidden; }

/* --- 8. sticky mobile CTA safe area ------------------------------------- */
[data-sticky-cta] { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
[data-sticky-cta] .btn { box-shadow: 0 18px 40px -16px rgba(48, 41, 31, 0.45); }

/* --- 9. mobile rhythm ---------------------------------------------------- */
@media (max-width: 640px) {
 :root { --section-gap: clamp(48px, 12vw, 72px); }
 .pagehead { padding-block: 28px 32px; }
 .category { padding-block: 44px; }
}

/* --- 10. data-reveal-mask repair -----------------------------------------
 motion.css clips the observed element itself with clip-path: inset(0 100% 0 0).
 Chrome factors clipping into IntersectionObserver geometry, so the element can
 never reach the 0.08 threshold and the reveal never fires. Moving the wipe to
 the direct children keeps the observed box unclipped while preserving the
 effect. */
[data-reveal-mask] { clip-path: none !important; }
@media (prefers-reduced-motion: no-preference) {
 [data-reveal-mask] > * {
 clip-path: inset(0 100% 0 0);
 transition: clip-path 1200ms cubic-bezier(0.65, 0.05, 0.36, 1);
 will-change: clip-path;
 }
 [data-reveal-mask].is-in > * { clip-path: inset(0 0 0 0); }
}

/* =========================================================================
 2026-08-03 refinement pass
 - Hide the top tagbar strip site-wide (kept in DOM so we can re-enable)
 - Kill the custom circle cursor via CSS (JS init also short-circuited)
 - Wash out the coastal-hills backdrop on the trust bar so text is legible
 - Enlarge horizontal shopcard bottles without changing card footprint
 - Center bottle vertically on mobile so the cap does not touch top edge
 - FAQ heading size matches the category heading size for consistency
 - Trust panel visible on desktop (was mobile-only), sits under hero CTAs
 ========================================================================= */

/* 1) Remove top tagbar */
.tagbar { display: none !important; }

/* 2) Kill the circle cursor (dot + ring) */
.v-cursor.v-cursor-ring { display: none !important; }
html, body, a, button.btn, [role="button"], summary { cursor: auto !important; }
a, button.btn, [role="button"], summary { cursor: pointer !important; }
input, textarea, select { cursor: text !important; }

/* 3) Wash out the HIPAA-safe intake backdrop image + tint the sage band lighter
 so the three columns read cleanly all the way across */
.trustbar { background: color-mix(in srgb, var(--sage-mid) 55%, #F1E7D2 45%); }
.trustbar__hills {
 opacity: 0.14;
 filter: saturate(0.65) brightness(1.08);
 mix-blend-mode: luminosity;
 mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%);
 -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0) 100%);
}
.trustbar__title { color: var(--ink); }
.trustbar__copy { color: rgba(48,41,31,0.82); }

/* 4) Horizontal shopcard, much larger bottle inside the same card footprint.
 Card width stays put; only the media column widens and the img scales up so
 the label text (SEMAGLUTIDE, BPC-157, etc.) is legible without zoom. */
.shopcard--horiz {
 grid-template-columns: 220px 1fr 68px;
 gap: 26px;
 align-items: center;
}
.shopcard--horiz .shopcard__media {
 width: 220px;
 height: 260px;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0;
}
.shopcard--horiz .shopcard__media img {
 max-height: 260px;
 max-width: 100%;
 height: auto;
 width: auto;
 object-fit: contain;
 object-position: center center;
 filter: drop-shadow(0 8px 18px rgba(48, 41, 31, 0.14));
}

/* 5) Mobile, center the bottle vertically so the cap is not clipped to the top
 edge of the media well, and give a bigger footprint so the label reads. */
@media (max-width: 600px) {
 .shopcard--horiz {
 grid-template-columns: 156px 1fr;
 gap: 18px;
 padding: 22px 18px 24px;
 align-items: center;
 }
 .shopcard--horiz .shopcard__media {
 width: 156px;
 height: 200px;
 align-items: center;
 justify-content: center;
 padding: 0;
 }
 .shopcard--horiz .shopcard__media img {
 max-height: 196px;
 max-width: 100%;
 height: auto;
 width: auto;
 object-fit: contain;
 object-position: center center;
 display: block;
 margin: auto;
 }
 .shopcard--horiz .shopcard__title { font-size: 22px; }
}

/* 6) FAQ heading matches the category heading (Peptide-care hero family) */
.faq__title {
 font-size: clamp(48px, 8vw, 96px);
 line-height: 0.98;
}
@media (max-width: 640px) {
 .faq__title { font-size: clamp(40px, 12vw, 64px); }
}

/* 7) Hero trust panel, now nested inside .hero__copy directly beneath the
 Start Treatment / Browse Medications CTAs. Stacked rows so it fits the
 narrower copy column without cramping the icons. */
.hero .trust-mobile { display: block; margin: 22px 0 0; max-width: 560px; }
.hero .trust-mobile__panel {
 display: grid; grid-template-columns: 1fr;
 gap: 10px;
 padding: 16px 18px;
 background: color-mix(in srgb, var(--sage-mid) 32%, #F1E7D2 68%);
 border: 1px solid rgba(126, 138, 107, 0.28);
 border-radius: 12px;
}
.hero .trust-mobile__row { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 6px 0; }
.hero .trust-mobile__row + .trust-mobile__row { border-top: 1px solid rgba(126,138,107,0.18); }
.hero .trust-mobile__icon {
 width: 34px; height: 34px; flex: 0 0 auto;
 border: 1px solid rgba(48,41,31,0.25); border-radius: 50%;
 display: grid; place-items: center; color: var(--ink);
}
.hero .trust-mobile__icon svg { width: 18px; height: 18px; }
.hero .trust-mobile__title {
 font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
 letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
 margin: 0 0 2px;
}
.hero .trust-mobile__copy {
 font-family: var(--font-sans); font-size: 13px; line-height: 1.45;
 color: rgba(48,41,31,0.8); margin: 0;
}
@media (max-width: 900px) {
 .hero .trust-mobile { max-width: none; }
}

/* Vertical shopcard media (used on /shop/), larger bottle inside same card */
.shopcard:not(.shopcard--horiz) .shopcard__media img { height: 320px; }
@media (max-width: 700px) {
 .shopcard:not(.shopcard--horiz) .shopcard__media img {
 height: 260px;
 object-fit: contain;
 object-position: center center;
 display: block;
 margin: 0 auto;
 }
}

/* ─────────────────────────────────────────────────────────────
 Featured 2-up + horizontal trust strip (below hero)
 Reference: user landing mock, cards above trust bar on desktop
 ───────────────────────────────────────────────────────────── */

/* Kill the old .hero .trust-mobile panel, replaced by .trust-strip below the hero */
.hero .trust-mobile.hero .trust-mobile__panel { display: none !important; }

.featured {
 padding: 64px 0 24px;
 background: var(--cream);
}
.featured__inner {
 display: flex;
 flex-direction: column;
 gap: 28px;
}

.featured__grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 24px;
}

.featured-card {
 position: relative;
 display: grid;
 grid-template-columns: 180px 1fr;
 gap: 22px;
 align-items: center;
 padding: 22px 28px;
 background: #FFFDF8;
 border: 1px solid rgba(48, 41, 31, 0.10);
 border-radius: 16px;
 color: var(--ink);
 text-decoration: none;
 transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms;
 overflow: hidden;
}
.featured-card:hover {
 transform: translateY(-2px);
 box-shadow: 0 12px 28px rgba(48, 41, 31, 0.08);
}
.featured-card__media {
 width: 180px;
 height: 220px;
 display: flex;
 align-items: center;
 justify-content: center;
}
.featured-card__media img {
 max-height: 220px;
 max-width: 100%;
 width: auto;
 height: auto;
 object-fit: contain;
 filter: drop-shadow(0 8px 18px rgba(48, 41, 31, 0.14));
}
.featured-card__body { min-width: 0; }
.featured-card__title {
 font-family: var(--font-serif);
 font-weight: 500;
 font-size: clamp(28px, 3vw, 40px);
 line-height: 1.05;
 letter-spacing: -0.01em;
 margin: 0 0 6px;
 color: var(--ink);
}
.featured-card__eyebrow {
 font-family: var(--font-sans);
 font-size: 11px;
 font-weight: 500;
 letter-spacing: 0.20em;
 text-transform: uppercase;
 color: var(--olive);
 margin: 0 0 12px;
}
.featured-card__lede {
 font-family: var(--font-sans);
 font-size: 14px;
 line-height: 1.55;
 color: rgba(48, 41, 31, 0.78);
 margin: 0;
}
.featured-card__palm {
 position: absolute;
 right: 14px;
 bottom: 12px;
 width: 42px;
 height: 92px;
 color: rgba(124, 138, 107, 0.28);
 pointer-events: none;
}

/* Featured 2-up cards and trust strip use the standard --max container so
   they align with the header logo and the rest of the page content.
   The hero image bleeds past this container on the right via its own
   negative-margin trick, so the visual width past this box still lines up. */

/* Horizontal trust strip, 3 columns on desktop */
.trust-strip {
 display: grid;
 grid-template-columns: 1fr 1fr 1fr;
 gap: 0;
 padding: 22px 28px;
 background: rgba(201, 180, 138, 0.32);
 border: 1px solid rgba(78, 90, 62, 0.14);
 border-radius: 14px;
}
.trust-strip__cell {
 display: grid;
 grid-template-columns: 40px 1fr;
 gap: 14px;
 align-items: center;
 padding: 6px 20px;
 border-right: 1px solid rgba(78, 90, 62, 0.18);
}
.trust-strip__cell:last-child { border-right: none; }
.trust-strip__icon {
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--olive);
 background: rgba(255, 253, 248, 0.6);
 border-radius: 50%;
}
.trust-strip__icon svg { width: 20px; height: 20px; }
.trust-strip__title {
 font-family: var(--font-sans);
 font-size: 11.5px;
 font-weight: 600;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--ink);
 margin: 0 0 4px;
 line-height: 1.25;
}
.trust-strip__copy {
 font-family: var(--font-sans);
 font-size: 13px;
 color: rgba(48, 41, 31, 0.78);
 margin: 0;
 line-height: 1.4;
}

/* Mobile, stack vertically */
@media (max-width: 860px) {
 .featured { padding: 40px 0 16px; }
 .featured__grid {
 grid-template-columns: 1fr;
 gap: 18px;
 }
 .featured-card {
 grid-template-columns: 132px 1fr;
 gap: 16px;
 padding: 18px 20px;
 }
 .featured-card__media {
 width: 132px;
 height: 168px;
 }
 .featured-card__media img { max-height: 168px; }
 .featured-card__title { font-size: 26px; }

 .trust-strip {
 grid-template-columns: 1fr;
 padding: 16px 18px;
 }
 .trust-strip__cell {
 padding: 12px 0;
 border-right: none;
 border-bottom: 1px solid rgba(78, 90, 62, 0.14);
 }
 .trust-strip__cell:last-child { border-bottom: none; }
}

/* Hero title 2-line rule handled in reveal block below. */

/* Hero title reveal, each line slides in from the left on load */
.hero__title .hero__line {
 display: block;
 white-space: nowrap;
 opacity: 0;
 transform: translateX(-48px);
 animation: heroLineIn 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
 will-change: transform, opacity;
}
.hero__title .hero__line:nth-child(1) { animation-delay: 120ms; }
.hero__title .hero__line:nth-child(2) { animation-delay: 380ms; }
@keyframes heroLineIn {
 0% { opacity: 0; transform: translateX(-48px); }
 100% { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
 .hero__title .hero__line {
 opacity: 1; transform: none; animation: none;
 }
}
@media (max-width: 520px) {
 .hero__title .hero__line { white-space: normal; }
}

/* Subhead + CTAs, soft fade-up after the title lines land */
.hero__copy .hero__sub {
 opacity: 0; transform: translateY(10px);
 animation: heroSoftIn 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 640ms forwards;
}
.hero__copy .hero__ctas {
 opacity: 0; transform: translateY(10px);
 animation: heroSoftIn 700ms cubic-bezier(0.22, 0.61, 0.36, 1) 820ms forwards;
}
@keyframes heroSoftIn {
 to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
 .hero__copy .hero__sub.hero__copy .hero__ctas { opacity: 1; transform: none; animation: none; }
}