/* ==========================================================================
   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("../fonts/ClashDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../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;
}
.icon--solid {
  fill: currentColor;
  stroke: none;
}

.only-narrow {
  display: inline;
}
.only-wide {
  display: none;
}
@media (min-width: 560px) {
  .only-narrow {
    display: none;
  }
  .only-wide {
    display: inline;
  }
}

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

.display-1,
.display-2,
.display-3,
.display-4 {
  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;
}
.display-4 {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
@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;
}

.fineprint {
  font-size: 0.875rem;
  color: var(--ink-2);
}

/* ---------- 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, 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);
}
.btn--primary:hover {
  background: var(--blue-ink);
}
.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;
}
.chip__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--blue);
  color: var(--white);
  --logo-mark: var(--white);
}
.chip__mark svg {
  width: 22px;
  height: 22px;
}
.chip__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.chip__text {
  min-width: 0;
  display: grid;
  gap: 2px;
  font-size: 0.8125rem;
  line-height: 1.3;
}
.chip__text strong {
  font-weight: 600;
  font-size: 0.875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip__text span {
  color: var(--ink-2);
}

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

.hero {
  position: relative;
  background: linear-gradient(180deg, var(--white) 0%, var(--white) 38%, var(--mist-3) 100%);
  overflow-x: clip;
}
.hero__grid {
  --strip-h: 114px;
  display: grid;
  gap: 56px;
  padding-top: clamp(36px, 6vw, 72px);
  padding-bottom: clamp(56px, 7vw, 88px);
}
/* 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__title {
  font-size: clamp(2.4rem, 9.4vw, 4.75rem);
}
.hero__copy .lede {
  margin-top: clamp(20px, 2.4vw, 28px);
  text-wrap: balance;
}
.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%;
  }
}
.hero__note {
  margin-top: 18px;
}
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding-top: 32px;
    padding-bottom: 40px;
    min-height: min(780px, calc(100svh - var(--nav-h) - var(--strip-h, 132px)));
  }
}

/* The app on a 3D iPhone (assets/js/hero-phone.js draws it on a transparent canvas) rising
   out of a pastel aura: blurred lilac, pink, blue and violet lights drifting slowly, a white
   glow behind the phone and a faint grain, inside an arch. Floating tags name what the
   screen on the phone shows. Aura and tag colors are the design team's literals, not tokens.
   The phone's size follows the stage height, so each breakpoint sets --stage-h. */
.phone3d {
  --stage-h: 440px;
  --aura-h: 340px;
  position: relative;
  width: min(100%, 520px);
  height: var(--stage-h);
  margin-inline: auto;
  touch-action: pan-y;
}
.phone3d__aura {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--aura-h);
  margin-inline: auto;
  border-radius: 240px 240px 8px 8px;
  overflow: hidden;
  isolation: isolate;
  background: #f5f2ff;
}
.phone3d__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.55;
  will-change: transform;
  animation: aura-drift 18s ease-in-out infinite alternate;
}
.phone3d__blob--lilac {
  width: 70%;
  height: 62%;
  left: -8%;
  top: 6%;
  background: #cdb9ff;
}
.phone3d__blob--pink {
  width: 62%;
  height: 56%;
  right: -10%;
  top: -4%;
  background: #ffc2e2;
  animation-duration: 22s;
  animation-delay: -6s;
}
.phone3d__blob--blue {
  width: 72%;
  height: 54%;
  left: 4%;
  bottom: -12%;
  background: #b6dcff;
  animation-duration: 20s;
  animation-delay: -11s;
}
.phone3d__blob--violet {
  width: 44%;
  height: 42%;
  right: -4%;
  bottom: 4%;
  background: #a98bff;
  opacity: 0.35;
  animation-duration: 24s;
  animation-delay: -3s;
}
.phone3d__glow {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 56%;
  height: 70%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0));
  filter: blur(8px);
}
.phone3d__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes aura-drift {
  50% {
    transform: translate(6%, -5%) scale(1.08);
  }
  100% {
    transform: translate(-5%, 4%) scale(0.95);
  }
}
/* No placeholder while three.js loads: the phone fades in over the aura. */
.phone3d__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.phone3d.is-ready .phone3d__canvas {
  opacity: 1;
}

/* Floating tags: frosted-glass pills beside the phone, one pair per screen. Both fade and
   blur in and out together when the screen changes, and bob gently. */
.ftags {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.phone3d:not(.is-ready) .ftags {
  opacity: 0;
}
.ftags__slot {
  position: absolute;
  animation: ftag-bob 6s ease-in-out infinite alternate;
}
.ftags__slot--a {
  left: 0;
  top: 78%;
}
.ftags__slot--b {
  right: 0;
  top: 58%;
  animation-delay: -3s;
}
.ftag {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 12px 32px -10px rgba(42, 31, 107, 0.2), inset 0 1px 0 var(--white);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: -0.1px;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  filter: blur(4px);
  transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}
.ftags__slot--a .ftag {
  left: 0;
}
.ftags__slot--b .ftag {
  right: 0;
}
.ftag.is-on {
  opacity: 1;
  transform: none;
  filter: none;
}
.ftag__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--white);
}
.ftag__icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ftag__icon--blue { background: var(--blue); }
.ftag__icon--violet { background: #8b5cf6; }
.ftag__icon--amber { background: #f59e0b; }
.ftag__icon--pink { background: #ec4899; }
.ftag__icon--indigo { background: #6366f1; }
.ftag__icon--green { background: #22c55e; }
@keyframes ftag-bob {
  from {
    transform: translateY(-4px);
  }
  to {
    transform: translateY(4px);
  }
}
@media (min-width: 600px) {
  .phone3d {
    --stage-h: 560px;
    --aura-h: 475px;
  }
  .phone3d__aura {
    width: 92%;
  }
  .phone3d__blob {
    filter: blur(48px);
  }
  .ftags__slot--a {
    left: auto;
    right: calc(50% + 50px);
    top: 76%;
  }
  .ftags__slot--a .ftag {
    left: auto;
    right: 0;
  }
  .ftags__slot--b {
    right: auto;
    left: calc(50% + 55px);
    top: 56%;
  }
  .ftags__slot--b .ftag {
    right: auto;
    left: 0;
  }
  .ftag {
    gap: 10px;
    padding: 7px 16px 7px 7px;
    font-size: 0.8125rem;
  }
  .ftag__icon {
    width: 32px;
    height: 32px;
  }
  .ftag__icon svg {
    width: 17px;
    height: 17px;
  }
}
@media (min-width: 900px) {
  .phone3d {
    --stage-h: 600px;
    width: auto;
    margin-inline: 0;
  }
}
/* The phone's column is narrow here: tags measured from the phone would run off the page or
   into the buttons, so they hang from the stage's edges instead. */
@media (min-width: 900px) and (max-width: 1279px) {
  .ftags__slot--a {
    right: auto;
    left: -12px;
  }
  .ftags__slot--a .ftag {
    right: auto;
    left: 0;
  }
  .ftags__slot--b {
    left: auto;
    right: -12px;
  }
  .ftags__slot--b .ftag {
    left: auto;
    right: 0;
  }
}
@media (min-width: 1280px) {
  .ftags__slot--a {
    right: calc(50% + 70px);
  }
  .ftags__slot--b {
    left: calc(50% + 80px);
  }
  .ftag {
    font-size: 0.875rem;
  }
}
@media (min-width: 1500px) {
  .phone3d {
    --stage-h: 640px;
    --aura-h: 505px;
  }
}

/* ---------- 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;
}
.app__status {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  padding: 10px 20px 0;
  font-size: 11px;
  font-weight: 600;
}
.app__status--light {
  color: var(--white);
}
.app__signal {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.app__signal i {
  display: block;
  width: 3px;
  height: 7px;
  border-radius: 1px;
  background: currentColor;
}
.app__signal i:nth-child(2) {
  height: 9px;
}
.app__signal i:nth-child(3) {
  width: 16px;
  height: 8px;
  border-radius: 3px;
}

/* 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 {
  background: var(--mist-2);
}
.section--mist-1 {
  background: var(--mist-1);
}
.section__head {
  max-width: 880px;
}
.section__head .lede {
  margin-top: 20px;
}

/* ---------- How it works ---------- */

/* The phone on the left, three numbered steps on the right. The numerals sit in the light
   blue and only the step the phone is showing turns full blue. */
.how__grid {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
}
.how__copy .lede {
  margin-top: 24px;
}
.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__num {
  min-width: 2ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--sky);
  transition: color 0.3s;
}
.step.is-active .step__num {
  color: var(--blue);
}
.step__body {
  padding-top: 0.2em;
}
.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);
}
/* The sentence about the code on the phone only makes sense where the code is shown. */
.step__wide {
  display: none;
}
/* Store buttons, phone sizes only: on a phone you download, you don't scan. */
.step__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.btn--store-sm {
  min-height: 44px;
  padding: 0 14px 0 12px;
  gap: 8px;
}
.btn--store-sm .icon {
  width: 20px;
  height: 20px;
}
/* Compact: the icon and the store name, one line each. */
.btn--store-sm small {
  display: none;
}
.btn--store-sm span {
  font-size: 0.875rem;
}

/* The handset: a real iPhone render with its screen cut out, our screens underneath.
   The screen opening is measured from the render, so everything is a percentage of the frame. */
.how__visual {
  position: relative;
  height: clamp(300px, 80vw, 380px);
  border-radius: var(--radius-tile);
  background: var(--mist-2);
  overflow: hidden;
}
.handset {
  --handset-w: 250px;
  --k: 0.9096; /* screen width / the 250px the app screens are laid out at */
  position: absolute;
  left: 50%;
  top: 30px;
  width: var(--handset-w);
  aspect-ratio: 1681 / 3430;
  transform: translateX(-50%);
}
.handset::before {
  content: "";
  position: absolute;
  inset: 3% 6%;
  border-radius: 18% / 8%;
  box-shadow: 0 30px 70px rgba(0, 10, 47, 0.26);
}
.handset__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.handset__screens {
  position: absolute;
  left: 4.521%;
  top: 1.895%;
  width: 90.958%;
  height: 96.239%;
  z-index: 1;
  border-radius: 12.75% / 5.907%;
  overflow: hidden;
  background: var(--mist-2);
}
.handset__screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s 0.45s;
}
.handset__screen.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.handset__screen > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.handset__screen .app {
  zoom: var(--k);
}
/* Phones only ever see the Wallet. */
@media (max-width: 899px) {
  .handset__screen,
  .handset__screen.is-active {
    opacity: 0;
    visibility: hidden;
  }
  .handset__screen--wallet {
    opacity: 1;
    visibility: visible;
  }
}

/* The screen that gets the app: the wordmark and the code on Twism blue. */
.app--get {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--white);
  background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Ccircle cx='23' cy='23' r='21' fill='none' stroke='%23fff' stroke-opacity='.07' stroke-width='1.5'/%3E%3C/svg%3E");
}
.app--get .app__status {
  align-self: stretch;
}
.app__wordmark {
  --logo-mark: var(--white);
  width: 112px;
  height: 27px;
  margin-top: 112px;
  color: var(--white);
}
.app__get-lead {
  margin-top: 40px;
  font-size: 13px;
  font-weight: 600;
}
.app__qr {
  margin-top: 14px;
  padding: 12px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 18px 44px rgba(0, 10, 47, 0.3);
}
.app__qr img {
  display: block;
  width: 156px;
  height: 156px;
}
.app__get-note {
  margin-top: 18px;
  font-size: 10.5px;
  color: var(--mist-4);
}

@media (min-width: 900px) {
  .how__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: center;
  }
  .how__visual {
    height: auto;
    border-radius: 0;
    background: none;
    overflow: visible;
    display: flex;
    justify-content: center;
  }
  .handset {
    --handset-w: 340px;
    --k: 1.237;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
  }
  .step {
    cursor: default;
  }
  .step__wide {
    display: inline;
  }
  .step__stores {
    display: none;
  }
}
@media (min-width: 1200px) {
  .handset {
    --handset-w: 380px;
    --k: 1.3826;
  }
}
@media (prefers-reduced-motion: reduce) {
  .handset__screen,
  .step__num {
    transition: none;
  }
}

/* ---------- 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;
}
.fixed__head {
  margin-bottom: clamp(36px, 4.6vw, 64px);
}
.fixed__head .display-2 {
  max-width: 12ch;
}
.fixed__answer {
  display: block;
  color: var(--blue);
}
.edits {
  border-top: 1px solid var(--mist-4);
}
.edit {
  display: grid;
  gap: 16px 32px;
  padding: clamp(28px, 3.6vw, 52px) 0;
  border-bottom: 1px solid var(--mist-4);
}
.edit__meta {
  display: flex;
  align-items: center;
  gap: 14px;
}
.edit__n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.edit__stamp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1.5px solid var(--blue);
  border-radius: 8px;
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}
/* With JS the whole redline is a function of --p (0 → 1, set from the scroll position by
   site.js): first the strike (0.05 → 0.5), then the ink fades (0.3 → 0.6), the stamp
   lands (0.45 → 0.7) and the answer comes in (0.55 → 0.9). Each step is its own clamp
   of --p, so a fast scroll and a slow one draw the same picture at the same spot. */
.js .edit {
  --p: 0;
  --t-strike: clamp(0, (var(--p) - 0.05) / 0.45, 1);
  --t-ink: clamp(0, (var(--p) - 0.3) / 0.3, 1);
  --t-stamp: clamp(0, (var(--p) - 0.45) / 0.25, 1);
  --t-fix: clamp(0, (var(--p) - 0.55) / 0.35, 1);
}
.js .edit__stamp {
  opacity: var(--t-stamp);
  transform: rotate(calc(-14deg + 10deg * var(--t-stamp))) scale(calc(1.28 - 0.28 * var(--t-stamp)));
  filter: blur(calc(4px * (1 - var(--t-stamp))));
}
.edit__pain {
  max-width: 16ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  word-spacing: 0.06em;
  text-wrap: balance;
}
.js .edit__pain {
  color: color-mix(in srgb, var(--ink-3) calc(100% * var(--t-ink)), var(--ink));
}
/* The strike is a background stripe on the inline <s>: it draws once per line box and
   its width animates, so a two-line complaint gets two strokes, left to right. */
.edit__pain s {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.04em;
  margin: 0 -0.04em;
  text-decoration: none;
  background-image: linear-gradient(var(--strike), var(--strike));
  background-repeat: no-repeat;
  background-size: 100% 0.09em;
  background-position: 0 56%;
}
.js .edit__pain s {
  background-size: calc(100% * var(--t-strike)) 0.09em;
}
.js .edit__fix {
  opacity: var(--t-fix);
  transform: translateY(calc(16px * (1 - var(--t-fix))));
  filter: blur(calc(8px * (1 - var(--t-fix))));
}
.edit__fix h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--blue);
}
.edit__fix p {
  margin-top: 10px;
  max-width: 34em;
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (min-width: 900px) {
  .edit {
    grid-template-columns: 110px minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: start;
  }
  .edit__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 0.4em;
  }
  .edit__fix {
    padding-top: 0.2em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .edit {
    --p: 1;
  }
}

/* ---------- 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;
}
.extras__head {
  display: grid;
  gap: 16px 48px;
  align-items: end;
  margin-bottom: clamp(28px, 3.2vw, 40px);
}
.extras__head .display-2 {
  max-width: 11ch;
}
@media (min-width: 900px) {
  .extras__head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  }
  .extras__head .lede {
    justify-self: end;
    text-align: right;
    margin-bottom: 0.4em;
  }
}
.extras__note {
  margin-top: 16px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

/* The grid: 7/12 for the left column, 5/12 for the phone, like the reference. */
.bento {
  display: grid;
  gap: clamp(14px, 1.4vw, 18px);
}
@media (min-width: 720px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "b b"
      "s g"
      "h h";
  }
  .tile--bday { grid-area: b; }
  .tile--start { grid-area: s; }
  .tile--send { grid-area: g; }
  .bento__col { grid-area: h; }
}
/* The right column: happy hours stretches, the offers tile takes what it needs. */
.bento__col {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 18px);
  min-width: 0;
}
.bento__col .tile--happy {
  flex: 1;
}
@media (min-width: 1000px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "b b b b b b b b h h h h"
      "s s s s g g g g h h h h";
  }
}
.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;
}
.tile__text {
  max-width: 34em;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
/* Icon and title on one line; the title may wrap beside the icon. */
.tile__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tile__head h3 {
  max-width: none;
}
.tile__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 1px 0 rgba(0, 10, 47, 0.05);
}
.tile__icon .icon {
  width: 22px;
  height: 22px;
}
/* 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;
}

/* Birthday: the blue field, drifting confetti and the cake from the app, floating. */
.tile--bday {
  justify-content: center;
  min-height: clamp(220px, 18vw, 264px);
  background: linear-gradient(118deg, var(--blue) 0%, var(--blue-ink) 100%);
  color: var(--white);
}
.tile--bday .tile__copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  max-width: 30em;
}
.tile--bday h3 {
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
}
.tile--bday .tile__text {
  color: var(--mist-4);
}
.tile__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sky);
}
.tile__eyebrow .icon {
  width: 15px;
  height: 15px;
}
.tile__confetti {
  position: absolute;
  right: -3%;
  top: -12%;
  width: 56%;
  max-width: 520px;
  opacity: 0.9;
  pointer-events: none;
  animation: extras-drift 16s ease-in-out infinite alternate;
}
.tile__cake {
  position: absolute;
  right: 6%;
  bottom: -14%;
  width: clamp(150px, 24%, 240px);
  pointer-events: none;
  animation: extras-float 4.5s ease-in-out infinite;
}
.tile__cake::before {
  /* Its shadow on the field (a filter on the image would paint a box in Chrome). */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 9%;
  height: 12%;
  border-radius: 50%;
  background: rgba(0, 10, 47, 0.55);
  filter: blur(22px);
}
.tile__cake img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-4deg);
  transform-origin: 50% 90%;
  transition: transform 0.9s var(--ease-out);
}
.tile--bday:hover .tile__cake img {
  transform: rotate(2deg) scale(1.03);
}
@media (min-width: 720px) {
  .tile--bday .tile__copy {
    max-width: min(60%, 30em);
  }
}
@media (max-width: 719px) {
  .tile--bday {
    padding-bottom: 50%;
  }
  .tile__cake {
    right: 6%;
    bottom: -8%;
    width: 50%;
  }
  .tile__confetti {
    top: auto;
    bottom: 0;
    width: 90%;
  }
}

/* Head start: on --sky, the app's "pick your partner spots" cards. */
.tile--start {
  background: var(--sky);
  color: var(--night);
}
.tile--start .tile__text {
  color: var(--blue-ink);
}
.picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
.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);
}
.pick__photo {
  position: relative;
  aspect-ratio: 1 / 0.66;
  border-radius: 12px;
  overflow: hidden;
  background: var(--mist-3);
}
.pick__photo > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pick__logo {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 40%;
  max-width: 52px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 3px solid var(--white);
  background: var(--white);
  object-fit: cover;
  box-shadow: 0 8px 18px -8px rgba(0, 10, 47, 0.5);
}
.pick__name {
  margin-top: 4px;
  font-size: 0.6875rem;
  line-height: 1.3;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick__amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
}
.pick__label {
  font-size: 0.6875rem;
  font-weight: 600;
}
.pick__btn {
  position: relative;
  display: grid;
  height: 32px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--mist-4);
  color: var(--blue);
  font-size: 0.8125rem;
  font-weight: 600;
  overflow: hidden;
}
.pick__btn > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pick__btn > span:last-child {
  opacity: 0;
  transform: translateY(10px);
}
.pick__btn .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}
/* 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;
}
.extras.is-in .pick__btn {
  animation: extras-pick-on 0.45s ease calc(1.15s + var(--p, 0s)) forwards;
}
.extras.is-in .pick__btn > span:first-child {
  animation: extras-fade-out 0.3s ease calc(1.15s + var(--p, 0s)) forwards;
}
.extras.is-in .pick__btn > span:last-child {
  animation: extras-fade-in 0.5s var(--ease-out) calc(1.25s + var(--p, 0s)) forwards;
}

/* Send: the night tile; what the friend gets, then the message that came with it. */
.tile--send {
  background: var(--night);
  background-image: radial-gradient(110% 80% at 92% 0%, var(--blue-ink) 0%, rgba(0, 20, 94, 0) 66%);
  color: var(--white);
}
.tile--send .tile__text {
  color: var(--mist-4);
}
.gift {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.gift__card {
  --logo-mark: var(--white);
  padding: 14px 18px 16px;
  border-radius: 20px;
  background: var(--blue);
  color: var(--white);
  box-shadow: 0 28px 56px -28px rgba(0, 51, 235, 0.75);
}
.gift__logo {
  display: block;
  width: 78px;
  height: 19px;
  margin: 0 auto 12px;
  color: var(--white);
}
.gift__row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.gift__coin {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--sky);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16), 0 12px 24px -10px rgba(0, 10, 47, 0.6);
}
.gift__place {
  font-size: 0.875rem;
  color: var(--mist-4);
}
.gift__amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.gift__bubble {
  position: relative;
  display: grid;
  align-items: center;
  padding: 11px 14px;
  border-radius: 18px 18px 18px 6px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.45;
  transform-origin: 0 100%;
}
.gift__bubble > * {
  grid-area: 1 / 1;
}
.gift__typing {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  height: 22px;
}
.gift__typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: extras-typing 1s ease-in-out infinite;
}
.gift__typing i:nth-child(2) { animation-delay: 0.15s; }
.gift__typing i:nth-child(3) { animation-delay: 0.3s; }
.gift__msg {
  opacity: 0;
  transform: translateY(6px);
}
/* The card lands, the friend starts typing, the message arrives. */
.js .gift__card,
.js .gift__bubble {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.8s var(--ease-out);
}
.js .gift__bubble {
  transform: translateY(10px) scale(0.94);
}
.js .extras.is-in .gift__card {
  opacity: 1;
  transform: none;
  transition-delay: 0.5s;
}
.js .extras.is-in .gift__bubble {
  opacity: 1;
  transform: none;
  transition-delay: 1.3s;
}
.extras.is-in .gift__typing {
  animation: extras-fade-out 0.3s ease 2.9s forwards;
}
.extras.is-in .gift__msg {
  animation: extras-fade-in 0.5s var(--ease-out) 3s forwards;
}

/* Happy hours: white, with the Offers tab in the iPhone frame rising from the bottom edge. */
.tile--happy {
  padding-bottom: 0;
}
/* On the white section these two sit on mist, with white icon discs. */
.tile--happy,
.tile--offers {
  background: var(--mist-3);
}
.tile--happy .tile__icon,
.tile--offers .tile__icon {
  background: var(--white);
}
.ph__recent .ph__card {
  border-color: var(--mist-3);
}
.tile--offers .tile__icon .icon {
  width: 26px;
  height: 26px;
}
.offers-phone {
  /* The box is only as tall as the screen down to the end of "Live Happy Hours"
     (measured: 1.2023 x the phone width; the mock scales with the screen, so the ratio
     holds). The tile clips the rest. */
  --phone-w: min(92%, 290px);
  position: relative;
  width: var(--phone-w);
  aspect-ratio: 880 / 1058;
  margin: 28px auto 0;
  flex: none;
}
.offers-phone__rise {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 880 / 1796;
}
.offers-phone__rise::before {
  content: "";
  position: absolute;
  inset: 3% 6%;
  border-radius: 18% / 8%;
  box-shadow: 0 30px 70px rgba(0, 10, 47, 0.28);
}
.offers-phone__frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.offers-phone__screen {
  position: absolute;
  left: 4.521%;
  top: 1.895%;
  width: 90.958%;
  height: 96.239%;
  z-index: 1;
  border-radius: 12.75% / 5.907%;
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
  container-type: inline-size;
}
.js .offers-phone__rise {
  opacity: 0;
  transition: opacity 0.9s ease 0.6s;
}
.js .extras.is-in .offers-phone__rise {
  opacity: 1;
}
@media (min-width: 1000px) {
  /* Tall column: the phone hugs the tile's bottom edge, whatever the copy's height. */
  .offers-phone {
    margin: auto auto 0;
    padding-top: 28px;
  }
}
@media (min-width: 720px) and (max-width: 999px) {
  /* Full-width row: the copy keeps the left half, the phone stands on the right. */
  .tile--happy {
    min-height: 440px;
  }
  .tile--happy h3,
  .tile--happy .tile__text {
    max-width: 46%;
  }
  .offers-phone {
    --phone-w: 320px;
    position: absolute;
    right: 6%;
    bottom: 0;
    margin: 0;
  }
}

/* The Offers tab, drawn in HTML and sized from the screen width (1em is about 12px on a 360px phone). */
.ph {
  --pad: 1.1em;
  padding: 0 var(--pad);
  font-size: 3.7cqi;
  line-height: 1.3;
}
.ph__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.2em;
  padding: 0 0.5em;
  font-size: 1em;
  font-weight: 600;
}
.ph__island {
  width: 8em;
  height: 2.3em;
  border-radius: 999px;
  background: var(--night);
}
.ph__status {
  display: inline-flex;
  gap: 0.25em;
  align-items: flex-end;
}
.ph__status i {
  width: 0.55em;
  height: 0.9em;
  border-radius: 0.15em;
  background: var(--ink);
}
.ph__status i:nth-child(2) { height: 0.7em; }
.ph__status i:nth-child(3) { width: 1.6em; height: 0.8em; border-radius: 0.25em; }
.ph__title {
  margin: 1.3em 0.5em 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.1em;
  letter-spacing: -0.02em;
  line-height: 1;
}
.ph__chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
  margin: 1.3em 0.2em 0;
  text-align: center;
  font-size: 0.8em;
  font-weight: 500;
  line-height: 1.2;
}
.ph__chips i {
  display: grid;
  place-items: center;
  width: 4.8em;
  height: 4.8em;
  margin: 0 auto 0.55em;
  border-radius: 50%;
  background: var(--mist-3);
}
.ph__chips img {
  width: 2.9em;
  height: 2.9em;
  object-fit: contain;
}
.ph__chips svg {
  width: 2.5em;
  height: 2.5em;
  color: var(--blue);
}
.ph__live {
  margin: 1.5em calc(-1 * var(--pad)) 0;
  padding: 1.1em var(--pad) 1.3em;
  background: var(--blue);
  background-image: radial-gradient(55% 90% at 100% 0%, rgba(163, 183, 255, 0.35) 0%, rgba(163, 183, 255, 0) 70%);
  color: var(--white);
}
.ph__live-head,
.ph__recent-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.15em;
  font-weight: 600;
}
.ph__live-head span:last-child,
.ph__recent-head span:last-child {
  font-size: 0.78em;
  font-weight: 500;
}
.ph__recent-head span:last-child {
  color: var(--blue);
}
.ph__dot {
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-right: 0.55em;
  border-radius: 50%;
  background: var(--live);
  vertical-align: -0.05em;
  animation: extras-live 1.8s ease-out infinite;
}
.ph__strip {
  margin-top: 1em;
  overflow: hidden;
}
.ph__track {
  display: flex;
  width: max-content;
  animation: extras-marquee 26s linear infinite;
}
.ph__live:hover .ph__track {
  animation-play-state: paused;
}
.ph__card {
  display: grid;
  gap: 0.4em;
  align-content: start;
  padding: 0.55em 0.55em 0.75em;
  border-radius: 1.1em;
  background: var(--white);
  color: var(--ink);
}
.ph__track .ph__card {
  flex: none;
  width: 9.8em;
  margin-right: 0.7em;
}
.ph__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0.7em;
  object-fit: cover;
}
.ph__place {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.78em;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ph__place img {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  object-fit: cover;
}
.ph__offer {
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.25;
}
.ph__tag {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: 0.1em;
  padding: 0.3em 0.65em 0.3em 0.45em;
  border-radius: 999px;
  background: var(--mist-3);
  color: var(--blue);
  font-size: 0.72em;
  font-weight: 600;
  white-space: nowrap;
}
.ph__tag svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ph__recent-head {
  margin: 1.5em 0 0.9em;
}
.ph__recent {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7em;
}
.ph__recent .ph__card {
  border: 1px solid var(--mist-4);
}

@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;
  }
  .ph__track,
  .ph__dot,
  .tile__cake,
  .tile__confetti {
    animation: none !important;
  }
}

/* ---------- A day of local ---------- */

/* The head is the top of the first sheet: same mist as the morning scene, rounded
   corners, a short white gap above. Every later sheet then carries a small eyebrow,
   "One good day" plus four dots, so the thread travels with the sheets (chosen over a
   pinned head and a binder-tabs variant, 2026-09-18). */
.day__intro {
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: clamp(48px, 6vw, 80px);
  background: var(--mist-3);
  border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0;
}
.day__intro .section__head {
  margin: 0;
}
.scene--morning {
  padding-top: clamp(24px, 3vw, 40px);
}
.scene__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.scene--morning .scene__eyebrow {
  display: none; /* the head itself is right above */
}
.scene__dots {
  display: inline-flex;
  gap: 6px;
}
.scene__dots b {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
}
.scene--morning .scene__dots b:nth-child(1),
.scene--noon .scene__dots b:nth-child(2),
.scene--afternoon .scene__dots b:nth-child(3),
.scene--night .scene__dots b:nth-child(4) {
  opacity: 1;
  background: var(--accent);
}
.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--noon {
  --bg: var(--sky);
  --fg: var(--night);
  --fg-2: var(--blue-ink);
  --accent: var(--blue);
  --name: var(--blue);
}
.scene--afternoon {
  --bg: var(--blue);
  --fg: var(--white);
  --fg-2: var(--mist-4);
  --accent: var(--white);
  --name: var(--sky);
}
.scene--night {
  --bg: var(--night);
  --fg: var(--white);
  --fg-2: var(--mist-4);
  --accent: var(--sky);
  --name: var(--sky);
  background-image: radial-gradient(110% 80% at 88% 0%, var(--blue-ink) 0%, rgba(0, 20, 94, 0) 68%);
}
.scene--night .scene__shot > img {
  box-shadow: 0 40px 72px -28px rgba(0, 0, 0, 0.6), 0 12px 28px -12px rgba(0, 0, 0, 0.45);
}
.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);
}
.scene__grid {
  display: grid;
  gap: 40px;
}
.scene__time {
  display: flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(5.5rem, 15vw, 13rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.scene__time small {
  margin-left: 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2.625rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
}
.scene--noon .scene__time small {
  color: var(--blue-ink);
}
.scene__copy h3 {
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 15em;
}
.scene__copy h3 em {
  font-style: normal;
  color: var(--name);
}
.scene__copy h3 + p {
  margin-top: 18px;
  max-width: 30em;
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  color: var(--fg-2);
}
.scene__shot {
  position: relative;
  width: min(100% - 28px, 500px);
  margin-left: 28px;
}
.scene__shot > img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-tile);
  box-shadow: var(--shadow-tile);
  background: var(--mist-4);
}
/* The notification chip carries the place's real logo, not the Twism mark. */
.scene__shot .chip__avatar {
  width: 40px;
  height: 40px;
}
.scene__shot .chip {
  position: absolute;
  left: -28px;
  bottom: clamp(24px, 4vw, 44px);
}
.js .scene__shot .chip {
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  transform-origin: 0 100%;
  transition: opacity 0.4s ease, transform 0.8s var(--ease-out);
}
.js .scene.is-in .chip {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}
.scene__note {
  margin-top: 32px;
  font-size: 0.875rem;
  color: var(--fg-2);
}
@media (min-width: 900px) {
  .scene__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
  }
  .scene__shot {
    justify-self: end;
    width: min(100% - 40px, 500px);
    margin-left: 40px;
  }
  .scene__shot .chip {
    left: -40px;
  }
}
/* 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;
  }
}

/* ---------- Places directory ---------- */

/* The mosaic: the feature tile (2x2), the wide tile (2x1) and two squares under it,
   four columns by two rows on desktop and two columns on phones. Each tile is a
   button: the featured item photo, the logo, the name and the item. It opens the
   place's reward menu. The cells are square (the user chose this height over a
   shorter one that fit a single screen, 2026-09-18). */
.section--places {
  padding-block: clamp(56px, 6.8vw, 96px);
}
.mosaic-wrap {
  container-type: inline-size;
  margin-top: clamp(24px, 3vw, 40px);
}
.mosaic {
  --gap: clamp(10px, 1.4vw, 18px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
}
.place {
  aspect-ratio: 1;
}
.place--feature,
.place--wide {
  grid-column: span 2;
}
.place--wide {
  aspect-ratio: 2 / 1;
}
.place__open {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-tile);
  overflow: hidden;
  isolation: isolate;
  background: var(--blue-ink);
  color: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.place__open:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-tile);
}
.place__open:focus-visible {
  outline-offset: 4px;
}
.place__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.9s var(--ease-out);
}
.place__open:hover .place__photo {
  transform: scale(1.04);
}
.place__badge {
  position: absolute;
  top: clamp(12px, 1.4vw, 18px);
  left: clamp(12px, 1.4vw, 18px);
  width: clamp(48px, 5vw, 64px);
  filter: drop-shadow(0 8px 12px rgba(0, 10, 47, 0.22));
}
/* The arrow chip says "this opens": white at rest, blue when the tile is hovered. No shadow: white on the photo is lift enough. */
.place__go {
  position: absolute;
  top: clamp(12px, 1.4vw, 18px);
  right: clamp(12px, 1.4vw, 18px);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-ink);
  transition: background-color 0.25s, color 0.25s;
}
.place__go .icon {
  transform: rotate(-45deg);
  transition: transform 0.35s var(--ease-out);
}
.place__open:hover .place__go {
  background: var(--blue);
  color: var(--white);
}
.place__open:hover .place__go .icon {
  transform: rotate(-45deg) translateX(3px);
}
/* The scrim belongs to the label, so it covers the text however the item title wraps. */
.place__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  padding: 56px clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 22px);
  background: linear-gradient(to bottom, rgba(0, 10, 47, 0) 0, rgba(0, 10, 47, 0.4) 26px, rgba(0, 10, 47, 0.78) 56px, rgba(0, 10, 47, 0.9) 100%);
}
.place__label strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
}
.place__item {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 5px;
  font-size: clamp(0.75rem, 0.95vw, 0.875rem);
  line-height: 1.35;
  color: var(--mist-4);
}
@media (min-width: 900px) {
  .mosaic {
    --col: calc((100cqw - 3 * var(--gap)) / 4);
    /* Square cells: the small tiles are squares, the wide tile 2:1, the feature 2x2. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: var(--col);
  }
  .place,
  .place--wide {
    aspect-ratio: auto;
  }
  .place--feature {
    grid-row: span 2;
  }
  .place--feature .place__label strong {
    font-size: clamp(1.75rem, 2.6vw, 2.375rem);
  }
  .place--feature .place__item {
    font-size: clamp(0.875rem, 1.05vw, 1rem);
  }
  .place--feature .place__badge {
    width: clamp(72px, 6.6vw, 96px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .place__open,
  .place__photo,
  .place__go .icon {
    transition: none;
  }
  .place__open:hover {
    transform: none;
  }
  .place__open:hover .place__photo {
    transform: none;
  }
}

/* ---------- 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;
}
.menu__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mist-3);
  color: var(--blue-ink);
  cursor: pointer;
  transition: background-color 0.2s;
}
.menu__close:hover {
  background: var(--mist-4);
}
.menu__close .icon {
  width: 20px;
  height: 20px;
}
.menu__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 16px);
  padding-right: 48px;
}
.menu__logo {
  flex: none;
  width: clamp(48px, 5vw, 60px);
  filter: drop-shadow(0 6px 10px rgba(0, 10, 47, 0.16));
}
.menu__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.menu__kind {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}
/* A reward value: the coin mark and the whole number. */
/* A reward value: the place's round logo and the whole number. */
.reward-value {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--blue);
  white-space: nowrap;
}
.reward-value__logo {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  border-radius: 50%;
}

/* 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__stage {
  position: relative;
  width: min(100% - 64px, calc((100dvh - 376px) * 0.8), 400px);
  aspect-ratio: 4 / 5;
}
.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__photo {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-tile);
  overflow: hidden;
  background: var(--blue-ink);
  box-shadow: var(--shadow-tile);
}
.deck-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
/* The value rides the top of the photo on a white pill. */
.deck-card__value {
  position: absolute;
  z-index: 1;
  top: clamp(14px, 1.8vw, 20px);
  left: clamp(14px, 1.8vw, 20px);
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: var(--white);
  font-size: 1.25rem;
}
.deck-card__value .reward-value__logo {
  width: 30px;
  height: 30px;
}
/* "Coins to unlock" follows the number, quieter and in the text face. */
.deck-card__value .reward-value__unit {
  font-family: var(--font-text);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--blue-ink);
}
/* The scrim belongs to the label (the item title alone; the place is named in the
   dialog's head), so it covers the text however the title wraps. */
.deck-card__label {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 72px clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 24px);
  border-radius: 0 0 var(--radius-tile) var(--radius-tile);
  background: linear-gradient(to bottom, rgba(0, 10, 47, 0) 0, rgba(0, 10, 47, 0.4) 34px, rgba(0, 10, 47, 0.78) 72px, rgba(0, 10, 47, 0.9) 100%);
  color: var(--white);
}
.deck-card__label strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.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;
}
.deck__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(16px, 2vw, 22px);
}
.deck__btn {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid var(--mist-4);
  background: var(--white);
  color: var(--blue-ink);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.deck__btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.deck__btn .icon {
  width: 20px;
  height: 20px;
}
.deck__btn--prev .icon {
  transform: scaleX(-1);
}
.deck__count {
  margin: 0 0 0 8px;
  font-size: 0.875rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.menu__foot {
  margin-top: clamp(14px, 1.8vw, 20px);
  padding-top: clamp(10px, 1.2vw, 14px);
  border-top: 1px solid var(--mist-4);
}
.menu__foot .fineprint {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ink-3);
}
@media (max-width: 639px) {
  .menu {
    width: calc(100% - 16px);
  }
  .deck__stage {
    width: min(100% - 48px, calc((100dvh - 376px) * 0.8), 400px);
  }
  .deck-card__value {
    font-size: 1.125rem;
    padding: 5px 12px 5px 7px;
  }
  .deck-card__value .reward-value__logo {
    width: 26px;
    height: 26px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu[open],
  .menu[open]::backdrop {
    animation: none;
  }
  .deck-card {
    transition: none;
  }
}

.invite {
  display: grid;
  gap: 24px;
  align-items: center;
  margin-top: clamp(10px, 1.4vw, 18px);
  padding: clamp(24px, 2.6vw, 36px) clamp(28px, 3.4vw, 48px);
  border-radius: var(--radius-tile);
  background: var(--night);
  color: var(--white);
}
.invite p {
  margin-top: 8px;
  color: var(--mist-4);
  max-width: 48em;
}
@media (min-width: 900px) {
  .invite {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ---------- 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__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
.get .lede {
  margin-top: 24px;
  color: var(--mist-4);
}
.get__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(28px, 3vw, 40px);
}
.qr {
  display: none;
}
@media (min-width: 900px) {
  .get__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 64px;
  }
  .qr {
    display: grid;
    justify-items: center;
    gap: 18px;
    padding: 28px 28px 22px;
    border-radius: 36px;
    background: var(--white);
    color: var(--night);
    box-shadow: 0 40px 72px -32px rgba(0, 10, 47, 0.6);
    transform: rotate(3deg);
  }
  .qr img {
    width: 184px;
    height: 184px;
  }
  .qr p {
    font-weight: 600;
    font-size: 0.9375rem;
  }
}

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

.footer {
  background: var(--night);
  color: var(--white);
}
.footer__biz {
  display: grid;
  gap: 28px;
  align-items: end;
  padding-block: clamp(64px, 8vw, 112px);
  border-bottom: 1px solid rgba(163, 183, 255, 0.2);
}
.footer__biz p {
  margin-top: 16px;
  color: var(--mist-4);
  max-width: 32em;
}
.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__biz {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .footer__main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  }
  .footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ==========================================================================
   /for-business
   Same tokens and components as the consumer home; the page spends more time
   on navy. Sections in order: hero with the week-at-a-glance sheet, logo marquee,
   value rows, the data chain on night, the day scenes, the directory with the
   neighborhood search, the redline, the launch steps with the handset, FAQ, CTA.
   ========================================================================== */

/* Hero: the copy column is wider than on the consumer page; the sheet is lighter than the phone. */
.hero--biz .hero__title {
  font-size: clamp(2.4rem, 9vw, 4.5rem);
}
@media (min-width: 900px) {
  .hero--biz .hero__grid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
    min-height: min(720px, calc(100svh - var(--nav-h) - 132px));
  }
}

.glance__ai {
  --logo-mark: var(--white);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  align-items: start;
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--blue);
  color: var(--white);
}
.glance__mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.16);
}
.glance__mark svg {
  width: 20px;
  height: 20px;
}
.glance__idea {
  font-size: 0.9375rem;
  line-height: 1.35;
}
.glance__plan {
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--mist-4);
}
.glance__go {
  grid-column: 2;
  justify-self: start;
  margin-top: 6px;
}
.glance__done {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
}
.glance__done[hidden] {
  display: none;
}
.glance__done .icon {
  width: 20px;
  height: 20px;
}
.hero__ai.is-done .glance__done {
  animation: pop 0.7s var(--ease-out);
}

/* 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);
}

/* Revenue growth: four levers in a two-by-two of soft cards, numbered like the data chain. */
.levers {
  display: grid;
  gap: 16px;
  margin-top: clamp(40px, 5vw, 72px);
}
.lever {
  display: grid;
  gap: 12px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: clamp(20px, 2.4vw, 28px);
  background: var(--mist-2);
}
.lever__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
}
.lever h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lever p {
  max-width: 30em;
  color: var(--ink-2);
}
.lever--lead {
  align-items: center;
}
.lever__body {
  display: grid;
  gap: 12px;
}
.lever__art {
  width: min(100%, 240px);
  height: auto;
  justify-self: center;
  border-radius: 24px;
}
@media (min-width: 760px) {
  .levers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .lever--lead {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 320px);
    gap: clamp(24px, 4vw, 56px);
  }
  .lever__art {
    width: 100%;
    justify-self: end;
  }
}
@media (min-width: 760px) and (max-width: 999px) {
  .lever:last-child {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1000px) {
  .levers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 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);
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: clamp(36px, 4.6vw, 64px) 0 0;
  padding: 0;
  list-style: none;
}
.proof__card {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: clamp(18px, 2vw, 28px);
  background: var(--navy);
  isolation: isolate;
}
.proof__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.proof__flags {
  top: 0;
  height: auto;
  animation: proof-pan 22s ease-in-out infinite alternate;
}
@keyframes proof-pan {
  to {
    transform: translateY(-44%);
  }
}
.proof__card::after {
  content: "";
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(180deg, rgba(0, 10, 47, 0) 0%, rgba(0, 10, 47, 0.92) 70%);
}
.proof__stat {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: clamp(14px, 2vw, 24px);
}
.proof__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 3.8vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.proof__label {
  font-size: clamp(0.8125rem, 1.1vw, 0.9375rem);
  font-weight: 500;
  color: var(--mist-4);
}
@media (min-width: 900px) {
  .proof__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .proof__flags {
    animation: none;
  }
}

.magic {
  padding-block: clamp(64px, 8vw, 120px);
  text-align: center;
}
.magic__head {
  max-width: 760px;
  margin-inline: auto;
}
.magic__head .lede {
  margin-inline: auto;
}
.magic__form {
  position: relative;
  max-width: 640px;
  margin: clamp(28px, 3.4vw, 44px) auto 0;
  text-align: left;
}
.magic__input {
  width: 100%;
  min-height: 64px;
  padding: 0 76px 0 22px;
  border: 2px solid var(--mist-4);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  outline: none;
  box-shadow: 0 0 0 6px var(--mist-2);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.magic__input:focus {
  border-color: var(--sky);
  box-shadow: 0 0 0 6px var(--mist-3);
}
.magic__hint {
  position: absolute;
  top: 32px;
  right: 80px;
  left: 24px;
  transform: translateY(-50%);
  overflow: hidden;
  font-size: 1.0625rem;
  color: var(--ink-3);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity 0.15s;
}
.magic__hint b {
  font-weight: 500;
  color: var(--blue);
}
.magic__input:not(:placeholder-shown) ~ .magic__hint {
  opacity: 0;
}
.magic__orb {
  position: absolute;
  top: 32px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mist-3), var(--sky));
  color: var(--blue);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform 0.3s var(--ease-out);
}
.magic__orb .icon {
  width: 22px;
  height: 22px;
}
.magic__orb:hover {
  transform: translateY(-50%) scale(1.06);
}
.magic__orb:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.is-busy .magic__orb .icon {
  animation: magic-twinkle 0.9s ease-in-out infinite;
}
@keyframes magic-twinkle {
  50% {
    transform: scale(0.75) rotate(20deg);
    opacity: 0.55;
  }
}
.magic__drop {
  margin-top: 8px;
}
.magic__status {
  min-height: 1.4em;
  margin: 0;
  padding-left: 24px;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.magic__list {
  display: grid;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.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);
}
.magic__none {
  margin-top: 8px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--mist-2);
}
.magic__none p {
  margin: 0 0 14px;
  color: var(--ink-2);
}
.magic__none b {
  color: var(--ink);
}
.magic__tags {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 10px;
  margin: clamp(22px, 2.8vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}
.magic__tag {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--mist-4);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  opacity: 0;
  translate: 0 8px;
  scale: 0.97;
  transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out), scale 0.7s var(--ease-out);
}
.magic__tag.is-on,
html:not(.js) .magic__tag:nth-child(odd) {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}
.magic__tag[data-tag-col="1"] {
  grid-row: 1;
}
.magic__tag[data-tag-col="2"] {
  grid-row: 2;
}
.magic__tag[data-tag-col="3"] {
  grid-row: 3;
}
/* The bubbles carry the current twism.com's own chip colours and icons (the user's call,
   2026-09-23): the one place this site steps outside its palette. */
.magic__tag-ico {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.magic__tag-ico svg {
  width: 16px;
  height: 16px;
}
.magic__tag-ico--reward {
  background: #fff2eb;
}
.magic__tag-ico--ai {
  background: #f1fde0;
}
.magic__tag-ico--pay,
.magic__tag-ico--data {
  background: #f5ecfe;
}
.magic__tag-ico--found {
  background: #ebf9ff;
}
.magic__tag-ico--back {
  background: #fffbd6;
}
@media (min-width: 600px) {
  .magic__tags {
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    column-gap: 12px;
  }
  .magic__tag[data-tag-col="1"] {
    grid-column: 1;
    grid-row: 1;
  }
  .magic__tag[data-tag-col="2"] {
    grid-column: 2;
    grid-row: 1;
  }
  .magic__tag[data-tag-col="3"] {
    grid-column: 3;
    grid-row: 1;
  }
}
.magic__fine {
  margin-top: 22px;
}

/* The hero object: a real portal screen in a window on a tilted sky slab, with the
   suggestion card floating over its lower-left corner. */
.hero__shot {
  position: relative;
  isolation: isolate;
  width: min(100%, 560px);
  margin: 28px auto 0;
  padding: 14px 0 68px;
}
.hero__shot::before {
  content: "";
  position: absolute;
  inset: 14px -8px 68px 10px;
  z-index: -1;
  border-radius: var(--radius-tile);
  background: var(--sky);
  transform: rotate(3deg);
}
.shot {
  position: relative;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--mist-4);
  border-radius: var(--radius-tile);
  background: var(--white);
  box-shadow: var(--shadow-tile);
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
.shot__cap {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--mist-4);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-2);
}
.shot__cap b {
  font-weight: 600;
  color: var(--ink);
}
.hero__ai {
  position: absolute;
  left: -12px;
  bottom: 16px;
  width: min(100% - 24px, 372px);
  margin: 0;
  box-shadow: var(--shadow-tile);
}
@media (min-width: 900px) {
  .hero__shot {
    margin: 0 0 0 auto;
  }
}
@media (max-width: 479px) {
  .hero__ai {
    left: 0;
  }
}

/* Your portal: two real screens side by side and the list of what is in there. */
.portal__grid {
  display: grid;
  gap: 20px;
  margin-top: clamp(36px, 4.6vw, 64px);
}
.portal__more {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-tile);
  background: var(--white);
  border: 1px solid var(--mist-4);
}
.portal__more-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.portal__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.portal__list li {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--mist-3);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--blue-ink);
}
.portal__more .btn {
  justify-self: start;
  margin-top: 6px;
}
@media (min-width: 900px) {
  .portal__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .portal__shot--reports {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
  }
  .portal__shot--reviews {
    grid-column: 8 / 13;
  }
  .portal__more {
    grid-column: 8 / 13;
  }
}

/* The docked copy of the field, in the nav. Shown only while the section is above the
   fold and only on wide screens; the nav then keeps its place instead of stepping aside. */
.nav__dock {
  position: relative;
  display: none;
  flex: 1 1 auto;
  max-width: 540px;
  margin-inline: auto;
}
.nav__dock .magic__input {
  min-height: 48px;
  padding: 0 56px 0 18px;
  font-size: 0.9375rem;
  box-shadow: none;
}
.nav__dock .magic__input:focus {
  box-shadow: 0 0 0 4px var(--mist-3);
}
.nav__dock .magic__hint {
  top: 24px;
  right: 56px;
  left: 19px;
  font-size: 0.9375rem;
}
.nav__dock .magic__orb {
  top: 24px;
  right: 6px;
  width: 36px;
  height: 36px;
}
.nav__dock .magic__orb .icon {
  width: 18px;
  height: 18px;
}
.nav__dock .magic__drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 5;
  margin: 0;
  padding: 8px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: var(--shadow-tile);
}
.nav__dock .magic__status {
  padding: 4px 14px 0;
}
.nav__dock .magic__none {
  margin: 0;
}
@media (min-width: 1000px) {
  .nav--dock .nav__links {
    display: none;
  }
  .nav--dock .nav__dock {
    display: block;
  }
  .nav.nav--dock.is-hidden {
    transform: none;
  }
}

/* Trusted by: the brand strip of the current site, five monochrome logos in a row. */
.brands {
  padding-block: clamp(48px, 6vw, 88px);
  text-align: center;
}
.brands__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  word-spacing: 0.06em;
  color: var(--blue-ink);
  text-wrap: balance;
}
.brands__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 2.6vw, 36px);
  margin: clamp(20px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}
.brands__row img {
  display: block;
  width: clamp(104px, 14vw, 160px);
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .is-busy .magic__orb .icon {
    animation: none;
  }
  .magic__tag {
    transition: none;
  }
}

/* Launch in minutes: the head on the left, three counted steps on the right. */
.start__grid {
  display: grid;
  gap: 40px;
}
.start__head .lede {
  margin-top: 20px;
}
.start__cta {
  margin-top: 28px;
}
.steps--count {
  counter-reset: step;
  margin-top: 0;
}
.steps--count li {
  counter-increment: step;
  display: grid;
  grid-template-columns: clamp(52px, 6vw, 84px) 1fr;
  gap: 8px 20px;
  padding: 28px 0;
  border-top: 1px solid var(--mist-4);
}
.steps--count li:last-child {
  border-bottom: 1px solid var(--mist-4);
}
.steps--count li::before {
  content: "0" counter(step);
  grid-row: span 2;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--sky);
}
.steps--count 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;
}
.steps--count p {
  grid-column: 2;
  max-width: 30em;
  color: var(--ink-2);
}
@media (min-width: 900px) {
  .start__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 72px;
    align-items: start;
  }
  .start__head {
    position: sticky;
    top: 112px;
  }
  .steps--count {
    margin-top: 8px;
  }
}
/* 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);
}
.chain {
  display: grid;
  gap: 0;
  margin-top: clamp(40px, 5vw, 72px);
}
.chain__step {
  display: grid;
  gap: 12px;
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-top: 1px solid rgba(163, 183, 255, 0.2);
}
.chain__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 4.2vw, 3.75rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--sky);
}
.chain__step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.chain__step > p {
  max-width: 30em;
  color: var(--mist-4);
}
.chain__step > :last-child {
  margin-top: 12px;
}
/* 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);
}
.pos__names {
  display: grid;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
}
.pos__online {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(163, 183, 255, 0.2);
  font-size: 0.875rem;
  color: var(--mist-4);
}
/* 02: what the owner gets to see, as plain sentences with a sky mark. */
.sees li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-top: 1px solid rgba(163, 183, 255, 0.2);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.sees li:last-child {
  border-bottom: 1px solid rgba(163, 183, 255, 0.2);
}
.sees li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.05em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sky);
}
/* 03: the Twism AI card on navy takes the night tile shadow. */
.chain .ai-card {
  width: 100%;
  box-shadow: 0 40px 72px -28px rgba(0, 0, 0, 0.6), 0 12px 28px -12px rgba(0, 0, 0, 0.45);
}
.data__note {
  margin-top: clamp(20px, 2.4vw, 28px);
  font-size: 0.875rem;
  color: var(--mist-4);
}
@media (min-width: 1000px) {
  .chain {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3.4vw, 48px);
  }
  .chain__step {
    grid-template-rows: auto auto auto 1fr;
    padding-right: 0;
  }
  .chain__step > :last-child {
    align-self: end;
  }
}

/* Twism AI */
.ai__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}
.ai__grid .lede {
  margin-top: 20px;
}
.ai__grid .btn {
  margin-top: 32px;
}
.ai-card {
  width: min(100%, 460px);
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: clamp(24px, 2.6vw, 36px);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-tile);
}
.ai-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
.ai-card__head .chip__mark {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}
.ai-card__head .chip__mark svg {
  width: 20px;
  height: 20px;
}
.ai-card__head small {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-2);
}
.ai-card__idea {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}
.ai-card__context {
  margin-top: 12px;
  color: var(--ink-2);
}
.ai-card__plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--mist-3);
  font-size: 0.875rem;
}
.ai-card__plan strong {
  display: block;
  font-size: 0.9375rem;
}
.ai-card__plan span {
  color: var(--ink-2);
}
.ai-card .btn {
  width: 100%;
  margin-top: 16px;
}
.ai-card__done {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--blue);
  color: var(--white);
  font-size: 0.9375rem;
}
.ai-card__done[hidden] {
  display: none;
}
.ai-card__done .icon {
  width: 22px;
  height: 22px;
  margin-top: 1px;
}
.ai-card__done span {
  display: block;
  color: var(--mist-4);
}
.ai-card.is-done .ai-card__done {
  animation: pop 0.7s var(--ease-out);
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
}
@media (min-width: 900px) {
  .ai__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(56px, 8vw, 120px);
  }
  .ai-card {
    justify-self: end;
  }
}
.ph__tag img {
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
}

.get--business .get__grid {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- /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;
}
.magic__field {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
}
.magic__field::before,
.magic__field::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  --magic-angle: 0deg;
  border-radius: inherit;
  background: conic-gradient(from var(--magic-angle), var(--mist-3) 0deg, var(--sky) 60deg, var(--blue) 110deg, var(--sky) 160deg, var(--mist-3) 220deg, var(--mist-3) 360deg);
  pointer-events: none;
}
.magic__field::before {
  opacity: 0.9;
  transition: opacity 0.3s;
}
.magic__field::after {
  inset: -4px;
  filter: blur(14px);
  opacity: 0.45;
}
.magic__field:focus-within::before {
  opacity: 1;
}
.magic__field .magic__input {
  box-shadow: none;
}
.magic__field .magic__input:focus {
  border-color: var(--sky);
  box-shadow: none;
}
.nav__dock .magic__field::before {
  inset: -2px;
}
.nav__dock .magic__field::after {
  inset: -3px;
  filter: blur(9px);
  opacity: 0.3;
}

/* The star: a halo ring that pulses out, and the star itself blinks now and then. */
.magic__orb::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--sky);
  opacity: 0;
  pointer-events: none;
}

/* "feel our AI magic" gets a light sweeping through it. */
.magic__hint b {
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 35%, var(--sky) 48%, var(--mist-3) 52%, var(--sky) 56%, var(--blue) 70%, var(--blue) 100%);
  background-size: 260% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Narrow screens get a hint short enough to keep "feel our AI magic" in view (the long
   one is cut to "Tell us your business name ..." under 600 px, measured). */
.magic__hint--short {
  display: none;
  font-size: 0.9375rem;
}
@media (max-width: 599px) {
  .magic__hint--long {
    display: none;
  }
  .magic__hint--short {
    display: block;
  }
}

/* Cards lift under a real pointer. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .lever:hover,
  .portal__shot:hover,
  .portal__more:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-tile), 0 24px 48px -24px rgba(0, 12, 55, 0.3);
  }
  .proof__card:hover {
    transform: translateY(-4px) scale(1.01);
  }
  .brands__row img {
    opacity: 0.85;
    transition: opacity 0.3s, transform 0.5s var(--ease-out);
  }
  .brands__row img:hover {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* The hero comes in in reading order: line, title, lede, button, note; then the window
     rises, the sky slab tilts in behind it, the AI card lands last and floats a little. */
  .hero--biz .hero__copy > * {
    animation: biz-rise 0.9s var(--ease-out) both;
  }
  .hero--biz .hero__copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero--biz .hero__copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero--biz .hero__copy > :nth-child(4) { animation-delay: 0.24s; }
  .hero--biz .hero__copy > :nth-child(5) { animation-delay: 0.32s; }
  .hero--biz .hero__shot {
    animation: biz-rise 1.1s var(--ease-out) 0.2s both;
  }
  .hero--biz .hero__shot::before {
    animation: biz-slab 1.2s var(--ease-out) 0.35s both;
  }
  .hero--biz .hero__ai {
    animation: biz-card 0.8s var(--ease-out) 0.75s both, biz-float 5s ease-in-out 1.6s infinite alternate;
  }

  /* The field: the ring turns, the glow turns with it and breathes; the halo pulses out of
     the star, the star blinks, the phrase shimmers. Focus speeds the ring up. */
  .magic__field::before {
    animation: magic-spin 7s linear infinite;
  }
  .magic__field::after {
    animation: magic-spin 7s linear infinite, magic-breathe 2.4s ease-in-out infinite alternate;
  }
  .magic__field:focus-within::before,
  .magic__field:focus-within::after {
    animation-duration: 3s, 2.4s;
  }
  .magic__orb::before {
    animation: magic-halo 3s ease-out infinite;
  }
  .magic__orb .icon {
    animation: magic-blink 4.5s ease-in-out infinite;
  }
  .magic__hint b {
    animation: magic-shimmer 3.4s linear infinite;
  }
  .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; }
  .nav--dock .nav__dock {
    animation: biz-drop 0.45s var(--ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-in],
  .js [data-in="stagger"] > * {
    opacity: 1;
    translate: none;
    transition: none;
  }
  .magic__hint b {
    background: none;
    -webkit-text-fill-color: currentColor;
  }
  .magic__field::after {
    opacity: 0.35;
  }
}
@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; }
}

/* ---------- Legal pages (/terms, /privacy, ...) ---------- */
/* The copy is imported verbatim from Webflow (tools/build-legal.py); its structure comes
   as a handful of lg-* classes instead of real lists, so they are styled here. */

.legal-hero {
  background: var(--mist-2);
  padding-block: clamp(56px, 8vw, 112px) clamp(40px, 5vw, 64px);
}
.legal-tabs {
  display: inline-flex;
  gap: 4px;
  margin-top: 32px;
  padding: 4px;
  border-radius: 999px;
  background: var(--white);
  box-shadow: 0 0 0 1px var(--line);
}
.legal-tabs [role="tab"] {
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.legal-tabs [role="tab"]:hover {
  color: var(--blue-ink);
}
.legal-tabs [aria-selected="true"] {
  background: var(--blue);
  color: var(--white);
}
.legal-tabs [aria-selected="true"]:hover {
  color: var(--white);
}
html:not(.js) .legal-tabs {
  display: none;
}
.js .legal-panel:not(.is-active) {
  display: none;
}
html:not(.js) .legal-panel + .legal-panel {
  margin-top: var(--section);
}

.legal-layout {
  display: grid;
  gap: 40px;
  padding-block: clamp(40px, 6vw, 88px) var(--section);
}
.legal-layout > * {
  min-width: 0;
}
.legal-side ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.legal-side a {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--mist-3);
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.legal-side a:hover {
  color: var(--blue-ink);
  background: var(--mist-4);
}
.legal-side a[aria-current="page"] {
  background: var(--blue);
  color: var(--white);
}
@media (min-width: 960px) {
  .legal-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 72px;
  }
  .legal-side {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    align-self: start;
  }
  .legal-side ul {
    flex-direction: column;
    gap: 2px;
  }
  .legal-side a {
    display: block;
    background: none;
    font-size: 0.9375rem;
  }
  .legal-side a:hover {
    background: var(--mist-3);
  }
}

.legal {
  max-width: 72ch;
  color: var(--ink-2);
  overflow-wrap: break-word;
}
.legal > * + * {
  margin-top: 1em;
}
.legal h2 {
  margin-top: 2.2em;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.legal h3 {
  margin-top: 1.8em;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}
.legal a {
  color: var(--blue);
}
.legal b,
.legal strong,
.legal .lg-term {
  font-weight: 600;
  color: var(--ink);
}
.legal .lg-item {
  padding-left: 1.25em;
}
.legal .lg-item > * + * {
  margin-top: 0.5em;
}
.legal .lg-subitem,
.legal .lg-indent {
  padding-left: 2.5em;
}
.legal * + .lg-subitem {
  margin-top: 0.35em;
}
.legal .lg-note {
  font-style: italic;
}
.legal ul {
  padding-left: 1.25em;
  list-style: disc;
}
.legal li + li {
  margin-top: 0.35em;
}
.lg-table {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
}
.lg-table table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.lg-table th,
.lg-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.lg-table th {
  background: var(--mist-3);
  color: var(--ink);
  font-weight: 600;
}
.lg-table tr:last-child td {
  border-bottom: 0;
}
.lg-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 20px;
  padding: 16px 20px;
  border-radius: 16px;
  background: var(--mist-2);
  font-size: 0.9375rem;
}
.legal .lg-facts + .lg-facts {
  margin-top: 10px;
}
.lg-facts dt {
  font-weight: 600;
  color: var(--ink);
}

/* ?fs=1: opened from the apps, text only. */
.is-embed .skip,
.is-embed .nav,
.is-embed .footer,
.is-embed .legal-side,
.is-embed .legal-tabs {
  display: none;
}
.is-embed .legal-hero {
  padding-block: 24px 0;
  background: none;
}
.is-embed .legal-layout {
  display: block;
  padding-block: 24px 48px;
}

/* ---------- Cookie bar ---------- */
/* The consent bar of the current twism.com, in this site's type and buttons: fixed to the bottom,
   white, one row (notice, Manage Settings, Dismiss) that Manage Settings swaps for the
   preferences (about, the four categories with an info tip each, Save). 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 a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.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;
}

/* Notice row */
.cookiebar__notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 48px;
}
.cookiebar__notice p {
  flex: 1 1 400px;
  max-width: 560px;
}
.cookiebar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}
.cookiebar__manage {
  padding: 8px 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
}
.cookiebar__manage:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Preferences */
.cookiebar__prefs {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  justify-content: center;
  gap: 24px 56px;
  width: min(100%, 1040px);
  margin-inline: auto;
}
.cookiebar__notice[hidden],
.cookiebar__prefs[hidden] {
  display: none;
}
.cookiebar__title {
  margin: 0 0 14px;
  font-family: var(--font-text);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--blue-ink);
}
.cookiebar__title--sm {
  font-size: 1rem;
  padding: 0;
}
.cookiebar__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.cookiebar__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--blue-ink);
}
.cookiebar__opt input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--blue);
}
.cookiebar__opt input:disabled {
  opacity: 0.55;
}
.cookiebar__opt label {
  cursor: pointer;
}
.cookiebar__info {
  position: relative;
  display: inline-flex;
}
.cookiebar__info button {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: none;
  color: var(--ink-3);
  font: 600 11px/1 var(--font-text);
  cursor: pointer;
}
.cookiebar__info button:hover,
.cookiebar__info.is-open button {
  color: var(--blue);
}
.cookiebar__info [role="tooltip"] {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  z-index: 1;
  width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--night);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}
.cookiebar__info:hover [role="tooltip"],
.cookiebar__info:focus-within [role="tooltip"],
.cookiebar__info.is-open [role="tooltip"] {
  opacity: 1;
  visibility: visible;
}
.cookiebar__save {
  justify-self: start;
  min-width: 220px;
  margin-top: 12px;
}

@media (max-width: 759px) {
  .cookiebar {
    max-height: 88vh;
    overflow: auto;
  }
  .cookiebar__prefs {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* The choice first, the explanation after it. */
  .cookiebar__about {
    order: 2;
  }
  .cookiebar__opt {
    flex-wrap: wrap;
  }
  /* A floating tip has nowhere to go on a phone: it opens in the row, under its label. */
  .cookiebar__info {
    display: contents;
  }
  .cookiebar__info [role="tooltip"] {
    position: static;
    display: none;
    flex: 1 1 100%;
    width: auto;
    margin-top: 2px;
    padding: 10px 12px;
    background: var(--mist-3);
    color: var(--ink-2);
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
  .cookiebar__info.is-open [role="tooltip"] {
    display: block;
  }
  .cookiebar__save {
    justify-self: stretch;
  }
}

/* ---------- 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;
  }
}