@font-face {
  font-family: "GGX88";
  src: url("fonts/ggx88/ggx88-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GGX88";
  src: url("fonts/ggx88/ggx88-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #fcfcf8;
  --ink: #1a1a1a;
  --ink-soft: #444441;
  --ink-mute: #6f6f6a;
  --line: #e9e9e3;
  --panel: #f2f2ee;
  --pad: clamp(20px, 8.4vw, 160px);
  --radius: 14px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "GGX88", system-ui, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
ul { list-style: none; }

.container {
  width: 100%;
  max-width: calc(1600px + var(--pad) * 2);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 47px;
  padding: 0 16px;
  border-radius: 863px;
  font: inherit;
  font-size: 16px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.16,1,.3,1), background-color .2s, border-color .2s;
}
.btn:active { transform: scale(.98); }
.btn svg { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.btn:hover svg { transform: translateX(3px); }

.btn--ghost { border: 1px solid var(--line); background: transparent; color: var(--ink); }
.btn--ghost:hover { background: #fff; border-color: #d9d9d2; }

.btn--dark { border: 0; background: var(--ink); color: #fcfcf8; }
.btn--dark:hover { background: #000; }

.btn--sm { height: 47px; padding: 0 32px; font-size: 14px; border-radius: 4px; }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Nav */
.nav { height: 86px; }
.nav__wrap { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding-top: 19px; transition: padding-top .45s cubic-bezier(.16,1,.3,1); }
#nav-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 70px; pointer-events: none; }
.nav__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  width: 100%; margin-inline: auto;
  transition: width .5s cubic-bezier(.16,1,.3,1), padding .45s cubic-bezier(.16,1,.3,1), background-color .35s, border-color .35s, box-shadow .35s;
}
.nav__bar .btn { justify-self: end; height: 47px; }

.logo { display: inline-flex; align-items: center; gap: 5px; font-size: 20px; letter-spacing: -0.03em; }
.logo__mark { width: 20px; height: 20px; }

.nav__links { display: flex; gap: 17px; font-size: 16px; }
.nav__links a { opacity: .95; transition: opacity .2s; }
.nav__links a:hover { opacity: .55; }

/* Hero */
.hero { padding-top: 38px; padding-bottom: 70px; text-align: center; }
.hero .container { display: flex; flex-direction: column; align-items: center; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 11px 0 3px;
  border: 1px solid var(--line);
  border-radius: 863px;
  background: #eeeeea;
  font-size: 16px;
}
.badge__icon {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ink); color: #fff;
}

h1 {
  margin-top: 24px;
  font-weight: 300;
  font-size: clamp(29px, 3.97vw, 64px);
  line-height: 1.07;
  letter-spacing: -0.045em;
}

.hero__sub {
  max-width: 900px;
  margin-top: 20px;
  font-size: clamp(14px, 1.08vw, 19px);
  line-height: 1.35;
  color: var(--ink-soft);
}

.hero .btn--dark { margin-top: 20px; }

.hero__media {
  width: 100%;
  margin-top: 80px;
  display: grid;
  grid-template-columns: 548fr 1031fr;
  gap: 21px;
  height: clamp(300px, 37.5vw, 716px);
}
.media { overflow: hidden; border-radius: var(--radius); background: var(--panel); }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* Footer */
.footer { position: relative; overflow: hidden; padding-top: 60px; background: var(--bg); }

.footer__top {
  display: grid;
  grid-template-columns: 854fr 400fr 400fr;
  column-gap: 101px;
  align-items: start;
}

.newsletter {
  padding: 20px 20px 22px;
  border-radius: 16px;
  max-width: 540px;
  background: var(--panel);
}
.newsletter h2 { font-weight: 300; font-size: 28px; line-height: 1.05; letter-spacing: -0.045em; }
.newsletter p { margin-top: 6px; max-width: 400px; font-size: 13px; line-height: 1.35; color: var(--ink-mute); }

.newsletter__row { display: flex; gap: 6px; margin-top: 16px; }
.newsletter__row input[type="email"] {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.newsletter__row input::placeholder { color: #8a8a85; }

.newsletter__consent {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-mute);
  cursor: pointer;
}
.newsletter__consent input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.newsletter__consent .box {
  flex: none; width: 20px; height: 20px; border-radius: 4px; background: #fff;
  display: grid; place-items: center;
}
.newsletter__consent input:checked + .box::after {
  content: ""; width: 6px; height: 12px; margin-top: -2px;
  border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.newsletter__consent input:focus-visible + .box { outline: 2px solid var(--ink); outline-offset: 3px; }
.newsletter__consent a { text-decoration: underline; text-underline-offset: 3px; }

.footer__col h3 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
.footer__col ul { margin-top: 22px; display: grid; gap: 9px; }
.footer__col li a { font-size: 15px; line-height: 1.2; letter-spacing: -0.03em; transition: opacity .2s; }
.footer__col li a:hover { opacity: .55; }

.social { display: flex; gap: 12px; margin-top: 54px; color: #55554f; }
.social a { transition: color .2s, transform .25s cubic-bezier(.16,1,.3,1); }
.social a:hover { color: var(--ink); transform: translateY(-2px); }

.footer__watermark {
  margin-top: 60px;
  text-align: center;
  font-size: clamp(103px, 23.33vw, 449px);
  line-height: .95;
  letter-spacing: -0.06em;
  color: #f1f1ed;
  user-select: none;
  background-image: radial-gradient(#ebebe6 1.4px, transparent 1.6px);
  background-size: 24px 24px;
  padding-bottom: 17px;
}

.footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-block: 18px 24px;
  font-size: 13px;
  color: var(--ink-mute);
}
.footer__bottom div { display: flex; gap: 18px; }
.footer__bottom a:hover { color: var(--ink); }

/* Tablet and mobile */
@media (max-width: 1100px) {
  .nav__links { gap: 16px; font-size: 18px; }
  .footer__top { grid-template-columns: 1fr 1fr; row-gap: 56px; column-gap: 48px; }
  .newsletter { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .nav { height: 72px; }
  .nav__wrap { padding-top: 14px; }
  .nav__bar { grid-template-columns: 1fr auto; }
  .nav__links { display: none; }
  .nav__bar .btn { height: 44px; font-size: 16px; padding: 0 16px; }
  .logo { font-size: 22px; }

  .hero { padding-top: 40px; }
  .badge { font-size: 14px; height: 40px; white-space: nowrap; }
  .badge__icon { width: 32px; height: 32px; }
  .hero .btn--dark, .btn { font-size: 17px; height: 52px; }
  .hero__media { grid-template-columns: 1fr; height: auto; margin-top: 48px; }
  .media--photo { aspect-ratio: 4 / 5; }
  .media--product { aspect-ratio: 3 / 2; }

  .newsletter { padding: 24px; }
  .newsletter h2 { font-size: 36px; }
  .newsletter p, .newsletter__consent { font-size: 17px; }
  .newsletter__row { flex-direction: column; }
  .newsletter__row input[type="email"], .btn--sm { height: 54px; font-size: 18px; }
  .footer__col li a { font-size: 16px; }
  .social { margin-top: 32px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 12px; }
  .footer__bottom div { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

.logo img { height: 21px; width: auto; }
.badge__icon img { width: 20px; height: auto; }

.br-desktop { display: none; }
@media (min-width: 768px) {
  .br-desktop { display: inline; }
  .hero__sub { max-width: none; }
}

/* Social proof */
.proof { padding-block: 10px 90px; }

.proof__head { display: flex; align-items: center; gap: 24px; }
.proof__head::before, .proof__head::after { content: ""; flex: 1; border-top: 1.5px dotted #cfcfc8; }
.proof__head h2 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
}

.logos {
  overflow: hidden;
  padding-block: 34px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logos__track { display: flex; width: max-content; animation: logos-loop 32s linear infinite; }
.logos__item { display: flex; align-items: center; gap: 10px; padding-inline: 38px; color: #8d8d88; }
.logos__name { font-size: 24px; letter-spacing: -0.03em; white-space: nowrap; color: #6f6f6a; }
.logos__mark { display: block; width: 26px; height: 26px; background: #9b9b96; flex: none; }
.logos__mark--sq { border-radius: 4px 4px 0 0; }
.logos__mark--bars { background: linear-gradient(90deg, #9b9b96 28%, transparent 28% 36%, #9b9b96 36% 64%, transparent 64% 72%, #9b9b96 72%); clip-path: polygon(0 60%, 28% 60%, 28% 100%, 0 100%, 36% 30%, 64% 30%, 64% 100%, 36% 100%, 72% 0, 100% 0, 100% 100%, 72% 100%); }
.logos__mark--leaf { border-radius: 100% 0 100% 0; }
.logos__mark--ring { border-radius: 50%; background: none; border: 7px solid #9b9b96; }
.logos__mark--pill { border-radius: 10px; }
.logos__mark--tri { clip-path: polygon(0 100%, 50% 0, 100% 100%); }

.proof__rule { border-top: 1.5px dotted #cfcfc8; }

@keyframes logos-loop { to { transform: translateX(-50%); } }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 70px; }
.stat {
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: center;
  gap: 6px; height: clamp(150px, 11.9vw, 228px);
  border-radius: 8px;
  background: #ebebe6;
  text-align: center;
}
.stat dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #55554f;
}
.stat dd { margin: 0; font-weight: 300; font-size: clamp(32px, 2.5vw, 48px); line-height: 1; letter-spacing: -0.05em; }

@media (max-width: 767px) {
  .proof { padding-bottom: 56px; }
  .proof__head h2 { font-size: 12px; }
  .logos__name { font-size: 20px; }
  .logos__item { padding-inline: 24px; }
  .stats { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .stat { height: 130px; }
  .stat dd { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .logos__track { animation: none; }
}

/* Features (dark bento) */
.features {
  --f-bg: #1b1b1a;
  --f-card: #242423;
  --f-ink: #f4f4ef;
  --f-mute: #a5a5a0;
  background: var(--f-bg);
  color: var(--f-ink);
  padding-block: 90px 100px;
}

.features__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.features__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
}
.features__tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--f-ink); }
.features__head h2 {
  margin-top: 22px;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.features__head p:last-child { margin-top: 18px; font-size: clamp(15px, 1.1vw, 18px); color: var(--f-mute); }

.bento {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: var(--f-card);
}
.card__text { padding: 36px 36px 0; }
.card h3 { font-weight: 300; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -0.04em; line-height: 1.1; }
.card__text p { margin-top: 14px; max-width: 440px; font-size: clamp(14px, 1vw, 16px); line-height: 1.4; color: var(--f-mute); }

.card__media { flex: 1; min-height: 0; margin: 28px 28px 28px; border-radius: 10px; overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card--tall { grid-row: span 2; }
.card--tall .card__media--bleed { margin: 40px 56px 0; border-radius: 22px 22px 0 0; }

.card--half { aspect-ratio: 395 / 277; }

.card--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; aspect-ratio: 800 / 330; }
.card--wide .card__text { flex: 0 0 38%; padding: 36px; }
.card--wide .card__media--side { margin: 20px 20px 20px 0; align-self: stretch; flex: 1; }

@media (max-width: 767px) {
  .features { padding-block: 60px 64px; }
  .bento { grid-template-columns: 1fr; margin-top: 40px; }
  .card--tall { grid-row: auto; }
  .card--tall .card__media--bleed { aspect-ratio: 1 / 1; flex: none; margin: 28px 28px 0; }
  .card--half, .card--wide { aspect-ratio: auto; }
  .card__media { aspect-ratio: 16 / 10; flex: none; }
  .card__text { padding: 28px 28px 0; }
  .card--wide { flex-direction: column; align-items: stretch; }
  .card--wide .card__text { flex: none; padding: 28px 28px 0; }
  .card--wide .card__media--side { margin: 28px; flex: none; }
}

/* Dot-grid texture on feature cards (fades out from the top-right) */
.card { position: relative; isolation: isolate; }
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .14) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 85% 90% at 90% 35%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 85% 90% at 90% 35%, #000 0%, transparent 75%);
  pointer-events: none;
}

/* Wide card: the image covers the right side, so centre the dots on the text */
.card--wide::before {
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 35% 45%, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse 60% 100% at 35% 45%, #000 0%, transparent 80%);
}

/* Mobile: the wide card is stacked, so dots go back to the top-right like the others */
@media (max-width: 767px) {
  .card--wide::before {
    -webkit-mask-image: radial-gradient(ellipse 85% 90% at 90% 35%, #000 0%, transparent 75%);
            mask-image: radial-gradient(ellipse 85% 90% at 90% 35%, #000 0%, transparent 75%);
  }
}

/* How it works: sticky index + stacking cards */
.how { --f-bg: #1b1b1a; --f-card: #242423; --f-ink: #f4f4ef; --f-mute: #a5a5a0; background: var(--f-bg); color: var(--f-ink); padding-block: 40px 120px; }

.how__grid {
  display: grid;
  grid-template-columns: minmax(180px, 17%) 1fr;
  column-gap: clamp(32px, 6vw, 100px);
  align-items: start;
}

.how__tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.how__tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--f-ink); }

.how__head h2 { font-weight: 300; font-size: clamp(27px, 3.4vw, 54px); line-height: 1.05; letter-spacing: -0.045em; max-width: 22em; }
.how__head p { margin-top: 24px; max-width: 540px; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.4; color: var(--f-mute); }

.how__index { position: sticky; top: 120px; align-self: start; margin-top: 90px; }
.how__index ul { border-top: 1px solid #333332; }
.how__index li { border-bottom: 1px solid #333332; }
.how__index a {
  display: flex; align-items: center; justify-content: space-between;
  height: 62px;
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
  color: #7a7a76;
  transition: color .3s;
}
.how__index a i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.how__index a[aria-current="step"] { color: var(--f-ink); }
.how__index a[aria-current="step"] i { transform: scale(1.4); }
.how__index a:hover { color: var(--f-ink); }

.steps { margin-top: 90px; }
.step {
  position: sticky;
  top: 110px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: clamp(360px, 30vw, 560px);
  margin-bottom: 14vh;
  padding: 10px;
  border-radius: 14px;
  background: var(--f-card);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, .25);
  overflow: hidden;
  isolation: isolate;
}
.step:last-child { margin-bottom: 0; }
.step::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 70% 100% at 25% 40%, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 100% at 25% 40%, #000 0%, transparent 80%);
}
.step__text { display: flex; flex-direction: column; padding: 30px 28px 24px 36px; }
.step__num { font-size: 18px; color: var(--f-mute); }
.step h3 { margin-top: 22px; font-weight: 300; font-size: clamp(21px, 2vw, 33px); line-height: 1.08; letter-spacing: -0.045em; }
.step__body { margin-top: auto; font-size: clamp(14px, 1.15vw, 19px); line-height: 1.4; color: var(--f-mute); }
.step__media { border-radius: 10px; overflow: hidden; }
.step__media img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 767px) {
  .how { padding-block: 24px 64px; }
  .how__grid { grid-template-columns: 1fr; }
  .how__tag { margin-bottom: 24px; }
  .how__index { display: none; }
  .steps { margin-top: 40px; }
  .step { top: 80px; grid-template-columns: 1fr; grid-template-rows: auto 220px; height: auto; margin-bottom: 40px; }
  .step__text { padding: 24px 20px 20px; }
  .step__body { margin-top: 16px; }
}

/* Integrations */
.integrations { --tile: clamp(76px, 6.2vw, 124px); --gap: clamp(14px, 1.2vw, 24px); position: relative; overflow: hidden; padding-block: 110px 120px; background: var(--bg); }
.integrations::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(0,0,0,.09) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 45%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 45%, #000, transparent 75%);
}
.integrations__head { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.integrations__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.integrations__tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.integrations__head h2 { margin-top: 22px; max-width: none; font-weight: 300; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.05; letter-spacing: -0.045em; }
.integrations__head p:last-child { margin-top: 22px; max-width: 640px; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.4; color: var(--ink-soft); }

.orbit { position: relative; display: flex; justify-content: center; align-items: center; width: min(100% - 40px, 1150px); margin: 50px auto 0; height: calc(var(--tile) * 2.3 + 60px); }
.orbit__side {
  position: relative; display: flex; align-items: center; flex: 1; height: calc(var(--tile) + 120px); overflow: hidden;
}
.orbit__side--left { justify-content: flex-end; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.orbit__side--right { justify-content: flex-start; -webkit-mask-image: linear-gradient(270deg, transparent, #000 40%); mask-image: linear-gradient(270deg, transparent, #000 40%); }
.orbit__track { display: flex; gap: var(--gap); padding-inline: calc(var(--gap) / 2); width: max-content; flex: none; }
.orbit__side--left .orbit__track { animation: orbit-in-left 22s linear infinite; }
.orbit__side--right .orbit__track { animation: orbit-in-right 22s linear infinite; }

.tile {
  flex: none; display: grid; place-items: center;
  width: var(--tile); height: var(--tile);
  border-radius: calc(var(--tile) * .2);
  position: relative; isolation: isolate;
  background: #f8f8f5;
  box-shadow: 0 0 0 1px rgba(0,0,0,.03), 0 14px 34px rgba(30, 30, 20, .07);
}
/* inner plate: the framed look of the reference */
.tile::before, .orbit__core::before {
  content: ""; position: absolute; z-index: -1;
  inset: 9%;
  border-radius: calc(var(--tile) * .14);
  background: #fff;
  border: 1px solid #e7e7e2;
}
.tile img { width: 44%; height: 44%; object-fit: contain; }

.orbit__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: calc(var(--tile) * 2.2); height: calc(var(--tile) * 2.2);
  border-radius: calc(var(--tile) * .42);
  isolation: isolate;
  background: #f8f8f5;
  box-shadow: 0 0 0 1px rgba(0,0,0,.04), 0 30px 60px rgba(30, 30, 20, .12);
}
.orbit__core::before { inset: 7%; border-radius: calc(var(--tile) * .3); }
.orbit__core img { width: 46%; height: auto; }

/* Tiles slide toward the centre and vanish behind the core. Track = 4 identical groups, shifted by one group. */
@keyframes orbit-in-left { from { transform: translateX(0); } to { transform: translateX(25%); } }
@keyframes orbit-in-right { from { transform: translateX(0); } to { transform: translateX(-25%); } }

@media (max-width: 767px) {
  .integrations { padding-block: 64px 72px; }
  .orbit { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit__track { animation: none !important; }
}

/* Stages (tabbed segments) */
.stages { padding-block: 90px 110px; background: var(--bg); }
.stages__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.stages__tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

.stages__head { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 6vw, 120px); align-items: end; margin-top: 22px; }
.stages__head h2 { font-weight: 300; font-size: clamp(27px, 3.4vw, 54px); line-height: 1.05; letter-spacing: -0.045em; }
.stages__head p { max-width: 460px; padding-bottom: 8px; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.4; color: var(--ink); }

.stages__bar { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 56px; }
.stages__tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.stages__tab {
  height: 48px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-mute); font: inherit; font-size: 17px; cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .2s;
}
.stages__tab:hover { color: var(--ink); background: #fff; }
.stages__tab:active { transform: scale(.98); }
.stages__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fcfcf8; }

.stages__progress { display: flex; align-items: center; gap: 18px; font-size: 18px; }
.stages__progress i { position: relative; width: 90px; height: 4px; border-radius: 4px; background: #e4e4de; overflow: hidden; }
.stages__progress i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 33.33%); background: var(--ink); border-radius: 4px; transition: width .4s cubic-bezier(.16,1,.3,1); }

.stage { display: grid; grid-template-columns: 2.17fr 1fr; gap: 16px; margin-top: 28px; height: clamp(440px, 36vw, 700px); animation: stage-in .45s cubic-bezier(.16,1,.3,1); }
.stage[hidden] { display: none; }
@keyframes stage-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.stage__main { display: grid; grid-template-columns: 1fr 1.05fr; padding: 10px; border-radius: 14px; background: #ebebe6; overflow: hidden; }
.stage__text { display: flex; flex-direction: column; padding: 28px 28px 22px 28px; }
.stage__label { font-size: 17px; color: var(--ink-mute); }
.stage__text h3 { margin-top: 16px; font-weight: 300; font-size: clamp(23px, 2.2vw, 37px); line-height: 1.08; letter-spacing: -0.045em; }
.stage__body { margin-top: auto; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.4; color: var(--ink-mute); }
.stage__photo { border-radius: 10px; overflow: hidden; }
.stage__photo img { width: 100%; height: 100%; object-fit: cover; }

.stage__quote {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between;
  margin: 0; padding: 30px; border-radius: 14px; background: #1b1b1a; color: #f4f4ef; overflow: hidden;
}
.stage__quote::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 1.5px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 60% 30%, #000, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 70% at 60% 30%, #000, transparent 80%);
}
.stage__logo { font-size: 22px; letter-spacing: -0.03em; color: #8d8d88; }
.stage__quote blockquote { margin: 0; font-size: clamp(16px, 1.35vw, 22px); line-height: 1.35; letter-spacing: -0.02em; }
.stage__quote figcaption { margin-top: 20px; font-size: 16px; color: #8d8d88; }

@media (max-width: 1000px) {
  .stage { grid-template-columns: 1fr; height: auto; }
  .stage__main { grid-template-columns: 1fr; }
  .stage__photo { aspect-ratio: 4 / 3; }
  .stage__text { min-height: 260px; }
  .stage__quote { gap: 32px; }
}
@media (max-width: 767px) {
  .stages { padding-block: 56px 64px; }
  .stages__head { grid-template-columns: 1fr; gap: 20px; }
  .stages__bar { flex-direction: column; align-items: flex-start; margin-top: 36px; }
  .stages__tabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; }
  .stages__tab { flex: none; height: 42px; font-size: 15px; padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .stage { animation: none; } }

/* Testimonials */
.testimonials { padding-block: 40px 110px; background: var(--bg); overflow: hidden; }
.testimonials__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.testimonials__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.testimonials__tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.testimonials__head h2 { margin-top: 22px; max-width: 10em; font-weight: 300; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.05; letter-spacing: -0.045em; }
.testimonials__head p:last-child { margin-top: 24px; font-size: clamp(15px, 1.2vw, 20px); color: var(--ink-soft); }

.trows { display: grid; gap: 14px; margin: 70px auto 0; max-width: 1050px; }
.trow {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
}
.trow__track { display: flex; gap: 14px; width: max-content; padding-right: 14px; animation: trow-left 70s linear infinite; }
.trow--b .trow__track { animation-name: trow-right; animation-duration: 80s; }
.trow:hover .trow__track { animation-play-state: paused; }
@keyframes trow-left { to { transform: translateX(-50%); } }
@keyframes trow-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.tcard {
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  flex: none; width: clamp(290px, 23vw, 420px); min-height: clamp(230px, 17vw, 290px);
  padding: 30px;
  border-radius: 14px; border: 1px solid #f0f0ea; background: #fff;
  box-shadow: 0 1px 2px rgba(30, 30, 20, .03);
}
.tcard blockquote { margin: 0; font-size: clamp(15px, 1.2vw, 19px); line-height: 1.4; letter-spacing: -0.02em; color: var(--ink-soft); }
.tcard__who { display: flex; align-items: center; gap: 14px; }
.tcard__who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--panel); flex: none; }
.tcard__name { font-size: 19px; letter-spacing: -0.03em; }
.tcard__role { margin-top: 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-mute); }

@media (max-width: 767px) {
  .testimonials { padding-block: 24px 64px; }
  .trows { margin-top: 40px; }
  .trow { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .tcard { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) { .trow__track { animation: none; } .trow { overflow-x: auto; } }

/* Case studies: stacking sticky cards */
.cases { padding-block: 60px 120px; background: var(--bg); }
.cases__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cases__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.cases__tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.cases__head h2 { margin-top: 22px; max-width: 10em; font-weight: 300; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.05; letter-spacing: -0.045em; }
.cases__head > p:not(.cases__tag) { margin-top: 24px; max-width: 560px; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.4; color: var(--ink-soft); }
.cases__head .btn { margin-top: 28px; }

.cases__stack { margin-top: 70px; }
.case {
  position: sticky;
  --h: clamp(420px, 36vw, 640px);
  top: calc(max(24px, 50vh - var(--h) / 2) + var(--i) * 14px);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: var(--h);
  margin-bottom: 18vh;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid #e0e0da;
  background: #ebebe6;
  box-shadow: 0 -16px 36px rgba(30, 30, 20, .08);
}
.case:last-child { margin-bottom: 0; }

.case__img { position: relative; border-radius: 8px; overflow: hidden; }
.case__img img { width: 100%; height: 100%; object-fit: cover; }
.case__brand { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -0.03em; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.25); }

.case__mid { display: flex; flex-direction: column; justify-content: space-between; padding: 14px 36px 16px; }
.case__mid h3 { font-weight: 300; font-size: clamp(21px, 2.2vw, 35px); line-height: 1.08; letter-spacing: -0.045em; }
.case__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.case__num { font-size: clamp(34px, 3.4vw, 56px); line-height: 1; letter-spacing: -0.05em; }
.case__cap { margin-top: 8px; max-width: 14em; font-size: 15px; line-height: 1.3; color: var(--ink-mute); }
.case__more {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 46px; padding: 0 20px; border-radius: 999px; background: #fff;
  font-size: 17px; transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.case__more:hover { transform: translateY(-2px); }
.case__more:active { transform: scale(.98); }

.case__side { display: flex; flex-direction: column; justify-content: space-between; padding: 0 20px 6px 36px; margin-block: 6px; border-left: 1px dotted #c8c8c0; }
.case__who { display: flex; align-items: flex-end; gap: 16px; }
.case__who img { width: clamp(110px, 11vw, 180px); aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #ddd; }
.case__who p:first-child { font-size: 18px; letter-spacing: -0.02em; color: #44443f; }
.case__who p:last-child { margin-top: 2px; font-size: 15px; color: var(--ink-mute); }
.case__side blockquote { margin: 0; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.4; letter-spacing: -0.02em; }

@media (max-width: 1000px) {
  .case { position: static; grid-template-columns: 1fr; height: auto; margin-bottom: 16px; }
  .case__img { aspect-ratio: 16 / 10; }
  .case__mid { gap: 40px; padding: 24px 20px; }
  .case__side { border-left: 0; border-top: 1px dotted #c8c8c0; padding: 24px 20px 20px; gap: 24px; margin: 0; }
  .cases__stack { margin-top: 44px; }
}
@media (max-width: 767px) { .cases { padding-block: 40px 64px; } }

/* Security */
.security { padding-block: 70px 120px; background: var(--bg); overflow: hidden; }
.security__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.security__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.security__tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.security__head h2 { margin-top: 22px; max-width: 11em; font-weight: 300; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.05; letter-spacing: -0.045em; }
.security__head > p:last-child { margin-top: 24px; max-width: 600px; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.4; color: var(--ink-soft); }

.security__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 64px; }
.sec-card {
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 392 / 493; padding: 32px;
  border-radius: 14px; background: #1b1b1a; color: #f4f4ef;
}
.sec-card > i { font-size: clamp(38px, 3.4vw, 56px); line-height: 1; }
.sec-card h3 { font-weight: 300; font-size: clamp(20px, 2vw, 33px); line-height: 1.08; letter-spacing: -0.045em; }
.sec-card p { margin-top: 14px; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.4; color: #a5a5a0; }

.checks {
  margin: 48px auto 0; overflow: hidden; max-width: 1000px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
}
.checks__track { display: flex; width: max-content; animation: checks-loop 65s linear infinite; }
.checks__track li {
  display: flex; align-items: center; gap: 10px; padding-inline: 28px;
  border-right: 2px solid #dcdcd5;
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: #77776f; white-space: nowrap;
}
.badge-check { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #ececE7; color: #55554f; font-size: 9px; }
@keyframes checks-loop { to { transform: translateX(-50%); } }

@media (max-width: 1000px) { .security__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .security { padding-block: 48px 64px; }
  .security__grid { margin-top: 40px; grid-template-columns: 1fr; }
  .sec-card { aspect-ratio: auto; min-height: 280px; gap: 56px; padding: 26px; }
  .checks__track li { font-size: 12px; padding-inline: 20px; }
}
@media (prefers-reduced-motion: reduce) { .checks__track { animation: none; } }

/* FAQ */
.faq { padding-block: 70px 130px; background: var(--bg); }
.faq__wrap { max-width: calc(760px + var(--pad) * 2); }
.faq__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.faq__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
.faq__tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.faq__head h2 { margin-top: 22px; font-weight: 300; font-size: clamp(28px, 3.4vw, 54px); line-height: 1.05; letter-spacing: -0.045em; }

.faq__list { margin-top: 56px; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 16px 0; border: 0; background: none; color: var(--ink);
  font: inherit; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: -0.03em; text-align: left; cursor: pointer;
}
.faq__icon {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  transition: background-color .3s, border-color .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
.faq__icon::before, .faq__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--ink); border-radius: 2px;
  transform: translate(-50%, -50%); transition: transform .3s cubic-bezier(.16,1,.3,1), background-color .3s;
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q:hover .faq__icon { border-color: #cfcfc8; }
.faq__q[aria-expanded="true"] .faq__icon { background: var(--ink); border-color: var(--ink); }
.faq__q[aria-expanded="true"] .faq__icon::before { transform: translate(-50%, -50%) rotate(45deg); background: #fcfcf8; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(-45deg); background: #fcfcf8; }

.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1); }
.faq__a > div { overflow: hidden; }
.faq__item:has(.faq__q[aria-expanded="true"]) .faq__a { grid-template-rows: 1fr; }
.faq__a p { max-width: 640px; padding: 2px 50px 20px 0; font-size: clamp(14px, 1.05vw, 16px); line-height: 1.45; color: var(--ink-soft); }

@media (max-width: 767px) {
  .faq { padding-block: 48px 72px; }
  .faq__list { margin-top: 40px; }
  .faq__icon { width: 32px; height: 32px; }
  .faq__a p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .faq__a, .faq__icon, .faq__icon::before, .faq__icon::after { transition: none; } }

/* Final CTA */
.cta { padding-block: 20px 110px; background: var(--bg); }
.cta__box { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 1600 / 590; min-height: 320px; background: #cfd3c4; }
.cta__box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__box::after { content: ""; position: absolute; inset: 0; background: rgba(20, 24, 16, .22); }
.cta__content { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 24px; text-align: center; color: #fff; }
.cta__content h2 { max-width: 9em; font-weight: 300; font-size: clamp(27px, 3.4vw, 54px); line-height: 1.05; letter-spacing: -0.045em; text-shadow: 0 2px 30px rgba(0,0,0,.18); }
.btn--light { border: 0; background: #fff; color: var(--ink); }
.btn--light:hover { background: #f4f4ef; }

@media (max-width: 767px) { .cta { padding-block: 8px 64px; } .cta__box { aspect-ratio: auto; min-height: 340px; } }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Tall feature card: full-bleed photo + phone mockup */
.card--tall { background: #2b2b29; container-type: size; }
.card--tall::before {
  -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(180deg, rgba(27,27,26,.62) 0%, rgba(27,27,26,.28) 55%, rgba(27,27,26,.1) 100%);
  z-index: -1;
}
.card__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.card--tall .card__text { padding: 44px 44px 0; }
.card--tall h3 { color: #fff; font-size: clamp(21px, 2.1vw, 33px); }
.card--tall .card__text p { max-width: 460px; font-size: clamp(15px, 1.25vw, 20px); color: rgba(255,255,255,.72); }

.phone {
  --ptop: 300px;
  position: absolute; left: 50%; top: var(--ptop); bottom: 0; transform: translateX(-50%);
  /* width follows the available height so the screenshot fills the phone down to the card edge */
  width: min(58%, 380px);
  width: min(80cqw, calc((100cqh - 244px) * 0.5053 + 28px));
  padding: 14px 14px 0;
  border-radius: 46px 46px 0 0;
  background: rgba(255, 255, 255, .34);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}
.phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 34px 34px 0 0; background: #fff; }
.phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone__island { position: absolute; top: 12px; left: 50%; width: 32%; height: 26px; border-radius: 999px; background: #000; transform: translateX(-50%); }

@media (max-width: 767px) {
  .card--tall { min-height: 560px; }
  .card--tall .card__text { padding: 28px 28px 0; }
  .phone { --ptop: 180px; width: min(78cqw, 340px); padding: 10px 10px 0; border-radius: 32px 32px 0 0; }
  .phone__screen { border-radius: 23px 23px 0 0; }
  .phone__island { top: 9px; height: 19px; }
}

/* Loyalty card visual (rebuilt UI, scaled with --r = 1 reference px) */
.card--loyalty { container-type: inline-size; --r: 0.12cqw; }
.loyalty { position: absolute; left: calc(50% - 352 * var(--r)); bottom: calc(62 * var(--r)); width: calc(705 * var(--r)); height: calc(322 * var(--r)); }
.loyalty__stat {
  position: absolute; left: 0; top: calc(97 * var(--r)); width: calc(265 * var(--r)); height: calc(160 * var(--r));
  padding: calc(28 * var(--r)); border-radius: calc(8 * var(--r)); background: #333332; color: #fff;
}
.loyalty__led { position: absolute; right: calc(26 * var(--r)); top: calc(26 * var(--r)); display: grid; place-items: center; width: calc(36 * var(--r)); height: calc(36 * var(--r)); border-radius: 50%; background: #3f3f3d; }
.loyalty__led::after { content: ""; width: calc(10 * var(--r)); height: calc(10 * var(--r)); border-radius: 50%; background: #6ee06e; }
.loyalty__lab { font-size: max(7px, calc(11 * var(--r))); letter-spacing: 0.04em; text-transform: uppercase; color: #cfcfca; }
.loyalty__num { margin-top: calc(14 * var(--r)); font-size: max(20px, calc(40 * var(--r))); line-height: 1; letter-spacing: -0.05em; }
.loyalty__cap { margin-top: calc(10 * var(--r)); font-size: max(8px, calc(14 * var(--r))); color: #cfcfca; letter-spacing: 0; }

.loyalty__report { position: absolute; right: 0; top: 0; width: calc(368 * var(--r)); height: 100%; color: var(--ink); }
.loyalty__head, .loyalty__body { background: #fff; border-radius: calc(8 * var(--r)); }
.loyalty__head { display: flex; align-items: center; gap: calc(14 * var(--r)); height: calc(74 * var(--r)); padding-inline: calc(16 * var(--r)); font-size: max(8px, calc(15 * var(--r))); }
.loyalty__head b { flex: 1; font-weight: 400; }
.loyalty__logo { display: grid; place-items: center; width: calc(38 * var(--r)); height: calc(38 * var(--r)); border-radius: calc(8 * var(--r)); background: #1b1b1a; }
.loyalty__logo img { width: 62%; height: auto; }
.loyalty__body { position: absolute; left: 0; right: 0; top: calc(86 * var(--r)); bottom: 0; padding: calc(16 * var(--r)) calc(22 * var(--r)); display: flex; flex-direction: column; }
.loyalty__row p { font-size: max(7px, calc(12 * var(--r))); }
.loyalty__row div { display: flex; align-items: center; gap: calc(10 * var(--r)); margin-top: calc(5 * var(--r)); font-size: max(7px, calc(12 * var(--r))); }
.loyalty__row i { position: relative; flex: 1; height: calc(5 * var(--r)); border-radius: 9px; background: #efeff3; overflow: hidden; }
.loyalty__row i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 9px; background: #1b1b1a; }
.loyalty__row + .loyalty__row { margin-top: calc(14 * var(--r)); }
.loyalty__total { display: flex; align-items: flex-end; justify-content: space-between; margin-top: calc(16 * var(--r)); padding-top: calc(12 * var(--r)); border-top: 1px dashed #e4e4de; }
.loyalty__total b { font-weight: 400; font-size: max(7px, calc(12 * var(--r))); }
.loyalty__total strong { font-weight: 400; font-size: max(14px, calc(30 * var(--r))); line-height: 1; letter-spacing: -0.04em; }
.loyalty__btn { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--r)); margin-top: auto; height: calc(44 * var(--r)); border-radius: 999px; background: #1b1b1a; color: #fff; font-size: max(8px, calc(14 * var(--r))); }

@media (max-width: 1100px) {
  .card--loyalty { aspect-ratio: auto; }
  .loyalty { position: relative; left: auto; bottom: auto; margin: 24px auto 28px; --r: 0.125cqw; width: calc(705 * var(--r)); }
}
@media (max-width: 767px) {
  .loyalty { --r: 0.245cqw; width: calc(368 * var(--r)); }
  .loyalty__stat { display: none; }
}

/* Clients card visual (scaled with --r = 1 reference px) */
.card--clients { container-type: inline-size; --r: 0.12cqw; }
.clients { position: absolute; left: calc(50% - 270 * var(--r)); bottom: calc(62 * var(--r)); width: calc(540 * var(--r)); height: calc(305 * var(--r)); }
.clients p { margin: 0; }
.clients__seen {
  position: absolute; left: calc(43 * var(--r)); top: 0; width: calc(455 * var(--r)); height: calc(97 * var(--r));
  display: flex; align-items: center; gap: calc(16 * var(--r)); padding-inline: calc(20 * var(--r));
  border-radius: calc(8 * var(--r)); background: #2f2f2e; color: #f4f4ef;
}
.clients__seen img { width: calc(60 * var(--r)); height: calc(60 * var(--r)); border-radius: 50%; object-fit: cover; flex: none; }
.clients__seen div { flex: 1; }
.clients__seen div p:first-child { font-size: max(9px, calc(20 * var(--r))); letter-spacing: -0.02em; }
.clients__seen div p:last-child { margin-top: calc(3 * var(--r)); font-size: max(8px, calc(17 * var(--r))); color: #a8a8a3; }
.clients__seen b { font-size: max(9px, calc(22 * var(--r))); font-weight: 500; letter-spacing: -0.02em; }

.clients__new { position: absolute; left: 0; right: 0; bottom: 0; height: calc(188 * var(--r)); border-radius: calc(6 * var(--r)); background: linear-gradient(180deg, #fff 62%, #f0f0ee 100%); color: var(--ink); }
.clients__top { display: flex; align-items: center; gap: calc(16 * var(--r)); padding: calc(16 * var(--r)) calc(24 * var(--r)) 0; }
.clients__top img { width: calc(80 * var(--r)); height: calc(80 * var(--r)); border-radius: 50%; object-fit: cover; flex: none; background: #e7c9a5; }
.clients__top div { flex: 1; }
.clients__top div p:first-child { font-size: max(10px, calc(22 * var(--r))); font-weight: 500; letter-spacing: -0.02em; }
.clients__top div p:last-child { margin-top: calc(4 * var(--r)); font-size: max(8px, calc(19 * var(--r))); color: #8a8a85; }
.clients__top strong { font-size: max(14px, calc(34 * var(--r))); font-weight: 400; letter-spacing: -0.04em; }
.clients__actions { position: absolute; left: calc(23 * var(--r)); right: calc(23 * var(--r)); bottom: calc(18 * var(--r)); display: flex; gap: calc(13 * var(--r)); }
.clients__actions span { flex: 1; display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--r)); height: calc(50 * var(--r)); border-radius: 999px; font-size: max(8px, calc(17 * var(--r))); }
.clients__ok { background: #1b1b1a; color: #fff; }
.clients__no { background: linear-gradient(180deg, #fff, #ececea); border: 1px solid #e3e3df; color: #6f6f6a; }
.clients__ok i { font-size: max(7px, calc(14 * var(--r))); }

@media (max-width: 1100px) {
  .card--clients { aspect-ratio: auto; }
  .clients { position: relative; left: auto; bottom: auto; margin: 24px auto 28px; --r: 0.125cqw; }
}
@media (max-width: 767px) {
  .clients { --r: 0.16cqw; }
}

/* Reminders card (wide): photo + scaled UI group, 1 reference px = --r */
.remind { position: relative; container-type: size; overflow: hidden; }
.remind__bg { position: absolute; inset: 0; }
.remind__group { --r: min(0.211cqw, 0.285cqh); position: absolute; left: 50%; top: 50%; width: calc(336 * var(--r)); height: calc(268 * var(--r)); transform: translate(-50%, -50%); }
.remind__group p { margin: 0; }
.remind__pill {
  position: absolute; left: calc(48 * var(--r)); top: 0; width: calc(237 * var(--r)); height: calc(41 * var(--r));
  display: flex; align-items: center; justify-content: space-between; padding: 0 calc(8 * var(--r)) 0 calc(14 * var(--r));
  border-radius: calc(6 * var(--r)); background: rgba(70, 66, 56, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff;
}
.remind__pill p:first-child { font-size: max(8px, calc(11 * var(--r))); }
.remind__pill p:last-child { font-size: max(6px, calc(8 * var(--r))); color: rgba(255,255,255,.7); }
.remind__pill span { display: inline-flex; align-items: center; gap: calc(5 * var(--r)); height: calc(26 * var(--r)); padding: 0 calc(9 * var(--r)); border-radius: calc(5 * var(--r)); background: #fff; color: var(--ink); font-size: max(8px, calc(11 * var(--r))); }
.remind__panel {
  position: absolute; left: 0; right: 0; top: calc(62 * var(--r)); padding: calc(14 * var(--r)) calc(16 * var(--r)) calc(14 * var(--r));
  border-radius: calc(8 * var(--r)); background: #fff; color: var(--ink);
  box-shadow: 0 0 0 calc(8 * var(--r)) rgba(255,255,255,.28);
}
.remind__title { display: flex; justify-content: space-between; align-items: center; }
.remind__title b { font-weight: 400; font-size: max(8px, calc(11 * var(--r))); }
.remind__title span { font-size: max(6px, calc(8 * var(--r))); color: #8a8a85; }
.remind__panel ul { margin: calc(8 * var(--r)) 0 0; padding: 0; list-style: none; display: grid; gap: calc(6 * var(--r)); }
.remind__panel li { display: flex; align-items: center; gap: calc(10 * var(--r)); padding: calc(7 * var(--r)) calc(8 * var(--r)); border-radius: calc(6 * var(--r)); background: #f6f6f4; }
.remind__panel li i { display: grid; place-items: center; width: calc(24 * var(--r)); height: calc(24 * var(--r)); border-radius: 50%; background: #e8e8e4; font-style: normal; font-size: max(6px, calc(8 * var(--r))); }
.remind__panel li div { flex: 1; }
.remind__panel li div p:first-child { font-size: max(8px, calc(10.5 * var(--r))); }
.remind__panel li div p:last-child { font-size: max(6px, calc(8.5 * var(--r))); color: #8a8a85; }
.remind__panel li em { font-style: normal; font-size: max(6px, calc(8.5 * var(--r))); padding: calc(3 * var(--r)) calc(8 * var(--r)); border-radius: 999px; background: #e9e9e5; color: #6f6f6a; }
.remind__panel li em.ok { background: #dff5e6; color: #1f8f4c; }
.remind__note { margin-top: calc(8 * var(--r)); padding: calc(8 * var(--r)) calc(10 * var(--r)); border-radius: calc(6 * var(--r)); background: #eaf1ff; color: #2d5fbf; font-size: max(6px, calc(8.5 * var(--r))); line-height: 1.35; }

@media (max-width: 767px) {
  .card--wide .card__media--side.remind { aspect-ratio: 474 / 351; margin: 24px 20px 20px; }
}

/* Hero photo overlay: pending bookings (1 reference px = --r) */
.media--photo { position: relative; container-type: inline-size; --r: 0.134cqw; }
.media__frame { position: absolute; inset: calc(-40 * var(--r)) calc(24 * var(--r)) calc(24 * var(--r)) calc(20 * var(--r)); border: 1.5px solid rgba(255,255,255,.75); border-radius: calc(28 * var(--r)); pointer-events: none; }
.pending { position: absolute; left: 12.5%; width: 75%; bottom: calc(84 * var(--r)); height: calc(348 * var(--r)); }
.pending { text-align: left; }
.pending p { margin: 0; }
.pending__back { position: absolute; left: 10%; right: 10%; top: calc(-46 * var(--r)); height: calc(90 * var(--r)); border-radius: calc(12 * var(--r)) calc(12 * var(--r)) 0 0; background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.85)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pending__card { position: absolute; inset: 0; padding: calc(30 * var(--r)) calc(28 * var(--r)) calc(14 * var(--r)); border-radius: calc(14 * var(--r)); background: #fff; color: var(--ink); box-shadow: 0 calc(16 * var(--r)) calc(40 * var(--r)) rgba(20, 20, 10, .16); }
.pending__label { font-size: max(7px, calc(16 * var(--r))); letter-spacing: 0.05em; text-transform: uppercase; color: #9a9a95; }
.pending ul { margin: calc(14 * var(--r)) 0 0; padding: 0; list-style: none; }
.pending li { display: flex; align-items: center; gap: calc(14 * var(--r)); height: calc(88 * var(--r)); }
.pending li + li { border-top: 1px solid #f0f0ec; }
.pending li > div { flex: 1; min-width: 0; }
.pending li > div p:first-child { font-size: max(9px, calc(21 * var(--r))); font-weight: 500; letter-spacing: -0.02em; }
.pending li > div p:last-child { margin-top: calc(3 * var(--r)); font-size: max(7px, calc(15.5 * var(--r))); color: #9a9a95; white-space: nowrap; }
.pending li > b { font-size: max(9px, calc(22 * var(--r))); font-weight: 600; letter-spacing: -0.02em; }
.av { display: grid; place-items: center; flex: none; width: calc(42 * var(--r)); height: calc(42 * var(--r)); border-radius: 50%; font-style: normal; font-size: max(6px, calc(14 * var(--r))); font-weight: 600; color: #fff; }
.av--violet { background: #6c63e8; } .av--teal { background: #0e8fa8; } .av--tan { background: #eac79b; }
.act { display: flex; gap: calc(8 * var(--r)); }
.act em { display: grid; place-items: center; width: calc(34 * var(--r)); height: calc(34 * var(--r)); border-radius: calc(8 * var(--r)); font-style: normal; font-size: max(6px, calc(14 * var(--r))); }
.act .yes { background: #e3f6ec; color: #1ea35a; }
.act .no { background: #fdeaea; color: #e04848; }
.act .chip { width: auto; padding: 0 calc(14 * var(--r)); background: #eaf6ef; color: #6cbf93; font-size: max(7px, calc(15 * var(--r))); }
.pending li.done { opacity: .55; }

@media (max-width: 767px) { .media--photo { --r: 0.14cqw; } }

/* Translucent frame around the dashboard inside hero image 2 (same look as the phone mockup bezel) */
.media--product { position: relative; container-type: inline-size; }
.media__bezel {
  position: absolute; pointer-events: none;
  left: 9.45%; top: 10.56%; right: -8cqw; bottom: -8cqw;
  border-radius: 0.6cqw;
  /* outer-only shadows: a soft translucent rim plus a diffused glow around the dashboard */
  box-shadow: 0 0 0 2cqw rgba(255, 255, 255, .17), 0 0 2.4cqw 2.2cqw rgba(255, 255, 255, .14);
}
@media (max-width: 767px) { .media--product { aspect-ratio: 3092 / 2152; } }

/* Glass buttons (nav "Contáctanos" and hero CTA) */
.btn--glass, .btn--glass-dark { height: 44px; padding: 0 18px; gap: 8px; font-size: 16px; backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.btn--glass svg, .btn--glass-dark svg { width: 12px; height: 12px; }
.btn--glass {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(26,26,26,.07), 0 6px 18px rgba(30,30,20,.08), inset 0 1px 0 rgba(255,255,255,.95);
}
.btn--glass:hover { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.58)); border-color: #fff; }
.btn--glass-dark {
  color: #fcfcf8;
  background: linear-gradient(180deg, rgba(26,26,25,.96), rgba(6,6,6,.96));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 10px 24px rgba(20,20,10,.22), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn--glass-dark:hover { background: linear-gradient(180deg, rgba(38,38,36,.97), rgba(12,12,12,.97)); }
.nav__bar .btn.btn--glass { height: 44px; }
@media (max-width: 767px) { .btn--glass, .btn--glass-dark, .nav__bar .btn.btn--glass, .hero .btn.btn--glass-dark { height: 40px; font-size: 14px; padding: 0 14px; } }
@media (prefers-reduced-transparency: reduce) { .btn--glass { background: #fff; } .btn--glass-dark { background: #1b1b1a; } }

/* Desktop only: dark glass version of the pending-bookings card (mobile keeps the white card) */
@media (min-width: 768px) {
  .pending__card {
    background: linear-gradient(180deg, rgba(40,40,38,.66), rgba(22,22,21,.72));
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255,255,255,.16);
    color: #f4f4ef;
    box-shadow: 0 calc(16 * var(--r)) calc(40 * var(--r)) rgba(10,10,5,.3), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .pending__back { background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.3)); }
  .pending__label { color: #b9b9b3; }
  .pending li + li { border-top-color: rgba(255,255,255,.1); }
  .pending li > div p:last-child { color: #b0b0aa; }
  .act .yes { background: rgba(60,190,115,.22); color: #7be8a8; }
  .act .no { background: rgba(235,80,80,.22); color: #ff9393; }
  .act .chip { background: rgba(255,255,255,.12); color: #cfcfca; }
  .pending li.done { opacity: .7; }
}

/* Hero image 1: the white outline fades out from the middle upwards */
.media__frame {
  filter: blur(0.6px);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.85) 25%, rgba(0,0,0,.45) 42%, rgba(0,0,0,.15) 58%, transparent 75%);
          mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.85) 25%, rgba(0,0,0,.45) 42%, rgba(0,0,0,.15) 58%, transparent 75%);
}

/* Nav after scrolling: floating pill */
.nav.is-scrolled .nav__wrap { padding-top: 12px; }
.nav.is-scrolled .nav__bar {
  padding: 7px 7px 7px 24px;
  background: rgba(232, 234, 228, .88);
  border-color: rgba(26, 26, 26, .1);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: 0 8px 28px rgba(30, 30, 20, .08), inset 0 1px 0 rgba(255,255,255,.6);
}
.nav.is-scrolled .nav__links a { color: #3d3d39; }
.nav.is-scrolled .nav__bar .btn.btn--glass {
  height: 46px; color: #fcfcf8;
  background: linear-gradient(180deg, rgba(34,34,33,.97), rgba(12,12,12,.97));
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.nav__bar .btn.btn--glass { transition: color .3s, transform .25s; }
@media (max-width: 767px) { .nav.is-scrolled .nav__bar { padding: 6px 6px 6px 18px; } .nav.is-scrolled .nav__bar .btn.btn--glass { height: 40px; } }
@media (prefers-reduced-transparency: reduce) { .nav.is-scrolled .nav__bar { background: #e8eae4; } }

/* Desktop: the floating pill shrinks to fit its content */
@media (min-width: 768px) { .nav.is-scrolled .nav__bar { width: min(100%, 780px); } }

/* Burger + dropdown (mobile only) */
.nav__burger, .nav__menu { display: none; }

@media (max-width: 767px) {
  .nav__bar .btn { display: none; }
  .nav__bar { min-height: 46px; }
  .nav__burger { display: grid; align-content: center; justify-items: end; gap: 8px; justify-self: end; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .nav__burger span { display: block; width: 28px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s cubic-bezier(.16,1,.3,1), width .3s; }
  .nav.is-open .nav__burger span:first-child { transform: translateY(5px) rotate(45deg); }
  .nav.is-open .nav__burger span:last-child { transform: translateY(-5px) rotate(-45deg); }

  /* scrolled: full-width solid bar instead of the floating pill */
  .nav.is-scrolled .nav__wrap, .nav.is-open .nav__wrap { padding-top: 0; background: rgba(252, 252, 248, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .nav.is-scrolled .nav__bar { width: 100%; min-height: 58px; padding: 0; border-radius: 0; border-color: transparent; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav.is-open .nav__wrap { padding-top: 0; }
  .nav.is-open .nav__bar { min-height: 58px; }

  .nav__menu { position: absolute; top: 100%; left: 0; right: 0; display: block; max-height: 0; overflow: hidden; background: rgba(252, 252, 248, .97); transition: max-height .4s cubic-bezier(.16,1,.3,1); }
  .nav.is-open .nav__menu { max-height: 420px; }
  .nav__menu .container { display: grid; gap: 4px; padding-block: 8px 20px; }
  .nav__menu a:not(.btn) { padding: 12px 0; font-size: 19px; letter-spacing: -0.03em; border-bottom: 1px solid #ecece6; }
  .nav__menu .btn { margin-top: 12px; justify-content: center; }
}

@media (max-width: 767px) { .logo img { height: 17px; } }

/* "Cómo funciona" cards: no dotted background */
.step::before { display: none; }

/* FAQ questions: Light weight (the h3 default bold was being inherited) */
.faq__item h3, .faq__q { font-weight: 300; }

/* ===== Help centre page ===== */
.help-hero { padding-block: 30px 28px; }
.help-hero__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 6vw, 120px); align-items: end; }
.help-hero h1 { font-weight: 300; font-size: clamp(26px, 3vw, 46px); line-height: 1.08; letter-spacing: -0.04em; max-width: 14em; }
.help-hero__side { padding-bottom: 8px; }
.help-hero__side p { max-width: 400px; font-size: clamp(14px, 1vw, 16px); line-height: 1.4; color: var(--ink-soft); }
.help-hero__side .btn { margin-top: 24px; }

.help-banner-sec { padding-block: 6px 48px; }
.help-banner { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 1760 / 620; min-height: 300px; background: #2b2b29; color: #fff; }
.help-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility .7s; }
.help-slide.is-active { opacity: 1; visibility: visible; }
.help-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.help-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,6,.72) 0%, rgba(10,10,6,.35) 45%, rgba(10,10,6,0) 75%); }
.help-slide__text { position: absolute; z-index: 1; left: clamp(18px, 2.4vw, 40px); bottom: clamp(18px, 2.4vw, 38px); max-width: 46%; }
.help-slide__title { font-size: clamp(17px, 1.6vw, 26px); line-height: 1.15; letter-spacing: -0.03em; }
.help-slide__meta { display: flex; gap: 14px; margin-top: 12px; font-size: clamp(12px, 0.9vw, 14px); color: rgba(255,255,255,.78); }
.help-slide__meta b { font-weight: 300; color: #fff; }
.help-banner__brand { position: absolute; z-index: 2; right: clamp(20px, 2.4vw, 40px); bottom: clamp(20px, 2.4vw, 36px); display: flex; align-items: center; gap: 10px; font-size: clamp(13px, 1vw, 16px); }
.help-banner__brand img { width: clamp(18px, 1.5vw, 24px); height: auto; }
.help-dots { position: absolute; z-index: 2; right: clamp(14px, 1.6vw, 26px); top: 52%; transform: translateY(-50%); display: grid; gap: 8px; justify-items: center; }
.help-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.75); cursor: pointer; transition: height .35s cubic-bezier(.16,1,.3,1), background-color .3s; }
.help-dot.is-active { height: 36px; background: #fff; }

.help-topics { padding-block: 10px 40px; }
.help-topics h2 { font-weight: 300; font-size: clamp(26px, 2.8vw, 44px); line-height: 1.05; letter-spacing: -0.045em; }
.help-search { position: relative; max-width: 440px; margin-top: 22px; }
.help-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--ink-mute); }
.help-search input { width: 100%; height: 44px; padding: 0 18px 0 44px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); }
.help-search input::placeholder { color: #8a8a85; }
.help-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.help-cat {
  display: grid; align-content: start; justify-items: start; gap: 6px; padding: 24px; min-height: 170px;
  border: 1px solid #e0e0da; border-radius: 14px; background: #ebebe6; color: var(--ink); text-align: left; font: inherit; cursor: pointer;
  transition: background-color .3s, color .3s, transform .25s cubic-bezier(.16,1,.3,1);
}
.help-cat:hover { transform: translateY(-2px); }
.help-cat > i { margin-bottom: 18px; font-size: 32px; line-height: 1; }
.help-cat__t { font-size: 22px; letter-spacing: -0.035em; }
.help-cat__d { font-size: 15px; line-height: 1.35; color: var(--ink-mute); transition: color .3s; }
.help-cat[aria-pressed="true"] { background: #1b1b1a; color: #fcfcf8; border-color: #1b1b1a; }
.help-cat[aria-pressed="true"] .help-cat__d { color: #b5b5af; }

.help-faq { padding-block: 20px 50px; }
.help-faq .faq__head h2 { font-size: clamp(22px, 2.2vw, 32px); }
.help-faq .faq__list { margin-top: 24px; }
.help-faq .faq__item[hidden] { display: none; }
.help-empty { margin-top: 30px; text-align: center; color: var(--ink-soft); }
.help-empty .btn { margin-top: 18px; }

.help-more { padding-block: 0 80px; }
.help-more__box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: clamp(32px, 3.6vw, 56px) 24px; border-radius: 14px; background: #ebebe6; text-align: center; }
.help-more__box h2 { font-weight: 300; font-size: clamp(21px, 2.1vw, 31px); line-height: 1.05; letter-spacing: -0.045em; }
.help-more__box p { color: var(--ink-soft); font-size: clamp(14px, 1vw, 16px); }
.help-more__box .btn { margin-top: 10px; }

@media (max-width: 1000px) { .help-cats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .help-hero { padding-block: 24px 28px; }
  .help-hero__grid { grid-template-columns: 1fr; gap: 20px; }
  .help-banner-sec { padding-bottom: 44px; }
  .help-banner { aspect-ratio: 4 / 5; }
  .help-slide__text { max-width: 78%; }
  .help-banner__brand { top: 18px; left: 20px; right: auto; bottom: auto; font-size: 15px; }
  .help-banner__brand img { width: 22px; }
  .help-cats { grid-template-columns: 1fr; }
  .help-cat { min-height: 0; padding: 20px; }
  .help-cat > i { margin-bottom: 8px; }
  .help-more { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) { .help-slide { transition: none; } }

/* Help guides (cards + filter pills) */
.help-guides { padding-block: 6px 50px; }
.help-guides__bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.help-guides__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.help-guides__tag span { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.help-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.help-pill { height: 34px; padding: 0 13px; border: 0; border-radius: 8px; background: #ebebe6; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; transition: background-color .25s, color .25s, transform .2s; }
.help-pill:hover { background: #e2e2dc; }
.help-pill:active { transform: scale(.98); }
.help-pill[aria-pressed="true"] { background: #1b1b1a; color: #fcfcf8; }

.help-guides__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; }
.guide { padding: 10px 10px 16px; border-radius: 14px; border: 1px solid #ecece6; background: #f3f3ef; }
.guide[hidden] { display: none; }
.guide__img { aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #ddd; }
.guide__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.guide h3 { margin: 16px 8px 0; font-weight: 300; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.2; letter-spacing: -0.03em; }
.guide__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 22px 8px 0; }
.guide__num { font-size: clamp(20px, 1.7vw, 26px); line-height: 1; letter-spacing: -0.05em; }
.guide__cap { margin-top: 4px; font-size: 13px; color: var(--ink-mute); }
.guide__chip { padding: 6px 12px; border-radius: 8px; background: #e2e2dc; font-size: 13px; white-space: nowrap; }

.help-faq .help-search { margin-inline: auto; margin-top: 30px; }

@media (max-width: 767px) {
  .help-guides { padding-bottom: 44px; }
  .help-pill { height: 36px; font-size: 14px; padding: 0 12px; }
  .help-guides__grid { grid-template-columns: 1fr; margin-top: 24px; }
  .guide__foot { margin-top: 24px; }
}

/* Help centre: compact button sizes */
.help-hero .btn, .help-empty .btn, .help-more .btn { height: 42px; font-size: 15px; padding: 0 16px; }
@media (max-width: 767px) {
  .help-hero h1 { font-size: 26px; }
  .help-banner { aspect-ratio: 4 / 4.4; }
  .help-slide__title { font-size: 18px; }
  .guide h3 { font-size: 17px; }
}

@media (max-width: 1000px) { .help-guides__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .help-guides__grid { grid-template-columns: 1fr; } }

.newsletter .btn--sm { height: 38px; padding: 0 20px; font-size: 14px; }
@media (max-width: 767px) { .newsletter h2 { font-size: 24px; } .newsletter p, .newsletter__consent { font-size: 12px; } .newsletter .btn--sm, .newsletter__row input[type="email"] { height: 40px; font-size: 14px; } }

/* Client logos (white artwork turned into soft grey on the light page) */
.logos__item img { height: var(--h); width: auto; max-width: none; filter: brightness(0); opacity: .9; transition: opacity .3s; }
.logos__item:hover img { opacity: 1; }
@media (max-width: 767px) { .logos__item img { height: calc(var(--h) * .72); } }

/* Case photos: keep the white brand name readable on any picture */

.case__brand { z-index: 1; }

/* Case cards: "Leer más" buttons hidden (kept in the markup for later) */
.case__more { display: none; }

/* Final CTA: same background picture as the "Recordatorios automáticos" card (fondo1.jpeg) */
.cta__box { background: #8a7a62 url("fondo1.jpeg") center / cover no-repeat; isolation: isolate; }
.cta__box img { display: none; }
.cta__box::after { background: rgba(20, 16, 10, .28); }
.cta__content { z-index: 1; }

/* Case cards on tablet/mobile: image, title, figure, dashed line, person, quote */
@media (max-width: 1000px) {
  .case { padding: 10px; background: #e9ebe4; border-color: #dcdcd5; box-shadow: none; }
  .case__img { aspect-ratio: 560 / 340; border-radius: 10px; }
  .case__mid { gap: 22px; padding: 18px 8px 16px; }
  .case__mid h3 { font-size: clamp(21px, 5.6vw, 28px); line-height: 1.12; }
  .case__num { font-size: clamp(30px, 8vw, 40px); }
  .case__cap { margin-top: 4px; font-size: 14px; max-width: none; }
  .case__side { margin: 0 8px; padding: 18px 0 10px; border-top: 1px dashed #c3c3bb; gap: 14px; justify-content: flex-start; }
  .case__who { align-items: center; gap: 14px; }
  .case__who img { width: 64px; height: 64px; border-radius: 8px; flex: none; }
  .case__who p:first-child { font-size: 17px; }
  .case__who p:last-child { font-size: 14px; }
  .case__side blockquote { font-size: 15px; line-height: 1.4; }
}