/* twism.com.br's own copy, started from twism.com's site.css pruned to the rules the BR pages
   use. The two sites share no files: edit it here, it does not follow site/assets/css/site.css. */
/* ==========================================================================
   Twism — site styles (consumer home + /for-business)
   Palette is the one from the current twism.com. Do not add hues.
   ========================================================================== */

@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/ClashDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/ClashDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("/assets/fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette (from twism.com) */
  --blue: #0033eb;
  --blue-ink: #00145e;
  --navy: #000c37;
  --night: #000a2f;
  --sky: #a3b7ff;
  --mist-1: #f9f9fd;
  --mist-2: #f6f7fc;
  --mist-3: #f0f3ff;
  --mist-4: #e5ebff;
  --ink: #19191f;
  --ink-2: #525265;
  --ink-3: #86869d;
  --line: #e3e3e8;
  --white: #fff;

  --font-display: "Clash Display", "Arial Narrow", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 4vw, 48px);
  --section: clamp(88px, 11vw, 168px);
  --radius-tile: clamp(22px, 2.4vw, 32px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-tile: 0 32px 64px -28px rgba(0, 10, 47, 0.38), 0 10px 24px -12px rgba(0, 10, 47, 0.18);
  --shadow-chip: 0 18px 36px -14px rgba(0, 10, 47, 0.34), 0 3px 8px -2px rgba(0, 10, 47, 0.12);
  --nav-h: 76px;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  scrollbar-color: var(--sky) var(--mist-2);
}

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--white);
  caret-color: var(--blue);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection {
  background: var(--blue);
  color: var(--white);
}
.on-blue ::selection {
  background: var(--white);
  color: var(--blue);
}

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

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 8px;
}
.on-blue :focus-visible,
.on-night :focus-visible {
  outline-color: var(--white);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--night);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip:focus {
  top: 12px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 1240px);
  margin-inline: auto;
}

.icon {
  width: 1.125em;
  height: 1.125em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.display-1,
.display-2,
.display-3 {
  font-family: var(--font-display);
  font-weight: 600;
  word-spacing: 0.08em;
  text-wrap: balance;
}
.display-1 {
  font-size: clamp(2.4rem, 11.6vw, 5.25rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
}
.display-2 {
  font-size: clamp(2.25rem, 5.4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.028em;
}
.display-3 {
  font-size: clamp(1.75rem, 3.1vw, 2.625rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
@media (min-width: 900px) {
  .display-1 {
    font-size: clamp(3.5rem, 6.5vw, 6rem);
  }
}

.blue {
  color: var(--blue);
}

.lede {
  font-size: clamp(1.125rem, 1.45vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 32em;
  text-wrap: pretty;
}

p {
  text-wrap: pretty;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease-out);
}
.btn .icon {
  transition: transform 0.35s var(--ease-out);
}
.btn:hover .icon--arrow {
  transform: translateX(4px);
}
.btn:active {
  transform: scale(0.98);
}
.btn--sm {
  min-height: 44px;
  padding: 0 20px;
  font-size: 0.9375rem;
}
.btn--primary {
  background: var(--blue);
  color: var(--white);
}
/* Lighter with a glow, not darker: a darker blue disappears on the hero photo and dark sections. */
.btn--primary:hover {
  background: color-mix(in oklab, var(--blue) 84%, var(--white));
  box-shadow: 0 0 0 4px rgb(0 51 235 / 0.18), 0 10px 28px -6px rgb(0 51 235 / 0.7);
}
.btn--ghost {
  border: 1.5px solid var(--blue-ink);
  color: var(--blue-ink);
}
.btn--ghost:hover {
  background: var(--mist-3);
}
.btn--light {
  background: var(--white);
  color: var(--night);
}
.btn--light:hover {
  background: var(--mist-4);
}
.btn--outline-light {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
}
.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
}

.btn--store {
  min-height: 60px;
  padding: 0 26px 0 22px;
  gap: 12px;
  text-align: left;
}
.btn--store .icon {
  width: 26px;
  height: 26px;
}
.btn--store small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 3px;
  opacity: 0.75;
}
.btn--store span {
  display: block;
  font-size: 1.0625rem;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  border-radius: 6px;
}
.textlink .icon {
  transition: transform 0.35s var(--ease-out);
}
.textlink:hover .icon {
  transform: translateX(4px);
}
.textlink:hover span {
  text-decoration: underline;
}
.on-night .textlink,
.on-blue .textlink {
  color: var(--white);
}

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

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  transition: transform 0.5s var(--ease-out), box-shadow 0.3s;
}
.nav.is-scrolled {
  box-shadow: 0 1px 0 var(--mist-4);
}
.nav.is-hidden {
  transform: translateY(-101%);
}
.nav__inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.logo {
  display: inline-flex;
  color: var(--ink);
  border-radius: 8px;
}
.logo svg {
  width: 124px;
  height: 30px;
}
.nav__links {
  display: none;
  gap: 4px;
}
.nav__links a {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.nav__links a:hover {
  color: var(--blue-ink);
  background: var(--mist-3);
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__actions .btn--ghost {
  display: none;
}
.nav__toggle {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--mist-3);
  color: var(--blue-ink);
}
.nav__toggle .icon {
  width: 22px;
  height: 22px;
}
@media (min-width: 900px) {
  .nav__links {
    display: flex;
  }
  .nav__actions .btn--ghost {
    display: inline-flex;
  }
  .nav__toggle {
    display: none;
  }
}

.sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) 32px;
  background: var(--blue);
  color: var(--white);
  overflow-y: auto;
}
.sheet[hidden] {
  display: none;
}
.sheet__top {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
}
.sheet .logo {
  color: var(--white);
  --logo-mark: var(--white);
}
.sheet__close {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
.sheet__close .icon {
  width: 22px;
  height: 22px;
}
.sheet__links {
  margin-top: 6vh;
  display: grid;
  gap: 4px;
}
.sheet__links a {
  display: block;
  padding: 10px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.sheet__foot {
  margin-top: auto;
  padding-top: 40px;
  display: grid;
  gap: 12px;
}
.sheet__foot .btn {
  width: 100%;
}

/* ---------- Chip (app notification) ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(320px, 100%);
  padding: 10px 18px 10px 10px;
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-chip);
  text-align: left;
}

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

.hero {
  position: relative;
  background: linear-gradient(180deg, var(--white) 0%, var(--white) 38%, var(--mist-3) 100%);
  overflow-x: clip;
}
/* One quiet line above the headline, the way the brief's own mock sets it. */
.hero__line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(20px, 2.6vw, 32px);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.hero__spark {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--blue);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3vw, 40px);
}
@media (max-width: 479px) {
  .hero__cta .btn {
    flex: 1 1 100%;
  }
}
@keyframes aura-drift {
  50% {
    transform: translate(6%, -5%) scale(1.08);
  }
  100% {
    transform: translate(-5%, 4%) scale(0.95);
  }
}
@keyframes ftag-bob {
  from {
    transform: translateY(-4px);
  }
  to {
    transform: translateY(4px);
  }
}

/* ---------- App screen in "How it works": the "Get the app" QR screen ---------- */

.app {
  position: absolute;
  inset: 0;
  font-family: var(--font-text);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--ink);
}
.app .icon {
  stroke-width: 1.7;
}

/* Logo marquee under the hero: every logo, bare, drifting across the full width.
   Two identical groups; the track moves by one group and loops seamlessly. */
.marquee {
  --logo: clamp(52px, 4.6vw, 64px);
  --marquee-time: 120s;
  overflow: hidden;
  padding: 22px 0 26px;
  border-top: 1px solid var(--mist-4);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-time) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track {
  animation-play-state: paused;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(32px, 3.6vw, 56px);
  padding-right: clamp(32px, 3.6vw, 56px);
}
.marquee__group img {
  width: var(--logo);
  height: var(--logo);
  filter: drop-shadow(0 6px 10px rgba(0, 10, 47, 0.16));
}
/* No celular os selos sobem de 52 para 76 px: abaixo disso os nomes dentro deles nao se
   liam. As voltas seguem a velocidade na tela da proposta do hero (2026-09-25): ~17 px/s
   no desktop e ~13 px/s no celular. */
@media (max-width: 599px) {
  .marquee {
    --logo: 76px;
    --marquee-time: 152s;
  }
  .marquee__group {
    gap: 34px;
    padding-right: 34px;
  }
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}
/* ---------- Sections ---------- */

.section {
  padding-block: var(--section);
}
.section--mist-1 {
  background: var(--mist-1);
}
.section__head {
  max-width: 880px;
}
.section__head .lede {
  margin-top: 20px;
}
.steps {
  display: grid;
  margin-top: clamp(28px, 3.4vw, 44px);
}
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(16px, 2vw, 28px);
  align-items: start;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-top: 1px solid var(--mist-4);
  cursor: pointer;
}
.step:last-child {
  border-bottom: 1px solid var(--mist-4);
}
.step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.step p {
  margin-top: 8px;
  max-width: 30em;
  color: var(--ink-2);
}

@media (min-width: 900px) {
  .step {
    cursor: default;
  }
}

/* ---------- Sound familiar? We fixed that. ---------- */

/* An editor's redline on paper: each complaint set in Clash and struck through in
   blue as it scrolls up the page, with the answer written beside it in blue. The pen
   follows the scroll (see --p below). White ground, ink and royal blue, like the rest
   of the page. */
.fixed {
  --strike: var(--blue); /* the pen */
  padding-block: clamp(64px, 8vw, 112px);
  background: var(--mist-2); /* the light band; "Little extras" below is white, the day's first sheet mist again */
  color: var(--ink);
  border-radius: clamp(28px, 4vw, 56px);
  overflow: hidden;
}
.edits {
  border-top: 1px solid var(--mist-4);
}

/* ---------- Little extras. Big smiles. ---------- */

/* Four tiles on a light band between two white sections: birthday offers wide on top,
   the head start and sending rewards below, the live happy hours tall on the right with
   the app's Offers tab. Palette only: blue, sky, night and white on --mist-2. The one
   extra value, --live, is the app's own green for the "happening now" dot, used solely
   inside the phone mock (the way the hero shows the app's real screens). Everything
   that moves is keyed off .is-in, which site.js flips once the band is on screen. */
.extras {
  --band-radius: clamp(28px, 4vw, 56px);
  --tile-pad: clamp(22px, 2.4vw, 32px);
  --live: #90ca78;
  position: relative;
  padding-block: clamp(56px, 6vw, 80px);
  background: var(--white);
  color: var(--ink);
  overflow: clip;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: var(--tile-pad);
  border-radius: var(--radius-tile);
  background: var(--white);
  color: var(--ink);
  overflow: hidden;
}
.tile h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  word-spacing: 0.08em;
  text-wrap: balance;
  max-width: 16ch;
}
/* Reveal: the tiles rise in turn (--d) once the band is on screen. */
.js .tile {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out) var(--d, 0s), transform 0.9s var(--ease-out) var(--d, 0s);
}
.js .extras.is-in .tile {
  opacity: 1;
  transform: none;
}
.pick {
  display: grid;
  gap: 3px;
  padding: 8px 8px 10px;
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 22px 40px -28px rgba(0, 10, 47, 0.5);
}
/* Once on screen each card gets picked in turn: a nudge, then Select becomes Selected. */
.extras.is-in .pick {
  animation: extras-nudge 0.7s var(--ease-out) calc(1.1s + var(--p, 0s)) both;
}

@keyframes extras-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(-2deg); }
}
@keyframes extras-drift {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(-3%, 4%) rotate(-3deg); }
}
@keyframes extras-fade-in {
  to { opacity: 1; transform: none; }
}
@keyframes extras-fade-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes extras-pick-on {
  to { background-color: var(--blue); color: var(--white); }
}
@keyframes extras-nudge {
  0% { transform: scale(1); }
  40% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes extras-typing {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(-3px); opacity: 1; }
}
@keyframes extras-live {
  0% { box-shadow: 0 0 0 0 rgba(144, 202, 120, 0.6); }
  70% { box-shadow: 0 0 0 0.6em rgba(144, 202, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(144, 202, 120, 0); }
}
@keyframes extras-marquee {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  /* The global rule shortens durations, not delays: land every end state right away. */
  .extras *,
  .extras *::before {
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
}
.scene {
  --bg: var(--mist-3);
  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --accent: var(--blue);
  --name: var(--blue);
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding: clamp(64px, 9vw, 112px) 0;
}
.scene + .scene {
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
  margin-top: calc(-1 * clamp(28px, 4vw, 56px));
  box-shadow: 0 -28px 56px -36px rgba(0, 10, 47, 0.45);
}
.js .scene.is-in .chip {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}
/* Scenes stack over each other while the ground walks from morning to night.
   site.js sets --stick-top on each scene so one taller than the screen (phones)
   scrolls to its end before the next slides over it. Without JS the stack only
   runs where a scene is sure to fit the viewport. */
@media (min-width: 900px) and (min-height: 720px) {
  .scene {
    min-height: 100svh;
    display: grid;
    align-items: center;
    padding: 96px 0 72px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js .scene {
    position: sticky;
    top: var(--stick-top, 0px);
  }
  .js .scene + .scene {
    margin-top: 0;
  }
}
@media (min-width: 900px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
  .scene {
    position: sticky;
    top: var(--stick-top, 0px);
  }
  .scene + .scene {
    margin-top: 0;
  }
}
.place {
  aspect-ratio: 1;
}
@media (min-width: 900px) {
  .place {
    aspect-ratio: auto;
  }
}

/* ---------- Reward menus ---------- */

/* One dialog per place: the logo and the name on top, then a deck of its rewards,
   one card per item, fanned like a hand of cards; arrows and
   a counter drive it. The stage follows the viewport height, so the whole dialog is
   visible without scrolling. */
.menu {
  --pad: clamp(20px, 2.6vw, 32px);
  width: min(100% - 24px, 560px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: var(--pad);
  border: 0;
  border-radius: var(--radius-tile);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-tile);
  overflow: hidden;
  outline: none;
}
.menu::backdrop {
  background: rgba(0, 10, 47, 0.62);
}
.menu[open] {
  animation: menu-in 0.5s var(--ease-out);
}
.menu[open]::backdrop {
  animation: menu-backdrop-in 0.35s ease-out;
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
}
@keyframes menu-backdrop-in {
  from {
    opacity: 0;
  }
}
body:has(.menu[open]) {
  overflow: hidden;
}

/* The deck. The stage is 4:5; its width comes from the viewport height so the
   dialog never scrolls, and it leaves room on the right for the fanned cards. */
.deck {
  position: relative;
  margin-top: clamp(18px, 2.2vw, 24px);
  user-select: none;
  -webkit-user-select: none;
}
.deck-card {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transition: transform 0.8s var(--ease-out), opacity 0.5s ease, filter 0.6s ease;
  will-change: transform;
}
.deck-card[data-pos="0"] {
  z-index: 3;
  cursor: grab;
  touch-action: pan-y;
}
.deck-card[data-pos="0"].is-dragging {
  cursor: grabbing;
  transition: none;
}
.deck-card[data-pos="1"] {
  z-index: 2;
  transform: translate(8%, -1.5%) rotate(5deg) scale(0.95);
  filter: brightness(0.97);
}
.deck-card[data-pos="2"] {
  z-index: 1;
  transform: translate(15%, -2%) rotate(10deg) scale(0.9);
  filter: brightness(0.94);
}
.deck-card[data-pos="hidden"] {
  z-index: 0;
  opacity: 0;
  transform: translate(18%, -2%) rotate(12deg) scale(0.86);
  pointer-events: none;
}
.deck-card[data-pos="leaving"] {
  z-index: 4;
  opacity: 0;
  transform: translate(-120%, 4%) rotate(-16deg);
  pointer-events: none;
}
.deck-card[data-pos="entering"] {
  z-index: 4;
  opacity: 0;
  transform: translate(-120%, 4%) rotate(-16deg);
  transition: none;
}
@media (max-width: 639px) {
  .menu {
    width: calc(100% - 16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu[open],
  .menu[open]::backdrop {
    animation: none;
  }
  .deck-card {
    transition: none;
  }
}

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

.faq__grid {
  display: grid;
  gap: 40px;
}
.faq__aside p {
  margin-top: 20px;
  color: var(--ink-2);
}
.faq__aside .textlink {
  margin-top: 8px;
}
.faq details {
  border-top: 1px solid var(--mist-4);
}
.faq details:last-child {
  border-bottom: 1px solid var(--mist-4);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary:hover {
  color: var(--blue);
}
.faq__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mist-3);
  color: var(--blue);
  transition: transform 0.45s var(--ease-out), background-color 0.2s, color 0.2s;
}
.faq__icon .icon {
  width: 18px;
  height: 18px;
}
.faq details[open] .faq__icon {
  transform: rotate(45deg);
  background: var(--blue);
  color: var(--white);
}
.faq__answer {
  padding: 0 64px 28px 0;
  color: var(--ink-2);
  max-width: 40em;
}
.faq__answer a {
  color: var(--blue);
  font-weight: 500;
}
@supports (interpolate-size: allow-keywords) {
  .faq details {
    interpolate-size: allow-keywords;
  }
  .faq details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.5s var(--ease-out), content-visibility 0.5s allow-discrete;
  }
  .faq details[open]::details-content {
    block-size: auto;
  }
}
@media (min-width: 900px) {
  .faq__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
    gap: clamp(56px, 8vw, 120px);
  }
  .faq__aside {
    position: sticky;
    top: calc(var(--nav-h) + 40px);
    align-self: start;
  }
}

/* ---------- Get the app (final CTA) ---------- */

.get {
  background: var(--blue);
  color: var(--white);
  padding-block: clamp(88px, 11vw, 160px);
  overflow: hidden;
}
.get .lede {
  margin-top: 24px;
  color: var(--mist-4);
}

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

.footer {
  background: var(--night);
  color: var(--white);
}
.footer__main {
  display: grid;
  gap: 48px;
  padding-block: clamp(48px, 6vw, 80px);
}
.footer .logo {
  color: var(--white);
  --logo-mark: var(--white);
}
.footer__tag {
  margin-top: 18px;
  color: var(--mist-4);
  max-width: 22em;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 24px;
}
.footer__cols h2 {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--sky);
}
.footer__cols ul {
  margin-top: 14px;
  display: grid;
  gap: 4px;
}
.footer__cols a {
  display: inline-block;
  padding: 6px 0;
  color: var(--white);
  text-decoration: none;
  font-size: 0.9375rem;
}
.footer__cols a:hover {
  text-decoration: underline;
}
.footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-block: 28px 40px;
  border-top: 1px solid rgba(163, 183, 255, 0.2);
  font-size: 0.875rem;
  color: var(--mist-4);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}
.footer__legal a {
  padding: 6px 0;
  text-decoration: none;
}
.footer__legal a:hover {
  color: var(--white);
  text-decoration: underline;
}
.footer__social {
  display: flex;
  gap: 8px;
}
.footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(163, 183, 255, 0.35);
  color: var(--white);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.footer__social a:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--night);
}
.footer__social .icon {
  width: 20px;
  height: 20px;
}
@media (min-width: 900px) {
  .footer__main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }
  .footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Eyebrow over a section head on night. */
.eyebrow {
  margin-bottom: 18px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sky);
}

.eyebrow--blue {
  color: var(--blue);
}

/* The network in numbers: four portrait cards on the night field, each with one of the
   current site's videos (or the flag grid) under a number. The videos play only on screen. */
.proof {
  background: var(--night);
  background-image: radial-gradient(110% 80% at 12% 0%, var(--blue-ink) 0%, rgba(0, 20, 94, 0) 68%);
  color: var(--white);
}
.proof .eyebrow {
  color: var(--sky);
}
.proof .lede {
  color: var(--mist-4);
}
@keyframes proof-pan {
  to {
    transform: translateY(-44%);
  }
}

.magic {
  padding-block: clamp(64px, 8vw, 120px);
  text-align: center;
}
@keyframes magic-twinkle {
  50% {
    transform: scale(0.75) rotate(20deg);
    opacity: 0.55;
  }
}
.magic__hit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s;
}
.magic__hit:hover,
.magic__hit:focus-visible {
  background: var(--mist-2);
  outline: none;
}
.magic__hit:focus-visible {
  box-shadow: inset 0 0 0 2px var(--blue);
}
.magic__hit .icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--blue);
}
.magic__hit span {
  flex: 1 1 auto;
  min-width: 0;
}
.magic__hit .icon--arrow {
  color: var(--blue-ink);
  transition: transform 0.3s var(--ease-out);
}
.magic__hit:hover .icon--arrow {
  transform: translateX(3px);
}
@media (min-width: 1000px) {
  .nav--dock .nav__links {
    display: none;
  }
  .nav.nav--dock.is-hidden {
    transform: none;
  }
}
/* On the night ground the headline's colored phrase turns sky (the display pair). */
.on-night .display-2 .blue {
  color: var(--sky);
}

/* The data chain, on night: connect the POS, see what's happening, let Twism AI decide.
   Three ruled steps that become three columns from 1000px. */
.data {
  background: var(--night);
  background-image: radial-gradient(110% 80% at 88% 0%, var(--blue-ink) 0%, rgba(0, 20, 94, 0) 68%);
  color: var(--white);
}
.data .lede {
  color: var(--mist-4);
}
/* 01: the POS names, large, as the key piece; an outlined panel on navy. */
.pos {
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: clamp(24px, 2.6vw, 36px);
  border: 1.5px solid rgba(163, 183, 255, 0.25);
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}

/* ---------- /for-business: motion. Light, once, and off with reduced motion ---------- */
/* The consumer page moves scene by scene; the merchant page had none of that (the user,
   2026-09-23: "estou achando o site muito estático"). Four kinds of motion, all cheap:
   things rise in as they reach the screen, the hero comes in in order, the search field
   glows like something is thinking behind it, and cards lift under the pointer. Nothing
   moves with prefers-reduced-motion, and without JavaScript everything just sits there. */

/* Rise in. [data-in] for one element, [data-in="stagger"] for a list whose children come
   in turn. The JS adds .is-in once (IntersectionObserver); the transition list also carries
   the hover lift below, so one rule owns the element's transitions. */
.js [data-in],
.js [data-in="stagger"] > * {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out), transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.js [data-in="stagger"] {
  opacity: 1;
  translate: none;
  transition: none;
}
.js [data-in].is-in,
.js [data-in="stagger"].is-in > * {
  opacity: 1;
  translate: 0 0;
}
.js [data-in="stagger"].is-in > :nth-child(2) { transition-delay: 0.1s; }
.js [data-in="stagger"].is-in > :nth-child(3) { transition-delay: 0.2s; }
.js [data-in="stagger"].is-in > :nth-child(4) { transition-delay: 0.3s; }
.js [data-in="stagger"].is-in > :nth-child(5) { transition-delay: 0.4s; }
.js [data-in="stagger"].is-in > :nth-child(6) { transition-delay: 0.5s; }

/* The search field: a sky-to-blue ring turning around the pill, and the same ring blurred
   behind it as a glow that breathes. The current twism.com pulses a plain ring around its
   field; this is that idea in the site's palette. Both pseudo-elements own the angle, so
   the gradient turns without repainting the input. */
@property --magic-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@media (prefers-reduced-motion: no-preference) {
  .magic__hit {
    animation: biz-rise 0.5s var(--ease-out) both;
  }
  .magic__hit:nth-child(2) { animation-delay: 0.05s; }
  .magic__hit:nth-child(3) { animation-delay: 0.1s; }
  .magic__hit:nth-child(4) { animation-delay: 0.15s; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-in],
  .js [data-in="stagger"] > * {
    opacity: 1;
    translate: none;
    transition: none;
  }
}
@keyframes biz-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}
@keyframes biz-slab {
  from {
    opacity: 0;
    transform: rotate(0deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: rotate(3deg);
  }
}
@keyframes biz-card {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.94);
  }
}
@keyframes biz-float {
  from { translate: 0 0; }
  to { translate: 0 -6px; }
}
@keyframes biz-drop {
  from {
    opacity: 0;
    translate: 0 -8px;
  }
}
@keyframes magic-spin {
  to { --magic-angle: 360deg; }
}
@keyframes magic-breathe {
  from { opacity: 0.3; }
  to { opacity: 0.7; }
}
@keyframes magic-halo {
  0% {
    transform: scale(0.8);
    opacity: 0.9;
  }
  60%, 100% {
    transform: scale(1.45);
    opacity: 0;
  }
}
@keyframes magic-blink {
  0%, 78%, 100% { transform: none; }
  86% { transform: scale(1.22) rotate(18deg); }
  93% { transform: scale(0.96) rotate(-6deg); }
}
@keyframes magic-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -160% 0; }
}

/* ?fs=1: opened from the apps, text only. */
.is-embed .skip,
.is-embed .nav,
.is-embed .footer {
  display: none;
}

/* ---------- Cookie bar ---------- */
/* Fixed to the bottom, white: the notice with one consent checkbox, Confirm and the close button.
   site.js shows it when there is no choice yet; without JavaScript it stays hidden, as nothing
   could save the choice. */

.cookiebar {
  position: fixed;
  inset: auto 0 0;
  z-index: 60;
  padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.45;
  box-shadow: 0 -10px 40px -16px rgba(0, 10, 47, 0.22);
}
.cookiebar[hidden],
.is-embed .cookiebar {
  display: none;
}
.cookiebar__wrap {
  position: relative;
  width: min(100%, 1240px);
  margin-inline: auto;
  padding-right: 48px;
}
.cookiebar p {
  margin: 0;
}
.cookiebar__close {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.cookiebar__close:hover {
  background: var(--mist-3);
}
.cookiebar__close .icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.cookiebar__notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 48px;
}
.cookiebar__text {
  display: grid;
  gap: 10px;
  flex: 1 1 400px;
  max-width: 600px;
}
.cookiebar__consent {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-weight: 600;
  color: var(--blue-ink);
  cursor: pointer;
}
.cookiebar__consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}
.cookiebar__actions .btn {
  min-width: 160px;
}

@media (max-width: 759px) {
  .cookiebar {
    max-height: 88vh;
    overflow: auto;
    padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px));
    font-size: 0.8125rem;
    line-height: 1.4;
  }
  .cookiebar__wrap {
    padding-right: 32px;
  }
  .cookiebar__close {
    top: -10px;
    right: -12px;
  }
  .cookiebar__notice {
    gap: 12px;
  }
  /* The button runs under the close button too, so it takes the bar's full width. */
  .cookiebar__actions {
    display: grid;
    width: calc(100% + 32px);
    margin-right: -32px;
  }
}

/* ---------- View transitions for the directory ---------- */

::view-transition-group(*) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .scene {
    position: relative !important;
    min-height: 0 !important;
  }
  .nav.is-hidden {
    transform: none;
  }
}