/* ==========================================================================
   twism.com.br, merchant page (/). Loads after site.css and site-br.css; only what the
   page adds or arranges differently. Tokens from site.css :root only.
   ========================================================================== */

/* ---------- Nav ---------- */

/* Five pt-BR links plus the long CTA do not fit the US bar at 900px: the menu sheet stays
   up to 1180px. */
@media (min-width: 900px) and (max-width: 1179px) {
  .nav--loj .nav__links {
    display: none;
  }
  .nav--loj .nav__toggle {
    display: inline-grid;
  }
}
/* Phones and tablets keep the menu on screen; site.js still sets
   is-hidden. Not from 1100px: the Como funciona row there reads is-hidden to drop its room. */
@media (max-width: 1099px) {
  .nav--loj.is-hidden {
    transform: none;
  }
}
/* Links centered on the page, not between the logo and the wider CTA. */
@media (min-width: 1180px) {
  .nav--loj .nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .nav--loj .logo {
    justify-self: start;
  }
  .nav--loj .nav__actions {
    justify-self: end;
  }
}
/* "Quero o app": only where the links fit (the menu sheet has "Baixe o app" below that). It
   opens on hover and on keyboard focus; nav-cta.js adds is-open for a tap or a click. */
.nav__app {
  display: none;
  position: relative;
}
@media (min-width: 1180px) {
  .nav__app {
    display: block;
  }
}
.nav__app-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px 8px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  background: none;
  white-space: nowrap;
  cursor: pointer;
}
.nav__app-btn .icon {
  width: 16px;
  height: 16px;
  rotate: 90deg;
  transition: rotate 0.2s var(--ease-out);
}
.nav__app-btn:hover,
.nav__app.is-open .nav__app-btn {
  color: var(--blue-ink);
  background: var(--mist-3);
}
.nav--loj.is-over-hero .nav__app-btn {
  color: var(--white);
}
.nav--loj.is-over-hero .nav__app-btn:hover,
.nav--loj.is-over-hero .nav__app.is-open .nav__app-btn {
  background: rgb(255 255 255 / 0.16);
}
.nav__app-panel {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: 320px;
  padding: 24px;
  border-radius: 28px;
  background: var(--white);
  box-shadow: var(--shadow-tile);
  color: var(--ink);
  text-align: center;
  visibility: hidden;
  opacity: 0;
  translate: -50% -8px;
  /* While it fades out it is still visible, so without this the pointer re-hovers it and it flickers. */
  pointer-events: none;
  transition: opacity 0.2s, translate 0.2s var(--ease-out), visibility 0s 0.2s;
}
/* Covers the gap under the button so the pointer can travel into the panel. Only as wide as the
   button: a panel-wide bridge sits under "Dúvidas" and keeps the panel open over it. */
.nav__app::after {
  content: "";
  position: absolute;
  top: 100%;
  inset-inline: 0;
  height: 20px;
}
.nav__app:hover .nav__app-panel,
.nav__app:has(:focus-visible) .nav__app-panel,
.nav__app.is-open .nav__app-panel {
  visibility: visible;
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
  transition: opacity 0.2s, translate 0.2s var(--ease-out);
}
.nav__app:hover .nav__app-btn .icon,
.nav__app:has(:focus-visible) .nav__app-btn .icon,
.nav__app.is-open .nav__app-btn .icon {
  rotate: -90deg;
}
/* Figma 3411:1259: the QR's tile runs the panel's full content width. */
.nav__app-qr {
  width: 224px;
  height: 224px;
  padding: 24px;
  box-sizing: content-box;
  border-radius: 20px;
  background: #f3f3f6;
}
.nav__app-scan {
  margin-top: 24px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.nav__app-title {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--ink-2);
}
.nav__app-stores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-top: 24px;
}
.store-badge.store-badge--sm {
  min-width: 0;
  height: 44px;
  gap: 8px;
  padding: 0 10px;
  border-radius: 10px;
}
.store-badge.store-badge--sm svg {
  width: 20px;
  height: 20px;
}
.store-badge.store-badge--sm small {
  font-size: 0.5625rem;
}
.store-badge.store-badge--sm b {
  font-size: 0.875rem;
}

/* One primary in view: the nav CTA stays soft while the hero CTA is on screen (nav-cta.js). */
.nav--loj .nav__actions .btn--primary {
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.2s;
}
.nav--loj .nav__actions .btn--primary.is-quiet {
  background: var(--mist-3);
  color: var(--blue-ink);
}
.nav--loj .nav__actions .btn--primary.is-quiet:hover {
  background: var(--blue);
  color: var(--white);
}
@media (max-width: 479px) {
  .nav--loj .nav__actions .btn--primary {
    display: none;
  }
}
.sheet__foot .btn {
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  padding-block: 12px;
}
.sheet__bridge {
  margin-top: 8px;
  text-align: center;
  font-size: 0.875rem;
  color: rgb(255 255 255 / 0.8);
}
.sheet__bridge .textlink {
  margin-inline-start: 4px;
  padding-block: 10px;
  color: var(--white);
}
/* The sheet's logo and close button sit exactly where the glass pill holds the logo and the
   toggle: same margin, padding and invisible 1.4px border (borders snap to device pixels), so
   opening the menu moves nothing. The links line up with the logo. */
.sheet__top {
  height: auto;
  margin-top: 16px;
  padding: 8px 8px 8px 24px;
  border: 1.4px solid transparent;
}
.sheet .logo svg {
  width: 112px;
  height: 28px;
}
.sheet__links {
  padding-left: 25.4px;
}
@media (min-width: 900px) {
  .sheet__top {
    margin-top: 32px;
    padding: 16px 16px 16px 40px;
  }
  .sheet__links {
    padding-left: 41.4px;
  }
}
/* Opens with a fade while the links rise in turn; closes with a quicker fade. The hidden
   attribute still toggles display, which allow-discrete holds until the fade ends. */
@media (prefers-reduced-motion: no-preference) {
  .sheet {
    transition: opacity 0.2s ease-in, display 0.2s allow-discrete;
  }
  .sheet:not([hidden]) {
    transition: opacity 0.32s var(--ease-out), display 0.32s allow-discrete;
  }
  .sheet[hidden] {
    opacity: 0;
  }
  .sheet__links a,
  .sheet__foot > * {
    transition: opacity 0.4s var(--ease-out), translate 0.6s var(--ease-out);
  }
  .sheet[hidden] .sheet__links a,
  .sheet[hidden] .sheet__foot > * {
    opacity: 0;
    translate: 0 16px;
  }
  @starting-style {
    .sheet:not([hidden]) {
      opacity: 0;
    }
    .sheet:not([hidden]) .sheet__links a,
    .sheet:not([hidden]) .sheet__foot > * {
      opacity: 0;
      translate: 0 16px;
    }
  }
  .sheet:not([hidden]) .sheet__links a:nth-child(2) { transition-delay: 40ms; }
  .sheet:not([hidden]) .sheet__links a:nth-child(3) { transition-delay: 80ms; }
  .sheet:not([hidden]) .sheet__links a:nth-child(4) { transition-delay: 120ms; }
  .sheet:not([hidden]) .sheet__links a:nth-child(5) { transition-delay: 160ms; }
  .sheet:not([hidden]) .sheet__foot > * { transition-delay: 200ms; }
}

/* Section labels in gray: the headings carry the color. */
.eyebrow--blue {
  color: var(--ink-2);
}

/* Figma 10789:19432. The menu floats as a glass pill over the hero, white while it sits on the
   photo and light once it reaches the white sections (nav-cta.js sets is-over-hero). */
html {
  scroll-padding-top: 128px;
}
.nav.nav--loj {
  position: fixed;
  inset: 0 0 auto;
  padding-top: 16px;
  background: none;
  pointer-events: none;
}
.nav.nav--loj.is-scrolled {
  box-shadow: none;
}
.nav--loj .nav__inner {
  height: auto;
  padding: 8px 8px 8px 24px;
  position: relative;
  border: 1.4px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: auto;
  transition: background-color 0.3s;
}
/* The stroke is a gradient (Figma: white 15% to 7%, top to bottom), which border-color can't
   draw: a ring cut out of a pseudo-element with a mask. */
.nav--loj .nav__inner::before {
  content: "";
  position: absolute;
  inset: -1.4px;
  padding: 1.4px;
  border-radius: inherit;
  background: var(--mist-4);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.nav--loj.is-over-hero .nav__inner::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 11.8%, rgba(255, 255, 255, 0.07));
}
.nav--loj .logo svg {
  width: 112px;
  height: 28px;
}
.nav--loj.is-over-hero .nav__inner {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(5.5px);
  backdrop-filter: blur(5.5px);
}
.nav--loj.is-over-hero .logo {
  --logo-mark: var(--white);
  color: var(--white);
}
.nav--loj.is-over-hero .nav__links a {
  color: var(--white);
}
.nav--loj.is-over-hero .nav__links a:hover {
  background: rgba(255, 255, 255, 0.16);
}
.nav--loj.is-over-hero .nav__toggle {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}
.nav--loj.is-over-hero .nav__actions .btn--ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}
.nav--loj.is-over-hero .nav__actions .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
}
@media (min-width: 900px) {
  .nav.nav--loj {
    padding-top: 32px;
  }
  .nav--loj .nav__inner {
    padding: 16px 16px 16px 40px;
  }
}

/* ---------- Hero ---------- */

/* Colors come from the design system's light theme (Design/tokens), which the Portal also uses:
   dark sections are blue.950, light surfaces blue.025, small labels fg.subtle. */
:root {
  --night: #010c38;
  --navy: #010c38;
  --mist-2: #f4f7ff;
  --ink-subtle: #405f7a;
  --neutral-subtle: #f6f6f8;
  --positive: #2f8c21;
  --positive-subtle: #e8f9e6;
  --negative: #e32b2e;
  --cyan: #a3b7ff;
  --lime: #baf764;
  --info-light: #82d9ff; /* design system feedback/info/light */
  /* Readout pills on the "O que é a Twism" photos. */
  --tag-yellow: #ffc738;
  --tag-green: #baf764;
  --tag-orange: #ffc738;
  /* Dark glass pills over photos. */
  --glass: color-mix(in srgb, #19191f 80%, transparent);
  --shadow-glass: 0 5px 8px rgba(0, 0, 0, 0.15), 0 3px 4px rgba(0, 0, 0, 0.1);
}

/* A photo card: the copy sits on the photo's darkened left side and two app readouts float
   over the merchant. Under 1024px the photo drops below the copy, which stays on night. */
.loj-hero {
  padding-top: round(clamp(16px, 1.6vw, 24px), 8px);
  background: var(--white);
}
.loj-hero__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: clamp(28px, 3.6vw, 52px);
  background: var(--night);
  color: var(--white);
}
.loj-hero__copy {
  position: relative;
  z-index: 2;
  padding: round(clamp(32px, 6vw, 48px), 8px) round(clamp(24px, 5vw, 40px), 8px) 8px;
}
.loj-hero .hero__line {
  margin-bottom: 16px;
  font-size: 0.875rem;
  color: var(--white);
}
.loj-hero .hero__spark {
  width: 18px;
  height: 18px;
  color: var(--white);
}
.loj-hero__title {
  font-size: round(clamp(32px, 9.2vw, 44px), 4px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--white);
}
.loj-hero__accent {
  font-weight: 500;
  color: var(--info-light);
}
.loj-hero__copy .lede {
  max-width: 28em;
  margin-top: 16px;
  color: var(--white);
  text-wrap: pretty;
}
.loj-hero .hero__cta {
  margin-top: 32px;
}
.loj-hero .hero__cta .btn {
  min-height: 52px;
  font-size: 1rem;
}
.loj-hero__media {
  position: relative;
  aspect-ratio: 16 / 11;
  margin-top: 24px;
}
.loj-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}
/* Mobile: the night above bleeds into the photo so the copy and the photo read as one card. */
.loj-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--night) 0%, transparent 30%), color-mix(in srgb, var(--night) 20%, transparent);
}

/* The readouts: glass pills like the app's history tags, the value in lime. */
.loj-hero__tags {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}
.loj-tag {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px 12px 12px;
  border: 1.4px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-glass);
}
.loj-tag__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tone, var(--lime));
  color: var(--night);
  transition: background-color 0.5s;
}
.loj-tag--revenue.is-pix {
  --tone: var(--tag-yellow);
}
.loj-tag__glyph {
  grid-area: 1 / 1;
}
/* Without the story (no JS, reduced motion) the arrow and the coins show; the Pix mark and the
   return arrows stay hidden. */
.loj-tag__glyph--pix,
.loj-tag__glyph--visit {
  opacity: 0;
}
.loj-tag--coins.is-visit {
  --tone: var(--info-light);
}
/* The Como funciona Pix mark: a 20px grid, so a thinner stroke reads like the arrow next to it. */
.loj-tag__icon .loj-tag__glyph--pix {
  stroke-width: 1.4;
}
.loj-hero__tags.is-story .loj-tag {
  animation: none;
}
.loj-hero__tags.is-story .loj-tag.is-hidden {
  opacity: 0;
}
.loj-tag__icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.loj-tag__text {
  display: grid;
  gap: 4px;
}
/* nowrap: a longer label comes in while the pill is still growing to fit it. */
.loj-tag__label {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--white);
}
.loj-tag__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--tone, var(--lime));
  transition: color 0.5s;
}
.loj-tag__value small {
  font-size: 0.7em;
}
.loj-tag--revenue {
  left: 4%;
  bottom: 24%;
}
.loj-tag--coins {
  right: 4%;
  bottom: 5%;
}
@media (max-width: 1023px) {
  .loj-tag {
    gap: 12px;
    padding: 8px 16px 8px 8px;
  }
  .loj-tag__icon {
    width: 36px;
    height: 36px;
  }
  .loj-tag__icon svg {
    width: 18px;
    height: 18px;
  }
  .loj-tag__value {
    font-size: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .loj-hero__card {
    display: flex;
    align-items: center;
    /* The logo band under the hero stays in the first fold: the card gives up height first. */
    min-height: clamp(460px, calc(100svh - 300px), 760px);
  }
  .loj-hero__copy {
    width: min(54%, 680px);
    padding: 48px 0 48px round(clamp(48px, 4.8vw, 72px), 8px);
  }
  .loj-hero__title {
    font-size: round(clamp(40px, calc(5.4vw - 22px), 56px), 4px);
  }
  /* One line per half: text-wrap: balance would otherwise break it mid-phrase. */
  .loj-hero__line2 {
    display: block;
  }
  .loj-hero__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    aspect-ratio: auto;
  }
  .loj-hero__photo {
    object-position: 50% 50%;
  }
  .loj-hero__media::before {
    /* Figma 10608:9340: a 61deg ramp (its layer 70% opaque) under a 20% night veil. */
    background:
      linear-gradient(color-mix(in srgb, var(--night) 20%, transparent), color-mix(in srgb, var(--night) 20%, transparent)),
      linear-gradient(61deg, color-mix(in srgb, var(--night) 70%, transparent) 5.5%, color-mix(in srgb, var(--night) 49%, transparent) 39%, transparent 53%);
  }
  /* Positions read off the 1240 x 692 card in Figma. */
  .loj-tag--revenue {
    left: 44.3%;
    top: 61.4%;
    bottom: auto;
  }
  .loj-tag--coins {
    left: 76.9%;
    right: auto;
    top: 73.7%;
    bottom: auto;
  }
  .loj-tag__icon {
    width: 48px;
    height: 48px;
  }
  .loj-tag__value {
    font-size: 1.625rem;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* The title stays put: hidden until the rise ends, it would hold back the first paint. */
  .loj-hero__copy > :not(.loj-hero__title) {
    animation: biz-rise 0.9s var(--ease-out) both;
  }
  .loj-hero__copy > :nth-child(2) { animation-delay: 0.08s; }
  .loj-hero__copy > :nth-child(3) { animation-delay: 0.16s; }
  .loj-hero__copy > :nth-child(4) { animation-delay: 0.24s; }
  .loj-tag {
    animation: biz-card 0.8s var(--ease-out) 0.6s both;
  }
  .loj-tag--coins {
    animation-delay: 0.8s;
  }
}

.loj-hero {
  padding-top: 0;
}
.loj-hero__card {
  border-radius: 0;
}
.loj-hero__copy {
  padding: 112px 0 8px;
}
/* From 900px the menu grows 32px taller, so the copy moves down with it. */
@media (min-width: 900px) and (max-width: 1023px) {
  .loj-hero__copy {
    padding-top: 144px;
  }
}
@media (min-width: 1024px) {
  .loj-hero__card {
    /* The hero fills the first fold on its own; the logo band comes in on the first scroll. */
    min-height: max(560px, 100svh);
  }
  .loj-hero__inner {
    position: relative;
    z-index: 2;
  }
  .loj-hero__copy {
    width: min(56%, 680px + var(--big) / 6.4);
    padding: 120px 0 48px;
  }
  .loj-hero__title {
    font-size: round(clamp(40px, calc(5.4vw - 22px), 56px) + var(--big) / 80, 4px);
  }
  /* The photo keeps the Figma 1440 x 768 framing at any hero height: the frame scales with the
     hero and sits on the right, its night left edge running into the card. */
  .loj-hero__media {
    inset: 0 0 0 auto;
    width: auto;
    aspect-ratio: 1440 / 768;
  }
  /* The photo's own top and left edges would show as a cut against the night, so they fade out.
     Past 1920px the frame moves left by --big / 2 and its right edge fades into the night too. */
  .loj-hero__photo {
    top: 7.3%;
    height: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%), linear-gradient(90deg, transparent, #000 24%, #000 calc(100% - var(--big) / 2), transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, transparent, #000 14%), linear-gradient(90deg, transparent, #000 24%, #000 calc(100% - var(--big) / 2), transparent);
    mask-composite: intersect;
  }
  .loj-hero__media::before {
    background:
      linear-gradient(180deg, var(--night) 4.5%, transparent 30%),
      linear-gradient(90deg, var(--night) 5%, color-mix(in srgb, var(--night) 70%, transparent) 37%, transparent 50%),
      color-mix(in srgb, var(--night) 20%, transparent);
  }
  .loj-tag--revenue {
    left: 46.5%;
    top: 61.2%;
  }
  .loj-tag--coins {
    left: 77.4%;
    top: 73.4%;
  }
}

/* Under 1280px the copy reaches the merchant's white shirt. The shirt starts 47% of the frame
   from its right edge, so the photo slides right until that point clears the copy (about 540px);
   the slide pushes the coins readout off the card, so both readouts move. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .loj-hero__media {
    translate: max(0px, calc(47% + 555px - 100vw));
  }
  .loj-tag--revenue {
    left: 52%;
    top: 61%;
  }
  .loj-tag--coins {
    left: calc(71% + (100vw - 1024px) * 0.45);
    top: 84%;
  }
}
/* On tall screens the photo frame grows with the hero and the shirt reaches the copy again
   until about 1500px wide; the same slide, sized for the wider copy, clears it. */
@media (min-width: 1280px) and (min-height: 861px) {
  .loj-hero__media {
    translate: max(0px, calc(47% - 50vw));
  }
}
/* Wide screens: the merchant moves toward the copy instead of staying on the far right edge.
   The slide above is 0 from here on. */
@media (min-width: 1921px) {
  .loj-hero__media {
    translate: calc(var(--big) / -2);
  }
}

/* Under 1024px the photo runs taller with the merchant in the middle; the readouts sit in the
   empty corners so they never cover his face or the payment. */
@media (max-width: 1023px) {
  .loj-hero__media {
    aspect-ratio: 1 / 1;
    margin-top: 32px;
  }
  .loj-hero__photo {
    object-position: 90% 50%;
  }
  .loj-tag--revenue {
    left: auto;
    right: 16px;
    top: 14%;
    bottom: auto;
  }
  .loj-tag--coins {
    left: 16px;
    right: auto;
    bottom: 16px;
  }
}
@media (max-width: 599px) {
  .loj-tag {
    gap: 8px;
    padding: 6px 16px 6px 6px;
  }
  .loj-tag__icon {
    width: 32px;
    height: 32px;
  }
  .loj-tag__value {
    font-size: 1.125rem;
  }
}
/* Figma 10995:2720 (393x852): the vertical photo fills the card behind the centered copy,
   which sits on a night ramp. --p is the photo height; --top ends the payment 44px above the
   copy, unless his hair would then slide under the menu. Portrait tablets share it. */
@media (max-width: 599px), (max-width: 1023px) and (orientation: portrait) {
  .loj-hero__card {
    display: flex;
    flex-direction: column;
    height: 100svh;
    min-height: 520px;
  }
  .loj-hero__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 51.8%, color-mix(in srgb, var(--night) 50%, transparent) 61.1%, color-mix(in srgb, var(--night) 70%, transparent) 78.5%);
  }
  .loj-hero__media {
    --p: max(100svh, 150vw);
    --top: max(calc(100% - 44px - 0.635 * var(--p)), calc(72px - 0.19 * var(--p)));
    order: -1;
    flex: 1 1 0;
    min-height: 200px;
    aspect-ratio: auto;
    margin: 0;
  }
  /* Shifted left of center, so the customer's hand and phone show at the right edge; on short
     screens the photo is narrower (2:3 of --p), so the shift stops where it still covers it. */
  .loj-hero__photo {
    top: var(--top);
    left: max(calc(50% - 0.4215 * var(--p)), calc(100% - var(--p) * 2 / 3));
    width: auto;
    max-width: none;
    height: var(--p);
  }
  .loj-hero__media::before {
    content: none;
  }
  .loj-hero__copy {
    padding: 0 0 32px;
    text-align: center;
  }
  .loj-hero .hero__line {
    justify-content: center;
    margin-bottom: 14px;
  }
  .loj-hero__copy .lede {
    margin-inline: auto;
  }
  .loj-hero .hero__cta .btn {
    flex: 1;
    justify-content: center;
  }
  /* Two lines, "…clientes de / forma descomplicada.": the first line is 11em wide, so the
     size is the largest 4px step that fits it between the margins. */
  .loj-hero__title {
    font-size: round(down, min(32px, (100vw - 2 * var(--gutter)) / 11), 4px);
  }
  .loj-hero__copy .lede {
    margin-top: 14px;
    font-size: 14px;
    line-height: 20px;
  }
  .loj-hero .hero__cta {
    margin-top: 28px;
  }
  /* On the side margins; heights in photo coordinates, so they follow the photo. */
  .loj-tag--revenue {
    left: var(--gutter);
    right: auto;
    top: calc(var(--top) + 0.438 * var(--p));
    bottom: auto;
  }
  .loj-tag--coins {
    left: auto;
    right: var(--gutter);
    /* The media ends where the copy starts: on short screens the tag stops 8px above it. */
    top: min(calc(var(--top) + 0.618 * var(--p)), calc(100% - 58px));
    bottom: auto;
  }
}
/* Same two lines on portrait tablets, at a size closer to the desktop title. */
@media (min-width: 600px) and (max-width: 1023px) and (orientation: portrait) {
  .loj-hero__title {
    font-size: round(down, min(48px, (100vw - 2 * var(--gutter)) / 11), 4px);
  }
}
@media (max-width: 599px) and (min-height: 761px), (max-width: 1023px) and (orientation: portrait) {
  .loj-hero .hero__line {
    margin-bottom: 16px;
  }
  .loj-hero__copy .lede {
    margin-top: 16px;
    font-size: 16px;
    line-height: 22px;
  }
  .loj-hero .hero__cta {
    margin-top: 32px;
  }
}
@media (max-width: 599px) and (max-height: 600px) {
  .loj-hero__copy {
    padding-bottom: 24px;
  }
  .loj-hero .hero__line {
    margin-bottom: 8px;
    font-size: 0.75rem;
  }
  .loj-hero .hero__spark {
    width: 14px;
    height: 14px;
  }
  .loj-hero__title {
    font-size: 24px;
  }
  .loj-hero__copy .lede {
    margin-top: 8px;
  }
  .loj-hero .hero__cta {
    margin-top: 24px;
  }
  .loj-tag__icon {
    width: 30px;
    height: 30px;
  }
  .loj-tag__icon svg {
    width: 14px;
    height: 14px;
  }
  .loj-tag__text {
    gap: 0;
  }
  .loj-tag__label {
    font-size: 0.625rem;
  }
  .loj-tag__value {
    font-size: 0.875rem;
  }
}
@media (min-width: 600px) and (max-width: 1023px) and (orientation: landscape) {
  .loj-hero__media {
    aspect-ratio: 4 / 3;
  }
  .loj-hero__photo {
    object-position: 100% 50%;
  }
  .loj-tag--revenue {
    right: 32px;
  }
  .loj-tag--coins {
    left: 32px;
    bottom: 32px;
  }
}

/* ---------- O que é a Twism ---------- */

/* Head on the left, three tall photo cards on the right. Under 1100px the cards scroll
   sideways with snap, so each one keeps its height instead of stacking three tall cards. */
.loj-what__grid {
  display: grid;
  gap: round(clamp(32px, 4vw, 48px), 8px);
}
.loj-what__head .lede {
  margin-top: 24px;
}
.loj-what__steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 320px);
  gap: 16px;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  list-style: none;
}
.loj-what__steps::-webkit-scrollbar {
  display: none;
}
.loj-what__step {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  --pad: round(clamp(16px, 1.6vw, 24px), 8px);
  container-type: inline-size;
  aspect-ratio: 5 / 8;
  overflow: hidden;
  padding: var(--pad);
  border-radius: clamp(24px, 2.4vw, 32px);
  background: var(--night);
  color: var(--white);
  scroll-snap-align: start;
}
.loj-what__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.loj-what__step::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--night) 55%, transparent), transparent 30%),
    linear-gradient(180deg, transparent 36%, color-mix(in srgb, var(--night) 20%, transparent) 49%, color-mix(in srgb, var(--night) 46%, transparent) 60%, color-mix(in srgb, var(--night) 70%, transparent) 71%, color-mix(in srgb, var(--night) 86%, transparent) 83%, var(--night) 100%);
}
.loj-what__n {
  position: absolute;
  top: clamp(16px, 1.8vw, 24px);
  left: clamp(16px, 1.8vw, 24px);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
}
/* Same block on every card, one-line title and three lines of text, so the titles sit on one
   baseline across the row. The title scales with the card: 11.6em is the width of the longest
   one, "Troca por recompensas", in Clash Medium. */
.loj-what__step h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: min(var(--t-card), 100cqi / 11.6);
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.loj-what__step p {
  min-height: calc(3 * 1.5em);
  margin-top: 8px;
  font-size: var(--t-card-text);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}
/* Readouts over each photo, the same dark glass as the hero pills. Placed on the 278 x 444 card
   in Figma 10679:9548; the right-hand ones anchor right so they never run off a narrow card. */
.loj-what__tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-glass);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--tag);
}
.loj-what__tag-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tag);
  color: var(--ink);
}
.loj-what__tag-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.loj-what__tag--spend {
  --tag: var(--tag-yellow);
  right: 7.5%;
  top: 40.5%;
}
.loj-what__tag--spend .loj-what__tag-icon svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.3;
}
.loj-what__tag--earn {
  --tag: var(--tag-green);
  left: 12.2%;
  top: 26.1%;
}
.loj-what__tag--spent {
  --tag: var(--tag-orange);
  left: 9.4%;
  top: 28.6%;
}
.loj-what__tag--reward {
  --tag: var(--cyan);
  right: 10%;
  top: 38.5%;
}
@media (min-width: 1100px) {
  .loj-what__grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr);
    align-items: start;
    gap: round(clamp(40px, 4vw, 64px), 8px);
  }
  .loj-what__head {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
  }
  .loj-what__steps {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

/* Titles now run to two lines, so they wrap instead of scaling to one; the block keeps two
   title lines and three text lines on every card so the row stays aligned. */
.loj-cycle .loj-what__step h3 {
  min-height: calc(2 * 1.2em);
  font-size: var(--t-card);
  display: flex;
  align-items: flex-end;
  white-space: normal;
  text-wrap: balance;
}
.loj-cycle .loj-what__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Phones: the cards stack, shorter, so the cycle reads by scrolling down. */
@media (max-width: 1099px) {
  .loj-cycle .loj-what__steps {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .loj-cycle .loj-what__step {
    aspect-ratio: 4 / 5;
    max-width: 480px;
  }
  .loj-cycle .loj-what__photo {
    object-position: 50% 30%;
  }
}
/* Phones: the taller card of Figma 10958:2795, the text over the photo's fade. */
@media (max-width: 767px) {
  .loj-cycle .loj-what__step {
    aspect-ratio: 361 / 519;
  }
}

/* Desktop with JS: the row pins for three screens and the cards light up one by one
   (cycle-story.js sets is-scrolly and data-step). Cards not reached yet sit dimmed. */
@media (min-width: 1100px) {
  .loj-cycle.is-scrolly {
    padding-block: 0;
  }
  .loj-cycle.is-scrolly .loj-cycle__pin {
    height: 215svh;
  }
  .loj-cycle.is-scrolly .loj-what__grid {
    --menu-bottom: 112px;
    position: sticky;
    top: 0;
    height: 100svh;
    padding-block: calc(var(--menu-bottom) + 24px) 32px;
    align-items: center;
  }
  .loj-cycle.is-scrolly .loj-what__steps {
    height: 100%;
  }
  .loj-cycle.is-scrolly .loj-what__step {
    aspect-ratio: auto;
  }
  .loj-cycle.is-scrolly .loj-what__head {
    position: static;
  }
  .loj-cycle.is-scrolly .loj-what__step > * {
    transition: opacity 0.6s var(--ease-out);
  }
  .loj-cycle.is-scrolly .loj-what__photo {
    transition: filter 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
  }
  .loj-cycle.is-scrolly .loj-what__step.is-ahead .loj-what__photo {
    filter: grayscale(1);
    opacity: 0.35;
  }
  .loj-cycle.is-scrolly .loj-what__step.is-ahead .loj-what__text,
  .loj-cycle.is-scrolly .loj-what__step.is-ahead .loj-what__n {
    opacity: 0.35;
  }
}

/* Figma 10789:19521: the step numbers in white glass, like the menu. */
.loj-what__n {
  top: 24px;
  left: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(5.5px);
  backdrop-filter: blur(5.5px);
  color: var(--white);
  font: 600 1.25rem / 1 var(--font-display);
}

@media (min-width: 1100px) {
  .loj-cycle--grow.is-scrolly .loj-what__steps {
    display: flex;
  }
  .loj-cycle--grow.is-scrolly .loj-what__step {
    flex: 1 1 0;
    min-width: 0;
    transition: flex-grow 0.7s var(--ease-out);
  }
  .loj-cycle--grow.is-scrolly .loj-what__step.is-active {
    flex-grow: 2.4;
  }
  /* The paragraph is laid out at the open card's width from the start, so it never re-wraps
     while the card widens: flex shares what is left after the gaps and the three cards' padding. */
  .loj-cycle--grow.is-scrolly .loj-what__steps {
    --gap: 16px;
    gap: var(--gap);
    container-type: inline-size;
  }
  .loj-cycle--grow.is-scrolly .loj-what__step {
    container-type: normal;
  }
  .loj-cycle--grow.is-scrolly .loj-what__text p {
    flex: none;
    min-height: 0;
    width: min(34em, (100cqi - 2 * var(--gap) - 6 * var(--pad)) * 2.4 / 4.4);
    max-width: none;
    max-height: 8lh;
    overflow: hidden;
    transition: max-height 0.6s var(--ease-out), margin-top 0.6s var(--ease-out),
      opacity 0.5s var(--ease-out) 0.25s, translate 0.5s var(--ease-out) 0.25s;
  }
  .loj-cycle--grow.is-scrolly .loj-what__step:not(.is-active) .loj-what__text p {
    min-height: 0;
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    translate: 0 8px;
    transition-duration: 0.4s, 0.4s, 0.15s, 0.15s;
    transition-delay: 0s;
  }
  /* Under the pointer a card opens a little faster than the timer's switches, on a gentler curve:
     --ease-out front-loads the growth and the photo reads as a jump. */
  .loj-cycle--grow.is-scrolly .is-pointing .loj-what__step {
    transition-duration: 0.6s;
    transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
  }
  .loj-cycle--grow.is-scrolly .is-pointing .loj-what__step.is-active .loj-what__text p {
    transition-duration: 0.5s, 0.5s, 0.4s, 0.4s;
    transition-delay: 0s;
  }
  /* filter, not opacity: once the readout's entrance has run, its fill keeps opacity pinned. */
  .loj-cycle--grow.is-scrolly .loj-what__tag {
    transition: filter 0.4s var(--ease-out);
  }
  .loj-cycle--grow.is-scrolly .loj-what__step:not(.is-active) .loj-what__tag {
    filter: opacity(0);
  }
}

/* Title over the first two card columns, lede over the third, so the head sits on the same grid
   as the cards. The pinned row then stacks head and cards and the cards take what is left. */
@media (min-width: 1100px) {
  .loj-cycle .loj-what__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .loj-cycle .loj-what__head {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--steps-gap, 16px);
    align-items: start;
  }
  .loj-cycle .loj-what__head h2 {
    grid-column: span 2;
    max-width: 16em;
  }
  .loj-cycle .loj-what__head .lede {
    margin-top: 0.4em;
  }
  .loj-cycle.is-scrolly .loj-what__grid {
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    row-gap: round(clamp(32px, 3vw, 48px), 8px);
  }
}

@media (min-width: 1100px) {
  .loj-cycle .loj-what__head .eyebrow {
    grid-column: 1 / -1;
  }
  /* The lede starts inside the second column so it wraps in three lines, not four. */
  .loj-cycle .loj-what__head h2 {
    grid-row: 2;
    grid-column: 1 / 3;
  }
  .loj-cycle .loj-what__head .lede {
    grid-row: 2;
    grid-column: 2 / -1;
    justify-self: end;
    max-width: 30rem;
  }
  .loj-cycle.is-scrolly .loj-what__step {
    --pad: clamp(24px, 2.4vw, 36px);
  }
  .loj-cycle.is-scrolly .loj-what__n {
    top: var(--pad);
    left: var(--pad);
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
  }
  .loj-cycle.is-scrolly .loj-what__step p {
    max-width: 34em;
    margin-top: 12px;
    font-size: var(--t-card-text);
  }
  .loj-cycle.is-scrolly .loj-what__tag {
    gap: 8px;
    padding: 5px 16px 5px 5px;
    font-size: 0.9375rem;
  }
  .loj-cycle.is-scrolly .loj-what__tag-icon {
    width: 32px;
    height: 32px;
  }
  .loj-cycle.is-scrolly .loj-what__tag-icon svg {
    width: 18px;
    height: 18px;
  }
}

@media (min-width: 1100px) {
  /* The menu slides away on the way down (site.js sets is-hidden), so the row only keeps room
     for it while it is on screen. Same timing as the menu's own slide. */
  .loj-cycle.is-scrolly .loj-what__grid {
    transition: padding-top 0.5s var(--ease-out);
  }
  body:has(.nav--loj.is-hidden) .loj-cycle.is-scrolly .loj-what__grid,
  .loj-cycle.is-scrolly:not(.is-pinned) .loj-what__grid {
    --menu-bottom: 24px;
  }
  /* The menu link lands where the row pins, not 128px above it. */
  .loj-cycle.is-scrolly {
    scroll-margin-top: -130px;
  }
  /* The open card is wide and short, so the photo is cropped top and bottom: keep each face in. */
  .loj-cycle--grow.is-scrolly .loj-what__photo {
    transition: filter 0.6s var(--ease-out), opacity 0.6s var(--ease-out), object-position 0.7s var(--ease-out);
  }
  .loj-cycle--grow.is-scrolly .loj-what__step:nth-child(1) .loj-what__photo {
    object-position: 50% 30%;
  }
  .loj-cycle--grow.is-scrolly .loj-what__step:nth-child(3) .loj-what__photo {
    object-position: 50% 15%;
  }
  /* On a timer (cycle-story.js adds is-timed): the same open-card row, but a plain section that
     scrolls by, short enough to sit whole on screen under the menu, instead of pinning for three. */
  .loj-cycle.is-timed {
    padding-block: var(--section);
    /* The menu link lands with the row right under the menu. */
    scroll-margin-top: calc(-1 * var(--section));
  }
  .loj-cycle.is-timed .loj-cycle__pin {
    height: auto;
  }
  .loj-cycle.is-timed .loj-what__grid {
    position: relative;
    height: min(100svh - 160px, 860px);
    padding-block: 0;
    transition: none;
  }
}

/* Under 1100px the step text lines up with the number above it. */
@media (max-width: 1099px) {
  .loj-cycle .loj-what__step {
    --pad: 24px;
  }
}

/* photo-focus.js frames each photo in px; a transition on that would lag behind the card. */
@media (min-width: 1100px) {
  .loj-cycle--grow.is-scrolly .loj-what__photo {
    transition: filter 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
  }
}
/* Stacked cards where the text would cover the focus or cut a face (photo-focus.js): the photo
   gets its own frame and the text leaves it: a square photo, text under it, fading out in its
   last quarter. */
.loj-cycle.is-text-below .loj-what__step {
  --focus-bottom: 0.76;
  aspect-ratio: auto;
  max-width: 480px;
}
.loj-cycle.is-text-below .loj-what__photo {
  position: relative;
  inset: auto;
  width: calc(100% + 2 * var(--pad));
  max-width: none;
  height: auto;
  aspect-ratio: 1;
  margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 8px;
}
.loj-cycle.is-text-below .loj-what__step::before {
  inset: 0 0 auto;
  aspect-ratio: 1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--night) 55%, transparent), transparent 30%),
    linear-gradient(180deg, transparent 76%, var(--night) 100%);
}
/* The Pix readout sits on the counter just above the QR code, which this crop shows lower down. */
.loj-cycle.is-text-below .loj-what__tag--spend {
  top: 30cqi;
}

/* Tablets: the head stays pinned on the left while the phone cards scroll by on the right. */
@media (min-width: 768px) and (max-width: 1099px) {
  .loj-cycle .loj-what__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    column-gap: 40px;
  }
  .loj-cycle .loj-what__head {
    position: sticky;
    top: 128px;
  }
  .loj-cycle .loj-what__step,
  .loj-cycle.is-text-below .loj-what__step {
    max-width: none;
  }
}

/* cycle-story.js sets is-flow and --p (0 to 1): the card in the middle runs full size with its
   photo zoomed in, like the open card on desktop. Scale, not a clip, so the number and the text
   stay whole. No JS or reduced motion: every card stays open. */
@media (max-width: 1099px) {
  .loj-cycle.is-flow .loj-what__step {
    scale: calc(0.95 + var(--p, 1) * 0.05);
  }
  .loj-cycle.is-flow .loj-what__photo {
    scale: calc(1 + var(--p, 0) * 0.06);
  }
}

/* ---------- Benefícios ---------- */

/* A tinted box inside the white page, not a full-width band, so the rhythm breaks between
   the photo cards above and the Pix line below. Head centered; three points across. */
.loj-ben__box {
  padding: round(clamp(40px, 5.4vw, 72px), 8px) round(clamp(24px, 4.6vw, 64px), 8px);
  border-radius: clamp(28px, 3vw, 40px);
  background: linear-gradient(180deg, var(--mist-3) 57%, transparent 90%);
}
.loj-ben__head {
  margin-inline: auto;
  text-align: center;
}
.why__grid {
  display: grid;
  gap: round(clamp(40px, 4vw, 56px), 8px) round(clamp(32px, 4vw, 64px), 8px);
  margin: round(clamp(32px, 3.6vw, 48px), 8px) 0 0;
  padding: 0;
  list-style: none;
}
.why__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--blue) 25%, transparent);
  color: var(--blue);
}
.why__glyph {
  overflow: visible;
  width: 26px;
  height: 26px;
}
/* The icons take turns, one small move each every 9s: the arrows turn half a turn (the glyph
   is point-symmetric, so the restart is invisible), the pin hops onto its shadow, the bars dip
   and grow back. Each move fills the first fifth of the cycle; the rest is still. */
@media (prefers-reduced-motion: no-preference) {
  .why__grid.is-in .why__glyph--loop {
    animation: ben-loop 9s var(--ease-out) 0.6s infinite;
  }
  .why__grid.is-in .why__pin {
    animation: ben-pin 9s 3.6s infinite;
  }
  .why__grid.is-in .why__bar {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: ben-bar 9s 6.6s infinite;
  }
  .why__grid.is-in .why__bar:nth-child(3) { animation-delay: 6.7s; }
  .why__grid.is-in .why__bar:nth-child(4) { animation-delay: 6.8s; }
}
@keyframes ben-loop {
  0% { rotate: 0deg; }
  16%, 100% { rotate: 180deg; }
}
@keyframes ben-pin {
  0% { translate: 0 0; animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  7% { translate: 0 -5px; animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
  14%, 100% { translate: 0 0; }
}
@keyframes ben-bar {
  0% { transform: none; animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
  6% { transform: scaleY(0.3); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  20%, 100% { transform: none; }
}
.why__item h3 {
  font-family: var(--font-display);
  font-size: var(--t-card);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.why__item p {
  max-width: 34ch;
  margin-top: 8px;
  font-size: var(--t-card-text);
  color: var(--ink-2);
  line-height: 1.5;
}
/* One column: full width, wrapped plainly (Safari's "pretty" wrap shortens the lines). */
@media (max-width: 599px) {
  .why__item p {
    max-width: none;
    text-wrap: wrap;
  }
}
@media (min-width: 1000px) {
  .why__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 600px) and (max-width: 999px) {
  .why__grid {
    max-width: 480px;
    margin-inline: auto;
  }
}
/* Phones only: a CTA between the hero and the simulator, which sit several screens apart there. */
.loj-ben__cta {
  display: none;
}
@media (max-width: 767px) {
  .loj-ben__cta {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 40px;
  }
}

/* WhatsApp floating button: out of the way while the hero or the final section, which carry
   the same link, are on screen, and while the cookie bar covers the corner. */
.wa-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: var(--white);
  box-shadow: var(--shadow-chip);
  transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out), scale 0.15s var(--ease-out), visibility 0.3s;
}
.wa-fab svg {
  width: 30px;
  height: 30px;
}
@media (hover: hover) {
  .wa-fab:hover {
    scale: 1.06;
  }
}
.wa-fab:active {
  scale: 0.95;
}
.wa-fab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.js .wa-fab:not(.is-shown) {
  visibility: hidden;
  opacity: 0;
  translate: 0 16px;
  pointer-events: none;
}
.cookiebar:not([hidden]) ~ .wa-fab {
  display: none;
}
@media (min-width: 1100px) {
  .wa-fab {
    right: 32px;
    bottom: 32px;
    width: 60px;
    height: 60px;
  }
}

/* ---------- Pix ---------- */

/* The punchline: a short setup line, then the claim as big as the column allows, all blue.
   Three tags float over the words' ragged edges, each drifting on its own slow path; one at
   a time flips to another "sem" (selos-pix.js). Under 1100px the tags sit in a row below. */
/* The benefits box fades out into the page, so its section adds no bottom padding: the gap
   from its last line to the punchline is set here, matched to the gap under the punchline. */
/* The relay below starts under the box (negative margin); on phones its still-invisible Rede
   head lands over the CTA and takes the tap, so this section stacks above it. */
.loj-ben {
  position: relative;
  z-index: 1;
  padding-bottom: 0;
}
.loj-pix {
  padding-block: round(clamp(72px, 7.8vw, 112px), 8px);
  /* The section above ends without its own band, so its bottom padding reads as part of this
     gap: add it here too or the space under the punchline looks shorter than the space over it. */
  padding-bottom: calc(var(--section) + round(clamp(72px, 9vw, 136px), 8px));
  overflow-x: clip;
}
.loj-pix__stage {
  position: relative;
  isolation: isolate;
  text-align: center;
}
.loj-pix__title {
  position: relative;
  z-index: 1;
  max-width: 14.2em;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-statement);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
/* Styled as the page's eyebrow, but kept inside the h2 so the claim reads as one sentence. */
.loj-pix__setup {
  display: block;
  margin-bottom: 16px;
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.loj-pix__punch {
  color: var(--ink);
}
.loj-pix__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: round(clamp(32px, 3.4vw, 40px), 8px) 0 0;
  padding: 0;
  list-style: none;
}
.loj-pix__tags li {
  perspective: 600px;
}
/* A pale blue fill sets the tag apart from the white page without the shadow white tags needed. */
.loj-pix__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 12px 12px;
  border-radius: 999px;
  background: var(--mist-4);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.loj-pix__tag .icon {
  width: 1.25em;
  height: 1.25em;
  color: var(--blue);
}
@media (min-width: 1100px) {
  .loj-pix__tags {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    pointer-events: none;
  }
  /* The reveal leaves a translate on the list, which makes it one layer and keeps every tag
     under the title: without it each tag stacks on its own, in front of or behind the words. */
  .js .loj-pix__tags.is-in {
    translate: none;
  }
  .loj-pix__tags li {
    position: absolute;
  }
  /* Each tag touches a line's ragged edge and is anchored on the side away from the words, so a
     longer label from the flip grows outward instead of over the title. */
  .loj-pix__tags li:nth-child(1) {
    right: 79%;
    top: 29%;
    z-index: 2;
    rotate: -5deg;
  }
  /* Behind the words: smaller and a touch soft, so the title reads as the nearer layer. */
  .loj-pix__tags li:nth-child(2) {
    left: 78%;
    top: 25%;
    z-index: 0;
    rotate: 4deg;
    scale: 0.92;
    filter: blur(0.6px);
  }
  .loj-pix__tags li:nth-child(3) {
    left: 49%;
    top: calc(100% - 18px);
    z-index: 2;
    rotate: -2deg;
  }
  .loj-pix__tag {
    padding: 12px 16px 12px 16px;
    font-size: 1rem;
  }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .loj-pix__tags li:nth-child(1) { animation: pix-drift-a 11s ease-in-out infinite alternate; }
  .loj-pix__tags li:nth-child(2) { animation: pix-drift-b 13s ease-in-out infinite alternate; }
  .loj-pix__tags li:nth-child(3) { animation: pix-drift-c 9.5s ease-in-out infinite alternate; }
}
@keyframes pix-drift-a {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-18px, -12px); }
  100% { transform: translate(8px, 6px); }
}
@keyframes pix-drift-b {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-14px, 8px); }
  100% { transform: translate(10px, -8px); }
}
@keyframes pix-drift-c {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-18px, 10px); }
  100% { transform: translate(14px, 4px); }
}

/* ---------- Pix to Como funciona: the handover ---------- */

/* how-story.js adds .is-relay, moves the Rede and Como funciona heads into the stage and plays --p (0 to 1)
   scene by scene while the stage holds still; every piece reads its own window of --p from --a (start) and --d. */
/* The stage centers the punchline in a full screen, which left half a screen of white under the
   benefits box: the relay starts under the box instead, and stays clear until its mist fades in. */
/* The stage holds for 160svh, but never past 1440px: on a tall screen the same scenes would
   otherwise take more wheel turns. */
.relay.is-relay {
  height: calc(100svh + min(160svh, 1440px));
  margin-top: -22svh;
}
/* On phones the punchline sat about 100px under the last benefit, which read as cramped. */
@media (max-width: 599px) {
  .relay.is-relay {
    margin-top: calc(-22svh + 40px);
  }
}
.is-relay .relay__stage {
  --bg: clamp(0, (var(--p, 0) - 0.156) / 0.13, 1);
  position: sticky;
  top: 0;
  display: grid;
  align-items: center;
  height: 100svh;
  overflow: clip;
  background: color-mix(in srgb, var(--mist-1) calc(var(--bg) * 100%), transparent);
}
.is-relay .relay__stage > * {
  grid-area: 1 / 1;
}
.is-relay .loj-pix {
  padding-block: 0;
}
.relay__next .section__head {
  margin-inline: auto;
  text-align: center;
}
/* The head takes over at the punchline's size, so one line reads as turning into the next. */
.relay__next h2 {
  font-size: var(--t-statement);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.relay__next .lede {
  margin-inline: auto;
}
.relay__w {
  display: inline-block;
}
.relay__out,
.relay__in {
  --t: clamp(0, (var(--p, 0) - var(--a)) / var(--d), 1);
}
.relay__out {
  opacity: calc(1 - var(--t));
  translate: 0 calc(var(--t) * -0.4em);
  filter: blur(calc(var(--t) * 8px));
}
.relay__in {
  opacity: var(--t);
  translate: 0 calc((1 - var(--t)) * 0.5em);
  filter: blur(calc((1 - var(--t)) * 8px));
}
/* Played back (scrolling up), the words fade where they stand: each drifting off its line in
   turn read as the title breaking into other lines. */
.is-rewind .relay__out,
.is-rewind .relay__in {
  translate: none;
}
/* The tags carry their own drift and flip; they just leave first, without the blur. The
   chain outranks the stagger reveal, which would otherwise hold them at full opacity. */
.is-relay .loj-pix__tags.is-in > li.relay__out {
  opacity: calc(1 - var(--t));
  filter: none;
  translate: 0 calc(var(--t) * -40px);
}
/* The Rede section's head and web live in the stage, so the section itself takes no room, and
   the first Portal block rises into the stage's empty lower half while the Portal head holds. */
.relay.is-relay + .rede {
  display: none;
}
.relay.is-relay + .rede + .how {
  position: relative;
  margin-top: -30svh;
  padding-top: 0;
}
.relay.is-relay + .rede + .how .how__steps {
  margin-top: 0;
}
/* The section fades back to white under the simulator, so it meets the white numbers section
   without an edge (the relay above fades it in from white the same way). */
.how.section--mist-1 {
  background: linear-gradient(var(--mist-1) calc(100% - 110svh), var(--white) calc(100% - 15svh));
}

/* ---------- Rede: people around the merchant's store, one mesh of lines ---------- */

/* Nodes sit at % positions of the web's box (--x/--y; phones have their own web); how-story.js
   draws the lines between them in pixels and floats the people. Without the relay (no JS,
   reduced motion) the section is a screen tall and the web just sits there. */
.rede {
  position: relative;
  min-height: 100svh;
  padding-top: max(128px, 14svh);
  overflow: clip;
}
.rede > .wrap {
  position: relative;
}
.is-relay .relay__stage > .relay__next--top {
  align-self: start;
  padding-top: max(128px, 14svh);
}
.rede .section__head h2 {
  font-size: var(--t-statement);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.rede__web {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* The mesh fades toward the screen's edges, as in the reference. */
.rede__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  mask-image: radial-gradient(ellipse 72% 78% at 50% 64%, #000 54%, rgb(0 0 0 / 0.08) 86%);
}
.rede__lines line {
  stroke: var(--blue);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.1;
}
/* A light runs from the web's far edge to the store; --dash and --dur keep every path at the
   same dash size and speed whatever its length. */
.rede__lines .rede__flow {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--dash) calc(1 - var(--dash));
  stroke-dashoffset: 0;
  opacity: 0.45;
}
.rede__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  transform: translate(-50%, -50%);
}
.rede__node--person > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--white);
  box-shadow: 0 0 0 1.5px var(--mist-2), 0 15px 42px rgb(0 40 160 / 0.08);
}
.rede__node--dot {
  border-radius: 50%;
  background: #e5ebff;
}
/* how-story.js leaves out the faces a short screen has no room for, with their lines. */
.rede__node.is-off,
.rede__lines .is-off {
  display: none;
}
/* The store is the benefits icon at hub size: white disc, two-tone glyph, one small move. */
.rede__node--you {
  z-index: 1;
}
.rede__tile {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 10px rgb(255 255 255 / 0.6), 0 0 0 11px #e9eeff, 0 26px 48px -18px rgb(0 51 235 / 0.32);
  color: var(--blue);
}
.rede__glyph {
  overflow: visible;
  width: 46%;
  height: auto;
}
.rede__coin {
  opacity: 0;
}
/* Every 9s, like the benefits icons: a Coin drops onto the awning, which gives under it and
   springs back. The move fills the first fifth of the cycle; the rest is still. */
@media (prefers-reduced-motion: no-preference) {
  .rede__coin {
    animation: rede-coin 9s 1.2s infinite;
  }
  .rede__awning {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: rede-awning 9s 1.2s infinite;
  }
}
@keyframes rede-coin {
  0% { opacity: 0; translate: 0 -4px; animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
  3% { opacity: 1; }
  9% { opacity: 1; translate: 0 6px; }
  11%, 100% { opacity: 0; translate: 0 6.5px; }
}
@keyframes rede-awning {
  0%, 9% { scale: 1; animation-timing-function: cubic-bezier(0.32, 0, 0.67, 0); }
  11% { scale: 1.04 0.86; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  20%, 100% { scale: 1; }
}
.rede__label {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  translate: -50% 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 6px 14px -6px rgb(0 51 235 / 0.25);
  color: var(--ink);
  font: 600 14px/1.3 var(--font-text);
  white-space: nowrap;
}
/* Phones get their own web, drawn for a portrait screen (the wide one squeezed cuts faces at
   the edges and leaves a gap under the head). */
.rede__web--phone {
  display: none;
}
@media (max-width: 639px) {
  .rede__web--wide {
    display: none;
  }
  .rede__web--phone {
    display: block;
  }
  .rede__tile {
    box-shadow: 0 0 0 6px rgb(255 255 255 / 0.6), 0 0 0 7px #e9eeff, 0 18px 32px -14px rgb(0 51 235 / 0.32);
  }
  .rede__label {
    top: calc(100% + 16px);
    padding: 4px 10px;
    font-size: 12px;
  }
  .rede__lines {
    mask-image: radial-gradient(ellipse 85% 62% at 50% 70%, #000 55%, rgb(0 0 0 / 0.08) 92%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .rede__flow {
    animation: rede-flow var(--dur) cubic-bezier(0.45, 0, 0.55, 1) calc(var(--f) * -1.3s) infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rede__flow {
    display: none;
  }
}
@keyframes rede-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1; }
}

/* In the stage the web grows out of the store, one ring of hops at a time (--r of --rings):
   the store first, then each line draws outward and its node rises from closer to the store.
   It leaves by fading in place with the Rede head. Every window is eased (smoothstep), so
   nothing starts or stops at full speed. --cx/--cy (set by how-story.js) point at the store. */
.is-relay .rede__node {
  --ti: clamp(0, (var(--p, 0) - 0.27 - var(--r) / var(--rings) * 0.15) / 0.1, 1);
  --ei: calc(var(--ti) * var(--ti) * (3 - 2 * var(--ti)));
  --k: calc((1 - var(--ei)) * 0.22);
  opacity: var(--ei);
  scale: calc(0.8 + 0.2 * var(--ei));
  translate: calc(var(--cx, 0px) * var(--k)) calc(var(--cy, 0px) * var(--k));
}
.is-relay .rede__lines line:not(.rede__flow) {
  --tl: clamp(0, (var(--p, 0) - 0.285 - (var(--r) - 1) / var(--rings) * 0.15) / 0.09, 1);
  stroke-dasharray: 1 1;
  stroke-dashoffset: calc(1 - var(--tl) * var(--tl) * (3 - 2 * var(--tl)));
}
.is-relay .rede__lines .rede__flow {
  opacity: calc(0.45 * clamp(0, (var(--p, 0) - 0.5) / 0.06, 1));
}
.is-relay .rede__web {
  --tf: clamp(0, (var(--p, 0) - 0.62) / 0.09, 1);
  opacity: calc(1 - var(--tf) * var(--tf) * (3 - 2 * var(--tf)));
}
.is-relay .relay__stage > .relay__next {
  position: relative;
}

/* ---------- Como funciona: three Portal cards, then the simulator ---------- */

/* Default (phones, tablets, no JS, reduced motion): a list, text over each card. From 1024px
   with room to spare each card holds the center of the screen with its text beside it, and the
   next card slides up over it; the simulator is the last card. */
.how__steps {
  display: grid;
  gap: round(clamp(48px, 7vw, 72px), 8px);
  margin: round(clamp(40px, 4.6vw, 64px), 8px) 0 0;
  padding: 0;
  list-style: none;
}
.how__step {
  display: grid;
  gap: 24px;
}
.how__n {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--blue);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--white);
}
.how__text h3 {
  font-family: var(--font-display);
  font-size: var(--t-card);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.how__text p:not(.eyebrow) {
  max-width: 26em;
  margin-top: 12px;
  font-size: var(--t-card-text);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
/* One column: the step number sits left of its title. Aligned by baseline, not center: the
   title's line box differs between Safari and Chrome, and the digit lands on the x-height center.
   Safari's "pretty" wrap shortens the lines, so the text wraps plainly to the full width. */
@media (max-width: 899px) {
  .how__step:has(.how__n) .how__text {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
    align-items: baseline;
  }
  .how__text p:not(.eyebrow) {
    max-width: none;
    text-wrap: wrap;
  }
  .how__text .how__n {
    margin-bottom: 0;
  }
  .how__text .how__n ~ :not(h3) {
    grid-column: 1 / -1;
  }
  /* The simulator opens a new block: twice the gap between steps, and a centered head. */
  .how__step--sim {
    margin-top: round(clamp(48px, 7vw, 72px), 8px);
  }
  .how__step--sim .how__text {
    text-align: center;
  }
}
.how__step--sim .how__text h3 {
  font-size: var(--t-section);
  font-weight: 600;
  letter-spacing: -0.028em;
}
.how__step--sim .how__text p:not(.eyebrow) {
  margin-top: 16px;
  font-size: var(--t-lede);
  line-height: 1.5;
}

/* Each card has its own flat field, from the readout colors used across the page. */
.how__card {
  --field: var(--blue);
  position: relative;
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: round(clamp(24px, 4vw, 48px), 8px) round(clamp(12px, 4vw, 48px), 8px);
  border-radius: calc(var(--radius-tile) * 1.25);
  background: var(--field);
  box-shadow: var(--shadow-tile);
}
.how__step--back .how__card {
  --field: var(--sky);
}
.how__step--learn .how__card {
  --field: var(--navy);
}
/* The simulator draws its own sheet and answer card. */
.how__card--sim {
  display: block;
  min-height: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.how__card--sim .sim__sheet {
  margin-top: 0;
}
@media (min-width: 768px) {
  .how__card:not(.how__card--sim) {
    min-height: 480px;
  }
}

/* The Portal: a made-up merchant screen built from the page's own type and colors. */
.portal {
  width: min(100%, 400px);
  overflow: hidden;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--night) 45%, transparent), 0 8px 18px -8px color-mix(in srgb, var(--night) 20%, transparent);
  font-size: 0.875rem;
  color: var(--ink);
}
.portal__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--mist-2);
}
.portal__logo {
  flex: none;
  width: 54px;
  height: 13px;
  color: var(--ink);
}
.portal__store,
.portal__page {
  min-width: 0;
  overflow: hidden;
  font-size: 0.8125rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.portal__store {
  padding-left: 12px;
  border-left: 1px solid var(--line);
  color: var(--ink-subtle);
}
.portal__page {
  font-weight: 600;
}
.portal__page::before {
  content: "/";
  margin-right: 8px;
  font-weight: 400;
  color: var(--ink-subtle);
}
/* Too narrow for the store and the page side by side: the page alone tells the step. */
@media (max-width: 439px) {
  .portal__store {
    display: none;
  }
  .portal__page {
    padding-left: 12px;
    border-left: 1px solid var(--line);
  }
  .portal__page::before {
    content: none;
  }
}
.portal__body {
  display: grid;
  gap: 12px;
  padding: 16px;
}
.portal__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-subtle);
}
.portal__label--list {
  margin-top: 4px;
}
.portal__big {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.portal__rate {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  background: var(--mist-3);
}
.portal__rate--status {
  display: flex;
  background: var(--mist-3);
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.portal__rate-value {
  display: grid;
  gap: 8px;
}
.portal__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--positive-subtle);
  border-radius: 999px;
  background: var(--positive-subtle);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
}
.portal__live i {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--positive);
}
.portal__live i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .portal__live i::after { animation: none; }
}
.portal__shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.portal__reward {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  padding: 8px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.portal__photo {
  display: block;
  margin-bottom: 4px;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 10px;
}
.portal__reward-name {
  padding: 0 4px;
  font-size: clamp(0.75rem, 3vw, 0.8125rem);
  line-height: 1.2;
}
.portal__reward .portal__coins {
  margin: 0;
  font-weight: 500;
  color: var(--ink-2);
  padding: 0 4px;
}
.portal__name {
  display: grid;
  gap: 2px;
  font-weight: 600;
  line-height: 1.25;
}
.portal__name small {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-2);
}
img.portal__avatar {
  object-fit: cover;
}
.portal__coins,
.portal__spend {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--blue-ink);
}
.portal__spend {
  color: var(--negative);
}
.portal__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mist-4);
  color: var(--blue-ink);
}
.portal__who,
.portal__redeemed {
  display: flex;
  align-items: center;
  gap: 12px;
}
.portal__done {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 4px 12px 4px 8px;
  border: 1px solid var(--positive-subtle);
  border-radius: 999px;
  background: var(--positive-subtle);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ink);
}
.portal__done .icon {
  width: 16px;
  height: 16px;
  color: var(--positive);
}
.portal__redeemed {
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.portal__redeemed-photo {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: cover;
}
.portal__loyal {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 8px;
}
.portal__kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.portal__kpi {
  display: grid;
  align-content: space-between;
  gap: 8px;
  padding: 12px;
  border-radius: 14px;
  background: var(--mist-3);
}
.portal__kpi .portal__big {
  font-size: 1.625rem;
}
.portal__chart {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.portal__bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 84px;
}
.portal__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 3px 3px;
  background: var(--sky);
  transform-origin: bottom;
}
.portal__bars i:last-child {
  background: var(--blue);
}
.portal__rank {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.portal__rank-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.portal__rank-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
}
.portal__rank-photo {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: cover;
}
.portal__rank-name {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.portal__rank-n {
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* The bar spans name and count; --w is the share of the most redeemed reward. */
.portal__rank-bar {
  grid-column: 2 / -1;
  width: var(--w);
  height: 6px;
  border-radius: 3px;
  background: var(--sky);
  transform-origin: left;
}
.portal__rank-row:first-child .portal__rank-bar {
  background: var(--blue);
}
.portal__rank-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mist-3);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-2);
}
/* On a short screen the pinned card 3 runs out of height, so it tightens to keep the list inside. */
@media (max-height: 760px) {
  .how__step--learn .portal__body,
  .how__step--learn .portal__chart,
  .portal__rank {
    gap: 8px;
  }
  .how__step--learn .portal__kpi {
    padding: 8px 12px;
  }
  .how__step--learn .portal__kpi .portal__big {
    font-size: 1.375rem;
  }
  .how__step--learn .portal__bars {
    height: 44px;
  }
  .portal__rank-list {
    gap: 6px;
  }
  .portal__rank-row {
    row-gap: 4px;
  }
}

/* The story (how-story.js): while armed, every [data-at] piece waits hidden and shows at its
   delay once the card runs. Leaving drops the delays so the whole screen fades out together. */
.how__steps.is-armed [data-at] {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.35s ease-in, transform 0.35s ease-in;
}
.how__steps.is-armed .portal__bars i[data-at] {
  transform: scaleY(0.2);
}
.how__steps.is-armed .portal__rank-bar[data-at] {
  transform: scaleX(0.1);
}
.how__steps.is-armed .is-run [data-at] {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease-out, transform 0.7s var(--ease-out);
  transition-delay: calc(var(--at) * 1ms);
}
.how__steps.is-armed .is-run .portal__bars i[data-at],
.how__steps.is-armed .is-run .portal__rank-bar[data-at] {
  transform: none;
}

/* The stack. The deck cards share one sticky spot in the list's first row, text on the left and
   card on the right. how-story.js picks the card on top from the
   scroll (is-ahead on the ones still to come, --cover and --show) and the transitions play each
   change whole. The simulator is the list's second row. */
@media (min-width: 1024px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .js .how {
    --text-w: calc(clamp(220px, 21vw, 300px) + var(--big) / 16);
    --gap: clamp(24px, 3.4vw, 56px);
    --card-h: min(clamp(440px, 62svh, 600px) + var(--big) / 4, 64svh);
  }
  /* The first row is the scroll the cards stay stuck for: 38svh per card, the last one included,
     so it holds before the simulator arrives. Same as "O que é a Twism" (115svh for three). */
  .js .how__steps {
    position: relative;
    grid-template-rows: calc(70svh + 3 * 38svh) auto;
    gap: 0;
  }
  .js .how__step {
    position: sticky;
    top: 15svh;
    grid-area: 1 / 1;
    align-self: start;
    height: 70svh;
    margin: 0;
    place-items: center;
    gap: 0;
    transition: translate 0.9s var(--ease-out), opacity 0.6s var(--ease-out);
  }
  .js .how__steps.is-deck .how__step.is-ahead {
    translate: 0 60svh;
    opacity: 0;
    pointer-events: none;
  }
  .js .how__text {
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--text-w);
    translate: 0 -50%;
    opacity: var(--show, 1);
    transition: opacity 0.5s var(--ease-out);
  }
  /* The text holds the left edge and every card the right, so the eye stays put between cards. */
  .js .how__step:not(.how__step--sim) .how__card {
    justify-self: end;
    width: calc(100% - var(--text-w) - var(--gap));
    height: var(--card-h);
    min-height: 0;
  }
  /* A deck: each card settles a little lower than the one before, so the cards already passed
     stay behind it with their top edge showing. A covered card (--cover, how-story.js) shrinks
     and dims a touch, so it reads as further back. */
  .js .how__card {
    translate: 0 calc(var(--i, 0) * 18px - 36px);
    transform-origin: 50% 0;
    transform: scale(calc(1 - var(--cover, 0) * 0.05));
    transition: transform 0.6s var(--ease-out), scale 0.8s var(--ease-out);
  }
  .js .how__step:nth-child(2) { --i: 1; }
  .js .how__step:nth-child(3) { --i: 2; }
  .js .how__step:nth-child(4) { --i: 3; }
  .js .how__card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--night);
    opacity: calc(var(--cover, 0) * 0.2);
    pointer-events: none;
    transition: opacity 0.6s var(--ease-out);
  }
  .js .how .portal {
    width: min(100%, 420px);
    font-size: 0.9375rem;
  }
  /* The screen is drawn in px, so on wide screens it scales whole; zoom takes no length ratio. */
  @media (min-width: 2160px) {
    .js .how .portal {
      zoom: 1.12;
    }
  }
  @media (min-width: 2400px) {
    .js .how .portal {
      zoom: 1.24;
    }
  }

  /* The simulator keeps the other cards' width and center; only its height follows the form. */
  .js .how__card--sim {
    display: grid;
    height: auto;
    min-height: 0;
  }

  /* After the deck, the deck comes toward the reader and fades, and the calculator surfaces
     in the deck's place and grows. --leave (how-story.js) turns 1 near the end of the deck's hold;
     the simulator's row starts 70svh early, so it already sits under the deck then. */
  .js .how__steps::after {
    content: none;
  }
  .js .how__step:not(.how__step--sim) {
    opacity: clamp(0, 1 - var(--leave, 0) * 2.6, 1);
  }
  .js .how__step:not(.how__step--sim) .how__card {
    scale: calc(1 + var(--leave, 0) * 0.18);
  }
  /* Translucent cards show each other through: the cards under the last one go first, so only
     one card is fading at a time. The simulator is not a deck card, so it never dims the last. */
  .js .how__step:not(.how__step--learn, .how__step--sim) {
    opacity: clamp(0, 1 - var(--leave, 0) * 12, 1);
  }
  .js .how__step--learn .how__card::after {
    content: none;
  }
  .js .how__step--sim {
    position: relative;
    top: auto;
    z-index: 1;
    height: auto;
    min-height: 100svh;
    grid-area: 2 / 1;
    margin: -70svh 0 0;
    padding: round(10svh, 8px) 0 0;
    align-content: center;
    justify-items: center;
    gap: 32px;
    translate: 0 calc((1 - var(--leave, 1)) * 12svh);
    opacity: var(--leave, 1);
    scale: calc(0.9 + var(--leave, 1) * 0.1);
    transition: translate 1s var(--ease-out), opacity 0.8s var(--ease-out), scale 1s var(--ease-out);
  }
  .js .how__steps.is-deck:not(.is-leave) .how__step--sim {
    pointer-events: none;
  }
  .js .how__step--sim .how__text {
    position: static;
    width: auto;
    max-width: 48rem;
    text-align: center;
    opacity: 1;
    translate: none;
  }
  .js .how__step--sim .how__text p:not(.eyebrow) {
    max-width: 34em;
    margin-inline: auto;
  }
  .js .how__card--sim {
    width: 100%;
    translate: none;
    transform: none;
  }
  .js .how__card--sim::after {
    content: none;
  }



}


/* Under 440px the mock keeps two rewards; the status pill drops under the rate. */
@media (max-width: 439px) {
  .portal__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .portal__rate--status {
    flex-wrap: wrap;
  }
  .portal__shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .portal__reward:nth-child(3) {
    display: none;
  }
  .portal__redeemed .portal__name {
    flex: 1;
    min-width: 0;
  }
  .portal__redeemed-photo {
    width: 40px;
    height: 40px;
  }
}

/* ---------- A rede Twism: numbers and the globe ---------- */

.loj-nums__grid {
  display: grid;
  gap: round(clamp(32px, 5vw, 72px), 8px);
  align-items: center;
}
.loj-nums__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: round(clamp(32px, 3vw, 48px), 8px) round(clamp(24px, 3vw, 48px), 8px);
  max-width: 30rem;
  margin: round(clamp(40px, 4.4vw, 64px), 8px) 0 0;
  padding: 0;
  list-style: none;
}
.loj-nums__list li {
  display: grid;
  gap: 8px;
}
.loj-nums__list b {
  font-family: var(--font-display);
  font-size: round(clamp(32px, 3vw, 40px), 4px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.loj-nums__list span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* The globe is larger than its column and the section cuts it off at the edges.
   globe.js draws the dots in this color. */
.loj-nums {
  position: relative;
  overflow: hidden;
}
@media (min-width: 900px) {
  .loj-nums {
    padding-block: round(calc(var(--section) * 1.4), 8px) round(calc(var(--section) * 1.8), 8px);
  }
  .loj-nums__grid {
    min-height: clamp(480px, 40vw, 600px);
  }
}
.loj-nums__copy {
  position: relative;
  z-index: 1;
}
/* The next section is white too, so the globe fades out before the edge cuts it. */
.loj-nums::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: clamp(120px, 14vw, 220px);
  background: linear-gradient(transparent, var(--white));
  pointer-events: none;
}
/* Under the cut globe the next section starts right away: a short fade, or it reads as a gap. */
@media (max-width: 899px) {
  .loj-nums::after {
    height: 56px;
  }
}
.loj-nums__globe {
  aspect-ratio: 1;
  width: min(130vw, 640px);
  margin: 8px 0 calc(-1 * var(--section) - 52%) calc((100% - min(130vw, 640px)) / 2);
  justify-self: start;
  display: grid;
  color: var(--blue);
}
.loj-nums__canvas {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
}
@media (min-width: 900px) {
  .loj-nums__globe {
    position: absolute;
    top: 62%;
    left: 75%;
    width: clamp(680px, 62vw, 980px);
    margin: 0;
    translate: -50% -50%;
  }
}
@media (min-width: 900px) {
  .loj-nums__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}

.loj-nums__list b {
  font-weight: 500;
}

/* Each number holds its half of the row: "+R$ 500 mi" sets the size, about 5.2em wide. */
@media (max-width: 599px) {
  .loj-nums__list b {
    font-size: round(down, clamp(24px, calc(9.6vw - 6px), 32px), 4px);
  }
}
/* One column: the copy and the numbers centered over the globe. */
@media (max-width: 899px) {
  .loj-nums__copy {
    text-align: center;
  }
  .loj-nums__list {
    margin-inline: auto;
  }
  .loj-nums__list li {
    justify-items: center;
  }
  /* The figure, not the light "+" (0.46em wide), centers over the label; the label drops the
     letter-spacing its last letter carries on the right. */
  .loj-nums__list b {
    translate: -0.23em 0;
  }
  .loj-nums__list span {
    margin-right: -0.14em;
  }
}

/* ---------- Simulador ---------- */

/* Phones: the two questions, then the answer on a blue card. From 768px they share one ruled
   box, one question under the other, whose foot is the blue answer band. */
.how__step--sim .eyebrow {
  color: var(--ink-2);
  letter-spacing: 0.18em;
}
.sim__sheet {
  display: grid;
  gap: 32px;
  width: 100%;
  max-width: 1072px;
  margin-inline: auto;
}
.sim__inputs {
  display: grid;
  gap: 32px;
}
.sim__field {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
/* A fieldset lays its legend out apart from its grid, so the legend keeps its own margin. */
.sim__field legend {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
  padding: 0;
}
.sim__step {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}
.sim__label {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
/* Phones keep only the question: the 2b phone frame drops the hints. */
.sim__hint {
  display: none;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-2);
}

/* The % as fixed steps and the rewards as horizontal cards (photo beside the text), both radios
   drawn as tiles. Phones stack the cards: three across leaves no room for the text. */
.sim__chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.sim__reward-list {
  display: grid;
  gap: 8px;
}
.sim__chip,
.sim__reward {
  position: relative;
  min-width: 0;
  cursor: pointer;
}
.sim__chip input,
.sim__reward input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.sim__chip span,
.sim__reward span {
  border: 2px solid var(--neutral-subtle);
  border-radius: 12px;
  background: var(--neutral-subtle);
  transition: background-color 0.18s var(--ease-out), border-color 0.18s var(--ease-out), color 0.18s, scale 0.12s var(--ease-out);
}
.sim__chip span {
  display: grid;
  place-items: center;
  height: 52px;
  font: 600 1.125rem / 1 var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.sim__reward span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  column-gap: 12px;
  row-gap: 1px;
  height: 100%;
  padding: 4px 12px 4px 4px;
}
.sim__reward img {
  grid-row: span 2;
  width: 56px;
  aspect-ratio: 1;
  border-radius: 8px;
  object-fit: cover;
}
.sim__reward b {
  align-self: end;
  text-wrap: balance;
}
.sim__reward small {
  align-self: start;
  white-space: nowrap;
}
.sim__reward b {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.sim__reward small {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 0.18s;
}

/* One set of states for both pickers: hover rings the tile in sky, press gives a little, the
   picked one turns light blue with a blue edge, and keyboard focus rings it off the edge. */
@media (hover: hover) {
  .sim__chip:hover input:not(:checked) + span,
  .sim__reward:hover input:not(:checked) + span {
    border-color: var(--sky);
  }
}
.sim__chip:active span,
.sim__reward:active span {
  scale: 0.97;
}
.sim__chip input:checked + span,
.sim__reward input:checked + span {
  border-color: var(--blue);
  background: var(--mist-3);
  color: var(--blue);
}
.sim__reward input:checked + span small {
  color: var(--blue);
}
.sim__chip input:focus-visible + span,
.sim__reward input:focus-visible + span {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* The answer: the spend in big figures on the blue field, the two picks as pills, the CTA. */
.sim__out {
  display: grid;
  gap: 16px;
  padding: 24px;
  border-radius: 16px;
  background: var(--blue);
  color: var(--white);
}
.sim__total {
  display: grid;
  gap: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}
.sim__total-label {
  text-wrap: pretty;
}
.sim__money {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.2vw, 5.5rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sim__foot {
  display: grid;
  gap: 16px;
}
.sim__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sim__pills li {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}
.btn--light.sim__cta {
  color: var(--blue);
}
.btn--light.sim__cta:hover {
  background: var(--mist-3);
}
.sim__cta:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* Under the sheet: the numbers are an illustration, not a promise. */
.sim__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  max-width: 1072px;
  margin: 24px auto 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--ink-2);
  text-wrap: pretty;
}
.sim__note .icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

/* Tablets and up: one ruled box, the questions on white with their hints, the answer band at
   its foot with the pills and the CTA on one line. */
@media (min-width: 768px) {
  .sim__sheet {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-tile);
    background: var(--white);
  }
  .sim__inputs {
    gap: 40px;
    padding: 40px;
  }
  .sim__field {
    gap: 16px;
  }
  .sim__field legend {
    gap: 4px;
    margin-bottom: 4px;
  }
  .sim__step {
    font-size: 0.875rem;
  }
  .sim__label {
    font-size: 1.125rem;
  }
  .sim__hint {
    display: block;
  }
  .sim__chips {
    gap: 8px;
  }
  .sim__reward-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .sim__chip span,
  .sim__reward span {
    border-radius: 16px;
  }
  .sim__chip span {
    height: 64px;
    font-size: 1.375rem;
  }
  .sim__reward span {
    column-gap: 14px;
    row-gap: 2px;
    padding: 6px 14px 6px 6px;
  }
  .sim__reward img {
    width: 72px;
    border-radius: 10px;
  }
  .sim__reward b {
    font-size: 0.875rem;
    letter-spacing: 0;
  }
  .sim__reward small {
    font-size: 0.8125rem;
  }
  .sim__out {
    gap: 32px;
    padding: 40px;
    border-radius: 0;
  }
  .sim__total {
    gap: 20px;
    font-size: 1.125rem;
  }
  .sim__lead {
    font-size: 1rem;
  }
  .sim__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
  .sim__pills {
    gap: 8px;
  }
  .sim__pills li {
    padding: 8px 16px;
    font-size: 0.875rem;
  }
  .sim__note {
    align-items: center;
    font-size: 0.8125rem;
  }
  .sim__note .icon {
    width: 18px;
    height: 18px;
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .sim__cta {
    width: 100%;
  }
}

/* ---------- Twism já roda nos Estados Unidos ---------- */

/* Supporting proof under the hero, so it stays quiet: no blue. Ruled above and below because
   the next section is white too. */
.loj-band {
  background: var(--white);
}
.loj-band {
  padding-top: round(clamp(32px, 3.4vw, 48px), 8px);
}
.loj-band__marquee {
  --logo: clamp(46px, 4vw, 60px);
  margin-top: round(clamp(8px, 1.1vw, 16px), 8px);
  border-top: 0;
}
/* Bare store logos instead of the app's coins. A wide wordmark shrinks in height by its aspect
   ratio (--r, set per image) so every logo carries about the same visual weight. */
.loj-band__marquee img {
  width: auto;
  height: min(var(--logo), calc(var(--logo) / pow(var(--r, 1), 0.45)));
  filter: none;
}
@media (max-width: 599px) {
  .loj-band__marquee {
    --logo: 54px;
  }
}
.loj-band .wrap {
  text-align: center;
}
.loj-band__lead {
  max-width: 52em;
  margin-inline: auto;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: balance;
}
.loj-band__lead b {
  font-weight: 600;
  color: var(--ink);
}
@media (min-width: 600px) {
  .loj-band__marquee {
    margin-top: 0;
    padding-top: 32px;
    padding-bottom: round(clamp(40px, 3.6vw, 56px), 8px);
  }
  .loj-band .marquee__group {
    gap: round(clamp(56px, 6vw, 96px), 8px);
    padding-right: round(clamp(56px, 6vw, 96px), 8px);
  }
}
.loj-what {
  padding-top: round(clamp(64px, 6.6vw, 104px), 8px);
}
@media (max-width: 599px) {
  .loj-band__marquee {
    padding-block: 16px 8px;
  }
}

/* ---------- FAQ ---------- */

/* "Fale conosco" will link to the Brazilian Help Center; until its URL exists it is text, not a
   link that goes nowhere. */
.loj-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.faq__aside h2 + p {
  margin-top: 24px;
}
.faq__aside .loj-help {
  margin-top: 24px;
}
.loj-help__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--blue);
}
.loj-help__link .icon {
  transition: translate 0.2s var(--ease-out);
}
.loj-help__link:hover .icon {
  translate: 4px 0;
}
.faq__answer {
  color: var(--ink-2);
}
/* One column: the answer runs the question's full width, up to the open/close button's edge. */
@media (max-width: 899px) {
  .faq__answer {
    max-width: none;
    padding-right: 0;
  }
}

.faq details:first-child {
  border-top: 0;
}
.faq details:last-child {
  border-bottom: 0;
}

/* Touch targets reach 44px; the negative margin keeps the spacing as drawn. */
@media (max-width: 767px) {
  .loj-help__link {
    padding-block: 10px;
    margin-block: -10px;
  }
}

/* ---------- Chamada final ---------- */

/* ---------- App: a blue card with the phone coming out of its top edge ---------- */

.loj-app__card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 48px;
  padding: round(clamp(56px, 7vw, 96px), 8px) round(clamp(24px, 4.6vw, 64px), 8px) 0;
  border-radius: clamp(28px, 3vw, 40px);
  /* Cuts the phone at the card's bottom edge and leaves it free above the top one. */
  clip-path: inset(-100vh 0 0 0 round 0 0 clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px));
  background:
    radial-gradient(100% 100% at 50% 0, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.1) 31%, rgb(0 0 0 / 0.1) 78%),
    linear-gradient(transparent, var(--blue) 90%),
    url("/assets/br/img/patterns/symbol-tile.svg") center top / 93.6px 93.6px,
    var(--blue);
  background-blend-mode: normal, normal, soft-light, normal;
  color: var(--white);
  text-align: center;
}
.loj-app__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.8);
}
.loj-app__card h2 {
  max-width: 11em;
  margin: 16px auto 0;
  font-size: var(--t-statement);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}
.loj-app__text {
  max-width: 32rem;
  margin: 16px auto 0;
  font-size: var(--t-lede);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.8);
}
.loj-app__get {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}
.loj-app__stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
/* Black with a thin grey rim, as both stores draw their badges. */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 172px;
  height: 52px;
  padding: 0 18px 0 14px;
  border: 1px solid #a6a6a6;
  border-radius: 12px;
  background: #000;
  color: #fff;
  text-align: start;
  text-decoration: none;
  transition: background-color 0.2s;
}
.store-badge:hover {
  background: #1f1f1f;
}
.store-badge:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
.store-badge svg {
  flex: none;
  width: 26px;
  height: 26px;
  fill: currentColor;
}
.store-badge span {
  display: grid;
  line-height: 1.1;
}
.store-badge small {
  font-size: 0.6875rem;
  font-weight: 500;
}
.store-badge b {
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.loj-app__phone {
  position: relative;
  width: 300px;
  aspect-ratio: 800 / 1633;
  margin-bottom: -160px;
}
.loj-app__shot {
  display: block;
  width: 100%;
  height: 100%;
}
/* Both shots share the Carteira's phone outline, so only the screen seems to change. */
.loj-app__shot--store {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.loj-app__phone.is-store .loj-app__shot--store {
  opacity: 1;
}
/* Over the Burger'licious row of the Carteira screen. */
.loj-app__tap {
  position: absolute;
  left: 30%;
  top: 41.6%;
  width: 13%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(0 10 47 / 0.22);
  box-shadow: 0 0 0 2px rgb(255 255 255 / 0.9);
  opacity: 0;
  translate: -50% -50%;
  pointer-events: none;
}
.loj-app__phone.is-tap .loj-app__tap {
  animation: app-tap 0.7s var(--ease-out);
}
@keyframes app-tap {
  0% { opacity: 0; scale: 1.5; }
  35% { opacity: 1; scale: 0.9; }
  100% { opacity: 0; scale: 1.1; }
}
/* On the blue card the badges are glass, as in Figma 3403:4; elsewhere they keep the stores' black. */
.loj-app .store-badge {
  border-color: rgb(255 255 255 / 0.28);
  background: rgb(255 255 255 / 0.12);
}
.loj-app .store-badge:hover {
  background: rgb(255 255 255 / 0.2);
}
/* QR code and store badges only on a computer. On a phone one button opens the app's smart link,
   which sends each system to its own store. */
.loj-app__qr,
.loj-app__stores {
  display: none;
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .loj-app__cta {
    display: none;
  }
  .loj-app__stores {
    display: flex;
  }
  .loj-app__qr {
    display: block;
    flex: none;
    width: 136px;
    height: 136px;
    padding: 10px;
    box-sizing: content-box;
    border-radius: 16px;
    background: var(--white);
  }
  .loj-app__stores {
    flex-direction: column;
  }
}
@media (min-width: 900px) {
  .loj-app {
    padding-top: 96px;
  }
  /* The phone's column runs from the copy to the card's edge, so centering it leaves the
     same space on both sides. */
  .loj-app__card {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    justify-items: start;
    gap: 0;
    padding: 0 0 0 round(clamp(48px, 7vw, 112px), 8px);
    text-align: start;
  }
  .loj-app__media {
    position: relative;
    align-self: stretch;
    justify-self: stretch;
  }
  .loj-app__copy {
    padding-block: 88px;
  }
  .loj-app__card h2,
  .loj-app__text {
    margin-inline: 0;
  }
  .loj-app__card h2 {
    max-width: 13em;
    font-size: var(--t-section);
  }
  .loj-app__get {
    justify-content: start;
  }
  /* Taller than the card: it starts above the top edge and ends past the bottom one. */
  .loj-app__phone {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    bottom: -64px;
    width: auto;
    height: calc(100% + 160px);
    margin: 0;
  }
}
@media (max-width: 479px) {
  .loj-app__stores,
  .store-badge {
    width: 100%;
  }
  .store-badge {
    justify-content: center;
  }
  .loj-app__card {
    padding-inline: 32px;
  }
}

/* Figma 3426:1139 (desktop), 3426:1160 (tablet), 3433:1139 (phone): a card like the app one.
   Desktop: photo behind the copy, copy on the left. Tablet: photo fills the card, copy centered
   on top under a navy gradient. Phone: same, but the photo sits in a box at the bottom, since a
   card that narrow would put faces under the copy. */
.loj-final {
  padding-block: round(clamp(48px, 7vw, 96px), 8px);
  background: var(--white);
}
.loj-final__card {
  --pad: round(clamp(24px, 6vw, 48px), 8px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: calc(var(--pad) + 8px) var(--pad) 0;
  border-radius: clamp(28px, 3vw, 40px);
  background: var(--night);
  color: var(--white);
  text-align: center;
}
.loj-final__media {
  order: 1;
  position: relative;
  z-index: -1;
  display: block;
  width: calc(100% + var(--pad) * 2);
  /* Runs the photo's bare top (wall and ceiling) up behind the bridge line; 40px undoes the gap. */
  margin: calc(-0.567 * (100% + var(--pad) * 2) - 40px) calc(var(--pad) * -1) 0;
}
.loj-final__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--night), rgb(0 10 47 / 0.4) 30%, rgb(0 10 47 / 0) 50%);
}
.loj-final__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 353 / 520;
  object-fit: cover;
  object-position: 55% bottom;
}
.loj-final__card h2 {
  max-width: 11em;
  margin-inline: auto;
  font-weight: 500;
  font-size: var(--t-statement);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--white);
  text-wrap: balance;
}
.loj-final__text {
  max-width: 340px;
  margin: 12px auto 0;
  color: var(--white);
}
.loj-final__actions {
  display: grid;
  justify-items: center;
  gap: 24px;
}
.loj-final__actions .btn {
  min-height: 54px;
  padding-inline: 32px;
  font-size: 0.875rem;
}
/* Phones: the button sits at the foot of the card, over the photo. Out of the flow, so the photo
   takes back most of its 54px, ending 32px higher than with the button in the flow. */
@media (max-width: 599px) {
  .loj-final__media {
    margin-top: calc(-0.567 * (100% + var(--pad) * 2) + 22px);
  }
  .loj-final__card .loj-final__actions {
    position: absolute;
    inset: auto var(--pad) var(--pad);
    width: auto;
  }
}
/* The tablet card keeps the Figma proportion; min-height keeps faces below the copy when narrow. */
@media (min-width: 600px) and (max-width: 1023px) {
  .loj-final__actions {
    margin-top: auto;
  }
  .loj-final__card {
    max-width: 704px;
    min-height: 880px;
    margin-inline: auto;
    aspect-ratio: 704 / 951;
    padding-bottom: var(--pad);
  }
  .loj-final__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(rgb(0 10 47 / 0.6) 276px, rgb(0 10 47 / 0.4) 361px, rgb(0 10 47 / 0) 456px);
  }
  .loj-final__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: auto;
    margin: 0;
  }
  .loj-final__media::after {
    content: none;
  }
  .loj-final__photo {
    height: 100%;
    aspect-ratio: auto;
    object-position: center;
  }
}
@media (min-width: 1024px) {
  .loj-final__card {
    align-items: flex-start;
    justify-content: center;
    min-height: round(clamp(480px, 40vw, 568px), 8px);
    padding: 64px round(clamp(56px, 7.2vw, 104px), 8px);
    text-align: start;
  }
  .loj-final__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to right, rgb(0 10 47 / 0.7), rgb(0 10 47 / 0.4) 38%, rgb(0 10 47 / 0) 62%);
  }
  .loj-final__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: auto;
    margin: 0;
  }
  .loj-final__media::after {
    content: none;
  }
  .loj-final__photo {
    height: 100%;
    aspect-ratio: auto;
    object-position: center;
  }
  .loj-final__card > div:not(.loj-final__actions) {
    max-width: 460px;
  }
  .loj-final__card h2 {
    margin-inline: 0;
    font-size: min(var(--t-statement), 56px);
  }
  .loj-final__text {
    max-width: none;
    margin-inline: 0;
  }
  .loj-final__actions {
    justify-items: start;
  }
}
@media (max-width: 479px) {
  .loj-final__actions,
  .loj-final__actions .btn {
    justify-items: stretch;
    width: 100%;
  }
}
/* The line under the title keeps two lines on small and medium phones. */
@media (max-width: 413px) {
  .loj-final__card .loj-final__text {
    font-size: 14px;
  }
  .loj-final__actions .btn {
    padding-inline: 24px;
    white-space: normal;
  }
}

/* ---------- Footer ---------- */

.footer__legal,
.footer__social {
  align-items: center;
}
.footer__main .footer__social {
  margin-top: 24px;
}
.footer__cols h2 {
  font-size: 1rem;
  color: var(--white);
}
.footer__cols ul {
  gap: 0;
}
.footer__cols a {
  font-size: 1rem;
  color: rgb(255 255 255 / 0.7);
}
.footer__cols a:hover {
  color: var(--white);
}
/* One column: the social buttons sit right of the logo, and the line under them takes the full
   width (beside the buttons it wraps to three lines); the legal line centered. */
@media (max-width: 899px) {
  .footer__main > :first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: center;
  }
  .footer__main .footer__social {
    grid-area: 1 / 2;
    margin-top: 0;
  }
  .footer__tag {
    grid-column: 1 / -1;
  }
  .footer__base,
  .footer__legal {
    justify-content: center;
  }
  .footer__base {
    text-align: center;
  }
}
.footer__base,
.footer__legal a {
  color: var(--white);
}

/* ---------- Type scale ---------- */

/* Smaller than the US page: the team read it at the US sizes as zoomed in. Clash Display is for
   headings and figures (big ones, and the simulator's numbers); other text is Inter. Roles:
   statement (Pix, final call), section head (.display-2), card title, lede, body, card text. */
/* --big runs 0 to 640px between 1920px and 2560px wide (a 4K screen at 150%): past Full HD the
   column and the type keep growing, or the page reads as a narrow strip on a wide screen. */
:root {
  --big: clamp(0px, 100vw - 1920px, 640px);
  --section: round(clamp(48px, 6vw, 88px), 8px);
  --gutter: round(clamp(16px, 4vw, 48px), 8px);
  --t-statement: round(clamp(44px, 5.6vw, 76px) + var(--big) / 64, 4px);
  --t-section: round(clamp(28px, 3vw, 40px) + var(--big) / 80, 4px);
  --t-card: round(20px + var(--big) / 160, 2px);
  --t-lede: round(16px + var(--big) / 320, 1px);
  --t-card-text: round(16px + var(--big) / 320, 1px);
}
.wrap {
  width: min(100% - 2 * var(--gutter), 1240px + var(--big) * 0.3125);
}
/* Phones from 375px get a 24px side margin; under 375px the fluid value above gives 16px. */
@media (min-width: 375px) and (max-width: 599px) {
  :root {
    --gutter: 24px;
  }
}
/* Phones: the statements share the final call's size, which keeps "Incentive seu cliente a
   voltar." on two lines in its card and never grows as the screen narrows. */
@media (max-width: 479px) {
  :root {
    --t-statement: round(clamp(36px, 9.4vw, 40px), 4px);
  }
}
/* One column: section heads reach 32px only from about 440px; below that, with the 24px
   phone gutter, 32px adds a line to two of them. */
@media (max-width: 899px) {
  :root {
    --t-section: round(clamp(28px, 6.8vw, 32px), 4px);
  }
  /* The simulator's question is longer: at 32px it takes a third line at 430px. Never below
     28px, the other section titles' size: smaller, its semibold reads poorly on phones. */
  .how__step--sim .how__text h3 {
    font-size: 28px;
  }
}
body {
  font-size: 1rem;
}

/* 8px grid: spacing from 16px up in steps of 8, smaller gaps in steps of 4, fluid values
   rounded to the grid. These override site.css rules shared with the US page. */
.nav__inner { gap: 24px; }
.nav__links a { padding: 8px 16px; font-size: 0.875rem; }
.nav__actions,
.btn { gap: 8px; }
.btn { padding: 0 32px; }
.btn--sm { padding: 0 24px; font-size: 0.875rem; }
/* Hover colors land at once and fade out briefly; only the lift keeps its easing. */
.nav__links a,
.btn { transition-duration: 0.12s; }
.nav__links a:hover { transition: none; }
.btn:hover,
.nav--loj .nav__actions .btn--primary:hover { transition: transform 0.25s var(--ease-out); }
.eyebrow { margin-bottom: 16px; }
.section__head .lede { margin-top: 24px; }
.marquee__group { gap: round(clamp(32px, 3.6vw, 56px), 8px); padding-right: round(clamp(32px, 3.6vw, 56px), 8px); }
.marquee { padding: 24px 0; }
.loj-band .marquee { padding-top: round(clamp(32px, 2.8vw, 40px), 8px); }
.faq__aside .eyebrow { margin-top: 0; }
.faq__answer { padding-bottom: 24px; line-height: 1.5; }
.footer__tag { margin-top: 16px; }
.footer__cols ul { margin-top: 8px; }
.footer__cols a,
.footer__legal a { padding: 8px 0; }
.footer__base { padding-block: 32px 40px; }
.footer__main { padding-block: round(clamp(48px, 6vw, 80px), 8px) round(clamp(64px, 8.4vw, 120px), 8px); }
@media (max-width: 767px) {
  .marquee__group { gap: 32px; padding-right: 32px; }
}
@media (max-width: 599px) {
  .section__head .lede,
  .loj-what__head .lede,
  .faq__aside h2 + p { margin-top: 16px; }
  /* Balanced, the FAQ title breaks after "você" and leaves the right half of the line empty. */
  #faq-title { text-wrap: wrap; }
}
@media (min-width: 900px) {
  .faq__grid { gap: round(clamp(56px, 8vw, 120px), 8px); }
}
.display-2 {
  font-size: var(--t-section);
}
.display-3 {
  font-size: clamp(1.4375rem, 2.1vw, 1.8125rem);
}
.lede,
.loj-band__lead,
.loj-final__text,
.faq__aside h2 + p,
.footer__tag {
  font-size: var(--t-lede);
  line-height: 1.5;
}
/* The hero keeps the larger lede. */
.loj-hero__copy .lede {
  font-size: round(clamp(16px, 1.4vw, 20px) + var(--big) / 320, 2px);
  line-height: 1.4;
}
.btn {
  min-height: 46px;
  padding-inline: 24px;
  font-size: 0.875rem;
}
.faq summary {
  padding-block: 24px;
  font-size: 20px;
  letter-spacing: 0;
  text-wrap: balance;
}
.faq__icon {
  width: 34px;
  height: 34px;
}

/* Touch targets reach 44px; the negative margin keeps the spacing as drawn. */
@media (max-width: 767px) {
  .footer__cols a,
  .footer__legal a {
    padding-block: 11px;
    margin-block: -3px;
  }
}

/* ---------- Quanto custa ---------- */

/* The price is the one big thing here: centered across the full width, so this section does
   not repeat the text-left, visual-right layout of "Em números" and "Dúvidas". The launch offer
   sits under it as a tag, so it can leave the page without the section changing. */
.loj-price__head {
  margin-inline: auto;
  text-align: center;
}
.loj-price__head .lede {
  margin-inline: auto;
}
.loj-price__plan {
  display: grid;
  justify-items: center;
  gap: round(clamp(20px, 2.4vw, 32px), 4px);
  margin: round(clamp(48px, 5vw, 80px), 8px) 0 0;
  padding: round(clamp(40px, 5vw, 72px), 8px) 0;
  border-block: 1px solid var(--line);
  text-align: center;
}
.loj-price__value {
  margin: 0;
  font: 600 round(clamp(72px, 10vw, 152px), 4px) / 0.9 var(--font-display);
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: var(--ink);
}
.loj-price__value small {
  font-size: 0.32em;
  letter-spacing: 0;
  color: var(--ink-2);
}
.loj-price__value small:first-child {
  margin-right: 4px;
  vertical-align: 1.5em;
}
.loj-price__offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 0;
  padding: 8px 20px 8px 8px;
  border-radius: 999px;
  background: var(--mist-3);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink);
}
.loj-price__offer-tag {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--white);
}
/* The three terms sit under the three price columns, one per column, all at the same weight. */
.loj-price__foot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: round(clamp(24px, 2.4vw, 32px), 8px);
}
.loj-price__promise,
.loj-price__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0 16px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink-2);
  text-wrap: balance;
}
.loj-price__promise .icon,
.loj-price__note .icon {
  flex: none;
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 8px;
  border-radius: 999px;
  background: var(--mist-3);
  color: var(--blue);
}
/* On phones the head and the terms go left; the price stays centered in its band. */
@media (max-width: 719px) {
  .loj-price__head {
    text-align: left;
  }
  .loj-price__offer {
    padding: 12px 16px;
    border-radius: var(--radius-tile, 16px);
  }
  .loj-price__foot {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .loj-price__promise,
  .loj-price__note {
    justify-content: flex-start;
    padding: 0;
  }
}