/* Emoot marketing site. Source: site/site.css -> built to public/assets/css/site.css
   Torn-edge clip-paths (.torn-*) are appended by site/build.js. */
:root {
  --yellow: #fde619;
  --ink: #1d1c1d;
  --brand: #fde619;
  --tint: #fff494;
  --soft: #fdf9b4;
  --gifting: #eaa7c7;
  --saving: #fec428;
  --paying: #ff6ec7;
  --green: #00bf63;
  --wrap: 1240px;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
  --body: "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  overflow-x: hidden;
}
img,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
h1,
h2,
h3,
p {
  margin: 0;
}
.wrap {
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- type ---------- */
.h1,
.h2,
.h3,
.label,
.btn,
.nav a {
  font-family: var(--marker);
  font-weight: 400;
}
.h1,
.h2 {
  font-size: clamp(30px, 3.5vw, 50px);
  line-height: 1.05;
  text-wrap: balance;
}
.h3 {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.15;
}
.prose p + p {
  margin-top: 1.1em;
}
.prose a {
  text-decoration: underline;
}
.center {
  text-align: center;
}

/* brush-stroke label behind a small heading */
.label {
  display: inline-block;
  position: relative;
  z-index: 0;
  font-size: clamp(17px, 1.7vw, 24px);
  line-height: 1.2;
  text-transform: uppercase;
  padding: 6px 48px 8px;
  color: var(--ink);
}
.label::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--label, var(--yellow));
  -webkit-mask: url(/assets/img/brush.svg) center / 100% 100% no-repeat;
  mask: url(/assets/img/brush.svg) center / 100% 100% no-repeat;
}
.label--black {
  --label: #000;
  color: var(--tint);
}
.label--pink {
  --label: var(--paying);
}
.label--mauve {
  --label: var(--gifting);
}
.label--orange {
  --label: var(--saving);
}
.label--green {
  --label: var(--green);
}
.label--white {
  --label: #fff;
}
.label--tint {
  --label: var(--tint);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 170px;
  min-height: 38px;
  padding: 8px 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--btn, var(--soft));
  color: var(--ink);
  font-size: 15px;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  transform: translateY(-2px) rotate(-1deg);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.15);
}
.btn:focus-visible,
a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.btn--outline {
  min-width: 0;
  background: transparent;
  border-color: var(--ink);
}
.btn--white {
  --btn: #fff;
}
.btn--tint {
  --btn: var(--tint);
}
.btn--brand {
  --btn: var(--brand);
}
.btn--yellow {
  --btn: var(--yellow);
}
.btn--black {
  --btn: #000;
  color: #fff494;
}
.btn--lg {
  font-size: 20px;
  min-height: 40px;
}
.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.center .btns,
.btns--center {
  justify-content: center;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--brand);
}
.site-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 95px;
}
.site-header__logo img {
  width: 103px;
  height: auto;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.4vw, 54px);
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.4vw, 54px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__item {
  position: relative;
}
.nav__link {
  font-size: clamp(20px, 2vw, 28px);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-block: 18px;
}
.nav__item--sub > .nav__link {
  padding-right: 18px;
}
.nav__item--sub > .nav__link::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  translate: 0 -70%;
  rotate: 45deg;
}
.nav__sub {
  position: absolute;
  left: -18px;
  top: 100%;
  min-width: 240px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity 0.15s ease, translate 0.15s ease, visibility 0.15s;
}
.nav__item--sub:hover > .nav__sub,
.nav__item--sub:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
.nav__sub a {
  display: block;
  padding: 9px 20px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}
.nav__sub a:hover,
.nav__sub a[aria-current="page"],
.nav__has-sub:hover > a {
  background: var(--soft);
}
/* second level: a flyout beside the item, flagged with a chevron */
.nav__expand {
  display: none;
}
.nav__has-sub {
  position: relative;
}
.nav__has-sub > a {
  position: relative;
  padding-right: 40px;
}
.nav__has-sub > a::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  translate: 0 -50%;
  rotate: -45deg;
}
.nav__sub .nav__sub {
  left: calc(100% - 6px);
  top: -10px;
  translate: 8px 0;
}
.nav__has-sub:hover > .nav__sub,
.nav__has-sub:focus-within > .nav__sub {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
/* the last menu sits near the right edge, so its flyouts open to the left */
.nav__item:last-child .nav__sub .nav__sub {
  left: auto;
  right: calc(100% - 6px);
  translate: -8px 0;
}
.nav__item:last-child .nav__has-sub > a::after {
  rotate: 135deg;
}
.nav__item:last-child .nav__has-sub:hover > .nav__sub,
.nav__item:last-child .nav__has-sub:focus-within > .nav__sub {
  translate: 0 0;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  background: var(--ink);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}
.nav__link::after {
  bottom: 14px;
}
.nav .btn {
  min-width: 145px;
}
.nav-toggle,
.header-app {
  display: none;
}

/* ---------- hero: person on swoosh ---------- */
.hero {
  position: relative;
}
.hero-p {
  min-height: min(46vw, 885px);
  padding-block: clamp(40px, 5.4vw, 78px) 60px;
}
.hero-p__art {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: min(100vw, 1920px);
  aspect-ratio: 1440 / 660;
  pointer-events: none;
}
.hero-p__art > * {
  position: absolute;
}
.hero-p__swoosh {
  left: -8.26%;
  top: -7.9%;
  width: 131.4%;
  height: 100.8%;
  background: var(--brand);
  -webkit-mask: url(/assets/img/swoosh.svg) center / 100% 100% no-repeat;
  mask: url(/assets/img/swoosh.svg) center / 100% 100% no-repeat;
}
.hero-p__ring {
  left: 42.3%;
  top: -3.9%;
  width: 63.6%;
}
.hero__text {
  position: relative;
  z-index: 2;
  max-width: 560px;
}
.hero-p .hero__text {
  max-width: min(56%, 700px);
}
.eyebrow {
  font-family: var(--marker);
  font-size: clamp(17px, 1.7vw, 24px);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hero__text p {
  margin-top: 14px;
  max-width: 520px;
}

/* ---------- hero: flat colour with torn bottom ---------- */
.hero-f {
  background: var(--brand);
  margin-top: -1px;
  padding-block: 50px 140px;
}
.hero-f__in {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
}
.hero-f__icon {
  justify-self: center;
  position: relative;
  max-width: 100%;
}
.hero-f__icon img {
  max-width: 100%;
  height: auto;
}
.hero-f__icon .inner {
  position: absolute;
  left: 13%;
  top: 38%;
  width: 35%;
}
.hero-f .hero__text {
  max-width: 660px;
}
.hero-f {
  position: relative;
  z-index: 2;
}
.hero-f + .band {
  margin-top: -60px;
  padding-top: 100px;
}
.nowrap {
  white-space: nowrap;
}
.hero-f--plain .hero-f__in {
  grid-template-columns: 1fr;
}

/* ---------- sections ---------- */
.section {
  padding-block: clamp(56px, 8.5vw, 124px);
  position: relative;
}
.band {
  background: var(--tint);
  position: relative;
  margin-block: -1px;
  padding-block: 40px;
}
.band--brand {
  background: var(--brand);
}
.band--white {
  background: #fff;
}
.band {
  --badge-ring: var(--tint);
}
.band .band--white {
  --badge-ring: #fff;
}
.label--onblack {
  --label: #000;
  color: #fff;
}
@media (min-width: 761px) {
  .band.band--white.band--blob {
    max-width: none;
    margin-inline: -7vw;
  }
  .band.band--blob {
    max-width: 1320px;
    margin: 30px auto;
    padding-block: 50px 80px;
    clip-path: none;
    -webkit-mask: url(/assets/img/occ-bg.svg) center / 100% 100% no-repeat;
    mask: url(/assets/img/occ-bg.svg) center / 100% 100% no-repeat;
  }
}
.section-head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto clamp(32px, 4vw, 56px);
}
.section-head .h2 {
  margin: 16px auto 0;
  max-width: 740px;
}
.section-head p {
  margin-top: 16px;
}
.section-head--wide .h2 {
  max-width: none;
}

/* intro */
.intro {
  text-align: center;
}
.intro__icon img {
  margin-inline: auto;
}
.t-short {
  display: none;
}
.intro__icon {
  width: 104px;
  margin: 0 auto 18px;
}
.intro .h2 {
  margin: 16px auto 0;
  max-width: 740px;
}
.intro--wide .h2 {
  max-width: 960px;
}
.intro__icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 26px;
  margin-bottom: 30px;
}
.intro__icons img {
  height: 96px;
  width: 96px;
  object-fit: contain;
}
.intro .prose {
  margin: 22px auto 0;
  max-width: 900px;
}
@keyframes maple-wave {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -14deg; }
  60% { rotate: 12deg; }
}
.mark > img:first-child {
  transform-origin: 50% 90%;
}
.mark:hover > img:first-child {
  animation: maple-wave 0.7s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce) {
  .mark:hover > img:first-child {
    animation: none;
  }
}
.mark {
  width: 62px;
  margin: 26px auto 0;
}
.mark img + img {
  margin-top: -2px;
}
.powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-family: var(--marker);
  font-size: clamp(26px, 2.8vw, 40px);
  margin-top: 44px;
}
.powered a {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
}
.powered a:hover span {
  text-decoration: underline;
}
.powered--small {
  font-size: 16px;
  font-family: var(--body);
}
.powered--small a {
  flex-direction: column;
  gap: 8px;
}
.powered img {
  width: 88px;
}

/* stats */
.stats {
  background: #000;
  color: #fff;
  position: relative;
  z-index: 3;
}
.stats__in {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1000px;
  padding-block: 38px;
  text-align: center;
}
.stats b {
  display: block;
  font-family: var(--marker);
  font-weight: 400;
  font-size: clamp(26px, 3.5vw, 50px);
  color: var(--yellow);
  line-height: 1.2;
}
.stats span {
  font-size: clamp(12px, 1.25vw, 18px);
}

/* cards */
.cards {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: clamp(20px, 4.5vw, 64px);
  max-width: 1120px;
  margin-inline: auto;
}
.cards--4 {
  --cols: 4;
  gap: 24px;
  max-width: none;
}
.cards--wide {
  gap: 28px;
  max-width: 1256px;
}
.cards--wide .card__top {
  min-height: 236px;
  padding-bottom: 60px;
}
.cards--wide .card__body {
  padding-inline: 46px;
}
.card {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.card__top {
  position: relative;
  isolation: isolate;
  color: var(--ct, var(--ink));
  padding: 26px 16px 46px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
.card__top::before,
.compare__col h3::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c, var(--brand));
  border-radius: 22px 22px 0 0;
}
.card__top img {
  height: 90px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
}
.cards--tight {
  gap: 26px;
  max-width: 1034px;
}
.cards--tight .card__top {
  min-height: 186px;
}
.card--badge {
  margin-top: 70px;
}
.card--badge .card__top {
  padding-top: 92px;
  min-height: 190px;
}
.card--badge .card__icon {
  position: absolute;
  top: -68px;
  left: 50%;
  translate: -50% 0;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: var(--c);
  border: 8px solid var(--ring, #fff);
  display: grid;
  place-items: center;
}
.card--badge .card__icon img {
  height: 84px;
  width: 84px;
  object-fit: contain;
}
/* face badges: the ring is the section colour, as in Figma (the artwork's own white ring was removed) */
.card--badge .card__icon--full {
  border: 8px solid var(--ring, var(--tint));
}
.card--badge .card__icon--full img {
  width: 100%;
  height: 100%;
}
.card__title {
  font-family: var(--marker);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.1;
}
.card__body {
  padding: 14px 14px 0;
  flex: 1;
}
.card .btn {
  align-self: center;
  margin-top: 26px;
  --btn: var(--c, var(--brand));
  color: var(--ct, var(--ink));
}
.icon-mask {
  display: block;
  width: 90px;
  height: 90px;
  background: var(--ct, var(--ink));
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.card--dark {
  --c: #000;
  --ct: #fff494;
}
.card--dark .card__top img {
  filter: invert(86%) sepia(64%) saturate(700%) hue-rotate(2deg) brightness(105%);
}
.card--mini .card__top {
  min-height: 0;
  padding: 26px 18px 40px;
  justify-content: center;
}

/* steps with phone */
.steps {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  max-width: 1020px;
  margin-inline: auto;
}
.phone {
  position: relative;
  width: min(100%, 396px);
  justify-self: center;
}
.phone > img {
  width: 100%;
}
.phone__screen {
  position: absolute;
  inset: 6% 7% 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9%;
  overflow: hidden;
  border-radius: 9%;
}
.phone__screen .smile {
  width: 68%;
}
.phone__icons {
  display: flex;
  gap: 4%;
  justify-content: center;
  width: 100%;
}
.phone__icons span {
  width: 28%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.phone__icons img {
  width: 62%;
  max-height: 62%;
  object-fit: contain;
}
.phone__band {
  align-self: stretch;
  background: var(--c);
  padding: 12% 8% 16%;
  text-align: center;
  margin-top: -6%;
}
.phone__band b {
  display: block;
  font-family: var(--marker);
  font-weight: 400;
  font-size: 20px;
}
.phone__band span {
  font-size: 13px;
  line-height: 1.2;
  display: block;
  margin-top: 6px;
}
.phone__screen .phone-logo {
  width: 34%;
}
.steplist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.steplist li + li {
  margin-top: 26px;
}
.steplist p {
  margin-top: 8px;
}
.steplist .step-art {
  margin-top: 18px;
  max-width: min(100%, 395px);
}
.steplist .step-art--sm {
  width: 62px;
}
.social-link {
  display: inline-block;
  width: 34px;
  margin-top: 18px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.chips span {
  background: #fff;
  border-radius: 8px;
  padding: 7px 16px;
}

/* walkthrough rows (how-it-works detail pages) */
.walk {
  display: grid;
  gap: clamp(36px, 5vw, 70px);
  max-width: 1040px;
  margin-inline: auto;
}
.walk__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
}
.walk__row--flip .phone {
  order: 2;
}
.walk__row--flip {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}

/* feature rows */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 0 10px;
  align-items: center;
  max-width: 1300px;
  margin-inline: auto;
}
.feature--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
.feature--flip .media {
  order: 2;
}
.feature__text {
  max-width: 575px;
}
.feature--flip .feature__text {
  margin-left: clamp(0px, 5vw, 70px);
}
/* the photo canvas carries transparent margins, as in Figma's 750px frames */
.media {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 1;
  justify-self: center;
  margin-block: -6%;
}
.media__blob {
  position: absolute;
  left: 8.5%;
  top: 14%;
  width: 70%;
  height: 78%;
  background: var(--blob, var(--yellow));
  -webkit-mask: url(/assets/img/blob.svg) center / 100% 100% no-repeat;
  mask: url(/assets/img/blob.svg) center / 100% 100% no-repeat;
}
.media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.media--face > img {
  inset: 9% auto auto 4%;
  width: 38%;
  height: auto;
}
.feature--flip .media--face > img {
  left: 46%;
}
.media__icons {
  position: absolute;
  inset: 24% 27% 18% 14%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  place-items: center;
}
.media__icons img {
  width: 74%;
  max-height: 100%;
  object-fit: contain;
}
.media__blob--outline {
  background: var(--outline);
  transform: scale(1.045);
}
.media > img.media__overlay,
.media > img.media__img--placed {
  inset: auto;
  height: auto;
}
.media__overlay {
  position: absolute;
}
.media--ring > img {
  border: 9px solid #fff;
  border-radius: 50%;
}
.media__badge {
  position: absolute;
  left: 4%;
  top: 9%;
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--badge, var(--blob));
  border: 5px solid var(--badge-ring, #fff);
  display: grid;
  place-items: center;
}
.media__badge img {
  width: 58%;
  max-height: 58%;
  object-fit: contain;
}
.feature__text .h2 {
  margin-top: 12px;
}
.feature__text .prose {
  margin-top: 16px;
}
.feature--values .h2 {
  margin-top: 0;
}

/* testimonials */
.testis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3.4vw, 50px);
  max-width: 1200px;
  margin-inline: auto;
}
.testi {
  position: relative;
  padding: 44px 0 0 36px;
  display: flex;
}
.testi__card {
  flex: 1;
}
.testi::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 88px;
  height: 88px;
  background: url(/assets/img/quote.svg) center / contain no-repeat;
  z-index: 1;
}
.testi__card {
  background: var(--testi, #fff);
  border-radius: 0 0 26px 26px;
  padding: 70px 34px 44px;
  min-height: 310px;
  text-align: center;
}
.testi__card p {
  margin-top: 0;
}
.testi__card cite {
  display: block;
  font-family: var(--marker);
  font-style: normal;
  font-size: 22px;
  margin-top: 18px;
}

/* compare */
.compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1072px;
  margin-inline: auto;
}
.compare__col h3 {
  isolation: isolate;
  padding: 26px 20px 38px 84px;
  font-family: var(--marker);
  font-weight: 400;
  font-size: clamp(18px, 2vw, 26px);
  position: relative;
}
.compare__col h3::after {
  content: "";
  position: absolute;
  left: -6px;
  top: -14px;
  width: 84px;
  height: 84px;
  background: url(/assets/img/mark-cross.svg) center / contain no-repeat;
}
.compare__col--good h3::after {
  left: -12px;
  top: -34px;
  width: 104px;
  height: 100px;
  background-image: url(/assets/img/mark-tick.svg);
}
.compare__col ul {
  margin: 10px 0 0;
  padding: 0 20px 0 44px;
  color: var(--c);
}
.compare__col li + li {
  margin-top: 16px;
}
.compare__col--bad {
  --c: #ff3131;
}
.compare__col--good {
  --c: #00bf63;
}

/* occasions */
.occasions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 2vw, 26px);
  max-width: 1040px;
  margin-inline: auto;
}
.occ {
  aspect-ratio: 233 / 213;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  -webkit-mask: url(/assets/img/tile.svg) center / 100% 100% no-repeat;
  mask: url(/assets/img/tile.svg) center / 100% 100% no-repeat;
}
.occ img {
  width: 48%;
  aspect-ratio: 1;
  object-fit: contain;
}

/* faq */
.faq {
  max-width: 912px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}
.faq summary,
.faq__a {
  overflow-wrap: anywhere;
}
.faq details {
  background: var(--faq, #fff);
  border-radius: 14px;
  border: 1px solid var(--faq-line, transparent);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 22px 12px 44px;
  min-height: 67px;
  font-family: var(--marker);
  font-size: clamp(19px, 2.2vw, 30px);
  line-height: 1.15;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq__q {
  min-width: 0;
}
.faq summary::after {
  content: "";
  flex: none;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: var(--chev, var(--tint))
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l6 9 6-9'/%3E%3C/svg%3E")
    center / 58% no-repeat;
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(-90deg);
  background-color: var(--accent, var(--brand));
}
.faq details[open] {
  background: #fff;
}
.faq__a {
  margin: 0 40px;
  padding: 26px 0 38px;
  border-top: 2px solid var(--accent, var(--brand));
}
.faq-more {
  text-align: center;
  margin-top: 28px;
}
.faq--solid {
  --faq: var(--brand);
  --faq-line: var(--tint);
  --chev: var(--tint);
}

/* final cta */
.final {
  text-align: center;
  padding-block: clamp(70px, 9vw, 130px) clamp(50px, 6vw, 90px);
}
.final__title {
  font-family: var(--marker);
  font-weight: 400;
  font-size: clamp(44px, 7vw, 100px);
  line-height: 1.12;
  max-width: 900px;
  margin-inline: auto;
  text-wrap: balance;
}
.final__title span {
  background: url(/assets/img/brush-big.svg) center / 100% 82% no-repeat;
  padding: 0 0.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.final__body {
  position: relative;
  max-width: 480px;
  margin: 28px auto 0;
}
.final__copy p {
  font-size: clamp(18px, 1.8vw, 24px);
  max-width: 480px;
  margin-inline: auto;
}
.final__scribble {
  width: 266px;
  margin: 26px auto -6px;
}
.final__art {
  position: absolute;
  left: calc(100% - 40px);
  top: -30px;
  width: clamp(190px, 22vw, 310px);
  aspect-ratio: 385 / 367;
}
.final__art img {
  position: absolute;
}
.final__art .a-faces {
  left: 0;
  top: 0;
  width: 80.5%;
}
.final__art .a-squiggle {
  left: 21.6%;
  top: 13.6%;
  width: 78.4%;
}
.final__art .a-icons {
  left: 12.5%;
  top: 65%;
  width: 25%;
}

/* logos */
.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  max-width: 860px;
  margin-inline: auto;
}
.logos span {
  background: #fff;
  width: 240px;
  aspect-ratio: 233 / 180;
  display: grid;
  place-items: center;
  padding: 34px 40px;
  -webkit-mask: url(/assets/img/tile.svg) center / 100% 100% no-repeat;
  mask: url(/assets/img/tile.svg) center / 100% 100% no-repeat;
}
.logos img {
  max-height: 100%;
  object-fit: contain;
}
.team-photo {
  width: min(100%, 782px);
  margin-inline: auto;
}

/* long-form prose (founding story, legal) */
.longform {
  max-width: 1020px;
}
.longform .label {
  margin-bottom: 14px;
}
.longform h2,
.longform h3 {
  font-family: var(--marker);
  font-weight: 400;
  line-height: 1.1;
  margin: 1.5em 0 0.5em;
}
.longform h2 {
  font-size: clamp(26px, 3.5vw, 50px);
}
.longform h3 {
  font-size: clamp(21px, 2.2vw, 30px);
}
.longform > :first-child {
  margin-top: 0;
}
.longform p,
.longform ul,
.longform ol {
  margin: 0 0 1em;
}
.longform strong {
  font-weight: 700;
}
.legal h1 {
  font-family: var(--marker);
  font-weight: 400;
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1.1;
  margin-bottom: 0.4em;
}
.legal {
  font-size: 16px;
  overflow-wrap: anywhere;
}
.legal table {
  width: 100%;
  border-collapse: collapse;
}
.legal td,
.legal th {
  border: 1px solid #ccc;
  padding: 8px;
  vertical-align: top;
}

/* partners */
.partner-list summary {
  justify-content: flex-start;
  gap: 26px;
  padding-left: 16px;
  min-height: 122px;
}
.partner-list summary::after {
  margin-left: auto;
}
.partner__logo {
  flex: none;
  width: 176px;
  height: 100px;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 0 20px;
  -webkit-mask: url(/assets/img/tile.svg) center / 100% 100% no-repeat;
  mask: url(/assets/img/tile.svg) center / 100% 100% no-repeat;
}
.partner__logo img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
}
.partner-list details:not([open]) .partner__logo,
.band .partner__logo {
  background: #fff;
}
.partner-list.faq--solid details[open] .partner__logo {
  background: var(--tint);
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  line-height: 1.75;
}
.site-footer__in {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 0.9fr 1.2fr 1.3fr;
  gap: 30px;
  padding-block: 40px 20px;
}
.site-footer h2 {
  font-family: var(--marker);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 8px;
}
.site-footer ul {
  margin: 0;
  padding-left: 22px;
}
.site-footer a {
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}
.site-footer__about {
  font-size: 14px;
  line-height: 1.3;
}
.site-footer__about img {
  width: 123px;
  margin-bottom: 14px;
}
.site-footer__about h2 {
  margin-top: 22px;
}
.site-footer__about a.mail {
  color: var(--yellow);
  text-decoration: underline;
}
.socials {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}
.socials a {
  display: block;
  width: 37px;
  height: 37px;
  background: url(/assets/img/socials.svg) calc(var(--i) * -43.67px) 0 / 168px 37px no-repeat;
  transition: transform 0.15s ease;
}
.socials a:hover {
  transform: translateY(-2px);
}
.socials .socials__li {
  background: none;
}
.site-footer .socials {
  gap: 10px;
  margin-top: 22px;
  padding: 0;
}
.site-footer__links {
  text-align: center;
  padding-bottom: 14px;
}
.site-footer__links a {
  text-decoration: underline;
}
.site-footer__legal {
  background: #2a2a2a;
  color: #d9d9d9;
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  padding: 14px 24px;
}

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .js .reveal.in {
    opacity: 1;
    transform: none;
  }
}

/* ---------- tablet ---------- */
@media (max-width: 1000px) {
  .cards--4 {
    --cols: 2;
  }
  .site-footer__in {
    grid-template-columns: repeat(3, 1fr);
  }
  .site-footer__about {
    grid-column: 1 / -1;
  }
}

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  body {
    font-size: 16px;
  }
  .wrap {
    width: min(100% - 40px, var(--wrap));
  }
  .site-header__in {
    min-height: 74px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .site-header__logo {
    grid-column: 2;
    grid-row: 1;
  }
  .site-header__logo img {
    width: 84px;
  }
  .nav-toggle {
    display: block;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: 44px;
    height: 44px;
    padding: 9px 6px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    height: 4px;
    border-radius: 4px;
    background: var(--ink);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle span + span {
    margin-top: 6px;
  }
  .nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }
  .nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  .nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }
  .header-app {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    min-width: 0;
    padding-inline: 14px;
  }
  .nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--brand);
    padding: 6px 20px 24px;
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.12);
  }
  .nav-open .nav {
    display: flex;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
  }
  .nav__list {
    display: block;
  }
  .nav__item {
    border-bottom: 2px solid rgba(0, 0, 0, 0.12);
  }
  .nav__link {
    font-size: 26px;
    padding: 12px 0;
  }
  .nav__item--sub > .nav__link::before,
  .nav__link::after {
    display: none;
  }
  .nav__sub {
    position: static;
    opacity: 1;
    visibility: visible;
    translate: none;
    background: none;
    box-shadow: none;
    padding: 0 0 12px 14px;
    min-width: 0;
  }
  .nav__sub .nav__sub,
  .nav__item:last-child .nav__sub .nav__sub {
    padding: 0 0 4px 16px;
    translate: none;
  }
  .nav__has-sub > a::after {
    display: none;
  }
  /* phone menu: nested pages fold away behind an arrow */
  .nav__has-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .nav__expand {
    display: grid;
    place-items: center;
    width: 40px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
  }
  .nav__expand::before {
    content: "";
    width: 8px;
    height: 8px;
    border: solid currentColor;
    border-width: 0 2.5px 2.5px 0;
    translate: 0 -2px;
    rotate: 45deg;
    transition: rotate 0.2s ease, translate 0.2s ease;
  }
  .nav__has-sub.is-open > .nav__expand::before {
    translate: 0 2px;
    rotate: 225deg;
  }
  .nav__has-sub > .nav__sub {
    flex-basis: 100%;
    display: none;
  }
  .nav__has-sub.is-open > .nav__sub {
    display: block;
  }
  .nav__sub a,
  .nav__has-sub > a {
    padding: 6px 0;
  }
  .nav__has-sub:hover > a {
    background: none;
  }
  .nav__sub a:hover,
  .nav__sub a[aria-current="page"] {
    background: none;
    text-decoration: underline;
  }
  .nav .btn {
    margin-top: 18px;
  }

  .hero-p {
    min-height: 0;
    padding-block: 34px 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .hero-p > .wrap {
    order: -1;
  }
  .hero-p .hero__text {
    max-width: none;
  }
  .hero-p__art {
    position: relative;
    left: calc(50% - var(--pc, 0.72) * 215vw);
    translate: none;
    width: 215vw;
    margin-top: 6px;
    aspect-ratio: 1440 / 600;
  }
  .hero .btns {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-f {
    padding-block: 26px 70px;
  }
  .hero-f__in {
    grid-template-columns: 1fr;
  }
  .hero-f__icon {
    width: 170px;
  }
  .intro__icons img {
    height: 70px;
  }

  .h1,
  .h2 {
    font-size: 30px;
  }
  .h1 br,
  .h2 br,
  .final__title br {
    display: none;
  }
  .stats__in {
    gap: 8px;
    padding-block: 22px;
  }
  .stats b {
    font-size: 21px;
  }
  .stats span {
    font-size: 9px;
    display: block;
    line-height: 1.2;
  }

  .cards,
  .cards--4 {
    --cols: 1;
    gap: 34px;
  }
  .card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    column-gap: 14px;
    text-align: left;
    margin-top: 0;
  }
  .card__top,
  .card--badge .card__top {
    grid-row: 1 / 3;
    min-height: 150px;
    padding: 18px 24px 18px 12px;
    justify-content: center;
  }
  .card__top::before {
    border-radius: 22px 0 0 22px;
  }
  .cards--wide .card__top,
  .cards--tight .card__top {
    min-height: 150px;
    padding-bottom: 18px;
  }
  .cards--wide .card__body {
    padding-inline: 0;
  }
  .card--mini .card__top::before {
    border-radius: 22px 22px 0 0;
  }
  .card__top img {
    height: 62px;
  }
  .card--badge .card__icon {
    position: static;
    translate: none;
    width: auto;
    height: auto;
    border: 0;
    background: none;
  }
  .card--badge .card__icon img {
    height: 54px;
  }
  .card__title {
    font-size: 21px;
    text-align: center;
  }
  .card__body {
    padding: 4px 0 0;
    font-size: 15px;
  }
  .card .btn {
    align-self: end;
    justify-self: start;
    margin-top: 12px;
    min-width: 140px;
  }
  .card--mini {
    grid-template-columns: 1fr;
  }
  .t-long {
    display: none;
  }
  .t-short {
    display: inline;
  }
  /* badge cards with no text (About's pillars): keep the desktop shape, centred */
  .card--plain,
  .card--plain.card--badge {
    display: flex;
    width: min(100%, 300px);
    margin: 70px auto 0;
  }
  .card--plain .card__top,
  .card--plain.card--badge .card__top {
    min-height: 0;
    padding: 84px 16px 40px;
  }
  .cards .card.card--plain .torn-card::before {
    border-radius: 22px 22px 0 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 85% 100%, 62% calc(100% - 8px), 38% 100%, 16% calc(100% - 10px), 0 100%);
  }
  .card--plain.card--badge .card__icon {
    position: absolute;
    top: -62px;
    left: 50%;
    translate: -50% 0;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    background: var(--c);
    display: grid;
    place-items: center;
  }
  .card--plain .card__body {
    display: none;
  }
  .card--plain .card__icon--full img {
    width: 100%;
    height: 100%;
  }
  .cards:has(.card--plain) {
    gap: 26px;
  }
  .card--mini .card__top {
    grid-row: auto;
    min-height: 0;
    padding: 22px 16px 36px;
  }
  .card--mini .card__body {
    text-align: center;
    padding: 10px 8px 0;
  }

  .steps,
  .walk__row,
  .walk__row--flip,
  .feature {
    grid-template-columns: 1fr;
  }
  .phone {
    width: 230px;
  }
  .walk__row--flip .phone,
  .feature--flip .media {
    order: 0;
  }
  .media {
    width: min(100%, 380px);
    margin-block: 0 -8%;
  }
  .feature--flip .feature__text {
    margin-left: 0;
  }
  .feature__text {
    max-width: none;
  }
  .feature + .feature {
    margin-top: 50px;
  }
  .btns .btn {
    min-width: 0;
  }

  .testis {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    margin-inline: -20px;
    padding: 0 20px 14px;
    scrollbar-width: none;
  }
  .testis::-webkit-scrollbar {
    display: none;
  }
  .testi {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
  .testi__card {
    min-height: 260px;
    padding: 60px 24px 34px;
  }

  .compare {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .occasions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .faq summary {
    padding-left: 20px;
    min-height: 56px;
  }
  .faq__q {
  min-width: 0;
}
.faq summary::after {
    width: 34px;
    height: 34px;
  }
  .faq__a {
    margin-inline: 20px;
    padding: 18px 0 26px;
  }

  .final__title {
    font-size: 44px;
  }
  .final__art {
    position: relative;
    left: auto;
    top: auto;
    width: 190px;
    margin: 6px auto 0;
  }
  .final__scribble {
    width: 200px;
  }
  .logos span {
    width: 150px;
    padding: 22px 26px;
  }
  .partner-list summary {
    gap: 14px;
    padding-left: 10px;
    min-height: 92px;
  }
  .partner__logo {
    width: 104px;
    height: 72px;
    padding: 0 12px;
  }
  .partner__logo img {
    max-height: 42px;
  }

  .site-footer__in {
    grid-template-columns: 1fr 1fr;
    gap: 26px 18px;
  }
  .site-footer__about,
  .site-footer__join {
    grid-column: 1 / -1;
  }
}

/* ---------- generated torn edges (site/build.js) ---------- */
.torn-band-1{clip-path:polygon(0% 15.3px,2.95% 18.9px,6.1% 30px,9.07% 16.1px,12.02% 19.7px,14.71% 19px,18.69% 16.4px,22.1% 22.4px,23.83% 11.8px,25.95% 8.3px,28.39% 11.1px,30.01% 14.3px,33.11% 11.6px,37.1% 21.7px,40.84% 15.6px,44.09% 7.4px,45.48% 15.4px,49.9% 8.7px,51.59% 16.7px,53.93% 18.5px,57.04% 29.9px,58.71% 30px,62.62% 26.2px,63.9% 12.2px,67.88% 12.1px,70.81% 4.6px,73.67% 12.3px,75.16% 17px,76.51% 15.2px,79.81% 30px,82.42% 28.9px,84.78% 14px,88.4% 11.3px,92.11% 4.7px,95.14% 0px,99.12% 0px,100% 18.7px,100% calc(100% - 11.8px),97.54% calc(100% - 17.5px),95.34% calc(100% - 14.4px),92.45% calc(100% - 3.4px),89.32% calc(100% - 14.1px),86.65% calc(100% - 0px),83.02% calc(100% - 0px),80.66% calc(100% - 8.1px),78.78% calc(100% - 18.8px),75.54% calc(100% - 3.7px),72.7% calc(100% - 10.2px),71.31% calc(100% - 17.1px),69.43% calc(100% - 15.2px),67.16% calc(100% - 8.9px),65.02% calc(100% - 16.9px),60.91% calc(100% - 30px),59.01% calc(100% - 19.8px),56.11% calc(100% - 30px),52.2% calc(100% - 30px),49.72% calc(100% - 30px),46.33% calc(100% - 30px),43.53% calc(100% - 30px),40.29% calc(100% - 30px),38.61% calc(100% - 30px),37.33% calc(100% - 19px),33.5% calc(100% - 30px),30.65% calc(100% - 29.4px),26.94% calc(100% - 30px),24.69% calc(100% - 26.2px),22.96% calc(100% - 19.6px),20.39% calc(100% - 8.1px),16.4% calc(100% - 13.3px),13.82% calc(100% - 10.7px),12.6% calc(100% - 18.2px),8.32% calc(100% - 19.7px),5.42% calc(100% - 30px),4.16% calc(100% - 22px),1.68% calc(100% - 27.3px),0% calc(100% - 18.9px))}
.torn-band-2{clip-path:polygon(0% 2.8px,1.43% 7.1px,3.63% 1.3px,5.54% 1.7px,9.89% 12.5px,11.12% 19.4px,13.01% 5.7px,17.46% 16.9px,20.22% 24.9px,21.6% 23.3px,24.96% 30px,26.86% 30px,28.82% 19.8px,32.61% 8.5px,36.17% 4.2px,39.05% 19px,42.77% 30px,46.98% 30px,50.86% 30px,52.78% 23.8px,55.69% 30px,60.03% 30px,63.36% 24px,67.55% 14.2px,70.05% 24.2px,71.78% 30px,75.94% 30px,77.16% 30px,80.11% 30px,82.5% 23.2px,83.88% 7px,85.74% 11.9px,87.22% 14.4px,91.52% 20.8px,93.32% 10px,96.94% 11.7px,99.15% 0px,100% 25.2px,100% calc(100% - 26.9px),97.96% calc(100% - 22.8px),95.72% calc(100% - 24px),92.69% calc(100% - 15.5px),90.12% calc(100% - 30px),88.38% calc(100% - 30px),86.85% calc(100% - 30px),84% calc(100% - 30px),81.04% calc(100% - 21.7px),76.75% calc(100% - 27.4px),74.2% calc(100% - 19.2px),72.06% calc(100% - 18.1px),69.96% calc(100% - 10.3px),67.34% calc(100% - 22.3px),64.39% calc(100% - 30px),61.01% calc(100% - 28px),57.15% calc(100% - 21.8px),55.43% calc(100% - 26.3px),51.27% calc(100% - 19.5px),47.09% calc(100% - 9.5px),43.57% calc(100% - 24.2px),41.02% calc(100% - 18px),37.81% calc(100% - 30px),35.68% calc(100% - 25.4px),33.66% calc(100% - 13.4px),31.08% calc(100% - 2.7px),28.78% calc(100% - 10px),24.39% calc(100% - 20.8px),23.04% calc(100% - 30px),18.81% calc(100% - 24.3px),17.41% calc(100% - 30px),13.44% calc(100% - 30px),10.8% calc(100% - 26.3px),9.33% calc(100% - 11px),7.2% calc(100% - 13.3px),3.53% calc(100% - 20.7px),0% calc(100% - 12.9px))}
.torn-band-3{clip-path:polygon(0% 15.5px,4.49% 0px,8.13% 0px,11.27% 0px,15.63% 4.6px,18.47% 7.9px,22.3% 0px,25.95% 14.1px,30.07% 29.3px,32.02% 30px,35.7% 17.1px,38.46% 5.7px,41.84% 0px,45.53% 0px,48.92% 0px,52.03% 15.5px,54.42% 10.9px,57.35% 0px,61.54% 13.7px,63.17% 4.5px,66.25% 11px,68.49% 22.7px,70.28% 13.4px,73.69% 0px,76.76% 16.2px,80.94% 1.4px,83.12% 0px,87.26% 0.3px,89.82% 9.8px,93.47% 9.5px,95.7% 8.1px,100% 7.7px,100% calc(100% - 29.9px),96.35% calc(100% - 24.1px),94.56% calc(100% - 23.5px),92.44% calc(100% - 16.7px),88.87% calc(100% - 2.3px),84.7% calc(100% - 16.2px),81.91% calc(100% - 12.6px),80.66% calc(100% - 17.2px),79% calc(100% - 30px),76.38% calc(100% - 30px),74.89% calc(100% - 20.1px),71.4% calc(100% - 6px),68.03% calc(100% - 0px),65.86% calc(100% - 1px),63.99% calc(100% - 8.1px),59.95% calc(100% - 7.9px),57.75% calc(100% - 0px),54.42% calc(100% - 0px),51.25% calc(100% - 1.9px),49.88% calc(100% - 0px),47.2% calc(100% - 0px),43.33% calc(100% - 0px),39.34% calc(100% - 0px),38.06% calc(100% - 1px),34.27% calc(100% - 0px),32.87% calc(100% - 9.7px),31.56% calc(100% - 17.3px),30.19% calc(100% - 14.3px),27.44% calc(100% - 3.2px),24.22% calc(100% - 19.5px),21.37% calc(100% - 13.4px),19.16% calc(100% - 23.4px),15.05% calc(100% - 15.3px),12.29% calc(100% - 23.5px),9.03% calc(100% - 11.4px),6.09% calc(100% - 18.9px),2.68% calc(100% - 29.7px),0% calc(100% - 18px))}
.band--flush.torn-band-1{clip-path:polygon(0 0,100% 0,100% calc(100% - 11.8px),97.54% calc(100% - 17.5px),95.34% calc(100% - 14.4px),92.45% calc(100% - 3.4px),89.32% calc(100% - 14.1px),86.65% calc(100% - 0px),83.02% calc(100% - 0px),80.66% calc(100% - 8.1px),78.78% calc(100% - 18.8px),75.54% calc(100% - 3.7px),72.7% calc(100% - 10.2px),71.31% calc(100% - 17.1px),69.43% calc(100% - 15.2px),67.16% calc(100% - 8.9px),65.02% calc(100% - 16.9px),60.91% calc(100% - 30px),59.01% calc(100% - 19.8px),56.11% calc(100% - 30px),52.2% calc(100% - 30px),49.72% calc(100% - 30px),46.33% calc(100% - 30px),43.53% calc(100% - 30px),40.29% calc(100% - 30px),38.61% calc(100% - 30px),37.33% calc(100% - 19px),33.5% calc(100% - 30px),30.65% calc(100% - 29.4px),26.94% calc(100% - 30px),24.69% calc(100% - 26.2px),22.96% calc(100% - 19.6px),20.39% calc(100% - 8.1px),16.4% calc(100% - 13.3px),13.82% calc(100% - 10.7px),12.6% calc(100% - 18.2px),8.32% calc(100% - 19.7px),5.42% calc(100% - 30px),4.16% calc(100% - 22px),1.68% calc(100% - 27.3px),0% calc(100% - 18.9px))}
.band--flush.torn-band-2{clip-path:polygon(0 0,100% 0,100% calc(100% - 26.9px),97.96% calc(100% - 22.8px),95.72% calc(100% - 24px),92.69% calc(100% - 15.5px),90.12% calc(100% - 30px),88.38% calc(100% - 30px),86.85% calc(100% - 30px),84% calc(100% - 30px),81.04% calc(100% - 21.7px),76.75% calc(100% - 27.4px),74.2% calc(100% - 19.2px),72.06% calc(100% - 18.1px),69.96% calc(100% - 10.3px),67.34% calc(100% - 22.3px),64.39% calc(100% - 30px),61.01% calc(100% - 28px),57.15% calc(100% - 21.8px),55.43% calc(100% - 26.3px),51.27% calc(100% - 19.5px),47.09% calc(100% - 9.5px),43.57% calc(100% - 24.2px),41.02% calc(100% - 18px),37.81% calc(100% - 30px),35.68% calc(100% - 25.4px),33.66% calc(100% - 13.4px),31.08% calc(100% - 2.7px),28.78% calc(100% - 10px),24.39% calc(100% - 20.8px),23.04% calc(100% - 30px),18.81% calc(100% - 24.3px),17.41% calc(100% - 30px),13.44% calc(100% - 30px),10.8% calc(100% - 26.3px),9.33% calc(100% - 11px),7.2% calc(100% - 13.3px),3.53% calc(100% - 20.7px),0% calc(100% - 12.9px))}
.band--flush.torn-band-3{clip-path:polygon(0 0,100% 0,100% calc(100% - 29.9px),96.35% calc(100% - 24.1px),94.56% calc(100% - 23.5px),92.44% calc(100% - 16.7px),88.87% calc(100% - 2.3px),84.7% calc(100% - 16.2px),81.91% calc(100% - 12.6px),80.66% calc(100% - 17.2px),79% calc(100% - 30px),76.38% calc(100% - 30px),74.89% calc(100% - 20.1px),71.4% calc(100% - 6px),68.03% calc(100% - 0px),65.86% calc(100% - 1px),63.99% calc(100% - 8.1px),59.95% calc(100% - 7.9px),57.75% calc(100% - 0px),54.42% calc(100% - 0px),51.25% calc(100% - 1.9px),49.88% calc(100% - 0px),47.2% calc(100% - 0px),43.33% calc(100% - 0px),39.34% calc(100% - 0px),38.06% calc(100% - 1px),34.27% calc(100% - 0px),32.87% calc(100% - 9.7px),31.56% calc(100% - 17.3px),30.19% calc(100% - 14.3px),27.44% calc(100% - 3.2px),24.22% calc(100% - 19.5px),21.37% calc(100% - 13.4px),19.16% calc(100% - 23.4px),15.05% calc(100% - 15.3px),12.29% calc(100% - 23.5px),9.03% calc(100% - 11.4px),6.09% calc(100% - 18.9px),2.68% calc(100% - 29.7px),0% calc(100% - 18px))}
.torn-hero{clip-path:polygon(0 0,100% 0,100% calc(100% - 44.5px),99.42% calc(100% - 34.5px),95.87% calc(100% - 43.9px),93.08% calc(100% - 50.4px),90.03% calc(100% - 52px),87.21% calc(100% - 54px),85.47% calc(100% - 38.6px),83.02% calc(100% - 16.8px),79.78% calc(100% - 0px),76.65% calc(100% - 0px),74.61% calc(100% - 0.6px),73.13% calc(100% - 5.5px),71.71% calc(100% - 0px),68.67% calc(100% - 0px),66.23% calc(100% - 0px),63.34% calc(100% - 4px),61.74% calc(100% - 21px),59.98% calc(100% - 38.2px),57.1% calc(100% - 16.5px),55.57% calc(100% - 21.7px),54% calc(100% - 17.7px),50.73% calc(100% - 12.2px),48.49% calc(100% - 35.6px),46.52% calc(100% - 19.6px),43.13% calc(100% - 0px),40.6% calc(100% - 1.4px),38.95% calc(100% - 2.9px),37.38% calc(100% - 0px),35.72% calc(100% - 0px),33.75% calc(100% - 0px),30.43% calc(100% - 0px),27.66% calc(100% - 16px),26.64% calc(100% - 28.4px),23.95% calc(100% - 54px),22.67% calc(100% - 54px),20.26% calc(100% - 54px),18.06% calc(100% - 54px),15.7% calc(100% - 54px),13.28% calc(100% - 45.8px),10.47% calc(100% - 43.4px),8.35% calc(100% - 17.1px),5.59% calc(100% - 28.7px),4.18% calc(100% - 46.8px),1.41% calc(100% - 47.4px),0% calc(100% - 41.2px))}
.torn-card::before,.torn-bottom{clip-path:polygon(0 0,100% 0,100% calc(100% - 10.4px),99.33% calc(100% - 10.4px),93.21% calc(100% - 7.5px),86.76% calc(100% - 7.2px),80.34% calc(100% - 2.8px),76.11% calc(100% - 8.4px),69.17% calc(100% - 12.9px),65.24% calc(100% - 14.8px),62.38% calc(100% - 7.9px),55.42% calc(100% - 12.9px),52.36% calc(100% - 13.5px),48.93% calc(100% - 18px),46.34% calc(100% - 13.1px),40.58% calc(100% - 18px),36.79% calc(100% - 18px),32.94% calc(100% - 17.3px),30.37% calc(100% - 18px),24.54% calc(100% - 17.9px),21.01% calc(100% - 12.4px),16.45% calc(100% - 4.4px),11.28% calc(100% - 0px),5.98% calc(100% - 6.9px),0% calc(100% - 12.4px))}
.torn-top{clip-path:polygon(0% 3.2px,6.33% 0px,12.53% 3.9px,18.13% 0px,24.77% 0px,30.11% 3.5px,35.25% 0px,41.97% 0px,47.76% 2.5px,51.91% 3.1px,58.45% 9.6px,63% 16px,66.35% 16px,70.35% 8px,76.8% 2.8px,81.67% 2.7px,84.5% 8.6px,90.17% 3.3px,92.98% 3.1px,96.87% 5.9px,100% 15.3px,100% 100%,0 100%)}
.torn-photo{clip-path:polygon(0 0,100% 0,100% calc(var(--cut) * 1% - 1.3%),97.57% calc(var(--cut) * 1% - 0.2%),95.07% calc(var(--cut) * 1% - 0.5%),92.33% calc(var(--cut) * 1% - 0.3%),90.33% calc(var(--cut) * 1% - 0.4%),88.18% calc(var(--cut) * 1% - 1.3%),83.33% calc(var(--cut) * 1% - 2.3%),80.27% calc(var(--cut) * 1% - 0.9%),75.4% calc(var(--cut) * 1% - 0.8%),72.68% calc(var(--cut) * 1% - 1.9%),68.85% calc(var(--cut) * 1% - 1.7%),65.98% calc(var(--cut) * 1% - 0.9%),61.99% calc(var(--cut) * 1% - 0%),57.34% calc(var(--cut) * 1% - 0%),54.62% calc(var(--cut) * 1% - 1.2%),52.47% calc(var(--cut) * 1% - 0%),48.56% calc(var(--cut) * 1% - 0%),45.03% calc(var(--cut) * 1% - 0.4%),40.87% calc(var(--cut) * 1% - 1.4%),37.63% calc(var(--cut) * 1% - 2.2%),32.78% calc(var(--cut) * 1% - 1.1%),29.93% calc(var(--cut) * 1% - 1.9%),24.1% calc(var(--cut) * 1% - 2.3%),20.78% calc(var(--cut) * 1% - 2.8%),15.94% calc(var(--cut) * 1% - 1.6%),12.17% calc(var(--cut) * 1% - 3.2%),8.2% calc(var(--cut) * 1% - 3.2%),4.04% calc(var(--cut) * 1% - 3.2%),0% calc(var(--cut) * 1% - 2.7%))}
@media (max-width:760px){.torn-band-1{clip-path:polygon(0% 9.2px,7.71% 11.3px,15.84% 18px,23.61% 9.7px,31.32% 11.8px,38.47% 11.4px,48.38% 9.8px,57.07% 13.4px,62.19% 7.1px,68.13% 5px,74.77% 6.6px,79.66% 8.6px,87.69% 6.9px,97.6% 13px,100% 11.2px,100% calc(100% - 2.6px),99.56% calc(100% - 11.4px),89.98% calc(100% - 18px),82.47% calc(100% - 17.6px),73.15% calc(100% - 18px),66.93% calc(100% - 15.7px),61.79% calc(100% - 11.7px),54.88% calc(100% - 4.8px),44.96% calc(100% - 8px),38.04% calc(100% - 6.4px),33.99% calc(100% - 10.9px),23.46% calc(100% - 11.8px),15.87% calc(100% - 18px),11.73% calc(100% - 13.2px),5.01% calc(100% - 16.4px),0% calc(100% - 11.4px))}.torn-band-2{clip-path:polygon(0% 1.7px,4.48% 4.3px,10.62% 0.8px,16.12% 1px,26.79% 7.5px,30.85% 11.6px,36.31% 3.4px,47.21% 10.2px,54.52% 14.9px,58.91% 14px,67.49% 18px,72.98% 18px,78.59% 11.9px,88.08% 5.1px,97.08% 2.5px,100% 13.8px,100% calc(100% - 10.9px),94.6% calc(100% - 15.3px),88.86% calc(100% - 8.1px),81.93% calc(100% - 1.6px),75.59% calc(100% - 6px),64.83% calc(100% - 12.5px),60.51% calc(100% - 18px),50.09% calc(100% - 14.6px),45.65% calc(100% - 18px),35.78% calc(100% - 18px),28.74% calc(100% - 15.8px),24.16% calc(100% - 6.6px),18.17% calc(100% - 8px),8.94% calc(100% - 12.4px),0% calc(100% - 7.7px))}.torn-band-3{clip-path:polygon(0% 9.3px,10.98% 0px,20.16% 0px,28.27% 0px,38.98% 2.8px,46.46% 4.7px,56.02% 0px,65.23% 8.4px,75.41% 17.6px,81% 18px,90.26% 10.3px,97.58% 3.4px,100% 13.6px,100% calc(100% - 0.5px),91.6% calc(100% - 0px),87.17% calc(100% - 5.8px),82.95% calc(100% - 10.4px),78.59% calc(100% - 8.6px),71.29% calc(100% - 1.9px),63.02% calc(100% - 11.7px),55.52% calc(100% - 8px),49.37% calc(100% - 14px),39.19% calc(100% - 9.2px),31.89% calc(100% - 14.1px),23.51% calc(100% - 6.9px),15.83% calc(100% - 11.4px),7.14% calc(100% - 17.8px),0% calc(100% - 10.8px))}.band--flush.torn-band-1{clip-path:polygon(0 0,100% 0,100% calc(100% - 2.6px),99.56% calc(100% - 11.4px),89.98% calc(100% - 18px),82.47% calc(100% - 17.6px),73.15% calc(100% - 18px),66.93% calc(100% - 15.7px),61.79% calc(100% - 11.7px),54.88% calc(100% - 4.8px),44.96% calc(100% - 8px),38.04% calc(100% - 6.4px),33.99% calc(100% - 10.9px),23.46% calc(100% - 11.8px),15.87% calc(100% - 18px),11.73% calc(100% - 13.2px),5.01% calc(100% - 16.4px),0% calc(100% - 11.4px))}.band--flush.torn-band-2{clip-path:polygon(0 0,100% 0,100% calc(100% - 10.9px),94.6% calc(100% - 15.3px),88.86% calc(100% - 8.1px),81.93% calc(100% - 1.6px),75.59% calc(100% - 6px),64.83% calc(100% - 12.5px),60.51% calc(100% - 18px),50.09% calc(100% - 14.6px),45.65% calc(100% - 18px),35.78% calc(100% - 18px),28.74% calc(100% - 15.8px),24.16% calc(100% - 6.6px),18.17% calc(100% - 8px),8.94% calc(100% - 12.4px),0% calc(100% - 7.7px))}.band--flush.torn-band-3{clip-path:polygon(0 0,100% 0,100% calc(100% - 0.5px),91.6% calc(100% - 0px),87.17% calc(100% - 5.8px),82.95% calc(100% - 10.4px),78.59% calc(100% - 8.6px),71.29% calc(100% - 1.9px),63.02% calc(100% - 11.7px),55.52% calc(100% - 8px),49.37% calc(100% - 14px),39.19% calc(100% - 9.2px),31.89% calc(100% - 14.1px),23.51% calc(100% - 6.9px),15.83% calc(100% - 11.4px),7.14% calc(100% - 17.8px),0% calc(100% - 10.8px))}.torn-hero{clip-path:polygon(0 0,100% 0,100% calc(100% - 9.8px),93.91% calc(100% - 0px),85.83% calc(100% - 7.7px),81.79% calc(100% - 13.7px),73.88% calc(100% - 26px),69.23% calc(100% - 26px),61.98% calc(100% - 26px),55.23% calc(100% - 26px),48.07% calc(100% - 26px),40.8% calc(100% - 22.1px),32.63% calc(100% - 20.9px),26.04% calc(100% - 8.2px),17.98% calc(100% - 13.8px),13.03% calc(100% - 22.5px),4.96% calc(100% - 22.8px),0% calc(100% - 19.8px))}.torn-top{clip-path:polygon(0% 2.4px,10.96% 0px,21.71% 3px,31.53% 0px,42.97% 0px,52.39% 2.6px,61.51% 0px,73.07% 0px,83.18% 1.9px,90.75% 2.3px,100% 5.5px,100% 100%,0 100%)}}
@media (max-width:760px){.card:not(.card--mini) .torn-card::before{clip-path:polygon(0 0,calc(100% - 11.5px) 0%,calc(100% - 10.8px) 3.19%,calc(100% - 15.4px) 6.57%,calc(100% - 15.1px) 11.97%,calc(100% - 11px) 15.78%,calc(100% - 5.6px) 21.55%,calc(100% - 9.4px) 24.96%,calc(100% - 14.5px) 30.35%,calc(100% - 11.4px) 37.75%,calc(100% - 7.7px) 44.2%,calc(100% - 8.2px) 50.56%,calc(100% - 8.9px) 57.72%,calc(100% - 15.5px) 60.78%,calc(100% - 16px) 65.33%,calc(100% - 14.6px) 72.18%,calc(100% - 8.5px) 78.75%,calc(100% - 12.4px) 83.59%,calc(100% - 3.8px) 86.6%,calc(100% - 10.2px) 91.99%,calc(100% - 13.4px) 98%,calc(100% - 9.3px) 100%,0 100%)}}