/* The homepage's own sections, from the prototype (CHANGES 1, 12, 14, 16, 22, 23, 27, 33 and Shop by Concern):
   sections/rootist_banner, rootist_proof, rootist_results and rootist_concerns. The reviews and FAQ rows reuse the
   product page's sections and their styles (assets/rootist-pdp.css), as does the before/after slider (.rt-ba).
   Colours: ink #672c45, soft ink rgb(103 44 69 / 0.78), hairline rgb(103 44 69 / 0.16), surface #f7efe6,
   lime #e4e825, cream #fffbf5. Display serif = the theme's 'Fraunces'; body = "Helvetica Neue".
   Sizes by width: section heads 48px/52px, 40px/44px from 1068px down, 32px/36px from 734px down; tile heads
   28px/32px, 24px/28px, 21px/25px; intros 21px/29px, 19px/27px, 17px/25px; big numbers 80px, 64px, 48px.
   Section padding 128px, 104px from 1068px down, 80px from 734px down; tile corners 28px (20px on phones).
   The theme sets every h2 and h3 to 40px with !important (.rootist-store h2/h3), every paragraph's margin to 0 and
   every list item's colour, so the rules below that touch those carry the extra specificity. */

/* Headings at the prototype's sizes. */
.rootist-store :is(.rt-banner, .rt-clinical, .rt-results, .rt-concern-shop) h2.rt-h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 48px !important; line-height: 52px !important; letter-spacing: -0.005em; color: #672c45; text-wrap: balance; }
.rootist-store :is(.rt-clinical, .rt-concern-shop) h3:is(.rt-h3, .rt-concern-title) { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 28px !important; line-height: 32px !important; color: #672c45; }
@media (max-width: 1068px) {
  .rootist-store :is(.rt-banner, .rt-clinical, .rt-results, .rt-concern-shop) h2.rt-h2 { font-size: 40px !important; line-height: 44px !important; }
  .rootist-store :is(.rt-clinical, .rt-concern-shop) h3:is(.rt-h3, .rt-concern-title) { font-size: 24px !important; line-height: 28px !important; }
}
@media (max-width: 734px) {
  .rootist-store :is(.rt-banner, .rt-clinical, .rt-results, .rt-concern-shop) h2.rt-h2 { font-size: 32px !important; line-height: 36px !important; }
  .rootist-store :is(.rt-clinical, .rt-concern-shop) h3:is(.rt-h3, .rt-concern-title) { font-size: 21px !important; line-height: 25px !important; }
}
/* The categories page's title: the Shop by Concern heading as the page's h1 ("Heading level" on the section), set exactly
   like the h2 above. The theme sets every h1 in its condensed face with !important, hence the longer selector. */
.rootist-store .rt-concern-shop .rt-wrap > h1.rt-h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 48px !important; line-height: 52px !important; letter-spacing: -0.005em; color: #672c45; text-wrap: balance; }
@media (max-width: 1068px) { .rootist-store .rt-concern-shop .rt-wrap > h1.rt-h2 { font-size: 40px !important; line-height: 44px !important; } }
@media (max-width: 734px) { .rootist-store .rt-concern-shop .rt-wrap > h1.rt-h2 { font-size: 32px !important; line-height: 36px !important; } }
.rt-clinical .rt-eyebrow { margin: 0 0 16px; font: 700 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(103 44 69 / 0.78); }
:is(.rt-banner, .rt-clinical) .rt-intro { margin: 20px 0 0; max-width: 32em; font: 400 21px/29px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.011em; color: rgb(103 44 69 / 0.78); text-wrap: pretty; }
:is(.rt-banner, .rt-clinical) .rt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 32px; }
:is(.rt-clinical, .rt-results, .rt-concern-shop) .rt-footnotes { margin: 40px 0 0; font: 400 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); }
@media (max-width: 1068px) { :is(.rt-banner, .rt-clinical) .rt-intro { font-size: 19px; line-height: 27px; } }
@media (max-width: 734px) {
  :is(.rt-banner, .rt-clinical) .rt-intro { font-size: 17px; line-height: 25px; letter-spacing: -0.01em; }
  :is(.rt-banner, .rt-clinical) .rt-actions { gap: 16px 24px; margin-top: 28px; }
}

/* ------------------------------------------------------------------
 * The banners (CHANGES 1, 16, 22, 33): tiles in the content column, 2:1 like Rootist's banner art, 20px apart.
 * One holds the before/after slider where their art had its frame (583px at x 111, y 54 of 1400 x 700); the other
 * is their Densify video, which carries its own before/after card, with the copy over its left half.
 * ------------------------------------------------------------------ */
.rt-banner { padding: 0 0 20px; }
.rt-banner-tile { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 28px; background: var(--rt-banner-bg, #fffff7); }
.rt-banner-media { position: absolute; z-index: 1; }
.rt-banner--slider .rt-banner-media { top: 7.71%; left: 7.93%; width: 41.64%; }
.rt-banner--slider.rt-banner--media-right .rt-banner-media { left: auto; right: 7.93%; }
.rt-banner--video .rt-banner-media { inset: 0; }
.rt-banner-video,
.rt-banner-mask { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.rt-banner-mask { pointer-events: none; }
.rt-banner-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 80px;
  width: min(28rem, 42%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  transform: translateY(-50%);
}
.rt-banner--media-right .rt-banner-copy { right: auto; left: 80px; }
/* Beside the video's card, which starts 51% of the way across: the copy stops 32px short of it. */
.rt-banner--video .rt-banner-copy { width: min(34rem, calc((100% - 160px) * 0.509 - 32px)); } /* the theme's Fraunces runs wider than Rootist's display face */
.rt-banner .rt-intro { color: #672c45; }
@media (max-width: 1279.98px) {
  .rt-banner-copy { right: 48px; }
  .rt-banner--media-right .rt-banner-copy { left: 48px; }
  .rt-banner--video .rt-banner-copy { width: min(34rem, calc((100% - 96px) * 0.509 - 32px)); }
}
@media (min-width: 600px) and (max-width: 767.98px) {
  .rt-banner-copy { right: 32px; width: 44%; }
  .rt-banner--media-right .rt-banner-copy { left: 32px; }
  .rt-banner--video .rt-banner-copy { width: calc((100% - 64px) * 0.509 - 24px); }
}
/* Phones: the picture, then the copy under it, centred. The video shows just its card: a square cropped from the
   frame (the video block's crop settings, in % of the video's width and height; --rt-video-aspect is the file's
   width over height, 2 for the 2:1 banner video, 1 for a file already cropped to the card). */
@media (max-width: 599.98px) {
  .rt-banner { padding: 16px 0 56px; }
  .rt-banner-tile { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 36px; }
  .rt-banner-media,
  .rt-banner--slider .rt-banner-media,
  .rt-banner--slider.rt-banner--media-right .rt-banner-media { position: relative; top: auto; left: auto; right: auto; width: 100%; }
  .rt-banner--video .rt-banner-media { inset: auto; aspect-ratio: 1; overflow: hidden; border-radius: 20px; background: var(--rt-banner-bg, #fffff7); }
  .rt-banner--video :is(.rt-banner-video, .rt-banner-mask) {
    inset: auto;
    left: calc(var(--rt-crop-x, 50.8) / var(--rt-crop-size, 41.6) * -100%);
    top: calc(var(--rt-crop-y, 8.9) / var(--rt-crop-size, 41.6) / var(--rt-video-aspect, 2) * -100%);
    width: calc(100% * 100 / var(--rt-crop-size, 41.6));
    height: auto;
    aspect-ratio: var(--rt-video-aspect, 2);
  }
  .rt-banner-copy,
  .rt-banner--media-right .rt-banner-copy,
  .rt-banner--video .rt-banner-copy { position: static; width: 100%; align-items: center; text-align: center; transform: none; }
  .rt-banner .rt-intro { max-width: 22em; }
}

/* The five BioBrew benefits under the benefits banner (rootist_banner, "Show the five BioBrew benefits"). The heading
   promises five; this row names them with their test context. Each top rule draws across in lime as the row arrives,
   one after another, like the clinical stats below. */
.rt-benefits { padding: 36px 0 88px; color: #672c45; }
.rt-benefits-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.rt-benefits-list li { position: relative; padding-top: 20px; border-top: 1px solid rgb(103 44 69 / 0.16); }
.rt-benefits-list li::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 3px; border-radius: 3px; background: #e4e825; transform: scaleX(0); transform-origin: left center; transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); }
.rt-benefits-list li:nth-child(2)::before { transition-delay: 0.15s; }
.rt-benefits-list li:nth-child(3)::before { transition-delay: 0.3s; }
.rt-benefits-list li:nth-child(4)::before { transition-delay: 0.45s; }
.rt-benefits-list li:nth-child(5)::before { transition-delay: 0.6s; }
.rt-benefits.is-drawn .rt-benefits-list li::before { transform: scaleX(1); }
.rt-benefit-index { display: block; margin-bottom: 10px; font: 700 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.12em; color: rgb(103 44 69 / 0.78); font-variant-numeric: tabular-nums; }
.rt-benefits-list p { margin: 0; font: 400 17px/24px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.005em; text-wrap: pretty; }
.rt-benefits sup { margin-left: 1px; font-size: 0.62em; line-height: 0; vertical-align: 0.55em; color: rgb(103 44 69 / 0.7); }
.rt-benefits-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-top: 32px; }
.rt-benefits-notes { max-width: 72ch; margin: 0; font: 400 12px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.72); }
.rt-benefits-notes sup { margin: 0 2px 0 6px; }
.rt-benefits-notes sup:first-child { margin-left: 0; }
.rootist-store .rt-benefits .rt-link { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #672c45; font: 700 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.rt-benefits .rt-link span[aria-hidden="true"] { display: inline-block; transition: transform 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .rt-benefits .rt-link:hover { opacity: 0.72; } .rt-benefits .rt-link:hover span[aria-hidden="true"] { transform: translateX(3px); } }
.rt-benefits .rt-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
@media (max-width: 1068px) {
  .rt-benefits-list { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 28px; }
  .rt-benefits-list li { grid-column: span 2; }
  .rt-benefits-list li:nth-child(4), .rt-benefits-list li:nth-child(5) { grid-column: span 3; }
}
@media (max-width: 599.98px) {
  .rt-benefits { padding: 28px 0 64px; }
  .rt-benefits-list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .rt-benefits-list li, .rt-benefits-list li:nth-child(4), .rt-benefits-list li:nth-child(5) { grid-column: auto; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline; padding: 14px 0 16px; }
  .rt-benefit-index { margin: 0; }
  .rt-benefits-list p { font-size: 16px; line-height: 23px; }
  .rt-benefits-foot { flex-direction: column; gap: 16px; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .rt-benefits-list li::before { transition: none; } .rt-benefits .rt-link span[aria-hidden="true"] { transition: none; } }

/* ------------------------------------------------------------------
 * CHANGE 12: clinical proof beside press authority, on the warm surface.
 * CHANGE 23: each stat's rule draws across in lime, one after another, when the band comes into view
 * (data-rt-draw, assets/rootist-pdp.js).
 * CHANGE 27: award quotes carry a gold foil seal on the card's corner; a glint crosses it on arrival and on hover.
 * ------------------------------------------------------------------ */
.rt-clinical { padding: 128px 0 96px; background: #f7efe6; }
.rt-clinical-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); align-items: end; }
.rt-bigstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.rt-bigstats li { position: relative; display: flex; flex-direction: column; padding-top: 24px; border-top: 1px solid rgb(103 44 69 / 0.16); color: #672c45; }
.rt-bigstats li::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: #e4e825;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.rt-bigstats li:nth-child(2)::before { transition-delay: 0.3s; }
.rt-bigstats li:nth-child(3)::before { transition-delay: 0.6s; }
.rt-bigstats li:nth-child(4)::before { transition-delay: 0.9s; }
.rt-bigstats.is-drawn li::before { transform: scaleX(1); }
.rt-bigstat-pre { min-height: 1.2em; margin-bottom: 12px; font: 700 12px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(103 44 69 / 0.78); }
.rt-bigstat-value { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 80px; line-height: 1; letter-spacing: -0.02em; color: #672c45; white-space: nowrap; }
.rt-bigstat-value small { font-size: 28px; letter-spacing: 0; }
.rt-bigstat-label { margin-top: 16px; font: 400 17px/25px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); }
.rt-pressrow { margin-top: 96px; }
.rt-pressrow .rt-gallery-head { margin-bottom: 16px; }
.rt-pressrow .rt-track { padding-top: 20px; }
.rt-press-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: clamp(272px, 24vw, 340px);
  min-height: 100%;
  padding: 28px 28px 32px;
  border-radius: 28px;
  background: #fffbf5;
  color: #672c45;
}
.rt-pressrow .rt-press-card .rt-press-logo { width: 132px; height: 40px; max-width: none; margin-left: -10px; object-fit: cover; }
.rt-press-card blockquote { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 21px; line-height: 29px; color: #672c45; }
.rt-press-tag {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 72px;
  height: 72px;
  transform: rotate(8deg);
  filter: drop-shadow(0 1px 1px rgb(92 58 14 / 0.3)) drop-shadow(0 3px 5px rgb(92 58 14 / 0.22));
}
.rt-seal {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  clip-path: polygon(99.6% 50.0%, 98.5% 51.9%, 95.9% 53.6%, 93.2% 55.1%, 91.9% 56.6%, 92.6% 58.5%, 94.7% 60.7%, 96.7% 63.2%, 97.2% 65.3%, 95.5% 66.8%, 92.5% 67.6%, 89.5% 68.2%, 87.8% 69.2%, 87.9% 71.2%, 89.2% 74.0%, 90.4% 77.0%, 90.1% 79.2%, 88.1% 80.1%, 85.0% 79.9%, 81.9% 79.5%, 80.0% 80.0%, 79.5% 81.9%, 79.9% 85.0%, 80.1% 88.1%, 79.2% 90.1%, 77.0% 90.4%, 74.0% 89.2%, 71.2% 87.9%, 69.2% 87.8%, 68.2% 89.5%, 67.6% 92.5%, 66.8% 95.5%, 65.3% 97.2%, 63.2% 96.7%, 60.7% 94.7%, 58.5% 92.6%, 56.6% 91.9%, 55.1% 93.2%, 53.6% 95.9%, 51.9% 98.5%, 50.0% 99.6%, 48.1% 98.5%, 46.4% 95.9%, 44.9% 93.2%, 43.4% 91.9%, 41.5% 92.6%, 39.3% 94.7%, 36.8% 96.7%, 34.7% 97.2%, 33.2% 95.5%, 32.4% 92.5%, 31.8% 89.5%, 30.8% 87.8%, 28.8% 87.9%, 26.0% 89.2%, 23.0% 90.4%, 20.8% 90.1%, 19.9% 88.1%, 20.1% 85.0%, 20.5% 81.9%, 20.0% 80.0%, 18.1% 79.5%, 15.0% 79.9%, 11.9% 80.1%, 9.9% 79.2%, 9.6% 77.0%, 10.8% 74.0%, 12.1% 71.2%, 12.2% 69.2%, 10.5% 68.2%, 7.5% 67.6%, 4.5% 66.8%, 2.8% 65.3%, 3.3% 63.2%, 5.3% 60.7%, 7.4% 58.5%, 8.1% 56.6%, 6.8% 55.1%, 4.1% 53.6%, 1.5% 51.9%, 0.4% 50.0%, 1.5% 48.1%, 4.1% 46.4%, 6.8% 44.9%, 8.1% 43.4%, 7.4% 41.5%, 5.3% 39.3%, 3.3% 36.8%, 2.8% 34.7%, 4.5% 33.2%, 7.5% 32.4%, 10.5% 31.8%, 12.2% 30.8%, 12.1% 28.8%, 10.8% 26.0%, 9.6% 23.0%, 9.9% 20.8%, 11.9% 19.9%, 15.0% 20.1%, 18.1% 20.5%, 20.0% 20.0%, 20.5% 18.1%, 20.1% 15.0%, 19.9% 11.9%, 20.8% 9.9%, 23.0% 9.6%, 26.0% 10.8%, 28.8% 12.1%, 30.8% 12.2%, 31.8% 10.5%, 32.4% 7.5%, 33.2% 4.5%, 34.7% 2.8%, 36.8% 3.3%, 39.3% 5.3%, 41.5% 7.4%, 43.4% 8.1%, 44.9% 6.8%, 46.4% 4.1%, 48.1% 1.5%, 50.0% 0.4%, 51.9% 1.5%, 53.6% 4.1%, 55.1% 6.8%, 56.6% 8.1%, 58.5% 7.4%, 60.7% 5.3%, 63.2% 3.3%, 65.3% 2.8%, 66.8% 4.5%, 67.6% 7.5%, 68.2% 10.5%, 69.2% 12.2%, 71.2% 12.1%, 74.0% 10.8%, 77.0% 9.6%, 79.2% 9.9%, 80.1% 11.9%, 79.9% 15.0%, 79.5% 18.1%, 80.0% 20.0%, 81.9% 20.5%, 85.0% 20.1%, 88.1% 19.9%, 90.1% 20.8%, 90.4% 23.0%, 89.2% 26.0%, 87.9% 28.8%, 87.8% 30.8%, 89.5% 31.8%, 92.5% 32.4%, 95.5% 33.2%, 97.2% 34.7%, 96.7% 36.8%, 94.7% 39.3%, 92.6% 41.5%, 91.9% 43.4%, 93.2% 44.9%, 95.9% 46.4%, 98.5% 48.1%);
  background:
    radial-gradient(circle at 32% 26%, rgb(255 251 230 / 0.9), rgb(255 251 230 / 0) 44%),
    radial-gradient(circle at 70% 78%, rgb(120 78 16 / 0.28), rgb(120 78 16 / 0) 52%),
    conic-gradient(from 205deg, #fbe7a3, #c8952e 9%, #fff4ca 18%, #b27f27 30%, #f3d47e 42%, #a6741d 54%, #fce8a6 66%, #c28e32 78%, #fff1bf 89%, #fbe7a3);
  color: #573810;
  font: 700 9px/1.2 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 0 rgb(255 247 216 / 0.8), 0 -1px 0 rgb(96 62 14 / 0.28);
}
.rt-seal > span { display: block; }
.rt-seal-star { width: 10px; height: 10px; margin-bottom: 2px; fill: currentColor; filter: drop-shadow(0 1px 0 rgb(255 247 216 / 0.8)); }
.rt-seal::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgb(115 76 18 / 0.55); border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 243 200 / 0.6), inset 0 0 0 1px rgb(255 243 200 / 0.6); }
.rt-seal::after { content: ""; position: absolute; inset: -25%; background: linear-gradient(112deg, rgb(255 255 255 / 0) 36%, rgb(255 255 255 / 0.85) 50%, rgb(255 255 255 / 0) 64%); transform: translateX(-120%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .rt-press-card.is-drawn .rt-seal::after { animation: rt-glint 1.5s cubic-bezier(0.3, 0, 0.2, 1) 0.2s; }
  .rt-press-card:hover .rt-seal::after { animation: rt-glint-again 1.1s cubic-bezier(0.3, 0, 0.2, 1); }
}
@keyframes rt-glint { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes rt-glint-again { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.rt-clinical .rt-footnotes.rt-wrap { margin: 40px auto 0; }
@media (max-width: 1068px) {
  .rt-clinical { padding: 104px 0 78px; }
  .rt-clinical-grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
  .rt-bigstat-value { font-size: 64px; }
  .rt-bigstat-value small { font-size: 24px; }
  .rt-pressrow { margin-top: 78px; }
}
@media (max-width: 734px) {
  .rt-clinical { padding: 80px 0 60px; }
  .rt-bigstats { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .rt-bigstat-value { font-size: 48px; }
  .rt-bigstat-value small { font-size: 21px; }
  .rt-pressrow { margin-top: 60px; }
  .rt-press-card { border-radius: 20px; }
  .rt-press-card blockquote { font-size: 17px; line-height: 25px; }
  .rt-pressrow .rt-gallery-head { margin-bottom: 8px; }
  .rt-press-tag { width: 64px; height: 64px; top: -9px; right: -9px; }
  .rt-seal { font-size: 8px; }
  .rt-seal-star { width: 9px; height: 9px; }
  .rt-seal::before { inset: 7px; }
}
@media (prefers-reduced-motion: reduce) { .rt-bigstats li::before { transition: none; } }

/* ------------------------------------------------------------------
 * CHANGE 14: Rootist's own unretouched before/afters, one frame for every card. Each photo's baked border and
 * divider are cropped away (the card's crop settings: x y width height of full-width full-height, in the photo's
 * pixels), and every pair gets the same 3px plum frame, centre divider and lime labels, sized to cover the photos'
 * own labels where they have them.
 * ------------------------------------------------------------------ */
.rt-results { padding: 128px 0; }
.rt-result { width: clamp(264px, 28vw, 400px); color: #672c45; }
.rt-result figure { margin: 0; }
.rt-pair { container-type: inline-size; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; aspect-ratio: 1; overflow: hidden; border: 3px solid #672c45; border-radius: 28px; background: #672c45; }
.rt-pane { position: relative; overflow: hidden; background: #efe6dc; }
.rt-pane img { position: absolute; display: block; max-width: none; width: calc(var(--sw) / var(--cw) * 100%); height: calc(var(--sh) / var(--ch) * 100%); left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%); }
.rt-pane img.rt-pane-cover { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rt-pill {
  position: absolute;
  z-index: 1;
  top: 7.5%;
  height: 12%;
  width: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e4e825;
  color: #672c45;
  font: 700 4.4cqw/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rt-pill--before { left: 0; border-radius: 0 999px 999px 0; }
.rt-pill--after { right: 0; border-radius: 999px 0 0 999px; }
.rt-pill--wide { width: 41%; }
.rt-result figcaption { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.rt-result figcaption strong { font: 700 17px/21px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #672c45; }
.rt-result figcaption span { font: 400 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(103 44 69 / 0.78); }
@media (max-width: 1068px) { .rt-results { padding: 104px 0; } }
@media (max-width: 734px) { .rt-results { padding: 80px 0; } .rt-pair { border-radius: 20px; } }

/* Shop by Concern pairs each familiar need with a product starting point and the full routine. */
.rt-concern-shop { padding: 128px 0; }
.rt-concern-shop .rt-h2 { margin-bottom: 8px !important; text-align: center; }
.rootist-store .rt-concern-shop .rt-concern-intro { max-width: 58ch; margin: 0 auto 32px; text-align: center; color: #765363; font: 400 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.rt-concern-shop .rt-concern-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 auto; padding: 0; list-style: none; }
.rt-concern-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: #672c45; background: #fffaf6; border: 1px solid #e9dcd9; border-radius: 26px; transition: transform .22s ease, box-shadow .22s ease; }
.rt-concern-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgb(103 44 69 / .09); }
.rt-concern-image-link { display: block; color: inherit; }
.rt-concern-photo { position: relative; display: block; aspect-ratio: 1.08; overflow: hidden; background: #f7efe6; }
.rt-concern-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 100%; }
.rt-concern-copy { display: flex; flex: 1; flex-direction: column; padding: 20px 22px 22px; }
.rt-concern-title { margin: 0 0 19px !important; }
.rt-concern-starter { display: block; margin-bottom: 5px; color: #8c6878; font: 700 10px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.rt-concern-copy > strong { display: block; font: 600 17px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.rt-concern-copy > p { margin: 6px 0 22px; color: #765363; font: 400 14px/1.45 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.rt-concern-actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.rt-concern-actions a { display: flex; align-items: center; justify-content: space-between; min-height: 43px; padding: 10px 14px; border: 1px solid #71324f; border-radius: 12px; color: #71324f; text-decoration: none; font: 600 13px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.rt-concern-actions .rt-concern-product-link { background: #71324f; color: white; }
.rt-concern-actions a:hover { background: #eee6f2; }
.rt-concern-actions .rt-concern-product-link:hover { background: #5d2841; }
.rt-concern-image-link:focus-visible, .rt-concern-actions a:focus-visible, .rt-concern-routine-link:focus-visible { outline: 3px solid #71324f; outline-offset: 3px; }
.rt-concern-copy > .rt-concern-routine-link { margin-top: auto; font-weight: 600; }
@media (max-width: 1068px) { .rt-concern-shop { padding: 104px 0; } }
@media (max-width: 767.98px) {
  .rt-concern-shop { padding: 80px 0; }
  /* The row leaves the content column to run edge to edge; its padding keeps the first tile on the column's edge
     (the theme's 16px phone gutter). */
  .rt-concern-shop .rt-concern-row { display: flex; width: auto; gap: 16px; margin: 0; padding: 0 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
  .rt-concern-row::-webkit-scrollbar { display: none; }
  .rt-concern-card { flex: none; width: min(78vw, 320px); scroll-snap-align: start; }
  .rt-concern-card { border-radius: 20px; }
  .rt-concern-copy { padding: 17px; }
}
@media (prefers-reduced-motion: reduce) { .rt-concern-card { transition: none; } .rt-concern-card:hover { transform: none; } }
/* The starter's catalog price, quietly after its note. */
.rt-concern-copy .rt-concern-price { display: inline-block; margin-left: 6px; color: #672c45; font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------------------------
 * CHANGE 46: the banners out of their cards. The white card on the cream page read as too subtle, and its padding
 * matched nothing else on the page. From 600px up, the picture and the copy sit on the page side by side in the
 * content column, the picture larger now there's no card round it: the before/after slider as it was, and the video
 * cropped to just its before/after card, as on phones (the block's crop settings). The copy starts its column.
 * ------------------------------------------------------------------ */
@media (min-width: 600px) {
  .rootist-store .rt-banner { padding: 0 0 clamp(24px, 3vw, 40px); }
  /* Before anything but a product band (whose own top holds its bottle), the section rhythm below it. */
  .rootist-store section:has(> .rt-banner):not(:has(+ section > .rt-band)) > .rt-banner { padding-bottom: var(--rt-section-y, 112px); }
  .rootist-store .rt-banner .rt-banner-tile {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    column-gap: clamp(40px, 6vw, 104px);
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .rootist-store .rt-banner--media-right .rt-banner-tile { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .rootist-store .rt-banner .rt-banner-media,
  .rootist-store .rt-banner--slider .rt-banner-media,
  .rootist-store .rt-banner--slider.rt-banner--media-right .rt-banner-media { position: relative; inset: auto; top: auto; left: auto; right: auto; width: 100%; max-width: 680px; }
  .rootist-store .rt-banner--media-right .rt-banner-media { order: 2; justify-self: end; }
  .rootist-store .rt-banner .rt-banner-copy,
  .rootist-store .rt-banner--media-right .rt-banner-copy,
  .rootist-store .rt-banner--video .rt-banner-copy { position: static; width: auto; max-width: 32rem; transform: none; align-items: flex-start; text-align: left; }
  .rootist-store .rt-banner--video .rt-banner-media { aspect-ratio: 1; overflow: hidden; border-radius: 22px; background: var(--rt-banner-bg, #fffff7); }
  .rootist-store .rt-banner--video :is(.rt-banner-video, .rt-banner-mask) {
    inset: auto;
    left: calc(var(--rt-crop-x, 50.8) / var(--rt-crop-size, 41.6) * -100%);
    top: calc(var(--rt-crop-y, 8.9) / var(--rt-crop-size, 41.6) / var(--rt-video-aspect, 2) * -100%);
    width: calc(100% * 100 / var(--rt-crop-size, 41.6));
    height: auto;
    aspect-ratio: var(--rt-video-aspect, 2);
  }
}
@media (min-width: 600px) and (max-width: 900px) {
  .rootist-store .rt-banner .rt-banner-tile,
  .rootist-store .rt-banner--media-right .rt-banner-tile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
}