/* BBS — style strony, wersja do edycji. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/InterVariable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap
}

:root {
  --white: #FFFFFF;
  --paper-warm: #F8EBE2;
  --sand: #F2E0D3;
  --ink: #111110;
  --brick: #99724B;
  --font: "neue-haas-grotesk-display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --pad: clamp(1.25rem, 4.2vw, 5rem);
  --wrap: 120rem;
  --gutter: clamp(.75rem, 1.6vw, 1.75rem);
  --hair: 1px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --swap: .8s var(--ease);
}

body.mode-n {
  --bg: #FFFFFF;
  --bg-2: #F4EBE3;
  --fg: #15100B;
  --fg-soft: rgba(21, 16, 11, .58);
  --rule: rgba(117, 99, 82, .28);
  --accent: #756352;
  --btn-bg: #15100B;
  --btn-fg: #FFFFFF;
  --btn-hover: #756352;
  --bloom-1: rgba(157, 134, 112, .24);
  --bloom-2: rgba(244, 235, 227, .95);
  --bloom-3: rgba(230, 212, 197, .7);
  --ph-a: #E6D4C5;
  --ph-b: #C8AB8F;
  --tint: #F4EBE3;
  --tint-2: #E6D4C5;
  --promo: #4F4236;
  --promo-fg: #F4EBE3;
}

body.mode-w {
  --bg: #FFFFFF;
  --bg-2: #F8EBE2;
  --fg: #111110;
  --fg-soft: rgba(23, 15, 8, .60);
  --rule: rgba(157, 134, 112, .38);
  --accent: #99724B;
  --btn-bg: #111110;
  --btn-fg: #F8EBE2;
  --btn-hover: #99724B;
  --bloom-1: rgba(153, 114, 75, .22);
  --bloom-2: rgba(248, 235, 226, .95);
  --bloom-3: rgba(242, 224, 211, .8);
  --ph-a: #F8EBE2;
  --ph-b: #F2E0D3;
  --tint: #F8EBE2;
  --tint-2: #F2E0D3;
  --promo: #99724B;
  --promo-fg: #F8EBE2;
}

body.mode-m {
  --bg: #FFFFFF;
  --bg-2: #E5E3E1;
  --fg: #111110;
  --fg-soft: rgba(17, 17, 16, .58);
  --rule: rgba(48, 46, 45, .24);
  --accent: #4F4236;
  --btn-bg: #111110;
  --btn-fg: #FFFFFF;
  --btn-hover: #4F4236;
  --bloom-1: rgba(79, 66, 54, .16);
  --bloom-2: rgba(229, 227, 225, .95);
  --bloom-3: rgba(192, 187, 182, .55);
  --ph-a: #E5E3E1;
  --ph-b: #C0BBB6;
  --tint: #E5E3E1;
  --tint-2: #C0BBB6;
  --promo: #2B241C;
  --promo-fg: #E6D4C5;
}

*,
*::before,
*::after {
  box-sizing: border-box
}

[hidden] {
  display: none !important
}

html {
  color-scheme: only light;
  background: var(--white);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -.011em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--swap), color var(--swap);
}

img,
svg {
  display: block;
  max-width: 100%
}

button,
input,
select,
textarea {
  font-family: inherit
}

a {
  color: inherit;
  text-decoration: none
}

::selection {
  background: var(--fg);
  color: var(--bg)
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  padding-inline: var(--pad);
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto
}

.label {
  font-size: var(--fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: var(--fg-soft);
  line-height: 1.2;
  transition: color var(--swap)
}

:root {
  --fs-h1: clamp(2.25rem, 4.6vw, 4.4rem);
  --fs-h2: clamp(1.85rem, 4.6vw, 3.9rem);
  --fs-h2-s: clamp(1.5rem, 2.6vw, 2.2rem);
  --fs-h3: clamp(1.3rem, 2.1vw, 1.75rem);
  --fs-h4: clamp(1.02rem, 1.4vw, 1.28rem);
  --fs-lead: clamp(1.02rem, 1.35vw, 1.32rem);
  --fs-body: clamp(.94rem, 1.02vw, 1.0625rem);
  --fs-body-s: clamp(.86rem, .95vw, .97rem);
  --fs-small: .82rem;
  --fs-micro: .72rem;
  --fs-label: .62rem;
  --fs-nano: .54rem;

  --fs-num-l: clamp(1.8rem, 3.6vw, 3rem);
  --fs-num-m: clamp(1.5rem, 2.6vw, 2.2rem);
  --fs-num-s: clamp(1.15rem, 2vw, 1.6rem);

  --lh-tight: 1.02;
  --lh-head: 1.2;
  --lh-body: 1.55;
  --lh-lead: 1.6;
  --ls-body: -.014em;
}

b,
strong {
  font-weight: 500
}

.mock b,
.mock strong,
.phone b,
.phone strong {
  font-weight: 700
}

.mega {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -.035em;
  margin: 0
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -.04em;
  margin: 0
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: var(--lh-head);
  letter-spacing: -.025em;
  margin: 0
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-body);
  max-width: 46ch
}

.body-s {
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--fg-soft);
  max-width: 48ch;
  transition: color var(--swap)
}

.small {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-soft)
}

.ico {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto
}

.ico--lg {
  width: 28px;
  height: 28px
}

.ico--sm {
  width: 15px;
  height: 15px
}

.blooms {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden
}

body.is-idle .bloom,
html.is-locked .bloom {
  animation-play-state: paused
}

.bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  transition: background var(--swap);
  will-change: transform;
  contain: layout style
}

.bloom--1 {
  width: 66vw;
  height: 66vw;
  top: -20vw;
  right: -12vw;
  background: radial-gradient(circle, var(--bloom-1), transparent 68%);
  animation: drift1 36s ease-in-out infinite alternate
}

.bloom--2 {
  width: 56vw;
  height: 56vw;
  top: 46vh;
  left: -18vw;
  background: radial-gradient(circle, var(--bloom-2), transparent 70%);
  animation: drift2 44s ease-in-out infinite alternate
}

.bloom--3 {
  width: 50vw;
  height: 50vw;
  bottom: -16vw;
  right: -8vw;
  background: radial-gradient(circle, var(--bloom-3), transparent 72%);
  animation: drift1 40s ease-in-out infinite alternate-reverse
}

@keyframes drift1 {
  from {
    transform: translate3d(0, 0, 0) scale(1)
  }

  to {
    transform: translate3d(-5vw, 6vh, 0) scale(1.12)
  }
}

@keyframes drift2 {
  from {
    transform: translate3d(0, 0, 0) scale(1)
  }

  to {
    transform: translate3d(6vw, -6vh, 0) scale(1.1)
  }
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")
}

main,
.nav,
.footer {
  position: relative;
  z-index: 1
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.8rem, 1.6vw, 1.25rem) max(var(--pad), (100vw - var(--wrap)) / 2 + var(--pad));
  background: var(--bg);
  isolation: isolate;
  border-bottom: var(--hair) solid transparent;
  transition: background var(--swap), border-color .4s ease
}

.nav.stuck {
  background: var(--bg);
  border-bottom-color: var(--rule)
}

.nav__home {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: lowercase
}

.nav__home .ico {
  opacity: .5;
  transition: opacity .3s ease, transform .4s var(--ease)
}

.nav__home:hover .ico {
  opacity: 1;
  transform: translateX(-2px)
}

body.mode-n .nav__home .ico {
  display: none
}

.nav__appicon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 24%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #E8DBD1 0%, #99897A 52%, #493622 100%)
}

.nav__appicon img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  display: block
}

.nav__wordmark {
  text-transform: none;
  letter-spacing: .06em
}

.nav__suffix {
  font-style: normal;
  font-weight: 400;
  white-space: pre
}

.nav__suffix.is-typing::after {
  content: "|";
  opacity: .5;
  font-weight: 400
}

.nav__right {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 1.8vw, 1.6rem)
}

.switch {
  display: inline-flex;
  position: relative;
  padding: 3px;
  border: var(--hair) solid var(--rule);
  border-radius: 999px;
  transition: border-color var(--swap)
}

.switch__thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  background: var(--btn-bg);
  border-radius: 999px;
  transition: transform .55s var(--ease), background-color var(--swap), opacity .4s ease
}

body.mode-n .switch__thumb {
  opacity: 0
}

body.mode-m .switch__thumb {
  transform: translateX(100%)
}

.switch button {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .6rem clamp(.7rem, 1.4vw, 1.05rem);
  color: var(--fg);
  transition: color .4s ease;
  white-space: nowrap
}

body.mode-w .switch button[data-mode="w"],
body.mode-m .switch button[data-mode="m"] {
  color: var(--btn-fg)
}

.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: .62rem .95rem;
  transition: background-color var(--swap), color var(--swap), opacity .3s ease
}

.nav__cta:hover {
  opacity: .82
}

@media (max-width:720px) {
  .switch button {
    padding: .6rem .85rem;
    gap: 0
  }

  .switch__txt {
    display: none
  }

  .nav__cta {
    padding: .62rem;
    border-radius: 999px
  }

  .nav__cta span {
    display: none
  }
}

.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.2rem, 3.5vw, 3rem);
  padding: 1.05rem 1.3rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
  border: 0;
  transition: background-color var(--swap), color var(--swap)
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-hover);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s var(--ease);
  z-index: -1
}

.cta:hover::before,
.cta:focus-visible::before {
  transform: scaleY(1)
}

.cta .ico {
  transition: transform .45s var(--ease)
}

.cta:hover .ico {
  transform: translateX(5px)
}

.ph--strongsexy {
  background: linear-gradient(150deg, #C98CA0, #7A4058) !important
}

.ph--fitbody {
  background: linear-gradient(150deg, #F0D4D9, #D9A8B3) !important
}

.ph--homebootyabs {
  background: linear-gradient(150deg, #D99A82, #A8604A) !important
}

.ph--homeslim {
  background: linear-gradient(150deg, #CBD3E3, #94A3C4) !important
}

.ph--shaperun {
  background: linear-gradient(150deg, #9B8CC2, #5C4A80) !important
}

.ph--busygirl {
  background: linear-gradient(150deg, #E8BFA0, #C98F72) !important
}

.ph--trainlikeme {
  background: linear-gradient(150deg, #5E3A63, #241726) !important
}

.ph--fundamenty {
  background: linear-gradient(150deg, #AEB9C7, #71808F) !important
}

.ph--ceo {
  background: linear-gradient(150deg, #4C5A72, #232E3F) !important
}

.ph--estetyka {
  background: linear-gradient(150deg, #5C6774, #2C333C) !important
}

.ph--summershape {
  background: linear-gradient(150deg, #8FA9BC, #4F6B80) !important
}

.ph--powerbuilding {
  background: linear-gradient(150deg, #6E2E3C, #2C1016) !important
}

.ph--domm {
  background: linear-gradient(150deg, #3C4553, #191E26) !important
}

.ph--bootyqueen {
  background: linear-gradient(150deg, #8B6BA8, #4A2E63) !important
}

.program__media .ph::after {
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .35)
}

.ph {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(145deg, var(--ph-a), var(--ph-b));
  border: var(--hair) solid var(--rule);
  transition: background var(--swap), border-color var(--swap)
}

.ph::after {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1rem;
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-soft);
  white-space: pre-line;
  line-height: 2
}

.ph__img {
  display: none
}

.ph__img[src]:not([src=""]):not(.is-broken) {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1
}

.ph:has(.ph__img[src]:not([src=""]):not(.is-broken))::after {
  content: none
}

.ph--1x1 {
  aspect-ratio: 1/1
}

.ph img,
.ph video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.hero {
  position: relative;
  padding-top: calc(clamp(8.5rem, 17vh, 12.5rem) + var(--promo-h));
  padding-bottom: clamp(3.5rem, 8vh, 6rem)
}

.wizard {
  grid-column: 1 / span 8;
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  padding: clamp(1.4rem, 3vw, 2.6rem);
  transition: background-color var(--swap), border-color var(--swap)
}

.wizard__side {
  grid-column: 10 / span 3;
  align-self: start;
  padding-top: .4rem
}

.wizard__side ul {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0
}

.wizard__side li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .5rem 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg-soft)
}

.wizard__side .ico {
  color: var(--accent);
  margin-top: .1rem
}

@media (min-width:1500px) {
  :root {
    --pad: clamp(5rem, 7vw, 10rem)
  }
}

@media (max-width:980px) {

  .wizard,
  .wizard__side {
    grid-column: 1 / -1
  }

  .wizard__side {
    margin-top: 2rem
  }
}

.wz__bar {
  height: 2px;
  background: var(--rule);
  margin: 1rem 0 1.8rem;
  position: relative;
  overflow: hidden
}

.wz__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  width: 0;
  transition: width .5s var(--ease)
}

.wz__step {
  animation: fadeUp .5s var(--ease) both
}

.wz__q {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin: 0 0 .5rem
}

.wz__hint {
  font-size: var(--fs-small);
  color: var(--fg-soft);
  margin: 0 0 1.4rem;
  line-height: 1.5
}

.wz__opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem
}

@media (max-width:620px) {
  .wz__opts {
    grid-template-columns: 1fr
  }
}

.wz__opt {
  appearance: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--fg);
  background: transparent;
  border: var(--hair) solid var(--rule);
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--fs-body-s);
  letter-spacing: -.015em;
  transition: border-color .3s ease, background-color .3s ease, transform .4s var(--ease)
}

.wz__opt:hover {
  border-color: var(--fg);
  transform: translateY(-2px)
}

.wz__opt[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--tint)
}

.wz__opt .ico {
  color: var(--accent)
}

.wz__opt small {
  display: block;
  font-size: var(--fs-micro);
  color: var(--fg-soft);
  margin-top: .25rem;
  line-height: 1.4
}

.wz__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem
}

@media (max-width:620px) {
  .wz__fields {
    grid-template-columns: 1fr
  }
}

.field label,
.field .field__label {
  display: block;
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fg-soft);
  margin-bottom: .5rem
}

.field input {
  width: 100%;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: var(--hair) solid var(--rule);
  padding: .7rem 0;
  transition: border-color .3s ease
}

.field input:focus {
  outline: 0;
  border-bottom-color: var(--accent)
}

.field input::placeholder {
  color: var(--fg-soft)
}

.wz__nav {
  display: flex;
  gap: .8rem;
  align-items: center;
  margin-top: 1.8rem;
  flex-wrap: wrap
}

.wz__back {
  appearance: none;
  background: none;
  border: 0;
  font-family: inherit;
  color: var(--fg-soft);
  cursor: pointer;
  font-size: var(--fs-small);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 0
}

.wz__back:hover {
  color: var(--fg)
}

.wz__err {
  font-size: var(--fs-small);
  color: var(--accent);
  margin: .8rem 0 0
}

.wz__result {
  animation: fadeUp .6s var(--ease) both;
  scroll-margin-top: 5.5rem
}

.wz__top {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: clamp(1rem, 2.4vw, 1.8rem)
}

.wz__head {
  flex: 1 1 auto;
  min-width: 0
}

.wz__cover {
  flex: 0 0 auto;
  width: clamp(6rem, 13vw, 9.5rem)
}

@media (max-width:640px) {
  .wz__top {
    flex-direction: column;
    gap: 1rem
  }

  .wz__cover {
    width: clamp(7rem, 40vw, 11rem)
  }
}

.wz__eyebrow {
  margin-bottom: .9rem
}

.wz__name {
  font-size: var(--fs-num-l);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.02;
  margin: 0 0 1.1rem
}

.wz__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.4rem
}

.chip {
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  border: var(--hair) solid var(--rule);
  padding: .42rem .7rem;
  color: var(--fg-soft);
  display: inline-flex;
  align-items: center;
  gap: .4rem
}

.chip .ico {
  color: var(--accent)
}

.wz__why p {
  font-size: var(--fs-body-s);
  line-height: 1.6;
  margin: 0 0 .8rem;
  max-width: 56ch
}

.wz__upsell {
  margin-top: 1.8rem;
  background: var(--tint);
  border-left: 2px solid var(--accent);
  padding: 1.2rem 1.3rem
}

.wz__upsell h4 {
  margin: 0 0 .6rem;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -.02em
}

.wz__upsell p {
  margin: 0 0 .5rem;
  font-size: var(--fs-body-s);
  line-height: 1.55;
  color: var(--fg-soft)
}

.wz__math {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin: 1rem 0 .2rem
}

.wz__math div {
  font-size: var(--fs-micro);
  color: var(--fg-soft);
  line-height: 1.4
}

.wz__math b {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -.02em;
  margin-bottom: .2rem
}

.wz__actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.6rem
}

.wz__alt {
  font-size: var(--fs-small);
  color: var(--fg-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px
}

.wz__alt:hover {
  color: var(--fg);
  border-bottom-color: var(--fg)
}

.consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  margin-top: 1.3rem;
  cursor: pointer
}

.consent input {
  appearance: none;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: .15rem;
  border: var(--hair) solid var(--rule);
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color .3s ease, background-color .3s ease
}

.consent input:checked {
  background: var(--accent);
  border-color: var(--accent)
}

.consent input:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--bg);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg)
}

.consent span {
  font-size: var(--fs-micro);
  line-height: 1.55;
  color: var(--fg-soft)
}

.consent b {
  font-weight: 500;
  color: var(--fg)
}

.consent a {
  border-bottom: 1px solid var(--rule)
}

.consent a:hover {
  color: var(--fg);
  border-bottom-color: var(--fg)
}

.wz__ok {
  font-size: var(--fs-small);
  color: var(--accent);
  margin: .9rem 0 0
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .95rem;
  margin-top: .9rem;
  font-size: var(--fs-label);
  color: var(--fg-soft);
  line-height: 1.4
}

.trust span {
  display: inline-flex;
  align-items: center;
  gap: .35rem
}

.trust .ico {
  width: 13px;
  height: 13px;
  color: var(--accent)
}

.trust b {
  font-weight: 500;
  letter-spacing: .06em
}

.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 65;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: var(--hair) solid var(--rule);
  transform: translateY(110%);
  transition: transform .45s var(--ease), background var(--swap)
}

.buybar.is-on {
  transform: none
}

.buybar__info {
  line-height: 1.25;
  min-width: 0
}

.buybar__info strong {
  display: block;
  font-size: var(--fs-body-s);
  font-weight: 500;
  letter-spacing: -.02em
}

@media (min-width:761px) {
}

.buybar__info small {
  display: block;
  font-size: var(--fs-micro);
  color: var(--fg-soft);
  margin-top: .1rem
}

.buybar .cta {
  width: auto;
  min-width: 0;
  padding: .85rem 1.1rem;
  font-size: var(--fs-small);
  gap: .55rem;
  flex: 0 0 auto;
  white-space: nowrap
}

.buybar .cta span {
  white-space: nowrap
}

@media (max-width:820px) {
  .buybar {
    display: flex
  }
}

.ratings {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 3rem;
  align-items: center;
  border-top: var(--hair) solid var(--rule);
  padding-top: 1.4rem;
  margin-top: .6rem
}

.rate {
  display: flex;
  align-items: center;
  gap: .8rem;
  transition: color .3s ease
}

.rate:hover .rate__n,
.rate:focus-visible .rate__n {
  color: var(--accent)
}

.hx__rate:hover b,
.hx__rate:focus-visible b {
  color: var(--accent)
}

.rate__n {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1
}

.rate__meta {
  font-size: var(--fs-micro);
  color: var(--fg-soft);
  line-height: 1.35
}

.rate__stars {
  color: #D4A72C;
  font-size: var(--fs-small);
  letter-spacing: .14em
}

.steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter)
}

.step {
  border-top: var(--hair) solid var(--rule);
  padding-top: 1.1rem
}

.step__n {
  font-size: var(--fs-label);
  letter-spacing: .2em;
  color: var(--accent);
  display: block;
  margin-bottom: .7rem
}

.step p {
  margin: .5rem 0 0;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: var(--fg-soft)
}

@media (max-width:820px) {
  .steps {
    grid-template-columns: 1fr
  }
}

.program__more {
  border-top: 0;
  margin-top: .9rem
}

.program__more summary {
  padding: .6rem 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--fg-soft);
  border-top: var(--hair) solid var(--rule)
}

.program__more summary:hover {
  color: var(--fg)
}

.program__more summary .ico {
  width: 14px;
  height: 14px
}

.program__more ul {
  list-style: none;
  padding: 0;
  margin: .2rem 0 1rem
}

.program__more li {
  display: flex;
  gap: .6rem;
  font-size: var(--fs-small);
  line-height: 1.45;
  padding: .3rem 0;
  color: var(--fg-soft)
}

.program__more li b {
  color: var(--fg);
  font-weight: 500;
  min-width: 4.6rem;
  flex: 0 0 auto
}

html.is-loading,
html.is-loading body {
  overflow: hidden
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #FFFFFF;
  color: #111110;
  transition: background-color .5s var(--ease), color .5s var(--ease), opacity .6s var(--ease);
}

.preloader.pre--dark {
  background: #111110;
  color: #E5E3E1
}

.preloader.is-done {
  opacity: 0;
  pointer-events: none
}

.pre__mark {
  position: relative;
  display: flex;
  align-items: baseline;
  font-size: clamp(1.5rem, 5.2vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -.035em;
  padding-inline: 1.25rem;
}

.pre__caret {
  display: inline-block;
  width: .06em;
  height: 1em;
  margin-left: .06em;
  background: currentColor;
  transform: translateY(.08em);
  animation: preBlink 1s steps(1) infinite;
}

@keyframes preBlink {

  0%,
  50% {
    opacity: 1
  }

  51%,
  100% {
    opacity: 0
  }
}

.pre__meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-inline: clamp(1.25rem, 4.2vw, 5rem);
  font-size: var(--fs-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .5
}

.pre__skip {
  appearance: none;
  background: none;
  border: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  font-size: var(--fs-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .4s ease
}

.pre__skip.is-on {
  opacity: 1
}

.pre__skip:hover {
  text-decoration: underline
}

.showcase {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: 2.5rem;
  align-items: center
}

.sc__head-top {
  grid-column: 1 / span 5;
  grid-row: 1;
  margin-bottom: -.6rem
}

.sc__head-top .h2 {
  margin-top: .9rem
}

.sc__list {
  grid-column: 1 / span 5;
  grid-row: 2
}

.sc__stage {
  grid-column: 7 / span 6;
  grid-row: 1 / span 2;
  align-self: center;
  position: relative;
  width: 100%;
  --slide: 38%;
  --sgap: 4%
}

.sc__item {
  position: relative;
  padding-top: 1px
}

.sc__prog {
  display: block;
  height: 1px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
  transition: background-color var(--swap)
}

.sc__prog i {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background: var(--accent)
}

.sc__item:last-child::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--rule)
}

.sc__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  font-family: inherit;
  color: var(--fg-soft);
  cursor: pointer;
  text-align: left;
  transition: color .45s var(--ease)
}

.sc__item.is-on .sc__head {
  color: var(--fg)
}

.sc__head h3 {
  flex: 1;
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: -.026em
}

.sc__head .ico {
  color: var(--accent);
  opacity: .35;
  transition: opacity .45s var(--ease), transform .45s var(--ease)
}

.sc__item.is-on .sc__head .ico {
  opacity: 1;
  transform: scale(1.06)
}

.sc__meta {
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .7
}

.sc__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s var(--ease)
}

.sc__item.is-on .sc__body {
  grid-template-rows: 1fr
}

.sc__inner {
  overflow: hidden
}

.sc__inner>div {
  padding-bottom: 1.6rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s var(--ease) .12s, transform .5s var(--ease) .12s
}

.sc__item.is-on .sc__inner>div {
  opacity: 1;
  transform: none
}

.sc__inner .flist {
  margin-top: 1rem
}

.sc__screens {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding-block: .75rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%)
}

.sc__track {
  display: flex;
  gap: var(--sgap);
  width: 100%;
  touch-action: pan-y;
  transform: translateX(0);
  will-change: transform;
  transition: transform .75s cubic-bezier(.22, 1, .36, 1)
}

.sc__screen {
  flex: 0 0 var(--slide);
  position: static;
  opacity: .42;
  transform: scale(.86);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  cursor: pointer
}

.sc__screen.is-on {
  opacity: 1;
  transform: scale(1);
  cursor: default
}

.sc__screen .mock {
  aspect-ratio: 9/19.5;
  height: auto
}

.sc__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.25rem;
  flex-wrap: wrap
}

.sc__badges {
  position: relative;
  left: auto;
  bottom: auto;
  width: auto;
  height: auto;
  min-height: 3.2rem;
  flex: 1 1 12rem
}

.sc__badge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .15rem;
  background: none;
  border: 0;
  padding: 0;
  font-size: var(--fs-label);
  letter-spacing: .02em;
  color: var(--fg-soft);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), color var(--swap)
}

.sc__badge.is-on {
  opacity: 1;
  transform: none
}

.sc__badge b {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  transition: color var(--swap)
}

.sc__dots {
  display: flex;
  gap: 6px;
  flex: 0 0 auto
}

.sc__dot {
  appearance: none;
  padding: 0;
  border: 0;
  width: 22px;
  height: 2px;
  cursor: pointer;
  background: var(--rule);
  transition: background-color .35s ease
}

.sc__dot.is-on {
  background: var(--accent)
}

.mock {
  --gap: .62rem;
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(168deg, var(--tint) 0%, var(--bg) 55%);
  border: var(--hair) solid var(--rule);
  border-radius: 22px;
  padding: 6.5% 6% 4%;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  transition: background var(--swap), border-color var(--swap)
}

.mock__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--gap)
}

.mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: var(--gap);
  flex: 0 0 auto
}

.mock__navbtn {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--tint-2);
  display: grid;
  place-items: center;
  flex: 0 0 auto
}

.mock__navbtn--flat {
  background: none
}

.mock__navbtn .ico {
  width: 10px;
  height: 10px;
  stroke: var(--fg);
  stroke-width: 2.2
}

.mock__navtitle {
  flex: 1;
  text-align: center;
  font-size: .66rem;
  font-weight: 700;
  color: var(--fg)
}

.mock__brand {
  font-size: .84rem;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -.01em
}

.mock__avatar {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  flex: 0 0 auto
}

.mock__avatar .ico {
  width: 9px;
  height: 9px;
  stroke: var(--bg);
  stroke-width: 2.2
}

.mock__navbottom {
  display: flex;
  justify-content: space-between;
  gap: .15rem;
  flex: 0 0 auto;
  margin-top: var(--gap);
  padding-top: .45rem;
  border-top: var(--hair) solid var(--rule)
}

.mock__navbottom span {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  color: var(--fg-soft);
  transition: color .3s ease
}

.mock__navbottom span.is-on {
  color: var(--accent)
}

.mock__navbottom .ico {
  width: 11px;
  height: 11px;
  stroke-width: 1.7
}

.mock__navbottom i {
  font-style: normal;
  font-size: .38rem;
  letter-spacing: .01em;
  line-height: 1
}

.sc__stage {
  min-width: 0;
  background: linear-gradient(168deg, var(--tint) 0%, var(--bg) 62%);
  border: var(--hair) solid var(--rule);
  border-radius: clamp(1rem, 1.6vw, 1.4rem);
  padding: clamp(1rem, 1.8vw, 1.5rem);
  transition: background var(--swap), border-color var(--swap)
}

.sc__nav {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 0 0 auto
}

.sc__arrow {
  appearance: none;
  background: none;
  cursor: pointer;
  color: var(--fg);
  width: 2rem;
  height: 2rem;
  border: var(--hair) solid var(--rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color .3s ease, background-color .3s ease
}

.sc__arrow:hover {
  border-color: var(--fg);
  background: color-mix(in srgb, var(--fg) 6%, transparent)
}

.sc__arrow .ico {
  stroke-width: 2
}

.sc__badges {
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  border-radius: 12px;
  padding: .75rem .9rem;
  min-height: 4.1rem;
  flex: 1 1 12rem;
  transition: background-color var(--swap), border-color var(--swap)
}

.sc__badge {
  inset: .75rem .9rem
}

.sc__badge b {
  font-size: 1.35rem
}

@media (max-width:900px) {
  .sc__stage {
    padding: clamp(.9rem, 3vw, 1.3rem)
  }

  .sc__track {
    align-items: center
  }

  .sc__screen {
    flex: 0 0 auto
  }

  .sc__screen .phone {
    height: clamp(18rem, 46vh, 25rem)
  }

  .sc__foot {
    gap: .9rem;
    flex-wrap: nowrap;
    align-items: stretch
  }

  .sc__badges {
    flex: 1 1 auto;
    min-width: 0
  }

  .sc__nav {
    flex-direction: column;
    justify-content: center;
    gap: .4rem
  }

  .sc__dots {
    display: none
  }
}

@media (max-width:560px) {
  .sc__badge b {
    font-size: 1.2rem
  }

  .sc__badge {
    font-size: var(--fs-label)
  }
}

@media (max-width:900px) {
  .showcase {
    grid-template-columns: 1fr
  }

  .sc__head-top {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0
  }

  .sc__list {
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    flex-direction: column
  }

  .sc__list.is-picked .sc__item.is-on {
    order: -1
  }

  .sc__stage {
    grid-column: 1 / -1;
    grid-row: 2;
    --slide: 56%;
    --sgap: 5%
  }
}

@media (max-width:600px) {
  .sc__stage {
    --slide: 64%;
    --sgap: 6%;
  }

  .sc__foot {
    gap: .9rem
  }
}

/* the promo band is pinned to the top of the screen, right under .topbanner (--banner-h); .nav moves
   down by --promo-h (its height: a CSS estimate here, measured exactly by main.js; 0 once hidden) */
:root {
  --promo-h: 0px
}

:root:has(.promoband:not([hidden])) {
  --promo-h: 76px
}

.promoband {
  position: fixed;
  top: var(--banner-h);
  left: 0;
  right: 0;
  z-index: 95;
  background: var(--promo);
  color: var(--promo-fg);
  padding-block: .7rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--swap), filter .3s ease
}

/* the band links to the pricing (main.js, like .nav__cta) */
.promoband:hover {
  filter: brightness(1.12)
}

.promoband__in {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem
}

.promoband__lead {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 0
}

.promoband__lead .ico {
  width: 26px;
  height: 26px;
  opacity: .85;
  flex: 0 0 auto
}

.promoband strong {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: -.02em
}

.promoband small {
  display: block;
  font-size: var(--fs-micro);
  opacity: .78;
  margin-top: .15rem
}

.promoband__right {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap
}

.promocode {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 1px dashed rgba(248, 235, 226, .55);
  padding: .55rem .8rem;
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .3s ease
}

.promocode:hover {
  background: rgba(248, 235, 226, .12)
}

.promocode b {
  font-weight: 500;
  letter-spacing: .2em
}

.promoclock {
  display: flex;
  gap: .7rem;
  font-variant-numeric: tabular-nums
}

.promoclock div {
  text-align: center;
  min-width: 2.6rem
}

.promoclock b {
  display: block;
  font-size: var(--fs-num-s);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1
}

.promoclock span {
  font-size: var(--fs-nano);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75
}

.plan--feat {
  border-color: var(--promo)
}

.plan__flag {
  background: var(--promo);
  color: var(--promo-fg)
}

/* compact promo block in a plan card (promo_price shortcode): "Zyskaj dodatkowe −<percent>% z kodem: <code>"
   and the countdown, both centred, in the promo colours like .promoband; reuses .promoclock; tapping it copies the code */
.plan__promo {
  margin-bottom: 1.5rem;
  padding: .9rem .95rem 1rem;
  background: var(--promo);
  color: var(--promo-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter .3s ease
}

/* the whole block copies the code (main.js, [data-promo-copy]) */
.plan__promo:hover {
  filter: brightness(1.12)
}

.plan__promo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -5px
}

.plan__promo-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  margin: 0 0 .75rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase
}

.plan__promo-head i {
  font-style: normal;
  font-weight: 700;
  font-size: 1.5em;
  letter-spacing: -.01em
}

/* the code: inverted colours of the block (text colour as background), same size as the percentage */
.plan__promo-head b {
  display: inline-block;
  padding: .15rem .45rem;
  font-size: 1.5em;
  background: var(--promo-fg);
  color: var(--promo);
  font-weight: 700
}

.plan__promo .promoclock {
  justify-content: center;
  gap: .45rem
}

.plan__promo .promoclock div {
  min-width: 2.1rem
}

.plan__promo .promoclock b {
  font-size: 1.15rem
}

@media (max-width:760px) {
  :root:has(.promoband:not([hidden])) {
    --promo-h: 92px
  }

  .promoband {
    padding-block: .55rem
  }

  .promoband__in {
    justify-content: center;
    gap: .45rem 1rem
  }

  .promoband__lead {
    text-align: center
  }

  .promoband__lead .ico,
  .promoband small {
    display: none
  }

  .promoband strong {
    font-size: var(--fs-body)
  }

  .promoband__right {
    justify-content: center;
    gap: .8rem;
    flex-wrap: nowrap
  }

  .promocode {
    padding: .4rem .6rem
  }

  .promoclock {
    gap: .4rem
  }

  .promoclock div {
    min-width: 2rem
  }

  .promoclock b {
    font-size: 1.1rem
  }
}

:root {
  --banner-h: 40px
}

@media (max-width:640px) {
  :root {
    --banner-h: 36px
  }
}

body.banner-off {
  --banner-h: 0px
}

body.banner-off .topbanner {
  display: none
}

.topbanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--ink);
  color: var(--paper-warm);
  padding-inline: var(--pad)
}

.topbanner__btn {
  appearance: none;
  background: none;
  border: 0;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem 0;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%
}

.topbanner__btn b {
  font-weight: 500;
  color: var(--sand)
}

.topbanner__btn .ico {
  width: 14px;
  height: 14px;
  transition: transform .4s var(--ease)
}

.topbanner__btn:hover .ico {
  transform: translateX(4px)
}

.topbanner__btn i {
  font-style: normal
}

/* Booty Queen sign-up countdown (added) */
.topbanner__clock {
  font-variant-numeric: tabular-nums;
  color: var(--sand)
}

.topbanner__clock[hidden] {
  display: none
}

.topbanner__digit {
  display: inline-block;
  width: 1ch;
  text-align: center
}

@media (min-width:641px) {
  #bannerTxt i::before {
    content: "· "
  }
}

@media (max-width:640px) {
  .topbanner__btn i {
    display: none
  }

  .topbanner__btn {
    font-size: var(--fs-label);
    letter-spacing: .1em
  }
}

.topbanner__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brick);
  flex: 0 0 auto;
  animation: bnrPulse 2.4s ease-in-out infinite
}

@keyframes bnrPulse {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .35
  }
}

.topbanner__x {
  position: absolute;
  right: var(--pad);
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  opacity: .55;
  font-size: var(--fs-body);
  line-height: 1;
  padding: .3rem
}

.topbanner__x:hover {
  opacity: 1
}

.nav {
  top: calc(var(--banner-h) + var(--promo-h))
}

.premiere {
  --bg: #162136;
  --bg-2: #22314F;
  --fg: #F4EBE3;
  --fg-soft: rgba(244, 235, 227, .62);
  --rule: rgba(244, 235, 227, .20);
  --accent: #C8AB8F;
  --btn-bg: #F4EBE3;
  --btn-fg: #162136;
  --btn-hover: #C8AB8F;
  --ph-a: #22314F;
  --ph-b: #334871;
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--bg);
  color: var(--fg);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s
}

.premiere.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s
}

html.is-locked,
html.is-locked body {
  overflow: hidden
}

.prem__bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.9rem, 2vw, 1.3rem) var(--pad);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--hair) solid var(--rule)
}

.prem__mark {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: lowercase
}

.prem__x {
  appearance: none;
  background: none;
  border: var(--hair) solid var(--rule);
  cursor: pointer;
  color: inherit;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color .3s ease, border-color .3s ease, transform .4s var(--ease)
}

.prem__x:hover {
  background: var(--fg);
  color: var(--bg);
  transform: rotate(90deg)
}

.prem__x svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round
}

.prem__wrap {
  padding-block: clamp(2.5rem, 7vh, 5rem) clamp(4rem, 10vh, 7rem)
}

.prem__head {
  grid-column: 1 / span 7
}

.prem__sub {
  margin: 1.1rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 34ch
}

.prem__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--accent);
  color: var(--bg);
  font-size: var(--fs-nano);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .42rem .7rem;
  margin-bottom: 1.3rem
}

.prem__facts {
  grid-column: 9 / span 4;
  align-self: end;
  list-style: none;
  padding: 0;
  margin: 0
}

.prem__facts li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-top: var(--hair) solid var(--rule);
  font-size: var(--fs-small)
}

.prem__facts li:last-child {
  border-bottom: var(--hair) solid var(--rule)
}

.prem__facts b {
  font-weight: 500
}

/* Booty Queen cover (replaces the teaser video), next to the description. */
.prem__cover {
  grid-column: 1 / span 5;
  align-self: start
}

.prem__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover
}

.playbtn {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg)
}

.playbtn span {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  display: grid;
  place-items: center;
  transition: transform .45s var(--ease)
}

.playbtn:hover span {
  transform: scale(1.09)
}

.playbtn .ico {
  width: 20px;
  height: 20px;
  margin-left: 3px;
  fill: currentColor;
  stroke: none
}

.prem__cols {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: clamp(2rem, 5vh, 3rem);
  margin-top: clamp(3rem, 7vh, 5rem)
}

.prem__intro {
  grid-column: 7 / span 6
}

.prem__intro .prem__for {
  margin-bottom: 1.5rem
}

.prem__intro p:not(.label) {
  font-size: var(--fs-body-s);
  line-height: 1.6;
  color: var(--fg-soft);
  margin: 0 0 .9rem;
  max-width: 46ch
}

.prem__for {
  grid-column: 7 / span 6;
  list-style: none;
  padding: 0;
  margin: 0
}

.prem__for li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .6rem 0;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  border-top: var(--hair) solid var(--rule)
}

.prem__for li:last-child {
  border-bottom: var(--hair) solid var(--rule)
}

.prem__for .ico {
  color: var(--accent);
  margin-top: .1rem
}

@media (max-width:1000px) {}

@media (max-width:640px) {}

.prem__buy {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: clamp(3rem, 7vh, 4.5rem);
  padding-top: clamp(1.5rem, 4vh, 2.2rem);
  border-top: var(--hair) solid var(--rule)
}

.prem__buy p {
  margin: 0;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: var(--fg-soft);
  max-width: 44ch
}

.prem__buy .cta {
  width: auto;
  min-width: min(100%, 24rem)
}

@media (max-width:900px) {

  .prem__head,
  .prem__facts,
  .prem__cover,
  .prem__intro,
  .prem__for {
    grid-column: 1 / -1
  }

  .prem__facts {
    margin-top: 2rem
  }
}

.coach {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: 2rem;
  align-items: start;
  padding-block: clamp(2.5rem, 6vh, 4rem);
  border-top: var(--hair) solid var(--rule);
  transition: border-color var(--swap)
}

.coach__photo {
  grid-column: 1 / span 3
}

.coach__photo .ph {
  aspect-ratio: 4/5
}

.coach__main {
  grid-column: 5 / span 4
}

.coach__side {
  grid-column: 10 / span 3
}

.coach--rev .coach__photo {
  grid-column: 10 / span 3;
  order: 3
}

.coach--rev .coach__main {
  grid-column: 5 / span 4;
  order: 2
}

.coach--rev .coach__side {
  grid-column: 1 / span 3;
  order: 1
}

.coach__role {
  margin-bottom: .9rem
}

.coach__name {
  font-size: var(--fs-h2-s);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0 0 1rem
}

.coach__name em {
  font-style: normal;
  color: var(--accent);
  transition: color var(--swap)
}

.coach__main p {
  margin: 0 0 .8rem;
  font-size: var(--fs-body-s);
  line-height: 1.6;
  color: var(--fg-soft)
}

.coach__facts {
  list-style: none;
  padding: 0;
  margin: 0 0 1.3rem
}

.coach__facts li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .4rem 0;
  font-size: var(--fs-small);
  line-height: 1.45
}

.coach__facts .ico {
  color: var(--accent);
  margin-top: .1rem
}

.coach__social {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem
}

.coach__social a {
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  border: var(--hair) solid var(--rule);
  padding: .45rem .7rem;
  transition: border-color .3s ease, color .3s ease
}

.coach__social a:hover {
  border-color: var(--fg)
}

@media (max-width:900px) {

  .coach__photo,
  .coach__main,
  .coach__side,
  .coach--rev .coach__photo,
  .coach--rev .coach__main,
  .coach--rev .coach__side {
    grid-column: 1 / -1;
    order: 0
  }

  .coach__photo {
    max-width: 16rem
  }
}

.segments {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter) var(--gutter)
}

.segment {
  border-top: var(--hair) solid var(--rule);
  padding-top: 1.1rem;
  transition: border-color .4s ease
}

.segment:hover {
  border-top-color: var(--fg)
}

.segment__head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .6rem
}

.segment__head .ico {
  color: var(--accent)
}

.segment h3 {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -.022em
}

.segment p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg-soft)
}

@media (max-width:900px) {
  .segments {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:600px) {
  .segments {
    grid-template-columns: 1fr
  }
}

.kon__note {
  margin: 1.1rem 0 0;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--fg-soft)
}

.cmp__note {
  grid-column: 1 / -1;
  margin: 1.1rem 0 0;
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--fg-soft)
}

.nlbar {
  background: var(--bg-2);
  padding-block: clamp(3rem, 8vh, 5rem);
  border-top: var(--hair) solid var(--rule);
  transition: background-color var(--swap)
}

.nlbar__head {
  grid-column: 1 / span 5
}

.nlbar__form {
  grid-column: 7 / span 6
}

.nlbar__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem
}

.nlbar__gender {
  margin-top: 1.2rem
}

.nlbar__gender .wz__opts {
  grid-template-columns: 1fr 1fr
}

.nlbar .cta {
  margin-top: 1.2rem;
  min-width: 0
}

.nlbar__ok {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-top: 1.2rem;
  padding: 1.1rem 1.2rem;
  border: var(--hair) solid var(--accent);
  background: var(--tint);
  color: var(--fg);
  animation: fadeUp .6s var(--ease) both
}

.nlbar__ok[hidden] {
  display: none
}

.nlbar__ok:focus {
  outline: 0
}

.nlbar__ok .ico {
  flex: none;
  color: var(--accent);
  margin-top: .15rem
}

.nlbar__ok p {
  margin: 0;
  font-size: var(--fs-body-s);
  line-height: 1.5
}

@media (max-width:900px) {

  .nlbar__head,
  .nlbar__form {
    grid-column: 1 / -1
  }

  .nlbar__form {
    margin-top: 2rem
  }

  .nlbar__row {
    grid-template-columns: 1fr
  }
}

.section {
  padding-block: clamp(4.5rem, 12vh, 8.5rem);
  position: relative
}

.section--tint {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  transition: background var(--swap)
}

.section--slant {
  clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -1.8vw;
  padding-top: clamp(6rem, 15vh, 10rem)
}

.section__head {
  grid-column: 1 / span 7;
  margin-bottom: clamp(2.5rem, 6vh, 4rem)
}

.section__label {
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
  color: var(--accent)
}

@media (max-width:900px) {
  .section__head {
    grid-column: 1 / -1
  }
}

.quiz {
  grid-column: 1 / span 6;
  grid-row: 1
}

.qlist {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem
}

.qlist li {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: .85rem 0;
  border-top: var(--hair) solid var(--rule);
  font-size: var(--fs-body);
  line-height: 1.45
}

.qlist li:last-child {
  border-bottom: var(--hair) solid var(--rule)
}

.qlist .ico {
  color: var(--accent);
  margin-top: .15rem
}

@media (max-width:900px) {
  .quiz {
    grid-column: 1 / -1
  }
}

.flist {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0
}

.flist li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .5rem 0;
  font-size: var(--fs-body-s);
  line-height: 1.5
}

.flist .ico {
  color: var(--accent);
  margin-top: .1rem
}

.programs {
  grid-column: 1 / -1;
  position: relative
}

.programs__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2*var(--gutter)) / 3);
  gap: var(--gutter);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding-bottom: .3rem;
  scrollbar-width: none
}

.programs__track::-webkit-scrollbar {
  display: none
}

.programs__track .program {
  min-width: 0
}

.programs__nav {
  position: absolute;
  top: -3.6rem;
  right: 0;
  display: flex;
  gap: .5rem
}

.programs__arrow {
  appearance: none;
  background: none;
  cursor: pointer;
  color: var(--fg);
  width: 2.5rem;
  height: 2.5rem;
  border: var(--hair) solid var(--rule);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color .3s ease, background-color .3s ease, opacity .3s ease
}

.programs__arrow:hover {
  border-color: var(--fg);
  background: color-mix(in srgb, var(--fg) 6%, transparent)
}

.programs__arrow:disabled {
  opacity: .3;
  cursor: default
}

.programs__arrow:disabled:hover {
  border-color: var(--rule);
  background: none
}

@media (max-width:900px) {
  .programs__nav {
    display: none
  }

  .programs__track {
    display: flex;
    flex-direction: column;
    overflow: visible;
    scroll-snap-type: none
  }

  .programs__track .program {
    width: auto
  }
}

.program {
  border-top: var(--hair) solid var(--rule);
  padding-top: 1.1rem;
  transition: border-color .4s ease
}

.program:hover {
  border-top-color: var(--fg)
}

.program__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .9rem
}

.program__tag {
  font-size: var(--fs-nano);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent)
}

.program__media {
  margin-bottom: 1rem
}

.program p {
  margin: .55rem 0 0;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: var(--fg-soft)
}

.program__top {
  flex-wrap: wrap;
  align-items: baseline
}

.program__top .h3 {
  min-width: 0;
  overflow-wrap: anywhere
}

.program__subhead {
  margin: 1.2rem 0 .5rem;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--fg)
}

.program__more .program__benefits,
.program__more .program__levels {
  margin: .35rem 0 1rem
}

.program__benefits .ico {
  flex: 0 0 1rem;
  margin-top: .2rem;
  color: var(--accent)
}

.program--coming .program__tag {
  padding: .4rem .6rem;
  background: var(--ink);
  color: var(--paper-warm)
}

@media (max-width:900px) {
  .programs {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:600px) {
  .programs {
    grid-template-columns: 1fr
  }
}

.checklist {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .2rem var(--gutter);
  margin-bottom: clamp(3rem, 7vh, 4.5rem);
  list-style: none;
  padding: 0
}

.checklist li {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .6rem 0;
  font-size: var(--fs-body-s);
  line-height: 1.45;
  border-top: var(--hair) solid var(--rule)
}

.checklist .ico {
  color: var(--accent);
  margin-top: .12rem
}

@media (max-width:900px) {
  .checklist {
    grid-template-columns: 1fr 1fr
  }
}

@media (max-width:600px) {
  .checklist {
    grid-template-columns: 1fr
  }
}

.plans {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  align-items: stretch
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  padding: clamp(1.4rem, 2.3vw, 2rem);
  transition: transform .5s var(--ease), border-color .4s ease, background-color var(--swap)
}

.plan:hover {
  transform: translateY(-4px);
  border-color: var(--fg)
}

.plan--feat {
  background: var(--tint);
  border-color: var(--accent)
}

#metamorfoza .quiz {
  grid-column: 1 / span 4;
  align-self: start
}

.meta {
  grid-column: 5 / -1;
  grid-row: 1;
  min-width: 0;
  width: 100%;
  max-width: 52rem;
  justify-self: end;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  align-self: start
}

.meta button {
  font-family: inherit;
  color: inherit
}

#metamorfoza .quiz,
.meta {
  padding-top: 0;
  margin-top: 0
}

.meta__story {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
  border: var(--hair) solid var(--rule);
  background: var(--bg);
  overflow: hidden
}

.meta__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(1.25rem, 2.2vw, 2rem);
  border-left: var(--hair) solid var(--rule)
}

.meta__eyebrow {
  display: block;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-soft)
}

.meta[data-founder="true"] .meta__eyebrow {
  align-self: flex-start;
  padding: .5rem .65rem;
  background: var(--ink);
  color: var(--paper-warm);
  letter-spacing: .08em
}

.meta[data-founder="true"] .meta__body {
  box-shadow: inset 3px 0 var(--accent)
}

.meta__founder-label {
  display: block;
  font-size: .65rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .04em;
  color: var(--accent);
  margin-top: .3rem
}

.meta__title {
  margin: .4rem 0 1.25rem;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.035em
}

.meta__modes {
  margin: auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  border-bottom: var(--hair) solid var(--rule);
  margin: 0 0 1rem
}

.meta__modes button {
  flex: 1 1 6.5rem;
  min-height: 44px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 500;
  padding: .6rem .5rem
}

.meta__modes button[aria-pressed="true"] {
  background: transparent;
  color: var(--fg);
  border-bottom-color: var(--fg)
}

.meta__canvas {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 0;
  background: var(--bg-2);
  border-radius: 0
}

.meta[data-loading="true"] .ba__stage .ph__img {
  visibility: hidden
}

.meta[data-loading="true"] .ba__stage .ph::after {
  content: 'Wczytywanie zdjęć…' !important
}

.flow__submit {
  margin-top: 1rem;
  min-height: 48px;
  width: 100%;
  max-width: 19rem
}

.flow__rules {
  display: block;
  width: fit-content;
  margin-top: .6rem;
  font-size: var(--fs-small);
  color: var(--fg-soft);
  border-bottom: var(--hair) solid var(--rule);
  transition: color .3s ease, border-color .3s ease
}

.flow__rules:hover,
.flow__rules:focus-visible {
  color: var(--fg);
  border-bottom-color: var(--fg)
}

.flow__step:last-child:not(.is-on) {
  opacity: 1
}

.ba__stage {
  --ba-pos: 50%;
  --ba-neg: -50%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  max-width: 36rem;
  margin: auto;
  isolation: isolate;
  overflow: hidden;
  touch-action: pan-y
}

.ba__layer {
  position: relative;
  min-width: 0;
  margin: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: 0
}

.ba__layer--after {
  z-index: 1
}

.ba__layer .ph {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 9/16;
  border: 0;
  background: var(--tint-2);
  border-radius: 0
}

.ba__layer .ph::after {
  font-size: .75rem;
  letter-spacing: 0;
  line-height: 1.6;
  text-transform: none;
  padding: 1rem;
  color: var(--fg)
}

.ba__stage .ph__img {
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none
}

#metamorfoza .meta .ph::after {
  content: attr(data-ph)
}

#metamorfoza .meta .ph.is-loaded::after {
  content: none
}

.ba__tag {
  position: absolute;
  top: 0;
  z-index: 3;
  padding: .5rem .8rem;
  background: var(--ink);
  color: var(--paper-warm);
  border-radius: 0;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
  pointer-events: none
}

.ba__tag--l {
  left: 0
}

.ba__tag--r {
  right: 0
}

.ba__handle {
  display: none
}

.meta[data-view="compare"] .ba__stage {
  display: block;
  width: min(100%, 19rem);
  aspect-ratio: 9/16;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none
}

.meta[data-view="compare"] .ba__stage.is-drag {
  cursor: grabbing
}

.meta[data-view="compare"] .ba__layer {
  position: absolute;
  inset: 0;
  border-radius: 0
}

.meta[data-view="compare"] .ba__layer .ph {
  height: 100%;
  aspect-ratio: auto
}

.meta[data-view="compare"] .ba__layer--after {
  transform: translateX(var(--ba-pos))
}

.meta[data-view="compare"] .ba__layer--after .ph {
  transform: translateX(var(--ba-neg))
}

.meta[data-view="compare"] .ba__handle {
  display: block;
  position: absolute;
  inset: 0 auto 0 var(--ba-pos);
  width: 2px;
  z-index: 4;
  background: #fff;
  pointer-events: none;
  mix-blend-mode: normal;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2)
}

.ba__grip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 44px;
  border-radius: 0;
  background: #fff;
  color: #111110;
  box-shadow: 0 2px 10px #0002
}

.meta__controls {
  margin-top: .8rem
}

.meta__presets {
  display: flex;
  justify-content: space-between;
  gap: .5rem
}

.meta__presets button {
  cursor: pointer;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: .5rem .65rem;
  font-size: .875rem
}

.meta__presets button[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg)
}

.ba__range {
  display: block;
  width: 100%;
  height: 44px;
  margin: .4rem 0 0;
  accent-color: var(--fg);
  cursor: ew-resize
}

.meta__hint {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--fg-soft);
  margin: auto 0 0;
  padding-top: 1.25rem;
  text-align: left
}

.meta__dates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0 0 1.25rem;
  border-bottom: var(--hair) solid var(--rule)
}

.meta__dates>div {
  display: flex;
  flex-direction: column;
  gap: .35rem
}

.meta__dates>div:last-child {
  grid-column: auto;
  text-align: left
}

.meta__dates span {
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-soft)
}

.meta__dates time {
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums
}

.meta__auto {
  flex-shrink: 0;
  min-height: 44px;
  padding: .6rem 1rem;
  background: none;
  border: var(--hair) solid var(--rule);
  border-radius: 0;
  font-size: .875rem;
  cursor: pointer
}

.meta__auto:disabled {
  opacity: .4;
  cursor: default
}

.meta__rail {
  min-width: 0;
  margin-top: 1.4rem;
  padding-top: 0;
  border: 0
}

#metamorfoza .ratings {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem)
}

.meta__rail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .75rem
}

.meta__rail-label {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0
}

.meta__rail-label>span {
  font-size: .875rem;
  font-weight: 500
}

.meta__status {
  font-size: .75rem;
  color: var(--fg-soft);
  text-align: left
}

.meta__progress {
  height: 2px;
  background: var(--rule);
  overflow: hidden;
  margin-bottom: .75rem
}

.meta__progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left
}

.meta__rail-nav {
  display: flex;
  align-items: center;
  gap: .5rem
}

.meta__count {
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  margin-right: .3rem;
  color: var(--fg-soft)
}

.meta__arrow {
  appearance: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  cursor: pointer
}

.meta__arrow:disabled {
  opacity: .3;
  cursor: default
}

.meta__thumbs {
  display: flex;
  gap: clamp(.5rem, 1vw, .75rem);
  overflow-x: auto;
  padding: 0 0 .5rem;
  counter-reset: hist;
  scroll-snap-type: x proximity;
  scrollbar-width: none
}

.meta__thumbs::-webkit-scrollbar {
  display: none
}

.meta__thumb {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 0 0 clamp(5.5rem, 7.5vw, 7rem);
  counter-increment: hist;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
  opacity: .62;
  transition: opacity .3s ease
}

.meta__thumb:hover,
.meta__thumb:focus-visible,
.meta__thumb.is-on {
  opacity: 1
}

.meta__thumb .ph {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  border: 0;
  border-radius: 0
}

.meta__thumb .ph__img {
  object-fit: cover
}

.meta__thumb .ph::after {
  font-size: .75rem;
  letter-spacing: 0;
  padding: 0
}

.meta__thumbcap {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-size: .8125rem;
  font-weight: 500;
  padding-top: .45rem;
  border-top: var(--hair) solid var(--rule);
  transition: border-color .3s ease, color .3s ease
}

.meta__thumbcap::before {
  content: counter(hist, decimal-leading-zero);
  font-size: .6875rem;
  font-weight: 400;
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums
}

.meta__thumb.is-on .meta__thumbcap {
  border-top-color: var(--fg)
}

.meta__thumb[data-founder] .meta__thumbcap {
  width: 100%;
  flex-wrap: wrap;
  row-gap: 0;
  border-top-color: var(--accent)
}

.meta__thumb[data-founder] .meta__founder-label {
  flex-basis: 100%
}

.meta__thumbcap i {
  font-size: .75rem;
  font-style: normal;
  font-weight: 400;
  color: var(--fg-soft)
}

@media (hover:hover) {

  .meta__arrow:not(:disabled):hover,
  .meta__thumb:hover {
    background: var(--tint)
  }

  .meta__modes button:not([aria-pressed="true"]):hover {
    background: var(--bg)
  }
}

@media (max-width:1050px) {
  #metamorfoza .quiz {
    grid-column: 1 / -1;
    grid-row: 1
  }

  #metamorfoza .meta {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    max-width: 44rem;
    margin-top: 2rem
  }
}

@media (max-width:760px) {
  .meta__story {
    grid-template-columns: minmax(0, 1fr)
  }

  .meta__body {
    padding: 1.3rem;
    border-left: 0;
    border-top: var(--hair) solid var(--rule)
  }

  .meta__rail-head {
    align-items: stretch;
    gap: .9rem
  }

  .meta__rail-head .meta__rail-nav {
    width: 100%;
    justify-content: space-between;
    flex-wrap: nowrap
  }

  .meta__auto {
    margin-left: auto
  }

  .meta__canvas .ba__stage {
    max-width: 28rem
  }

  .meta__title {
    margin-bottom: 1rem
  }
}

@media (max-width:540px) {
  .meta {
    padding: 0;
    border-radius: 0
  }

  .meta__canvas {
    padding: 0
  }

  .ba__tag {
    font-size: .75rem;
    padding: .4rem .6rem
  }

  .meta[data-view="compare"] .ba__stage {
    width: min(100%, 17rem)
  }
}

.flow {
  grid-column: 1 / -1;
  margin-top: clamp(2.5rem, 6vh, 4rem)
}

.flow__lead {
  margin: 0 0 1.6rem;
  font-size: var(--fs-small);
  color: var(--fg-soft)
}

.flow__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--hair) solid var(--rule)
}

.flow__list::after {
  content: "";
  position: absolute;
  left: .5px;
  top: -1px;
  height: 2px;
  width: var(--fw, 0);
  background: var(--fg);
  transition: width .9s cubic-bezier(.22, 1, .36, 1)
}

.flow__step {
  position: relative;
  padding: 1.5rem clamp(1rem, 2vw, 2rem) 0 0
}

.flow__step::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  z-index: 1;
  width: 9px;
  height: 9px;
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  transition: background-color .5s ease, border-color .5s ease
}

.flow__step.is-on::before {
  background: var(--fg);
  border-color: var(--fg)
}

.flow__step+.flow__step .flow__txt {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1rem, 2vw, 1.8rem);
  margin-left: calc(-1 * clamp(.5rem, 1vw, 1rem))
}

.flow__step {
  transition: opacity .5s ease
}

.flow__step:not(.is-on) {
  opacity: .55
}

.flow__n {
  display: block;
  font-size: var(--fs-num-m);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: .8rem
}

.flow__txt b {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: -.02em
}

.flow__d {
  display: block;
  margin-top: .5rem;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 30ch
}

.flow__when {
  display: inline-block;
  margin-top: .9rem;
  padding: .28rem .6rem;
  background: var(--tint-2);
  color: var(--fg);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase
}

.prizes {
  grid-column: 1 / -1;
  margin-top: clamp(3rem, 7vh, 4.5rem)
}

.prizes__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--fg)
}

.prizes__bar .label {
  margin: 0
}

.prizes__lead {
  margin: 1.1rem 0 1.6rem;
  font-size: var(--fs-small);
  color: var(--fg-soft)
}

.prz__switch {
  display: flex;
  border: var(--hair) solid var(--rule)
}

.prz__tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  background: none;
  padding: .7rem 1.2rem;
  color: var(--fg-soft);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color .3s ease, color .3s ease
}

.prz__tab+.prz__tab {
  border-left: var(--hair) solid var(--rule)
}

.prz__tab.is-on {
  background: var(--fg);
  color: var(--bg)
}

/* single column since the monthly-Instagram blurb was removed */
.prizes__extra {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: var(--hair) solid var(--rule)
}

.prizes__extra p {
  margin: .5rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--fg-soft)
}

.podium {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--hair);
  background: var(--rule);
  border: var(--hair) solid var(--rule)
}

.podium[hidden] {
  display: none
}

.podium__it {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(12rem, 19vw, 16rem);
  padding: clamp(1.2rem, 2.2vw, 1.8rem);
  background: var(--bg);
  transition: background-color .35s ease
}

.podium__it:not(.podium__it--1):hover {
  background: var(--tint)
}

.podium__it--1 {
  background: var(--ink);
  color: var(--paper-warm)
}

.podium__it--1::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent)
}

.podium__pos {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent)
}

.podium__it--1 .podium__pos {
  color: var(--paper-warm);
  opacity: .72
}

.podium__amt {
  display: block;
  margin-top: auto;
  font-size: var(--fs-num-l);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums
}

.podium__note {
  display: inline-flex;
  align-self: flex-start;
  margin: .9rem 0 .45rem;
  padding: .28rem .55rem;
  border: var(--hair) solid var(--accent);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent)
}

.podium__it--1 .podium__note {
  border-color: rgba(248, 235, 226, .45);
  color: var(--paper-warm)
}

.podium__ex {
  display: block;
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: var(--hair) solid var(--rule);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--fg-soft)
}

.podium__it--1 .podium__ex {
  color: rgba(248, 235, 226, .6);
  border-top-color: rgba(248, 235, 226, .2)
}

.podium__it--hon .podium__amt {
  font-size: var(--fs-h3)
}

.lw {
  grid-column: 1 / -1;
  margin-top: clamp(3.5rem, 8vh, 5.5rem)
}

body.mode-m #lastWin {
  display: none
}

.lw__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem
}

.lw__head .h3 {
  max-width: 20ch
}

.lw__nav {
  display: flex;
  gap: .4rem
}

.lw__arrow {
  appearance: none;
  background: none;
  cursor: pointer;
  color: var(--fg);
  width: 2.6rem;
  height: 2.6rem;
  border: var(--hair) solid var(--rule);
  display: grid;
  place-items: center;
  transition: border-color .3s ease, background-color .3s ease
}

.lw__arrow:hover {
  border-color: var(--fg);
  background: color-mix(in srgb, var(--fg) 6%, transparent)
}

.lw__viewport {
  overflow: hidden;
  border: var(--hair) solid var(--rule)
}

.lw__track {
  display: flex;
  width: 100%;
  min-width: 0;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1)
}

.lw__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  background: var(--bg)
}

.lw__media {
  position: relative;
  min-width: 0;
  min-height: 0
}

.lw__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hair);
  height: 100%
}

.lw__pair .ph {
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0
}

.ph--9x16 {
  aspect-ratio: 9/16
}

.lw__tag {
  position: absolute;
  bottom: 0;
  padding: .45rem .75rem;
  background: var(--ink);
  color: var(--paper-warm);
  font-size: var(--fs-nano);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  pointer-events: none
}

.lw__tag--l {
  left: 0
}

.lw__tag--r {
  right: 0
}

.lw__pair {
  position: relative
}

.lw__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.6rem)
}

.lw__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding-bottom: 1.2rem;
  border-bottom: var(--hair) solid var(--rule)
}

.lw__stats>div {
  min-width: 0
}

.lw__stats b {
  display: block;
  font-size: var(--fs-num-s);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--accent)
}

.lw__stats span {
  display: block;
  margin-top: .35rem;
  font-size: var(--fs-label);
  letter-spacing: .06em;
  color: var(--fg-soft);
  text-transform: uppercase
}

.lw__quote {
  margin: 1.2rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  letter-spacing: -.015em
}

.lw__by {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: var(--hair) solid var(--rule);
  flex-wrap: wrap
}

.lw__by b {
  display: block;
  font-size: var(--fs-body-s);
  font-weight: 500
}

.lw__by span {
  display: block;
  margin-top: .15rem;
  font-size: var(--fs-micro);
  color: var(--fg-soft)
}

.lw__dots {
  display: flex;
  gap: .5rem;
  margin-top: 1rem
}

.lw__dots button {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  flex: 1 1 0;
  height: 3px;
  position: relative;
  overflow: hidden
}

.lw__dots button i {
  position: absolute;
  inset: 0;
  background: var(--rule);
  display: block
}

.lw__dots button i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease
}

.lw__dots button.is-on i::after {
  transform: scaleX(1);
  transition: transform 6s linear
}

@media (max-width:760px) {

  .lw__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem
  }

  .lw__nav {
    width: 100%;
    justify-content: flex-end
  }
}

@media (max-width:900px) {
  .flow__list {
    grid-template-columns: repeat(2, 1fr)
  }

  .flow__step {
    padding-bottom: 1.6rem
  }

  .flow__step:nth-child(2n+1) .flow__txt {
    border-left: 0;
    padding-left: 0;
    margin-left: 0
  }

  .podium {
    grid-template-columns: 1fr 1fr
  }

  .lw__slide {
    grid-template-columns: minmax(0, 1fr)
  }

  .lw__pair {
    height: auto
  }

  .lw__pair .ph {
    height: auto;
    min-height: 0;
    aspect-ratio: 9/16
  }

  .lw__body {
    padding: 1.3rem
  }

  .lw__stats {
    gap: .6rem
  }

  .lw__stats b {
    font-size: 1.05rem
  }

  .lw__stats span {
    font-size: var(--fs-nano);
    letter-spacing: .04em
  }

  .lw__by {
    gap: .6rem
  }
}

@media (max-width:560px) {

  .flow__list {
    grid-template-columns: 1fr;
    border-top: 0
  }

  .flow__list::after {
    top: 7.5px;
    left: -.5px;
    width: 2px;
    height: var(--fw, 0);
    transition: height .9s cubic-bezier(.22, 1, .36, 1)
  }

  .flow__list.is-scroll::after {
    transition: none
  }

  .flow__step {
    padding: 0 0 1.6rem 1.6rem;
    border-left: 1px solid var(--rule)
  }

  .flow__step:first-child {
    border-left-color: transparent;
    background: linear-gradient(var(--rule), var(--rule)) 0 7.5px/1px 100% no-repeat
  }

  .flow__step:last-child {
    padding-bottom: 0;
    border-left-color: transparent;
    background: linear-gradient(var(--rule), var(--rule)) 0 0/1px 7.5px no-repeat
  }

  .flow__step::before {
    top: 3px;
    left: -5px
  }

  .flow__step+.flow__step .flow__txt {
    border-left: 0;
    padding-left: 0;
    margin-left: 0
  }

  .flow__n {
    margin-bottom: .4rem
  }

  .podium {
    grid-template-columns: 1fr
  }

  .podium__it {
    min-height: 0;
    padding: 1.2rem
  }

  .podium__amt {
    margin-top: .7rem
  }
}

.plan--vip {
  background: var(--ink);
  color: var(--paper-warm);
  border-color: var(--ink);
  box-shadow: 0 34px 70px -44px rgba(17, 17, 16, .6)
}

.plan--vip:hover {
  border-color: var(--ink);
  transform: translateY(-6px)
}

.plan--vip .plan__flag {
  background: var(--accent);
  color: var(--paper-warm);
  font-weight: 500
}

.plan--vip .plan__name,
.plan--vip .plan__now {
  color: var(--paper-warm)
}

.plan--vip .plan__perday,
.plan--vip .plan__desc {
  color: rgba(248, 235, 226, .62)
}

.plan--vip .plan__head .ico {
  color: var(--paper-warm)
}

.plan--vip .plan__promo {
  background: var(--paper-warm);
  color: var(--ink)
}

.plan--vip .plan__promo-head b {
  background: var(--ink);
  color: var(--paper-warm)
}

.plan--vip .trust {
  color: rgba(248, 235, 226, .62)
}

.plan--vip .trust .ico,
.plan--vip .trust b {
  color: var(--paper-warm)
}

.plan--vip .cta {
  background: var(--paper-warm);
  color: var(--ink)
}

.plan--vip .cta:hover {
  background: #FFFFFF
}

.plan--vip .cta .ico {
  color: var(--ink)
}

.plan__flag {
  position: absolute;
  top: 0;
  left: clamp(1.4rem, 2.3vw, 2rem);
  transform: translateY(-50%);
  font-size: var(--fs-nano);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  padding: .38rem .6rem;
  transition: background-color var(--swap), color var(--swap)
}

.plan__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem
}

.plan__name {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -.03em;
  margin: 0
}

.plan__head .ico {
  color: var(--accent)
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  flex-wrap: wrap;
  padding-bottom: 1.2rem;
  border-bottom: var(--hair) solid var(--rule)
}

.plan__now {
  font-size: var(--fs-num-l);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: .95;
  font-variant-numeric: tabular-nums
}

.plan__cyc {
  font-size: var(--fs-body-s);
  color: var(--fg-soft);
  align-self: flex-end;
  padding-bottom: .35rem
}

.plan--vip .plan__cyc {
  color: rgba(248, 235, 226, .62)
}

.plan__desc {
  margin: 1.2rem 0 1.5rem;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: var(--fg-soft)
}

.plan .cta {
  width: 100%;
  min-width: 0;
  margin-top: auto
}

/* auto-renewal terms under the CTA: kept clearly legible (12px, weight 500 as the display face is thin when small, darker than --fg-soft) so the
   subscription conditions don't read as fine print */
.plan__omni {
  margin: .9rem 0 0;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.45;
  color: color-mix(in srgb, var(--fg) 80%, transparent)
}

.plan--vip .plan__omni {
  color: rgba(248, 235, 226, .85)
}

/* customer-portal link in the renewal terms */
.plan__omni a {
  text-decoration: underline;
  text-underline-offset: 2px
}

/* side-by-side cards: share row tracks through subgrid so the cost, saving, promo, description
   and CTA rows line up across plans even when their content differs in height (7 rows = the
   card's in-flow children: head, cost, saving, deal ({{< plan_deal >}}, may be absent), desc,
   cta, omni; .plan__flag is absolute; add a row per extra element, e.g. {{< promo_price >}}
   before the CTA) */
@media (min-width:981px) {
  .plans {
    grid-template-rows: repeat(7, auto)
  }

  .plan {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    row-gap: 0
  }
}

@media (max-width:980px) {

  .plans {
    grid-template-columns: 1fr;
    row-gap: 2.75rem
  }

  .plan {
    padding: 1.5rem
  }
}

.trial {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: 1.75rem;
  align-items: center;
  background: var(--ink);
  color: var(--paper-warm);
  border: var(--hair) solid transparent;
  border-radius: clamp(1.1rem, 1.8vw, 1.6rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 40px 80px -50px rgba(17, 17, 16, .55)
}

.trial__body {
  grid-column: 1 / span 6
}

.trial__body .h3 {
  color: var(--paper-warm)
}

.trial__body .body-s {
  color: rgba(248, 235, 226, .72)
}

.trial__badges {
  grid-column: 8 / span 5;
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  justify-content: flex-end
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid rgba(248, 235, 226, .28);
  border-radius: 99px;
  padding: .75rem 1.15rem;
  font-size: var(--fs-small);
  color: var(--paper-warm);
  transition: border-color .35s ease, background-color .35s ease
}

.badge:hover {
  border-color: var(--paper-warm);
  background: rgba(248, 235, 226, .08)
}

.badge .ico {
  color: var(--paper-warm)
}

@media (max-width:900px) {

  .trial__body,
  .trial__badges {
    grid-column: 1 / -1
  }

  .trial__badges {
    justify-content: flex-start
  }
}

@media (max-width:900px) {}

.final {
  position: relative;
  padding-block: clamp(5rem, 14vh, 9rem);
  background: linear-gradient(160deg, var(--bg-2), var(--bg) 60%);
  clip-path: polygon(0 2.6vw, 100% 0, 100% 100%, 0 100%);
  transition: background var(--swap)
}

.final__title {
  grid-column: 1 / -1
}

.final__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  row-gap: 2rem;
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
  align-items: end
}

.final__note {
  grid-column: 1 / span 5;
  color: var(--fg-soft);
  font-size: var(--fs-body-s);
  line-height: 1.5;
  margin: 0
}

.final__cta {
  grid-column: 7 / span 6
}

@media (max-width:900px) {

  .final__note,
  .final__cta {
    grid-column: 1 / -1
  }
}

.footer {
  border-top: var(--hair) solid var(--rule);
  padding: clamp(1.7rem, 4vh, 2.5rem) 0;
  transition: border-color var(--swap)
}

.footer__inner {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-micro);
  color: var(--fg-soft)
}

.footer a:hover {
  color: var(--fg)
}

@media (max-width:820px) {
  .footer {
    padding-bottom: calc(clamp(1.7rem, 4vh, 2.5rem) + 5.5rem)
  }
}

.footer__by a {
  color: var(--fg);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1px;
  transition: border-color .3s ease, color .3s ease
}

.footer__by a:hover {
  border-bottom-color: var(--fg)
}

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s var(--ease), transform 1s var(--ease)
}

[data-reveal].in {
  opacity: 1;
  transform: none
}

#split[data-reveal] {
  transform: none
}

.fade {
  animation: fadeUp .65s var(--ease) both
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.faq__head {
  grid-column: 1 / span 4
}

.faq__list {
  grid-column: 6 / span 7
}

@media (max-width:900px) {

  .faq__head,
  .faq__list {
    grid-column: 1 / -1
  }

  .faq__head {
    margin-bottom: 2.5rem
  }
}

details {
  border-top: var(--hair) solid var(--rule)
}

details:last-of-type {
  border-bottom: var(--hair) solid var(--rule)
}

summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 0;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -.02em
}

summary::-webkit-details-marker {
  display: none
}

summary .ico {
  color: var(--accent);
  transition: transform .4s var(--ease)
}

details[open] summary .ico {
  transform: rotate(45deg)
}

details p {
  margin: 0 0 1.35rem;
  max-width: 56ch;
  color: var(--fg-soft);
  font-size: var(--fs-body-s);
  line-height: 1.55
}

@media (max-width:760px) {}

.hstats {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  margin-top: clamp(2.25rem, 5vh, 3.5rem);
  padding-top: clamp(1.25rem, 3vh, 1.9rem);
  border-top: var(--hair) solid var(--rule)
}

.hstats div {
  flex: 1 1 8rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-right: clamp(1.25rem, 2.4vw, 2.25rem)
}

.hstats div+div {
  padding-left: clamp(1.25rem, 2.4vw, 2.25rem);
  border-left: var(--hair) solid var(--rule)
}

.hstats b {
  font-size: var(--fs-num-m);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  transition: color var(--swap)
}

.hstats span {
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-soft)
}

@media (max-width:760px) {
  .hstats div {
    flex: 1 1 42%;
    padding-right: 1rem;
    margin-bottom: 1.25rem
  }

  .hstats div:nth-child(odd) {
    padding-left: 0;
    border-left: 0
  }

  .hstats div:nth-child(even) {
    padding-left: 1rem
  }
}

.split {
  grid-column: 1 / -1;
  grid-row: 3;
  position: relative;
  overflow: clip;
  max-width: var(--wrap);
  margin-inline: auto;
  --x: 50;
  --lift: clamp(2rem, 4.5vw, 4rem);
  height: calc(clamp(17rem, 29vw, 25rem) + var(--lift));
  margin-top: clamp(3rem, 8vh, 5rem)
}

.split__side {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--lift);
  bottom: 0;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  background: none
}

.split__side::before {
  content: "";
  position: absolute;
  inset: 0
}

.split__side--w::before {
  background: #F4EBE3
}

.split__side--m::before {
  background: #111110
}

.split__side--w {
  clip-path: polygon(0 0, calc(var(--x) * 1% + 5%) 0, calc(var(--x) * 1% - 5%) 100%, 0 100%)
}

.split__side--m {
  clip-path: polygon(calc(var(--x) * 1% + 5%) 0, 100% 0, 100% 100%, calc(var(--x) * 1% - 5%) 100%)
}

.split__side::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: var(--hair) solid var(--rule);
  transition: border-color var(--swap)
}

.split__in {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  padding-block: clamp(1.25rem, 3vw, 2.2rem);
  width: 50%;
  pointer-events: none
}

.split__side--w .split__in {
  left: 0;
  color: #111110;
  justify-content: flex-start;
  padding-left: clamp(11rem, 23vw, 25rem);
  padding-right: clamp(1rem, 3vw, 2.5rem)
}

.split__side--m .split__in {
  right: 0;
  color: #E5E3E1;
  justify-content: flex-end;
  padding-right: clamp(11rem, 23vw, 25rem);
  padding-left: clamp(1rem, 3vw, 2.5rem)
}

.split__txt {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0
}

.split__side--w .split__txt {
  align-items: flex-start
}

.split__side--m .split__txt {
  align-items: flex-end;
  text-align: right
}

.split__cut {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  width: clamp(11rem, 21vw, 19rem);
  display: grid;
  place-content: stretch center
}

.split__cut--w {
  left: clamp(0rem, 1.5vw, 2.5rem)
}

.split__cut--m {
  right: clamp(0rem, 1.5vw, 2.5rem)
}

.split__cut img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
  filter: grayscale(1);
  transition: filter .55s var(--ease)
}

.split:has(.split__side--w:hover) .split__cut--w img,
.split:has(.split__side--m:hover) .split__cut--m img {
  filter: none
}

body.mode-w .split__cut--w img,
body.mode-m .split__cut--m img {
  filter: none
}

.split__eyebrow {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-label);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 500
}

.split__side--w .split__eyebrow {
  color: #756352
}

.split__side--m .split__eyebrow {
  color: #C8AB8F
}

.split__eyebrow .ico {
  width: 14px;
  height: 14px
}

.split__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  white-space: nowrap;
  transition: transform .55s var(--ease)
}

.split__in {
  transition: transform .55s var(--ease)
}

.split__side--w .split__in {
  transform-origin: left center
}

.split__side--m .split__in {
  transform-origin: right center
}

.split__side:hover .split__in,
.split__side:focus-visible .split__in {
  transform: scale(1.07)
}

.split__desc {
  font-size: var(--fs-small);
  line-height: 1.45;
  opacity: .66;
  max-width: 26ch
}

.split__go {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .3rem;
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease)
}

.split__side:hover .split__go,
.split__side:focus-visible .split__go {
  opacity: .85;
  transform: none
}

.split__side[aria-pressed="true"] .split__go {
  opacity: .85;
  transform: none
}

.split__side--w:hover .split__title {
  transform: translateX(5px)
}

.split__side--m:hover .split__title {
  transform: translateX(-5px)
}

body.mode-m .split__side--w::before {
  background: #E5E3E1
}

body.mode-m .split__side--w .split__eyebrow {
  color: #504E4C
}

.split__hint {
  position: absolute;
  left: 50%;
  bottom: .75rem;
  transform: translateX(-50%);
  z-index: 2;
  font-size: var(--fs-nano);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #C0BBB6;
  pointer-events: none;
  opacity: .75
}

@media (min-width:761px) and (max-width:1380px) {
  .split {
    height: calc(clamp(13rem, 23vw, 19rem) + var(--lift))
  }

  .split__cut {
    width: clamp(8rem, 15vw, 13rem)
  }

  .split__side--w .split__in {
    padding-left: clamp(8rem, 18vw, 18rem)
  }

  .split__side--m .split__in {
    padding-right: clamp(8rem, 18vw, 18rem)
  }

  .split__cut--w {
    left: clamp(0rem, 1vw, 2rem)
  }

  .split__cut--m {
    right: clamp(0rem, 1vw, 2rem)
  }

  .split__txt .h3,
  .split__txt h3 {
    font-size: clamp(1.5rem, 3.4vw, 2.4rem)
  }
}

@media (max-width:760px) {
  .split {
    height: auto;
    min-height: 30rem;
    scroll-margin-top: 7rem
  }

  .split__side--w {
    clip-path: polygon(0 0, 100% 0, 100% calc(50% - 1.5rem), 0 calc(50% + 1.5rem))
  }

  .split__side--m {
    clip-path: polygon(0 calc(50% + 1.5rem), 100% calc(50% - 1.5rem), 100% 100%, 0 100%)
  }

  .split {
    height: auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    background: none;
    border: 0;
    overflow: clip;
    padding-top: 2rem;
    margin: clamp(2.5rem, 7vh, 4rem) var(--pad) 0
  }

  .split__side {
    position: relative;
    inset: auto;
    clip-path: none;
    display: block;
    aspect-ratio: 5/8;
    overflow: visible;
    border: 0
  }

  .split__side::before {
    inset: 0
  }

  .split__cut {
    position: absolute;
    bottom: 0;
    top: 0;
    z-index: 1;
    width: auto;
    height: 100%;
    display: block;
    padding: 0;
    transform: none;
    overflow: hidden
  }

  .split__cut--w {
    left: 0;
    right: calc(50% + .25rem)
  }

  .split__cut--m {
    left: calc(50% + .25rem);
    right: 0
  }

  .split__cut img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 12%
  }

  .split:has(.split__side--w:active) .split__cut--w img,
  .split:has(.split__side--m:active) .split__cut--m img {
    filter: none
  }

  .split__side::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border: 0
  }

  .split__side--w::after {
    background: linear-gradient(to top,
        #F4EBE3 12%, rgba(244, 235, 227, .86) 32%, rgba(244, 235, 227, .28) 58%, rgba(244, 235, 227, 0) 78%)
  }

  .split__side--m::after {
    background: linear-gradient(to top,
        #111110 12%, rgba(17, 17, 16, .86) 32%, rgba(17, 17, 16, .28) 58%, rgba(17, 17, 16, 0) 78%)
  }

  .split__in {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 3;
    width: auto;
    height: auto;
    min-height: 0;
    display: block;
    transform: none
  }

  .split__side--w .split__in,
  .split__side--m .split__in {
    padding: 1rem .9rem 1.1rem;
    width: auto
  }

  .split__txt {
    width: 100%;
    max-width: none;
    gap: .3rem
  }

  .split__side--w .split__txt,
  .split__side--m .split__txt {
    align-items: flex-start;
    text-align: left
  }

  .split__side--m .split__eyebrow {
    flex-direction: row
  }

  .split__eyebrow {
    font-size: var(--fs-nano);
    letter-spacing: .16em;
    gap: .35rem
  }

  .split__title {
    white-space: normal;
    font-size: 1.45rem;
    letter-spacing: -.035em;
    line-height: 1.05
  }

  .split__desc {
    display: none
  }

  .split__go {
    margin-top: .8rem;
    opacity: 1;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    padding: .55rem .7rem;
    border: 1px solid currentColor;
    font-size: var(--fs-nano);
    letter-spacing: .12em;
    text-transform: uppercase
  }

  .split__side--w .split__go {
    color: #111110
  }

  .split__side--m .split__go {
    color: #E5E3E1
  }

  .split__go .ico {
    width: 13px;
    height: 13px
  }

  .split__hint {
    display: none
  }

  .split__side:hover .split__in {
    transform: none
  }
}

@media (max-width:900px) {
  .split {
    grid-row: auto
  }
}

.hxs {
  position: relative;
  width: 100%;
  --slide: 34%;
  --sgap: 3.5%;
  background: linear-gradient(168deg, var(--tint) 0%, var(--bg) 62%);
  border: var(--hair) solid var(--rule);
  border-radius: clamp(1rem, 1.6vw, 1.4rem);
  padding: clamp(1rem, 1.8vw, 1.5rem);
  transition: background var(--swap), border-color var(--swap)
}

.hxs__screens {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding-block: .6rem;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%)
}

.hxs__track {
  display: flex;
  gap: var(--sgap);
  width: 100%;
  touch-action: pan-y;
  transform: translateX(0);
  will-change: transform;
  transition: transform .75s cubic-bezier(.22, 1, .36, 1)
}

.hxs__screen {
  flex: 0 0 var(--slide);
  display: flex;
  justify-content: center;
  opacity: .42;
  transform: scale(.86);
  cursor: pointer;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition: opacity .6s var(--ease), transform .6s var(--ease)
}

.hxs__screen.is-on {
  opacity: 1;
  transform: scale(1);
  cursor: default
}

.hxs__screen .mock {
  aspect-ratio: 9/19.5;
  height: auto
}

.hxs__screen .phone {
  height: clamp(21rem, 52vh, 32rem);
  width: auto;
  flex: 0 0 auto
}

.hxs__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1rem;
  flex-wrap: wrap
}

.hxs__badges {
  position: relative;
  min-height: 2.9rem;
  flex: 1 1 10rem
}

.hxs__badge {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .15rem;
  font-size: var(--fs-label);
  letter-spacing: .02em;
  color: var(--fg-soft);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s var(--ease), transform .55s var(--ease)
}

.hxs__badge.is-on {
  opacity: 1;
  transform: none
}

.hxs__badge b {
  font-size: var(--fs-num-s);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--fg);
  font-variant-numeric: tabular-nums
}

.hxs__nav {
  display: flex;
  gap: 6px;
  flex: 0 0 auto
}

.hxs__nav button {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  width: 1.5rem;
  height: 3px;
  border-radius: 99px;
  background: var(--rule);
  transition: background-color .35s ease, width .35s var(--ease)
}

.hxs__nav button.is-on {
  background: var(--fg);
  width: 2.2rem
}

.mock--build {
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--bg-2)
}

.bld {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 30px
}

.bld__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px
}

.bld__ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  grid-area: 1/1
}

.bld__t {
  fill: none;
  stroke: var(--tint);
  stroke-width: 5
}

.bld__f {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1
}

.bld__ring b {
  grid-area: 1/1;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums
}

.bld__title {
  display: block;
  margin-top: 28px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em
}

.bld__sub {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  color: var(--accent)
}

.mock--app {
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-2)
}

.ap__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px
}

.ap__brand {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em
}

.ap__ava {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid;
  place-items: center
}

.ap__ava .ico {
  width: 14px;
  height: 14px;
  stroke-width: 1.8
}

.ap__tabs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 12px 18px 14px;
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--tint) 35%, var(--bg))
}

.ap__tabs span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 13px 0;
  font-size: 13px;
  color: var(--fg)
}

.ap__tabs .ico {
  width: 14px;
  height: 14px
}

.ap__tabs .is-on {
  background: var(--accent);
  color: var(--bg)
}

.ap__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0 18px
}

.ap__inner {
  transition: transform 2.4s cubic-bezier(.4, 0, .2, 1)
}

.ap__card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg);
  border-radius: 16px;
  padding: 18px 16px
}

.ap__cardtxt {
  min-width: 0
}

.ap__card b {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1
}

.ap__day {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 13px;
  color: var(--accent)
}

.ap__desc {
  display: block;
  margin-top: 9px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--fg-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.ap__sync {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid;
  place-items: center
}

.ap__sync .ico {
  width: 15px;
  height: 15px;
  stroke-width: 1.8
}

.ap__lbl {
  margin: 20px 0 11px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase
}

.ap__lbl--diet {
  margin-bottom: 3px
}

.ap__wk {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border-radius: 16px;
  min-height: 132px;
  padding: 16px
}

.ap__ph {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 46%;
  overflow: hidden;
  background: linear-gradient(160deg, var(--tint-2) 0%, var(--accent) 130%)
}

.ap__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.ap__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to right, var(--bg) 4%, rgba(255, 255, 255, 0) 68%)
}

.ap__cal {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--tint);
  color: var(--accent);
  display: grid;
  place-items: center
}

.ap__cal .ico {
  width: 15px;
  height: 15px
}

.ap__wktxt {
  position: relative;
  z-index: 2
}

.ap__wkl {
  display: block;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-soft)
}

.ap__wk b {
  display: block;
  margin-top: 3px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em
}

.ap__time {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--tint);
  border-radius: 99px;
  padding: 6px 11px;
  font-size: 11px
}

.ap__time .ico {
  width: 12px;
  height: 12px;
  color: var(--accent)
}

.ap__play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: grid;
  place-items: center
}

.ap__play .ico {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none
}

.ap__bararea {
  display: block;
  height: 3px;
  border-radius: 99px;
  background: var(--rule);
  margin-top: 3px
}

.ap__date {
  display: block;
  margin-bottom: 13px;
  font-size: 12px;
  color: var(--accent)
}

.ap__macros {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 0 4px
}

.ap__m {
  position: relative;
  display: grid;
  place-items: center
}

.ap__m svg {
  width: 100%;
  height: auto;
  grid-area: 1/1
}

.ap__m circle {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.6;
  opacity: .4
}

.ap__mv {
  grid-area: 1/1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px
}

.ap__mv b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em
}

.ap__mv i {
  font-style: normal;
  font-size: 9px;
  color: var(--fg-soft)
}

.ap__mv em {
  font-style: normal;
  color: var(--accent)
}

.ap__mnames {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 0 4px;
  margin-top: 8px
}

.ap__mnames span {
  text-align: center;
  font-size: 12px
}

.ap__kbar {
  display: block;
  height: 4px;
  border-radius: 99px;
  background: var(--tint);
  margin: 14px 0 8px
}

.ap__kcal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px
}

.ap__kl {
  color: var(--accent)
}

.ap__kv {
  color: var(--fg-soft)
}

.ap__kp {
  color: var(--accent)
}

.ap__ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  background: var(--bg);
  border-radius: 16px;
  padding: 14px;
  margin-top: 13px
}

.ap__ask>span:first-child {
  font-size: 12px;
  line-height: 1.35;
  max-width: 17ch
}

.ap__seg {
  flex: 0 0 auto;
  display: flex;
  border-radius: 11px;
  overflow: hidden;
  background: var(--tint)
}

.ap__seg i {
  font-style: normal;
  padding: 9px 15px;
  font-size: 12px;
  color: var(--fg)
}

.ap__seg i.is-on {
  background: var(--accent);
  color: var(--bg)
}

.ap__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px
}

.ap__tile {
  background: var(--bg);
  border-radius: 16px;
  padding: 13px 8px;
  text-align: center
}

.ap__tl {
  display: block;
  font-size: 11px
}

.ap__ti {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: 9px auto;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent)
}

.ap__ti .ico {
  width: 19px;
  height: 19px;
  fill: currentColor;
  stroke: none
}

.ap__tile b {
  display: block;
  font-size: 13px;
  font-weight: 700
}

.ap__tile i {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 9px;
  color: var(--fg-soft)
}

.ap__tile em {
  font-style: normal;
  color: var(--accent)
}

.mock--quiz {
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg)
}

.qz__top {
  flex: 0 0 auto;
  padding: 74px 22px 0;
  text-align: center
}

.qz__title {
  display: block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em
}

.qz__dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 18px
}

.qz__dots i {
  width: 11px;
  height: 11px;
  border-radius: 99px;
  background: var(--tint-2);
  transition: width .45s var(--ease), background-color .45s ease
}

.qz__dots i.is-on {
  width: 30px;
  background: var(--accent)
}

.qz__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 22px
}

.qz__q {
  display: block;
  text-align: center;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.15;
  margin-bottom: 26px
}

.qz__opts {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--tint)
}

.qz__opt {
  display: block;
  padding: 19px 16px;
  text-align: center;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--fg);
  border-top: 1px solid var(--bg);
  transition: background-color .4s ease, color .4s ease
}

.qz__opt:first-child {
  border-top: 0
}

.qz__opt.is-on {
  background: var(--accent);
  color: var(--bg)
}

.qz__hint {
  margin: 20px 0 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  color: var(--fg-soft);
  min-height: 2.6em;
  transition: opacity .35s ease
}

.qz__nav {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 0 22px 34px
}

.qz__arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--tint);
  display: grid;
  place-items: center;
  color: var(--fg-soft)
}

.qz__arrow .ico {
  width: 20px;
  height: 20px
}

.qz__arrow--next {
  color: var(--fg);
  transition: transform .3s var(--ease), background-color .3s ease
}

.qz__arrow--next.is-tap {
  transform: scale(.88);
  background: var(--accent);
  color: var(--bg)
}

.mock--start {
  padding: 0;
  position: relative;
  overflow: hidden
}

.start__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #171310
}

.start__photo .ph {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: none
}

.start__photo .ph__img[src]:not([src=""]) {
  object-position: center 30%;
  transform-origin: 52% 34%;
  animation: startDrift 26s ease-in-out infinite alternate
}

@keyframes startDrift {
  from {
    transform: scale(1.06) translate3d(0, 0, 0)
  }

  to {
    transform: scale(1.14) translate3d(-1.2%, -1.6%, 0)
  }
}

.start__photo::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(38% 30% at 50% 50%,
      rgba(255, 240, 226, .20), rgba(255, 240, 226, .07) 46%, transparent 70%);
  mix-blend-mode: screen;
  animation: startSheen 19s ease-in-out infinite alternate
}

@keyframes startSheen {
  from {
    transform: translate3d(-11%, -7%, 0) scale(1)
  }

  to {
    transform: translate3d(13%, 9%, 0) scale(1.18)
  }
}

.start__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(to top,
      rgba(14, 10, 8, .96) 0%, rgba(14, 10, 8, .90) 14%,
      rgba(14, 10, 8, .68) 28%, rgba(14, 10, 8, .34) 42%,
      rgba(14, 10, 8, .10) 56%, rgba(14, 10, 8, 0) 68%),
    linear-gradient(to bottom, rgba(14, 10, 8, .42) 0%, rgba(14, 10, 8, 0) 26%)
}

.start__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 22px 24px 30px;
  text-align: center;
  color: #F8EBE2
}

.start__logo {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-bottom: 14px
}

.start__claim {
  display: block;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.03em
}

.start__sub {
  margin: 8px 0 20px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(248, 235, 226, .78)
}

.start__cta {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  background: #F8EBE2;
  color: #15100B;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase
}

.start__cta--ghost {
  margin-top: 10px;
  background: none;
  color: #F8EBE2;
  border: 1.5px solid rgba(248, 235, 226, .45)
}

.start__legal {
  margin: 16px 0 0;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(248, 235, 226, .62)
}

.hx__top {
  grid-column: 1 / -1
}

.hx {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.hx__phone {
  grid-column: 7 / span 6;
  align-self: center;
  padding-top: clamp(1.5rem, 4vh, 2.5rem)
}

@media (max-width:1100px) {
  .hx {
    grid-column: 1 / span 5
  }

  .hx__phone {
    grid-column: 6 / -1
  }
}

@media (max-width:900px) {

  .hx {
    grid-column: 1 / -1
  }

  .hx__phone {
    grid-column: 1 / -1;
    align-self: stretch;
    padding-top: 0;
    margin: clamp(1rem, 2.4vh, 1.4rem) 0 0
  }

  .hxs {
    --slide: 47%;
    --sgap: 4%
  }
}

.hx__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-bottom: clamp(1.5rem, 3.5vh, 2.4rem);
  border-bottom: var(--hair) solid var(--rule)
}

.hx__top .label {
  display: inline-flex;
  align-items: center;
  gap: .55rem
}

.hx__rate {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  flex-wrap: wrap
}

.hx__stars {
  color: #D4A72C;
  font-size: var(--fs-small);
  letter-spacing: .14em;
  line-height: 1
}

.hx__rate b {
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: -.02em
}

.hx__rate i {
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-soft)
}

.hx__title {
  margin: clamp(2rem, 5vh, 3.5rem) 0 0;
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -.04em;
  max-width: 22ch;
  text-wrap: balance
}

.hx__title em {
  display: block;
  font-style: normal;
  color: var(--accent);
  transition: color var(--swap)
}

.hx__lead {
  margin: clamp(1.5rem, 3.5vh, 2.4rem) 0 0;
  max-width: 58ch;
  font-size: var(--fs-body-s);
  line-height: var(--lh-body);
  color: var(--fg-soft)
}

@media (max-width:760px) {

  .hx__top {
    padding-bottom: clamp(.9rem, 2vh, 1.3rem);
    gap: .5rem
  }

  .hx__title {
    margin-top: clamp(1.1rem, 2.5vh, 1.6rem)
  }

  .hx__lead {
    margin-top: clamp(.9rem, 2vh, 1.3rem)
  }

  .hx__act {
    gap: .85rem;
    margin-top: clamp(1rem, 2.4vh, 1.5rem)
  }

  .hx__act .cta {
    padding: 1.15rem 1.3rem
  }

  .hx__alt {
    font-size: var(--fs-body-s)
  }

  .hx__trust {
    margin-top: clamp(.9rem, 2vh, 1.3rem)
  }
}

.hx__act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin-top: clamp(1.75rem, 4vh, 2.6rem);
  max-width: 58ch
}

.hx__act .cta {
  min-width: min(100%, 20rem)
}

.hx__alt {
  font-size: var(--fs-body-s);
  color: var(--fg-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
  transition: color .3s ease, border-color .3s ease
}

.hx__alt:hover {
  color: var(--fg);
  border-bottom-color: var(--fg)
}

.hx__note {
  margin: .75rem 0 0;
  font-size: var(--fs-label);
  line-height: 1.45;
  color: var(--fg-soft)
}

.hx__trust {
  margin-top: 1.1rem
}

@media (max-width:760px) {
  .hx__top {
    gap: .75rem
  }

  .hx__rate i {
    display: none
  }

}

.phone .mock__navtitle {
  font-size: .92rem
}

.phone .mock__brand {
  font-size: 1.1rem
}

.phone .mock__navbottom i {
  font-size: .54rem
}

.phone .mock__navbottom .ico {
  width: 15px;
  height: 15px
}

.plancard {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  border-radius: 16px;
  padding: 14px 15px
}

.plancard__l {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-soft)
}

.plancard b {
  display: block;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 5px 0 4px
}

.plancard i {
  display: block;
  font-style: normal;
  font-size: 13px;
  line-height: 1.35;
  color: var(--fg-soft)
}

.plancard__i {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tint-2);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  font-style: italic
}

.dayrow {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  border-radius: 16px;
  padding: 9px 11px;
  transition: transform .18s var(--ease), background-color .3s ease, border-color .3s ease
}

.dayrow.is-on {
  background: var(--tint-2);
  border-color: var(--accent)
}

.dayrow.is-rest {
  opacity: .72
}

.dayrow.is-press {
  transform: scale(.965)
}

.dayrow__n {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background: var(--tint-2);
  color: var(--accent);
  font-size: 8px;
  letter-spacing: .06em;
  line-height: 1.15
}

.dayrow__n b {
  display: block;
  font-size: 15px;
  font-weight: 700
}

.dayrow.is-on .dayrow__n {
  background: var(--bg);
  color: var(--accent)
}

.dayrow>div {
  flex: 1;
  min-width: 0
}

.dayrow>div b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em
}

.dayrow>div i {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: var(--fg-soft);
  margin-top: 1px
}

.dayrow__go {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--accent)
}

.dayrow__go .ico {
  width: 13px;
  height: 13px
}

.dayrow__mv {
  display: flex;
  gap: 5px;
  flex: 0 0 auto
}

.dayrow__mv i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tint);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 11px;
  color: var(--fg-soft)
}

.mock__hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-soft)
}

.exd__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 12px
}

.exd__note .ico {
  width: 13px;
  height: 13px
}

.exd__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px
}

.exd__ph {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--tint), var(--tint-2))
}

.exd__ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.exd__head b {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em
}

.exd__acts {
  flex: 0 0 auto;
  display: flex;
  gap: 7px
}

.exd__acts i {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--tint-2);
  color: var(--accent);
  font-style: normal;
  font-size: 12px;
  font-weight: 700
}

.exd__acts .ico {
  width: 14px;
  height: 14px
}

.exd__set {
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  border-radius: 15px;
  padding: 11px 12px 9px;
  margin-bottom: 9px
}

.exd__row {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  align-items: center;
  gap: 8px
}

.exd__lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-soft);
  white-space: nowrap
}

.exd__in {
  display: block;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--tint-2);
  font-size: 11px;
  color: var(--fg-soft);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.exd__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: var(--hair) solid var(--rule);
  font-size: 11px;
  color: var(--fg-soft)
}

.exd__foot em {
  font-style: normal;
  font-weight: 700;
  color: var(--fg)
}

.exd__dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: var(--hair) solid var(--rule);
  flex: 0 0 auto
}

.mock.is-play .exd__set:first-of-type .exd__dot {
  background: var(--accent);
  border-color: var(--accent)
}

.jcard {
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  border-radius: 18px;
  padding: 15px 16px 13px
}

.jcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px
}

.jcard__top b {
  display: block;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em
}

.jcard__top i {
  display: block;
  font-style: normal;
  font-size: 12px;
  color: var(--accent);
  margin-top: 3px
}

.jcard__i {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tint-2);
  color: var(--accent)
}

.jcard__i .ico {
  width: 16px;
  height: 16px
}

.jcard__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 12px
}

.jcard__chip {
  background: var(--tint);
  border-radius: 99px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-soft)
}

.jcard__start {
  font-size: 13px;
  color: var(--fg-soft)
}

.jcard__bar {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: var(--tint-2);
  overflow: hidden
}

.jcard__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px
}

.jgrid {
  display: flex;
  gap: 10px
}

.jbig {
  flex: 1;
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  border-radius: 16px;
  padding: 12px 6px 13px;
  text-align: center
}

.jbig__l {
  display: block;
  font-size: 12px;
  color: var(--fg)
}

.jbig__o {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 9px auto 8px;
  background: var(--accent)
}

.jbig__o .ico {
  width: 22px;
  height: 22px;
  stroke: var(--bg)
}

.jbig b {
  display: block;
  font-size: 15px;
  font-weight: 700
}

.jbig i {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--fg-soft);
  margin-top: 1px
}

.jsmall {
  flex: 1;
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  border-radius: 16px;
  padding: 12px 6px;
  text-align: center;
  transition: transform .18s var(--ease), border-color .3s ease
}

.jsmall.is-press {
  transform: scale(.955)
}

.jsmall .ico {
  width: 18px;
  height: 18px;
  color: var(--fg);
  margin: 0 auto 6px
}

.jsmall span {
  display: block;
  font-size: 12px;
  color: var(--fg)
}

.jsmall b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-top: 4px
}

.jprog {
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  border-radius: 16px;
  padding: 13px 14px
}

.jprog__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px
}

.jprog__top b {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em
}

.jprog__chip {
  background: var(--tint-2);
  color: var(--accent);
  border-radius: 99px;
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase
}

.jprog__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 66px
}

.jprog__bars i {
  flex: 1;
  height: var(--h);
  background: var(--tint-2);
  border-radius: 3px 3px 0 0;
  position: relative
}

.jprog__bars em {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  font-style: normal;
  font-size: 7px;
  text-align: center;
  color: var(--fg-soft)
}

.jaward {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 16px;
  padding: 14px 15px
}

.jaward p {
  margin: 0;
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700
}

.jaward__i {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg)
}

.jaward__i .ico {
  width: 16px;
  height: 16px;
  color: var(--accent)
}

.mock__brand--c {
  flex: 1;
  text-align: center
}

.mphoto {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 16px;
  padding: 14px 15px
}

.mphoto b {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em
}

.mphoto i {
  display: block;
  font-style: normal;
  font-size: 12px;
  opacity: .82;
  margin-top: 2px
}

.mphoto>div {
  flex: 1
}

.mphoto__i {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg)
}

.mphoto__i .ico {
  width: 15px;
  height: 15px;
  color: var(--accent)
}

.mrow {
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  border-radius: 16px;
  padding: 13px 15px
}

.mrow__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: var(--hair) solid var(--rule)
}

.mrow__top b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em
}

.mrow__u {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--fg-soft);
  font-size: 11px
}

.mrow__v {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px
}

.mrow__v span {
  font-size: 12px;
  color: var(--fg-soft)
}

.mrow__v i {
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent)
}

.dpills {
  display: flex;
  justify-content: space-between;
  gap: 6px
}

.dpills span {
  flex: 1;
  text-align: center;
  padding: 9px 0;
  border-radius: 12px;
  background: var(--tint);
  color: var(--fg-soft);
  font-size: 13px;
  font-weight: 700
}

.dpills span.is-on {
  background: var(--accent);
  color: var(--bg)
}

.dmacros {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0 2px
}

.dring {
  width: 31%;
  position: relative;
  text-align: center
}

.dring svg {
  width: 100%;
  height: auto;
  display: block;
  transform: rotate(-90deg)
}

.dring__t {
  fill: none;
  stroke: var(--tint-2);
  stroke-width: 7
}

.dring__f {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1
}

.dring__v {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.dring__v b {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em
}

.dring__v i {
  font-style: normal;
  font-size: 11px;
  color: var(--fg-soft);
  margin-top: 2px
}

.dring__l {
  display: block;
  font-size: 12px;
  color: var(--fg);
  margin-top: 8px
}

.dkcal {
  padding-top: 2px
}

.dkcal__bar {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: var(--tint-2);
  overflow: hidden
}

.dkcal__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 99px
}

.dkcal__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 7px
}

.dkcal__row b {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent)
}

.dkcal__row i {
  font-style: normal;
  font-size: 12px;
  color: var(--fg-soft)
}

.dtabs {
  display: flex;
  gap: 8px
}

.dtab {
  flex: 1;
  text-align: center;
  padding: 11px 0;
  border-radius: 14px;
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em
}

.dtab--i {
  flex: 0 0 auto;
  width: 44px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 16px
}

.dtab--i .ico {
  width: 16px;
  height: 16px
}

.dmeal {
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  border-radius: 16px;
  padding: 9px 34px 9px 9px;
  transition: transform .18s var(--ease)
}

.dmeal.is-press {
  transform: scale(.965)
}

.dmeal__ph {
  position: relative;
  overflow: hidden;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background: linear-gradient(140deg, #E9DAC4, #CBAB8F)
}

.dmeal__ph--b {
  background: linear-gradient(140deg, #E7B8AC, #C98872)
}

.dmeal__ph--c {
  background: linear-gradient(140deg, #DFCFA8, #AC9660)
}

.dmeal__ph--d {
  background: linear-gradient(140deg, #DCCFAF, #9D8670)
}

.dmeal>div {
  flex: 1;
  min-width: 0
}

.dmeal b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em
}

.dmeal__row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 7px;
  flex-wrap: wrap
}

.dmeal__k {
  font-style: normal;
  background: var(--accent);
  color: var(--bg);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 99px
}

.dmeal__row em {
  font-style: normal;
  font-size: 11px;
  color: var(--fg-soft)
}

.dmeal__c {
  position: absolute;
  right: 11px;
  top: 11px;
  width: 16px;
  height: 16px;
  color: var(--fg-soft);
  background: var(--tint);
  border-radius: 7px;
  padding: 3px;
  box-sizing: content-box
}

.rphoto {
  position: relative;
  height: 230px;
  margin-bottom: 14px;
  overflow: hidden;
  background: linear-gradient(150deg, #E9DAC4 0%, #C8AB8F 45%, #756352 100%)
}

.rphoto__img,
.dmeal__img {
  display: none
}

.rphoto__img[src]:not([src=""]),
.dmeal__img[src]:not([src=""]) {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.rhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: var(--hair) solid var(--rule)
}

.rhead b {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em
}

.rkcal {
  flex: 0 0 auto;
  background: var(--accent);
  color: var(--bg);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 99px
}

.rmacro {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0 6px
}

.rmacro span {
  font-size: 12px;
  color: var(--fg-soft)
}

.rmacro i {
  font-style: normal;
  color: var(--accent);
  font-weight: 700
}

.rtitle {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-top: 4px
}

.ring-list {
  list-style: none;
  margin: 0;
  padding: 0
}

.ring-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: var(--hair) solid var(--rule);
  font-size: 13px
}

.ring-list li:last-child {
  border-bottom: 0
}

.ring-list i {
  font-style: normal;
  color: var(--fg-soft);
  font-weight: 700
}

.mock--recipe .mock__body {
  overflow: hidden
}

.exrow {
  position: relative;
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  border-radius: 16px;
  padding: 14px 48px 13px 16px
}

.exrow__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px
}

.exrow__top b {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25
}

.exrow__top em {
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap
}

.exrow__meta {
  display: flex;
  gap: 18px;
  margin-top: 6px
}

.exrow__meta span {
  font-size: 12px;
  color: var(--fg-soft)
}

.exrow__meta i {
  font-style: normal;
  color: var(--accent);
  font-weight: 700
}

.exrow__tick {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--bg);
  font-size: 11px
}

.exrow__tick--off {
  background: none;
  border: 1.5px solid var(--rule)
}

.tapdot {
  position: absolute;
  z-index: 6;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(17, 17, 16, .14);
  border: 1px solid rgba(17, 17, 16, .22);
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s var(--ease)
}

.tapdot.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1)
}

.sc__screen {
  position: relative;
  display: flex;
  justify-content: center
}

.sc__screen .phone {
  height: clamp(21rem, 52vh, 32rem);
  width: auto;
  flex: 0 0 auto
}

.phone .mock .mock__head {
  padding: 0 18px;
  margin-bottom: 12px
}

.phone .mock .mock__body {
  padding: 0 18px;
  gap: 10px
}

.phone .mock .mock__navbottom {
  padding: 10px 12px 0;
  margin: 0 16px
}

.phone {
  position: relative;
  height: 100%;
  display: flex;
  background: linear-gradient(150deg, #3A3835, #111110 42%, #000 100%);
  border-radius: 2.15rem;
  padding: .42rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .10) inset,
    0 30px 60px -34px rgba(17, 17, 16, .55)
}

.phone__screen {
  position: relative;
  height: 100%;
  width: auto;
  aspect-ratio: 9/19.5;
  overflow: hidden;
  border-radius: 1.78rem;
  background: var(--bg)
}

.phone__island {
  position: absolute;
  top: 2.4%;
  left: 50%;
  z-index: 4;
  width: 30%;
  height: 3.9%;
  background: #000;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 2.5%;

  transform: translateX(-50%) translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden
}

.phone__island::after {
  content: "";
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3B4A57, #0B0E12 70%)
}

.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #4A4844, #232120);
  z-index: 1
}

.phone::before {
  left: -2px;
  top: 22%;
  height: 5%;
  box-shadow: 0 6.5% 0 0 transparent, 0 0 0 0 transparent
}

.phone::after {
  right: -2px;
  top: 30%;
  height: 12%
}

.phone .mock {
  position: absolute;
  left: 0;
  top: 0;
  border: 0;
  border-radius: 0;
  padding: 74px 0 14px;
  width: 390px;
  height: 845px;
  transform-origin: 0 0;
  transform: scale(var(--ms, 1))
}

@media (max-width:600px) {
  .phone {
    border-radius: 1.9rem;
    padding: .36rem
  }

  .phone__screen {
    border-radius: 1.6rem
  }
}

.section--plan {
  position: relative;
  background: var(--tint);
  padding-bottom: clamp(4rem, 9vh, 6rem);
  transition: background-color var(--swap)
}

.section--plan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hair);
  background: var(--rule);
  transition: background-color var(--swap)
}

.planvid {
  grid-column: 7 / -1;
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 0
}

.pv__fan {
  position: relative;
  height: clamp(23rem, 43.6vw, 30.4rem);
  perspective: 1400px;
  transform-style: preserve-3d;

  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none
}

.pv__card {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  width: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  cursor: pointer;

  color: var(--fg);
  -webkit-text-fill-color: currentColor;
  font: inherit;
  transition: transform .7s var(--ease), opacity .5s var(--ease), filter .5s var(--ease);
  will-change: transform
}

.pv__card .phone {
  height: 100%;
  width: auto
}

.pv__card.is-on {
  z-index: 4;
  filter: none;
  cursor: default
}

.pv__card:not(.is-on) {
  opacity: .6
}

.pv__card:not(.is-on):hover {
  opacity: .85
}

.pv__picks {
  display: flex;
  flex-direction: column;
  margin-top: clamp(2.6rem, 5.5vh, 4rem);
  border-top: var(--hair) solid var(--rule)
}

.pv__pick {
  appearance: none;
  border: 0;
  border-bottom: var(--hair) solid var(--rule);
  padding: 1.3rem .1rem;
  margin: 0;
  min-height: 4.6rem;
  background: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-text-fill-color: currentColor;
  display: flex;
  align-items: center;
  gap: .9rem;
  text-align: left;
  color: var(--fg-soft);
  transition: color .45s var(--ease)
}

.pv__pick:hover {
  color: var(--fg)
}

.pv__pick.is-on {
  color: var(--fg);
  order: -1
}

.pv__ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  color: var(--accent);
  opacity: .35;
  transition: opacity .45s var(--ease), transform .45s var(--ease)
}

.pv__pick.is-on .pv__ico {
  opacity: 1;
  transform: scale(1.06)
}

.pv__ico .ico {
  width: 20px;
  height: 20px
}

.pv__txt {
  flex: 1 1 auto;
  min-width: 0
}

.pv__txt b {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: -.026em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.pv__txt i {
  display: block;
  margin-top: .15rem;
  font-style: normal;
  font-size: var(--fs-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .7
}

.pv__time {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: var(--hair) solid var(--rule);
  color: var(--fg-soft);
  transition: border-color .45s var(--ease), background-color .45s var(--ease), color .45s var(--ease)
}

.pv__pick.is-on .pv__time {
  border-color: transparent;
  background: var(--btn-bg);
  color: var(--btn-fg)
}

.pv__ico--w {
  color: var(--accent)
}

.pv__ico--m {
  color: var(--accent)
}

.pv__more {
  margin: 1.2rem 0 0;
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--fg-soft)
}

.mock--instr {
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-2)
}

.phone .mock--instr {
  padding: 0 0 14px
}

.instr__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 58px 20px 14px;
  background: var(--bg)
}

.instr__bar b {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--fg);
  -webkit-text-fill-color: var(--fg)
}

.instr__back,
.instr__ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--tint);
  color: var(--fg);
  flex: 0 0 auto
}

.instr__ava {
  background: var(--accent);
  color: var(--paper-warm)
}

.instr__back .ico,
.instr__ava .ico {
  width: 17px;
  height: 17px
}

.instr__vid {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: linear-gradient(150deg, #4A4844, #232120);
  display: grid;
  place-items: center
}

.instr__vid video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.instr__ph {
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.8
}

.instr__loop {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(17, 17, 16, .62);
  color: #fff;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase
}

.instr__loop .ico {
  width: 12px;
  height: 12px
}

.instr__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 22px 24px
}

.instr__name {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--fg);
  -webkit-text-fill-color: var(--fg)
}

.instr__txt {
  font-size: 14px;
  line-height: 1.62;
  color: var(--fg-soft);
  -webkit-text-fill-color: var(--fg-soft);
  text-align: left
}

.instr__txt p {
  margin: 0 0 12px
}

@media (max-width:1000px) {
  .planvid {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: clamp(2.5rem, 6vh, 3.5rem)
  }

  .pv__fan {
    height: clamp(19rem, 95vw, 29rem)
  }

  .pv__card[data-pv="0"] {
    transform: translateX(-88%) rotateY(20deg) scale(.8)
  }

  .pv__card[data-pv="2"] {
    transform: translateX(-12%) rotateY(-20deg) scale(.8)
  }
}

@media (prefers-reduced-motion:reduce) {
  .pv__card {
    transition: none
  }

  .start__photo .ph__img,
  .start__photo::before {
    animation: none
  }
}

.plan__intro {
  grid-column: 1 / span 5;
  grid-row: 1;
  align-self: start
}

.plan__intro .body-s {
  max-width: 42ch
}

.plan__sum {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: clamp(1.6rem, 3.5vh, 2.4rem);
  padding-top: clamp(1.4rem, 3vh, 1.9rem);
  border-top: var(--hair) solid var(--rule)
}

.plan__sum>div {
  min-width: 0
}

.plan__sum b {
  display: block;
  font-size: var(--fs-num-s);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--accent);
  font-variant-numeric: tabular-nums;

  overflow-wrap: break-word;
  hyphens: auto
}

.plan__sum span {
  display: block;
  margin-top: .35rem;
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-soft)
}

@media (max-width:1000px) {

  .plan__intro {
    grid-column: 1 / -1;
    grid-row: 1
  }

  .planvid {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: clamp(2rem, 4vh, 2.6rem)
  }

  .plan__sum {
    max-width: 34rem
  }
}

.notif {
  position: relative;
  display: flex;
  align-items: center
}

.notif__btn {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg);
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  transition: background-color .3s ease, color var(--swap)
}

.notif__btn:hover {
  background: color-mix(in srgb, var(--fg) 8%, transparent)
}

.notif__btn .ico {
  stroke-width: 1.7
}

.notif__dot {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 99px;
  background: #B23A2E;
  color: #F8EBE2;
  font-size: var(--fs-nano);
  font-weight: 500;
  line-height: 15px;
  text-align: center;
  animation: notifPop .45s cubic-bezier(.22, 1.4, .36, 1) both
}

@keyframes notifPop {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

.notif__panel {
  position: absolute;
  top: calc(100% + .7rem);
  right: 0;
  z-index: 70;
  width: min(23rem, calc(100vw - 2rem));
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  box-shadow: 0 30px 70px -30px rgba(17, 17, 16, .4);
  opacity: 0;
  transform: translateY(-8px) scale(.985);
  pointer-events: none;
  transition: opacity .35s var(--ease), transform .35s var(--ease),
    background-color var(--swap), border-color var(--swap)
}

.notif__panel.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto
}

.notif__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-bottom: var(--hair) solid var(--rule)
}

.notif__head b {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: -.01em
}

.notif__head span {
  font-size: var(--fs-label);
  color: var(--accent);
  letter-spacing: .06em
}

.notif__item {
  display: flex;
  gap: .75rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--accent) 7%, transparent)
}

.notif__ava {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  flex: 0 0 auto;
  overflow: hidden;
  background: linear-gradient(140deg, var(--tint-2), var(--accent));
  display: grid;
  place-items: center
}

.notif__ava .ico {
  width: 13px;
  height: 13px;
  stroke: var(--bg);
  stroke-width: 1.8
}

.notif__ava img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.notif__body {
  min-width: 0;
  flex: 1
}

.notif__msg {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--fg)
}

.notif__msg b {
  font-weight: 500
}

.notif__time {
  display: block;
  font-size: var(--fs-label);
  color: var(--fg-soft);
  margin-top: .35rem
}

@media (max-width:520px) {
  .notif__panel {
    position: fixed;
    top: calc(var(--banner-h) + var(--promo-h) + 3.6rem);
    right: .75rem;
    left: .75rem;
    width: auto
  }
}

@media (prefers-reduced-motion:reduce) {
  .preloader {
    display: none
  }
}

@media (max-width:900px) {

  .blooms,
  .grain {
    display: none
  }

  .start__photo .ph__img,
  .start__photo::before {
    animation: none
  }

  .topbanner__dot {
    animation: none
  }

  .buybar,
  .prem__bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg)
  }

  .ba__handle {
    mix-blend-mode: normal;
    background: #fff
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important
  }
}

.hx__offer {
  max-width: 100%;
  min-width: 0
}

.plan__cost {
  padding-bottom: 1.1rem;
  border-bottom: var(--hair) solid var(--rule)
}

.plan__cost .plan__price {
  border: 0;
  padding-bottom: 0
}

.plan__billing {
  margin: .8rem 0 0;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: var(--fg-soft)
}

/* per-month equivalent under the headline price (quarterly / annual cards) */
.plan__permonth {
  margin: .8rem 0 0;
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-soft)
}

.plan--vip .plan__permonth {
  color: rgba(248, 235, 226, .62)
}

.plan__billing strong {
  font-weight: 500;
  color: var(--fg)
}

.plan__saving {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: 1rem;
  min-height: 4.5rem
}

.plan__saving--deal {
  gap: .55rem;
  padding: .85rem .95rem;
  border: var(--hair) solid rgba(138, 47, 63, .32);
  background: linear-gradient(135deg, rgba(138, 47, 63, .10), rgba(138, 47, 63, .03))
}

.plan--vip .plan__saving--deal {
  border-color: rgba(214, 120, 138, .45);
  background: linear-gradient(135deg, rgba(214, 120, 138, .22), rgba(214, 120, 138, .06))
}

.plan__saving--deal .plan__saving-title {
  align-items: center;
  gap: .6rem .8rem
}

.plan__saving-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .7rem;
  font-size: var(--fs-body-s);
  font-weight: 500
}

.plan__saving-detail {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--fg-soft)
}

.plan--vip .plan__billing,
.plan--vip .plan__saving-detail {
  color: var(--paper-warm)
}

.plan--vip .plan__billing strong,
.plan--vip .plan__saving-title {
  color: var(--paper-warm)
}

/* Active promo in a plan card ({{< plan_price >}}, {{< plan_deal >}}): the regular price struck
   through next to the discounted one, and the same block as .ord__deal on /zamowienie */
.plan__was {
  align-self: flex-end;
  padding-bottom: .35rem;
  font-size: var(--fs-h4);
  color: var(--fg-soft);
  text-decoration-thickness: 1px
}

.plan--vip .plan__was {
  color: rgba(248, 235, 226, .62)
}

/* the regular price ([data-promo]-less twin) shows only once main.js has hidden the promo one */
.plan__now-deal:not([hidden])+.plan__now-full,
.plan__deal-on:not([hidden])+.plan__deal-off {
  display: none
}

/* one discount message at a time: while the promo block shows, it carries the saving vs the
   monthly plan and the regular .plan__saving box steps aside (back once main.js hides the promo) */
.plan:has(.plan__deal:not([hidden])) .plan__saving {
  display: none
}

.plan__deal {
  margin-top: 1rem;
  padding: 1.1rem 1.2rem;
  border: var(--hair) solid rgba(138, 47, 63, .32);
  background: linear-gradient(135deg, rgba(138, 47, 63, .10), rgba(138, 47, 63, .03))
}

.plan__deal p {
  margin: 0
}

.plan__deal-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .8rem
}

.plan__deal-pct {
  padding: .15rem .55rem;
  background: #8A2F3F;
  color: #fff;
  font-size: var(--fs-body-s);
  font-weight: 700;
  letter-spacing: .02em
}

.plan__deal-code {
  font-size: var(--fs-small);
  font-weight: 500
}

.plan__deal-code b {
  margin: 0 .15em;
  font-weight: 700;
  letter-spacing: .08em
}

.plan__deal .plan__deal-text {
  margin-top: .8rem;
  font-size: var(--fs-small);
  line-height: 1.55
}

/* the legal note: full-strength text colour (not --fg-soft), so it stays readable on the pink */
.plan__deal .plan__deal-lowest {
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: var(--hair) solid rgba(138, 47, 63, .22);
  font-size: var(--fs-micro);
  line-height: 1.45;
  color: var(--fg)
}

.plan--vip .plan__deal .plan__deal-lowest {
  border-top-color: rgba(214, 120, 138, .35);
  color: var(--paper-warm)
}

.plan--vip .plan__deal {
  border-color: rgba(214, 120, 138, .45);
  background: linear-gradient(135deg, rgba(214, 120, 138, .22), rgba(214, 120, 138, .06));
  color: var(--paper-warm)
}

/* Upcoming releases: monochrome covers with a soft, static halo. */
.program--coming .program__media .ph {
  background: linear-gradient(145deg, #666, #191919) !important;
  box-shadow: 0 0 0 1px rgba(128, 128, 128, .25), 0 6px 24px rgba(0, 0, 0, .12), 0 0 18px rgba(255, 255, 255, .3)
}

.program--coming .program__media .ph {
  isolation: isolate
}

.program--coming .program__media .ph::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .18), transparent 48%, rgba(0, 0, 0, .22));
  box-shadow: inset 0 0 30px rgba(255, 255, 255, .12)
}

.program--coming .ph__img {
  filter: grayscale(1) contrast(.95) brightness(.88)
}

.program__release {
  position: absolute;
  z-index: 3;
  inset: auto .75rem .75rem;
  margin: 0;
  padding: .85rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  background: rgba(15, 15, 15, .88);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
  text-align: center;
  pointer-events: none
}

.program__release-date {
  display: block;
  font-size: clamp(.7rem, 1.2vw, .9rem);
  font-weight: 500;
  line-height: 1.5;
  text-wrap: balance
}

#plan-kwartalny,
#plan-roczny {
  scroll-margin-top: calc(var(--banner-h, 0px) + var(--promo-h, 0px) + 7rem)
}

#plan-kwartalny:target,
#plan-roczny:target {
  outline: 2px solid var(--accent);
  outline-offset: 5px
}

@media (max-width:640px) {
  .topbanner__btn {
    max-width: calc(100% - 2rem)
  }

  #bannerTxt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.15
  }

  .topbanner__btn #bannerTxt i {
    display: block;
    font-size: .55rem;
    letter-spacing: .04em
  }
}


/* Bigger, more visible Booty Queen banner (added; overrides the .topbanner rules above) */
:root {
  --banner-h: 52px;
  --banner-extra: 12px
}

body.banner-off {
  --banner-h: 0px;
  --banner-extra: 0px
}

/* the hero clears the taller banner (--banner-extra = growth over the original 40px / 36px) */
.hero {
  padding-top: calc(clamp(8.5rem, 17vh, 12.5rem) + var(--promo-h) + var(--banner-extra))
}

.topbanner__btn {
  font-size: .85rem;
  letter-spacing: .1em;
  gap: .75rem
}

.topbanner__btn b {
  font-weight: 600
}

.topbanner__clock {
  font-weight: 600
}

.topbanner__dot {
  width: 8px;
  height: 8px
}

/* "Dowiedz się więcej" pill at the end of the banner (replaces the arrow) */
.topbanner__more {
  padding: .4rem .8rem;
  border: 1px solid var(--sand);
  border-radius: 999px;
  color: var(--sand);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1;
  transition: background .3s var(--ease), color .3s var(--ease)
}

.topbanner__btn:hover .topbanner__more {
  background: var(--sand);
  color: var(--ink)
}

.topbanner__more[hidden] {
  display: none
}

/* phones: the elements stacked in a column (title, "zapisy do 1 listopada", countdown, button) */
@media (max-width:640px) {
  :root {
    --banner-h: 104px;
    --banner-extra: 68px
  }

  body.banner-off {
    --banner-h: 0px;
    --banner-extra: 0px
  }

  .topbanner {
    padding-inline: 2rem
  }

  .topbanner__x {
    top: .35rem;
    right: .5rem
  }

  .topbanner__btn {
    flex-direction: column;
    gap: 4px;
    max-width: 100%;
    font-size: .8rem;
    letter-spacing: .06em;
    line-height: 1.15;
    text-align: center
  }

  .topbanner__dot {
    display: none
  }

  .topbanner__btn #bannerTxt i {
    font-size: .66rem;
    letter-spacing: .04em
  }

  .topbanner__clock {
    font-size: .74rem
  }

  .topbanner__more {
    margin-top: 2px;
    padding: .35rem .8rem;
    font-size: .64rem
  }
}
/* Cookie consent banner (partials/cookie.html) */
.ck {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 1000;
  width: min(calc(100% - 2rem), 44rem);
  padding: 1.25rem 1.4rem;
  background: var(--bg, #fff);
  color: var(--fg, #15100B);
  border: 1px solid var(--rule, rgba(117, 99, 82, .28));
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
  font-family: var(--font, system-ui, sans-serif);
  font-size: .8rem;
  line-height: 1.45;
  animation: ck-in .5s cubic-bezier(.22, 1, .36, 1);
}
.ck[hidden] { display: none; }
.ck p { margin: 0 0 .6rem; }
.ck a { color: inherit; text-decoration: underline; }
.ck__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}
.ck__btn {
  flex: 1 1 auto;
  padding: .75rem 1rem;
  border: 1px solid var(--btn-bg, #15100B);
  background: var(--btn-bg, #15100B);
  color: var(--btn-fg, #fff);
  font: inherit;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.ck__btn:hover { background: var(--btn-hover, #756352); border-color: var(--btn-hover, #756352); }
.ck__btn--ghost { background: transparent; color: var(--fg, #15100B); }
.ck__btn--ghost:hover { color: var(--btn-fg, #fff); }
.ck__row {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .45rem 0;
  border-bottom: 1px solid var(--rule, rgba(117, 99, 82, .28));
  cursor: pointer;
}
.ck__row input { margin-top: .2em; accent-color: var(--accent, #756352); }
.ck__setup[hidden], .ck__main[hidden] { display: none; }
@keyframes ck-in {
  from { opacity: 0; transform: translate(-50%, 1rem); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Spinner shown on .cta while the checkout session is created (partials/js_checkout.html) */
.lds-ellipsis { display: inline-flex; gap: .35rem; align-items: center; height: 1em; margin: 0 auto; }
.lds-ellipsis i {
  width: .5em; height: .5em; border-radius: 50%; background: currentColor;
  animation: lds-bounce 1s infinite ease-in-out;
}
.lds-ellipsis i:nth-child(2) { animation-delay: .15s; }
.lds-ellipsis i:nth-child(3) { animation-delay: .3s; }
.lds-ellipsis i:nth-child(4) { animation-delay: .45s; }
@keyframes lds-bounce { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.cta.is-busy { pointer-events: none; justify-content: center; }
/* Simple sub pages (welcome, cookieinfo, delete-account, 404) – layouts/_default/single.html with subpage: true */
.subpage { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); font-family: var(--font); }
.subpage__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--pad); border-bottom: var(--hair) solid var(--rule); }
.subpage__brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; letter-spacing: .02em; color: inherit; text-decoration: none; }
.subpage__mark { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 24%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #E8DBD1 0%, #99897A 52%, #493622 100%); }
.subpage__mark img { width: 80%; height: 80%; object-fit: contain; }
.subpage__back { font-size: var(--fs-small); color: var(--fg-soft); text-decoration: none; }
.subpage__back:hover { color: var(--fg); }
.subpage__main { flex: 1; width: 100%; max-width: 48rem; margin-inline: auto; padding: clamp(2.5rem, 6vw, 5rem) var(--pad); }
.subpage__main h1 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.1; letter-spacing: -.04em; margin: 0 0 1rem; }
.subpage__main h2 { font-size: var(--fs-h3, 1.4rem); font-weight: 500; letter-spacing: -.02em; margin: 2.2rem 0 .6rem; }
.subpage__main h3 { font-size: var(--fs-body); font-weight: 600; margin: 1.4rem 0 .3rem; }
.subpage__main p, .subpage__main li { font-size: var(--fs-body); line-height: 1.6; color: var(--fg); }
.subpage__main p { margin: 0 0 .9rem; }
.subpage__main a:not(.cta) { color: inherit; text-decoration: underline; }
.subpage__lead { font-size: var(--fs-lead); color: var(--fg-soft); margin-bottom: 1.6rem; }
.subpage__box { border: var(--hair) solid var(--rule); background: var(--tint); padding: 1.2rem 1.4rem; margin: 1.2rem 0; }
.subpage__box p:last-child { margin-bottom: 0; }
.subpage__stores { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.2rem 0; }
.subpage__stores .cta { width: auto; min-width: 12rem; text-decoration: none; }
.subpage__emoji { font-size: 3rem; margin: 1rem 0; }
.subpage__footer { padding: 1.5rem var(--pad); border-top: var(--hair) solid var(--rule); font-size: var(--fs-micro); color: var(--fg-soft); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; }
.subpage__footer a { color: inherit; text-decoration: none; }
.subpage__footer a:hover { text-decoration: underline; }
.subpage__zoho .zsFormClass { width: 100% !important; max-width: 100%; }
.subpage__zoho input[type='text'] { width: 100% !important; box-sizing: border-box; font: inherit; padding: .6rem .7rem !important; }
.subpage__zoho input[type='submit'], .subpage__zoho input[type='button'] { padding: .7rem 1.2rem; border: 1px solid var(--btn-bg); background: var(--btn-bg); color: var(--btn-fg); font: inherit; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-micro); cursor: pointer; }
.subpage__zoho input[type='button'] { background: transparent; color: var(--fg); }

/* Order page (content/zamowienie) – summary of the chosen plan + e-mail, on top of .field from style.css */
.ord { margin-top: 1.8rem; }
.ord__summary { margin-bottom: 2rem; }
.ord__legend { margin: 0 0 .8rem; font-size: var(--fs-label); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-soft); }
.ord__plan { display: block; padding: 1.1rem 1.2rem; border: var(--hair) solid var(--fg); background: var(--tint); }
.ord__plan-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; }
.ord__plan-name { font-size: var(--fs-lead); font-weight: 500; }
.ord__plan-price { font-size: var(--fs-lead); white-space: nowrap; }
.ord__plan-price i { margin-left: .4rem; font-style: normal; font-size: var(--fs-small); color: var(--fg-soft); }
.ord__plan-note { display: block; margin-top: .3rem; font-size: var(--fs-micro); color: var(--fg-soft); }
.ord__plan-was { margin-right: .5rem; font-size: var(--fs-body); color: var(--fg-soft); text-decoration-thickness: 1px; }
.ord__plan-price > span { font-weight: 600; }
/* Active promo: the discounted price and what it means for renewals (filled in by the page script) */
.ord__plan--deal .ord__plan-price > span { color: #8A2F3F; }
.ord__deal { display: block; margin-top: 1rem; padding: 1.1rem 1.2rem; border: var(--hair) solid rgba(138, 47, 63, .32); background: linear-gradient(135deg, rgba(138, 47, 63, .10), rgba(138, 47, 63, .03)); }
.ord__deal-top { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.ord__deal-pct { padding: .15rem .55rem; background: #8A2F3F; color: #fff; font-size: var(--fs-body); font-weight: 700; letter-spacing: .02em; }
.ord__deal-code { font-size: var(--fs-small); font-weight: 500; }
.ord__deal-code b { margin: 0 .15em; font-weight: 700; letter-spacing: .08em; }
.ord__deal-text { display: block; margin-top: .8rem; font-size: var(--fs-small); line-height: 1.55; }
.ord__deal-lowest { display: block; margin-top: .7rem; padding-top: .6rem; border-top: var(--hair) solid rgba(138, 47, 63, .22); font-size: var(--fs-micro); color: var(--fg); }
.ord__deal-toggle { padding: 0; border: 0; background: none; font: inherit; color: var(--fg); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.ord__deal-toggle:hover { color: #8A2F3F; }
.ord__deal-remove { display: grid; place-items: center; width: 2rem; height: 2rem; margin-left: auto; padding: 0; border: var(--hair) solid rgba(138, 47, 63, .32); background: none; font: inherit; font-size: 1.25rem; line-height: 1; color: var(--fg); cursor: pointer; }
.ord__deal-remove:hover { border-color: #8A2F3F; background: #8A2F3F; color: #fff; }
.ord__deal-off { display: block; margin-top: .8rem; font-size: var(--fs-micro); color: var(--fg-soft); }
.ord__deal-toggle b { font-weight: 700; letter-spacing: .08em; }
.ord__field { margin-bottom: 1.2rem; }
.ord__hint { display: block; margin-top: .6rem; font-size: var(--fs-micro); line-height: 1.55; color: var(--fg-soft); }
.ord__hint strong { font-weight: 700; color: var(--fg); }
.subpage__main .ord__legal { margin: 0 0 1.1rem; font-size: var(--fs-micro); line-height: 1.55; color: var(--fg-soft); }
.field.is-bad input { border-bottom-color: #9B3547; }
.subpage__main .ord__err { margin: 0 0 1.1rem; font-size: var(--fs-small); color: #9B3547; }
.ord__send { width: 100%; text-decoration: none; }
.subpage__main .ord__back { margin: 1.8rem 0 0; font-size: var(--fs-small); }

/* "·" between footer links (landing page + sub pages) */
.footer-sep { margin: 0 .4em; }