.hero {
--hero-side-shade: linear-gradient(90deg, rgba(var(--rgb-black), .6) 0%, rgba(var(--rgb-black), .416) 30.38%, rgba(var(--rgb-black), 0) 66.667%);
--hero-bottom-shade: linear-gradient(0deg, rgba(var(--rgb-black), .5) 5.7046%, rgba(var(--rgb-black), 0) 25.906%);
background-color: var(--color-black);
background-image:
  var(--hero-side-shade),
  var(--hero-bottom-shade),
  url("https://the-perfect-rim.techsolutionn.com/wp-content/uploads/2026/07/home-hero-figma.png");
background-position:
  left top 32px,
  left top 32px,
  center top 32px;
background-repeat: no-repeat;
background-size:
  100% calc(100% - 32px),
  100% calc(100% - 32px),
  100% calc(100% - 32px);
height: 825px;
overflow: hidden;
position: relative;
}

.hero__inner {
height: 825px;
padding-top: 0;
position: relative;
z-index: 2;
}

.hero__content {
color: var(--color-cream);
display: flex;
flex-direction: column;
gap: 32px;
left: 0;
max-width: none;
position: absolute;
top: 317px;
width: 725px;
}

.hero__text,
.hero__headline,
.hero__support {
align-items: flex-start;
display: flex;
flex-direction: column;
}

.hero__text {
gap: 12px;
width: 725px;
}

.hero__headline {
gap: 8px;
}

.hero__kicker {
color: var(--color-cream);
font-family: var(--font-script);
font-size: var(--font-size-script);
line-height: var(--line-height-script);
text-transform: capitalize;
}

.hero h1 {
color: var(--color-cream);
font-size: var(--font-size-display-md);
line-height: var(--line-height-hero);
max-width: none;
width: 725px;
}

.hero__support {
gap: 12px;
line-height: var(--line-height-body);
width: 609px;
}

.hero__copy {
color: var(--color-cream);
font-size: var(--font-size-body);
line-height: var(--line-height-body-18);
max-width: none;
width: 609px;
}

.hero__steps {
color: var(--color-cream);
font-size: var(--font-size-body-lg);
font-weight: 700;
line-height: var(--line-height-body);
}

.hero__actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 0;
}

.marquee-strip {
color: var(--color-gold);
margin-block: 0;
overflow: hidden;
padding-block: 24px;
position: relative;
}

.marquee-strip__viewport {
height: 45px;
margin-inline: -10px;
overflow: hidden;
}

.marquee-strip__track {
align-items: center;
animation: marquee-scroll 28s linear infinite;
display: flex;
height: 45px;
width: max-content;
will-change: transform;
}

.marquee-strip__group {
align-items: center;
display: flex;
flex: 0 0 auto;
gap: 40px;
padding-right: 40px;
}

.marquee-strip img {
flex: 0 0 auto;
height: 42px;
object-fit: contain;
width: 44.864px;
}

.marquee-strip__text {
color: var(--color-gold);
display: block;
font-family: var(--font-display);
font-size: var(--font-size-display-sm);
line-height: var(--line-height-heading);
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}

@keyframes marquee-scroll {
from {
  transform: translate3d(0, 0, 0);
}
to {
  transform: translate3d(-50%, 0, 0);
}
}

.intro {
background: linear-gradient(180deg, #FBEFD2 0%, #FBEFD2 89.22%, rgba(251, 239, 210, 0.00) 100%);
overflow: hidden;
padding-bottom: 140px;
padding-top: 100px;
position: relative;
}

.intro__wordmark {
height: auto;
margin: 0 auto 49px;
position: relative;
width: min(1340px, calc(100% - 100px));
z-index: 1;
}

.intro__grid {
align-items: start;
display: grid;
gap: 166px;
grid-template-columns: 577px 537px;
margin-bottom: 32px;
position: relative;
z-index: 1;
}

.intro h2 {
color: var(--color-deep-teal-1);
font-size: var(--font-size-h2);
line-height: var(--line-height-heading);
max-width: 577px;
}

.intro__copy {
color: var(--color-deep-teal-1);
display: grid;
gap: 16px;
max-width: 537px;
}

.intro__copy p {
color: var(--color-deep-teal-1);
font-size: var(--font-size-body);
line-height: var(--line-height-body-18);
}

.intro__image {
aspect-ratio: 1280 / 635;
border-radius: 12px;
overflow: hidden;
position: relative;
z-index: 1;
}

.intro__image video {
display: block;
height: 100%;
object-fit: cover;
object-position: center;
width: 100%;
}

.comparison {
margin-top: -40px;
padding-bottom: 0;
padding-top: 0;
}

.comparison > .container {
display: flex;
flex-direction: column;
gap: 48px;
}

.comparison__sticky {
display: flex;
flex-direction: column;
gap: 32px;
position: sticky;
top: 0;
}

.comparison__heading {
color: var(--color-deep-teal-1);
margin-bottom: 0;
max-width: 780px;
padding-top: 100px;
}

.comparison__heading h2 {
color: var(--color-deep-teal-1);
font-size: var(--font-size-h2);
line-height: var(--line-height-heading);
margin-inline: auto;
max-width: 652px;
}

.comparison__heading p {
color: var(--color-deep-teal-1);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
max-width: 780px;
}

.method-card {
align-items: stretch;
}

.method-card__image {
aspect-ratio: 640 / 448;
flex: 0 0 50%;
}

.method-card__panel {
flex: 0 0 calc(50% + 73px);
justify-content: flex-start;
}

.method-card__panel h3 {
font-size: var(--font-size-h3);
line-height: normal;
}

.method-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.method-list ul {
display: grid;
gap: 16px;
}

.method-list li {
font-size: var(--font-size-body-lg);
line-height: var(--line-height-body);
}

.method-list--bad li::before {
background-image: url("../images/figma-close.svg");
}

.method-list--good li::before {
background-image: url("../images/figma-check.svg");
}

.feature-arch {
margin-top: 100px;
overflow: hidden;
padding: 197px 0 142px;
position: relative;
}

.feature-arch::before {
background: linear-gradient(180deg, rgba(var(--rgb-cream), 0) 0%, var(--color-cream) 10%, var(--color-cream) 92%, rgba(var(--rgb-cream), 0) 100%);
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 53px;
}

.feature-arch__wordmark {
left: 50%;
max-width: calc(100% - 100px);
position: absolute;
top: 0;
transform: translateX(-50%);
width: 1340px;
}

.feature-arch__inner {
min-height: 666px;
position: relative;
}

.feature-arch__costs {
color: var(--color-deep-teal-1);
display: flex;
flex-direction: column;
gap: 16px;
left: 0;
position: absolute;
top: 22px;
width: 498px;
}

.feature-arch__problem,
.feature-arch__problem-copy,
.feature-arch__result {
display: flex;
flex-direction: column;
}

.feature-arch__problem {
gap: 11px;
}

.feature-arch__problem-copy {
gap: 12px;
}

.feature-arch__result {
gap: 8px;
width: 450px;
}

.feature-arch__costs h2,
.feature-arch__better h2 {
color: var(--color-deep-teal-1);
font-size: var(--font-size-h3);
line-height: var(--line-height-tight);
margin-bottom: 11px;
}

.feature-arch__costs h2 {
line-height: 44px;
margin-bottom: 0;
width: 540px;
}

.feature-arch__better h2 {
font-size: var(--font-size-h4);
line-height: var(--line-height-heading);
margin-bottom: 17px;
}

.feature-arch__costs p,
.feature-arch__costs li,
.feature-arch__better p {
color: var(--color-deep-teal-1);
font-size: var(--font-size-body);
line-height: 23px;
}

.feature-arch__problem-copy p {
width: 450px;
}

.feature-arch__better p + p {
margin-top: 12px;
}

.feature-arch__result-title {
font-size: var(--font-size-body-lg) !important;
font-weight: 700;
line-height: 30px !important;
}

.feature-arch__result ul {
list-style: disc;
margin: 0;
padding-bottom: 24px;
padding-left: 27px;
width: 439px;
}

.feature-arch__summary {
width: 498px;
}

.feature-arch__visual {
inset: 0;
pointer-events: none;
position: absolute;
}

.feature-arch__bottle {
border-radius: 300px 300px 0 0;
height: 558px;
left: 467px;
overflow: hidden;
position: absolute;
top: 108px;
width: 473px;
z-index: 3;
}

.feature-arch__bg {
background-image: url("https://the-perfect-rim.techsolutionn.com/wp-content/uploads/2026/07/feature-bar-bg-figma.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
height: 131.72%;
left: -27.72%;
position: absolute;
top: -31.72%;
width: 155.39%;
}

.feature-arch__product {
left: 615px;
max-width: none;
position: absolute;
top: 0;
width: 177px;
z-index: 4;
}

.feature-arch__better {
color: var(--color-deep-teal-1);
left: 982px;
position: absolute;
top: 296px;
width: 298px;
}

.feature-arch__better .btn {
margin-top: 48px;
}

.feature-arch__badges {
left: 0;
position: absolute;
top: 516px;
}

.steps .section-heading {
margin-bottom: 32px;
max-width: 676px;
}

.steps {
margin-top: 0;
padding-block: 60px;
}

.steps h2 {
color: var(--color-deep-teal-2);
}

.step-card__content {
color: var(--color-deep-teal-1);
left: 32px;
position: absolute;
top: 32px;
width: 346px;
z-index: 2;
}

.step-card__content span {
color: var(--color-brown-sugar);
display: block;
font-family: var(--font-display);
font-size: var(--font-size-display-md);
font-weight: 950;
  line-height: 1.3864;
  margin-bottom: 16px;
}

.step-card__content h3 {
font-size: var(--font-size-h5);
margin-bottom: 8px;
}

.step-card:nth-child(1) .step-card__visual {
  height: 277px;
  left: 64px;
  top: 181px;
  width: 347px;
}

.step-card:nth-child(1) .step-card__visual img {
  height: 117.3%;
  left: -.17%;
  top: -7.15%;
  transform: scaleX(-1);
  width: 111%;
}

.step-card:nth-child(2) .step-card__visual {
  height: 297px;
  right: -.33px;
  top: 163px;
  width: 353px;
}

.step-card:nth-child(2) .step-card__visual img {
  height: 106.36%;
  left: -8.26%;
  top: 1.24%;
  transform: scaleX(-1);
  width: 107.97%;
}

.step-card:nth-child(3) .step-card__visual {
  height: 260px;
  right: 0;
  top: 194px;
  width: 348px;
}

.step-card:nth-child(3) .step-card__visual img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  width: 100%;
}

.operator-band {
margin-top: 0;
position: relative;
}

.operator-band__bg {
background-image: url("https://the-perfect-rim.techsolutionn.com/wp-content/uploads/2026/07/hospitality-bg-figma.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 865px;
left: 0;
-webkit-mask: url("../images/hospitality-mask-figma.svg") center / 100% 100% no-repeat;
mask: url("../images/hospitality-mask-figma.svg") center / 100% 100% no-repeat;
position: absolute;
top: 0;
width: 100%;
}

.operator-band__bg::before,
.operator-band__bg::after {
content: "";
inset: 0;
position: absolute;
}

.operator-band__bg::before {
background: var(--color-deep-teal-2);
mix-blend-mode: hue;
}

.operator-band__bg::after {
background: var(--color-deep-teal-1);
opacity: .6;
}

.operator-band::before,
.operator-band::after {
display: none;
}

.operator-band__inner {
min-height: 848px;
position: relative;
z-index: 3;
}

.operator-band__product {
height: 603px;
left: 137px;
position: absolute;
top: 138px;
width: 330px;
}

.operator-band__product img:nth-child(1) {
left: 0;
position: absolute;
top: 546px;
width: 208px;
}

.operator-band__product img:nth-child(2) {
left: 164px;
position: absolute;
top: 573px;
width: 139px;
}

.operator-band__product img:nth-child(3) {
height: 585px;
left: 15px;
object-fit: cover;
position: absolute;
top: 0;
width: 168.454px;
}

.operator-band__product img:nth-child(4) {
left: 164px;
position: absolute;
top: 428px;
width: 166px;
}

.operator-band__content {
color: var(--color-cream);
display: grid;
gap: 36px;
left: 591px;
position: absolute;
top: 138px;
width: 689px;
}

.operator-band__content h2,
.operator-band__content p {
color: var(--color-cream);
}

.operator-band__content .section-heading {
width: 631px;
}

.operator-band__content h2 {
width: 600px;
}

.feature-list {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 689px;
}

.feature-list ul {
display: flex;
flex-direction: column;
gap: 17px;
}

.feature-list li {
color: var(--color-cream);
font-size: var(--font-size-body-xl);
line-height: var(--line-height-body);
min-height: 29px;
padding-left: 29px;
position: relative;
}

.feature-list li::before {
background: url("../images/hospitality-check.svg") center / contain no-repeat;
content: "";
height: 22px;
left: 0;
position: absolute;
top: 3.5px;
width: 14.62px;
}

.operator-band__pour {
height: 335px;
position: absolute;
right: 0;
top: 699px;
width: 448px;
z-index: 3;
}

.operator-band__pour-shadow {
height: 83px;
left: 53px;
mix-blend-mode: multiply;
position: absolute;
top: 226px;
width: 278px;
}

.operator-band__pour-image {
height: 335px;
inset: 0;
object-fit: cover;
position: absolute;
width: 448px;
}

.experience__heading {
gap: 22px;
margin-bottom: 32px;
max-width: 778px;
width: 778px;
}

.experience {
margin-top: 0;
padding: 80px 0 100px;
position: relative;
}

.experience__mark {
height: 150px;
margin-inline: auto;
position: relative;
width: 54.037px;
}

.experience__mark-shadow {
height: 7.143px;
left: 0;
mix-blend-mode: multiply;
position: absolute;
top: 142.857px;
width: 54.037px;
}

.experience__mark-bottle {
height: 149.068px;
left: 5.711px;
object-fit: cover;
position: absolute;
top: 0;
width: 42.925px;
}

.experience__heading h2 {
color: var(--color-coral);
width: 778px;
}

.experience__grid {
align-items: start;
display: grid;
gap: 24px;
grid-template-columns: repeat(3, 1fr);
}

.experience-card {
color: var(--color-deep-teal-1);
display: flex;
flex-direction: column;
gap: 0;
text-align: center;
}

.experience-card h3 {
font-size: var(--font-size-h5);
margin-bottom: 8px;
}

.experience-card > img {
border-radius: var(--radius);
height: 350px;
margin-bottom: 16px;
object-fit: cover;
width: 100%;
}

.experience-card p {
line-height: var(--line-height-body-18);
margin-inline: auto;
max-width: 375px;
}

.experience-card:nth-child(3) p {
max-width: 353px;
}

.experience-card .btn {
align-self: center;
margin-top: 24px;
}

.ticker {
background: var(--color-gold);
color: var(--color-cream);
--ticker-unit: 458.5px;
margin-top: 0;
overflow: hidden;
padding-block: 24px;
position: relative;
}

.ticker__track {
align-items: center;
display: flex;
position: relative;
transform: translate3d(0, 0, 0);
width: max-content;
will-change: transform;
animation: ticker-scroll 24s linear infinite;
}

.ticker__group {
display: flex;
flex: none;
}

.ticker__item {
align-items: center;
display: flex;
flex: 0 0 var(--ticker-unit);
gap: 14px;
padding-left: 10px;
}

.ticker__item span {
font-family: var(--font-display);
font-size: var(--font-size-h3);
line-height: var(--line-height-tight);
text-transform: uppercase;
white-space: nowrap;
}

.ticker__item img {
height: 42px;
flex: 0 0 auto;
object-fit: contain;
width: 44.864px;
}

@keyframes ticker-scroll {
to { transform: translate3d(-50%, 0, 0); }
}

.final-cta {
background: var(--color-cream);
overflow: hidden;
padding: 135px 0 133.6875px;
position: relative;
text-align: center;
}

.final-cta::before {
background: rgba(252, 210, 95, .3);
bottom: -40px;
content: "";
filter: blur(50px);
left: 0;
position: absolute;
right: 0;
top: -40px;
}

.final-cta__palm {
height: auto;
position: absolute;
z-index: 1;
}

.final-cta__palm--left {
bottom: 0;
left: 0;
width: 164px;
}

.final-cta__palm--right {
right: 0;
top: 25px;
width: 164px;
}

.final-cta__inner {
display: grid;
gap: 32px;
justify-items: center;
margin-inline: auto;
position: relative;
width: 672px;
z-index: 2;
}

.final-cta__copy {
display: grid;
gap: 12px;
justify-items: center;
width: 672px;
}

.final-cta h2 {
color: var(--color-deep-teal-1);
width: 672px;
}

.final-cta__text {
display: grid;
gap: 12px;
width: 628px;
}

.final-cta__text p {
color: var(--color-deep-teal-1);
font-size: var(--font-size-body);
line-height: var(--line-height-body);
}

.final-cta__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}

.reveal,
.reveal.is-visible {
opacity: 1;
transform: none;
}

main {
--home-h2-size: var(--font-size-h2);
}

main [class] h2 {
font-size: var(--home-h2-size);
}

main .feature-arch__costs h2 {
font-size: var(--font-size-h3);
line-height: 44px;
width: 500px;
}

main .feature-arch__better h2 {
font-size: var(--font-size-h4);
line-height: 36px;
}

@media only screen and (max-width: 1366px) {
main {
  --home-h2-size: var(--font-size-h2-compact);
}
.intro__grid {
  gap: 66px;
}

.feature-arch__bottle {
  width: 430px;
}
}

@media only screen and (max-width: 1315px) and (min-width: 1200px) {
.container {
  width: calc(100% - 40px);
}
.feature-arch__better,
.operator-band__content {
  left: auto;
  right: 0;
}
}

@media only screen and (max-width: 1199px) {
.hero__content {
  left: var(--gutter);
  width: min(725px, calc(100vw - var(--gutter) - var(--gutter)));
}
.hero__text,
.hero h1 {
  width: 100%;
}
.intro__grid {
  gap: 42px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.comparison .section-heading {
  padding-top: 0;
}
.comparison {
  margin-top: 0;
}
.comparison > .container {
  gap: 32px;
}
.comparison__sticky {
  position: static;
}
.method-card--old .method-card__panel,
.method-card--new .method-card__panel {
  padding: 44px 38px;
}
.method-card {
  display: grid;
  height: auto;
  grid-template-columns: 1fr;
}
.comparison {
  padding-bottom: 0;
}
.method-card__image,
.method-card__panel,
.method-card--old .method-card__image,
.method-card--old .method-card__panel,
.method-card--new .method-card__image,
.method-card--new .method-card__panel {
  border-radius: 12px;
  height: auto;
  left: auto;
  margin-left: 0;
  position: relative;
  top: auto;
  width: 100%;
}
.method-card__image,
.method-card__image img {
  min-height: 0;
}
.feature-arch {
  margin-top: 100px;
  overflow: hidden;
  padding: 140px 0 76px;
}
.feature-arch__inner {
  display: grid;
  gap: 34px;
  min-height: 0;
  padding-bottom: 0;
}
.feature-arch__costs,
.feature-arch__better,
.feature-arch__visual {
  left: auto;
  position: relative;
  top: auto;
  width: 100%;
}
.feature-arch__costs h2 {
  width: auto;
}
.feature-arch__visual {
  height: 650px;
  margin-inline: auto;
  max-width: 560px;
  order: 2;
}
.feature-arch__costs {
  order: 1;
  min-width: 0;
  padding-bottom: 150px;
}
.feature-arch__better {
  order: 3;
}
.feature-arch__bottle {
  left: 50%;
  top: 92px;
  transform: translateX(-50%);
}
.feature-arch__product {
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
}
.operator-band::before,
.operator-band::after {
  display: none;
}
.feature-arch__badges {
  bottom: 0;
  top: auto;
}
.steps {
  margin-top: 90px;
  padding-bottom: 90px;
}
.steps__grid,
.experience__grid {
  grid-template-columns: repeat(2, 1fr);
}
.operator-band__inner {
  display: grid;
  gap: 40px;
  grid-template-columns: 340px 1fr;
  min-height: 0;
  padding-bottom: 0;
}
.operator-band__product {
  left: auto;
  position: relative;
  top: auto;
}
.operator-band__content {
  left: auto;
  position: relative;
  top: auto;
  width: 100%;
}
.operator-band {
  margin-top: 0;
  padding-block: 82px;
}
.operator-band__bg {
  height: 100%;
}
.experience {
  margin-top: 0;
  padding: 72px 0 90px;
}
.experience__heading {
  width: min(778px, 100%);
}
.experience__heading h2 {
  width: 100%;
}
.final-cta__inner,
.final-cta__copy,
.final-cta h2 {
  width: min(672px, 100%);
}
.final-cta__text {
  width: min(628px, 100%);
}
.ticker {
  margin-top: 0;
}
.operator-band__pour {
  opacity: .65;
}
.ticker__track {
  justify-content: flex-start;
  width: max-content;
}
}

@media only screen and (max-width: 1024px) {
.hero {
  min-height: 680px;
}
.hero__inner {
  min-height: 620px;
}
.intro__grid,
.operator-band__inner {
  grid-template-columns: 1fr;
}
.method-card {
  display: grid;
  height: auto;
  grid-template-columns: 1fr;
}
.method-card__image,
.method-card__panel,
.method-card--old .method-card__image,
.method-card--old .method-card__panel,
.method-card--new .method-card__image,
.method-card--new .method-card__panel {
  border-radius: 12px;
  height: auto;
  left: auto;
  margin-left: 0;
  position: relative;
  top: auto;
  width: 100%;
}
.method-card--new .method-card__image {
  order: -1;
}
.feature-arch__costs,
.feature-arch__better {
  margin-inline: auto;
  max-width: none;
  text-align: left;
}
.feature-arch__inner {
  padding-inline: 16px;
}
.operator-band__inner {
  gap: 24px;
  padding-block: 0;
}
.operator-band__product {
  height: 430px;
  left: auto;
  margin-inline: auto;
  position: relative;
  top: auto;
  transform: none;
  width: 250px;
}
.operator-band__product img:nth-child(1),
.operator-band__product img:nth-child(2) {
  display: none;
}
.operator-band__product img:nth-child(3) {
  height: auto;
  left: 0;
  width: 128px;
}
.operator-band__product img:nth-child(4) {
  left: 120px;
  top: 318px;
  width: 126px;
}
.operator-band__content {
  justify-items: center;
  left: auto;
  position: relative;
  top: auto;
  text-align: center;
  width: 100%;
}
.operator-band__pour {
  display: none;
}
.feature-list {
  width: min(689px, 100%);
  text-align: left;
}
}

@media only screen and (max-width: 899px) {
  .step-card__content {
    left: 24px;
    right: 24px;
    width: auto;
  }
  .step-card:nth-child(1) .step-card__visual,
  .step-card:nth-child(2) .step-card__visual,
  .step-card:nth-child(3) .step-card__visual {
    height: auto;
    left: auto;
    right: 0;
    top: auto;
  }
  .step-card:nth-child(1) .step-card__visual {
    aspect-ratio: 347 / 277;
    bottom: 0;
    width: min(82%, 347px);
  }
  .step-card:nth-child(2) .step-card__visual {
    aspect-ratio: 353 / 297;
    bottom: -2px;
    width: min(86%, 353px);
  }
  .step-card:nth-child(3) .step-card__visual {
    aspect-ratio: 348 / 260;
    bottom: 4px;
    width: min(85%, 348px);
  }
}

@media only screen and (max-width: 767px) {
main {
  --home-h2-size: var(--font-size-h2-mobile);
}
main .feature-arch__costs h2,
main .feature-arch__better h2 {
  font-size: var(--home-h2-size);
  width: auto;
}
.hero {
  background-image:
    var(--hero-side-shade),
    var(--hero-bottom-shade),
    url("https://the-perfect-rim.techsolutionn.com/wp-content/uploads/2026/07/home-hero-responsive.webp");
  background-position:
    left top 32px,
    left top 32px,
    center top 32px;
  background-size:
    100% calc(100% - 32px),
    100% calc(100% - 32px),
    cover;
  height: 820px;
  min-height: 820px;
}
.hero__inner {
  height: 820px;
  min-height: 820px;
}
.hero__content {
  gap: 24px;
  top: 220px;
}
.hero h1 {
  font-size: 34px;
  line-height: var(--line-height-hero-mobile);
}
.hero__copy,
.hero__support {
  width: 100%;
}
.hero__actions {
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}
.final-cta__actions {
  align-items: center;
  flex-direction: column;
}
.final-cta {
  padding-block: 100px;
}
.final-cta__palm--left,
.final-cta__palm--right {
  width: 110px;
}
.intro {
  padding-bottom: 80px;
  padding-top: 72px;
}
.intro__wordmark {
  margin-bottom: 40px;
  width: calc(100% - 40px);
}
.intro__grid {
  gap: 32px;
}
.intro h2 {
  line-height: var(--line-height-heading-compact);
}
.intro__copy p {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-relaxed);
}
.comparison__heading h2 {
  line-height: var(--line-height-heading-compact);
}
.comparison__heading p {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-relaxed);
}
.intro__image {
  aspect-ratio: 1.35;
}
.method-card__panel h3 {
  font-size: var(--font-size-h2-phone);
}
.method-card--old .method-card__panel,
.method-card--new .method-card__panel {
  padding: 36px 24px;
}
.method-list {
  gap: 16px;
  grid-template-columns: 1fr;
}
.method-list li {
  font-size: var(--font-size-body);
}
.feature-arch__visual {
  height: 520px;
}
.feature-arch {
  margin-top: 72px;
  padding: 112px 0 72px;
}
.feature-arch__wordmark {
  max-width: calc(100% - (var(--gutter) * 2));
  width: calc(100% - (var(--gutter) * 2));
}
.feature-arch__inner {
  gap: 48px;
  padding-inline: 12px;
}
.intro h2,
.comparison__heading h2,
.feature-arch__costs h2,
.feature-arch__better h2,
.steps h2,
.operator-band__content h2,
.experience__heading h2,
.final-cta h2 {
  font-size: var(--font-size-h2-mobile);
}
.feature-arch__costs h2,
.feature-arch__better h2 {
  line-height: var(--line-height-heading-compact);
}
.feature-arch__bottle {
  height: 430px;
  top: 70px;
  width: min(100%, 360px);
}
.feature-arch__product {
  top: -4px;
  width: 145px;
}
.feature-arch__badges {
  margin-inline: auto;
  margin-top: 32px;
  position: relative;
  width: min(439px, 100%);
}
.operator-band__content .section-heading,
.operator-band__content h2 {
  width: 100%;
}
.experience__heading,
.experience__heading h2 {
  width: 100%;
}
.feature-arch__costs {
  padding-bottom: 0;
}
.feature-arch__costs ul {
  max-width: 100%;
  width: 100%;
}
.feature-arch__problem-copy,
.feature-arch__problem-copy p,
.feature-arch__result,
.feature-arch__summary {
  max-width: 100%;
  width: 100%;
}
.steps__grid,
.experience__grid,
.feature-list {
  grid-template-columns: 1fr;
}
.step-card {
  height: 360px;
}
.step-card__content {
  left: 24px;
  right: 24px;
  width: auto;
}
.operator-band__pour {
  display: none;
}
.operator-band__product {
  height: 315px;
  margin-bottom: 8px;
}
.operator-band__product img:nth-child(3) {
  left: 44px;
  width: 88px;
}
.operator-band__product img:nth-child(4) {
  left: 128px;
  top: 214px;
  width: 98px;
}
.ticker span {
  font-size: var(--font-size-body-xl);
}
.ticker {
  --ticker-unit: 360px;
}
.ticker__item {
  gap: 12px;
}
.step-card:nth-child(1) .step-card__visual,
.step-card:nth-child(2) .step-card__visual,
.step-card:nth-child(3) .step-card__visual {
  width: min(76%, 280px);
}
}

@media only screen and (max-width: 479px) {
main {
  --home-h2-size: var(--font-size-h2-phone);
}
.hero {
  background-position:
    left top 32px,
    left top 32px,
    48% 32px;
  height: 840px;
  min-height: 840px;
}
.hero__inner {
  height: 840px;
  min-height: 840px;
}
.hero__content {
  gap: 24px;
  top: 205px;
}
.hero__kicker {
  font-size: var(--font-size-body-xl);
  line-height: var(--line-height-script-mobile);
}
.hero h1 {
  font-size: 28px;
  line-height: 1.2;
}
.hero__steps {
  font-size: var(--font-size-body);
}
.hero__copy {
  font-size: var(--font-size-body-sm);
  line-height: var(--line-height-body-phone);
}
.intro h2,
.comparison__heading h2,
.feature-arch__costs h2,
.feature-arch__better h2,
.steps h2,
.operator-band__content h2,
.experience__heading h2,
.final-cta h2 {
  font-size: var(--font-size-h2-phone);
}
.feature-list li {
  font-size: var(--font-size-body);
}
.experience-card > img {
  height: 280px;
}
}

@media only screen and (max-width: 374px) {
main {
  --home-h2-size: var(--font-size-h2-small-phone);
}
.hero {
  height: 880px;
  min-height: 880px;
}
.hero__inner {
  height: 880px;
  min-height: 880px;
}
.hero__content {
  top: 195px;
}
.hero h1 {
  font-size: 27px;
}
.step-card {
  height: 390px;
}
.feature-arch__bottle {
  height: 420px;
}
}

@media (prefers-reduced-motion: reduce) {
.comparison__sticky {
  position: static;
}
.ticker__track {
  animation-play-state: paused;
}
}