/* EntreLosDos website: white, soft and friendly. Rounded Nunito headings like
   the wordmark, Hanken Grotesk for reading. The tinted panels use the scenes'
   exact background colours so the art blends in. Always light. Fonts are served
   from here: no request ever leaves for a third party. */

@font-face {
  font-family: 'Nunito';
  src: url('fonts/Nunito.ttf') format('truetype');
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk_400Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk_600SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk_700Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --cream: #fbfaf7;
  --ink: #2c3038;
  --ink2: #666a76;
  --line: #efecf3;
  --verde: #a8d5c4;
  --verde-panel: #eaf6f1;
  --verde-ink: #2e6b5c;
  --lila: #bcaee8;
  --lila-panel: #f3effc;
  --lila-ink: #5b4a8a;
  --peach: #f7c9ae;
  --peach-soft: #fdf1ea;
  --sky-soft: #edf4fb;
  --shadow: 0 1px 2px rgba(44, 48, 56, 0.04), 0 14px 44px rgba(44, 48, 56, 0.07);
  --shadow-lift: 0 2px 4px rgba(44, 48, 56, 0.05), 0 24px 60px rgba(44, 48, 56, 0.12);
  --card-shadow: drop-shadow(0 2px 3px rgba(44, 48, 56, 0.06)) drop-shadow(0 18px 26px rgba(44, 48, 56, 0.12));
  --round: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--verde-ink); }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
section { padding: 44px 0; }

h1, h2, h3 { font-family: var(--round); margin: 0; letter-spacing: -0.02em; line-height: 1.08; }
h1 { font-weight: 900; font-size: clamp(44px, 6vw, 78px); }
h2 { font-weight: 900; font-size: clamp(32px, 4vw, 50px); }
h3 { font-weight: 800; font-size: 22px; line-height: 1.2; }
p { margin: 0; }
.lead { font-size: clamp(18px, 1.8vw, 22px); color: var(--ink2); }
.center { text-align: center; }
.center h2 { margin-top: 10px; }

.chip, .eyebrow {
  display: inline-block;
  font-family: var(--round);
  font-weight: 800;
  font-size: 15px;
  padding: 5px 14px;
  border-radius: 999px;
  color: var(--verde-ink);
  background: var(--verde-panel);
  justify-self: start;
  width: fit-content;
}
.eyebrow.lila { color: var(--lila-ink); background: var(--lila-panel); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--verde);
  color: #1f2a27;
  font-family: var(--round);
  font-weight: 800;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(46, 107, 92, 0.18); }
.btn-ghost { background: transparent; border: 1.5px solid var(--lila); color: var(--ink); }
.btn-ghost:hover { background: var(--lila-panel); box-shadow: none; }
.btn-small { min-height: 42px; padding: 0 18px; font-size: 16px; }

/* Header */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  transition: box-shadow 0.3s var(--ease);
}
.top.scrolled { box-shadow: 0 1px 0 var(--line); }
.top-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.top .logo { height: 34px; width: auto; }
.top nav { display: flex; gap: 6px; margin-left: auto; font-weight: 600; font-size: 16px; }
.top nav a { color: var(--ink); text-decoration: none; padding: 8px 14px; border-radius: 999px; transition: background 0.2s; }
.top nav a:hover { background: var(--lila-panel); }

/* Hero: on wide screens the words sit on the scene's empty left third. */
.hero { position: relative; padding: 10px 0 30px; }
.hero-copy { position: relative; z-index: 2; display: grid; gap: 22px; align-content: center; max-width: 520px; }
.hero-copy h1 { margin-top: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
@media (min-width: 981px) {
  .hero { display: grid; grid-template-columns: 1fr; }
  .hero > * { grid-area: 1 / 1; }
  .hero-copy { padding: 40px 0 40px; width: 40%; max-width: none; }
  .hero-copy h1 { font-size: clamp(48px, 4.8vw, 68px); }
  /* The art runs past the right edge of the column; its background is white. */
  .hero-art { margin: 0 -2% 0 12%; }
}
@media (min-width: 1280px) {
  .hero-art { margin: 0 -9% 0 17%; }
}

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-top: 20px; }
.tile { text-align: center; display: grid; gap: 8px; justify-items: center; }
.tile img { width: 100%; max-width: 340px; margin-bottom: -10px; transition: transform 0.5s var(--ease); }
.tile:hover img { transform: translateY(-6px) rotate(-1deg); }
.tile p { color: var(--ink2); max-width: 30ch; }

/* Panels: tinted, rounded, with the scene as their back wall. Each scene
   leaves part of itself empty; the columns put the words and the app card
   there and leave the props in view. */
.panel {
  position: relative;
  overflow: hidden;
  border-radius: 44px;
  aspect-ratio: 24 / 11;
  display: grid;
  grid-template-columns: var(--cols, 1fr 0.85fr 0.95fr);
  align-items: center;
  gap: 24px;
  padding: 48px 56px;
}
.panel .panel-copy { grid-area: 1 / 1; }
.panel .panel-card, .panel .notice, .panel .bundle { grid-area: 1 / 2; }
.panel-flip { --cols: 0.95fr 1fr 1fr; }
.panel-flip .panel-copy { grid-area: 1 / 3; }
.panel-envelope { --cols: 0.95fr 0.8fr 1fr; aspect-ratio: 12 / 5; }
.panel-verde { background: var(--verde-panel); }
.panel-lila { background: var(--lila-panel); }
.panel-bg {
  position: absolute;
  inset: -3% 0;
  width: 100%;
  height: 106%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}
.panel > :not(.panel-bg) { position: relative; z-index: 1; min-width: 0; }
.panel-copy { display: grid; gap: 14px; align-content: center; max-width: 440px; }
.panel-copy h2 { font-size: clamp(30px, 3.4vw, 48px); }
.panel-copy p { color: var(--ink2); font-size: 19px; }
.panel-card {
  display: block;
  width: min(380px, 100%);
  justify-self: center;
  /* The cards are cut out with their rounded corners, so the shadow follows their shape. */
  filter: var(--card-shadow);
  transform: rotate(-2deg);
}
.panel-card img { width: 100%; }
.panel-flip .panel-card { transform: rotate(2deg); width: 100%; }
.closing { --cols: 1fr 1fr; aspect-ratio: 8 / 3; }
.closing .panel-copy { max-width: 520px; }

/* The notification card in the "todo junto" panel */
.notice {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px 16px 16px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow-lift);
  transform: rotate(-3deg);
}
.notice-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--lila-panel);
  font-size: 22px;
}
.notice strong { display: block; white-space: nowrap; font-family: var(--round); font-weight: 800; font-size: 18px; }
.notice small { color: var(--ink2); font-size: 15px; }

/* "Lo nuevo, todo junto": three notes arrive, then go out as one at 19:00. */
.bundle { position: relative; justify-self: center; width: min(330px, 100%); height: 230px; }
.note {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
}
.note strong { display: block; font-family: var(--round); font-weight: 800; font-size: 16px; line-height: 1.25; }
.note small { color: var(--ink2); font-size: 14px; }
.note-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--lila-panel);
  font-size: 17px;
}
.note-icon.big { width: 46px; height: 46px; font-family: var(--round); font-weight: 900; font-size: 20px; color: var(--lila-ink); }
.note.n1 { top: 0; animation: note-1 9s var(--ease) infinite; }
.note.n2 { top: 74px; animation: note-2 9s var(--ease) infinite; }
.note.n3 { top: 148px; animation: note-3 9s var(--ease) infinite; }
.note.summary { top: 70px; padding: 16px 20px 16px 16px; box-shadow: var(--shadow-lift); animation: note-sum 9s var(--ease) infinite; }
.note.summary strong { font-size: 19px; }
@keyframes note-1 { 0% { opacity: 0; transform: translateY(12px); } 6%, 46% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: translateY(70px) scale(0.92); } }
@keyframes note-2 { 0%, 14% { opacity: 0; transform: translateY(12px); } 20%, 46% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: scale(0.92); } }
@keyframes note-3 { 0%, 28% { opacity: 0; transform: translateY(12px); } 34%, 46% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: translateY(-70px) scale(0.92); } }
@keyframes note-sum { 0%, 50% { opacity: 0; transform: scale(0.9); } 58%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: scale(0.96); } }

/* Gastos: "Alex ya te lo ha pasado" → "Estáis a la par". */
.balance {
  position: relative;
  width: min(380px, 100%);
  min-height: 300px;
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--shadow-lift);
}
.b-state { position: absolute; inset: 0; padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 8px; }
.b-state small { color: var(--ink2); font-size: 14px; font-weight: 600; }
.b-amount { margin: 0; font-family: var(--round); font-weight: 900; font-size: 46px; line-height: 1.1; letter-spacing: -0.02em; }
.b-amount span { margin-left: 10px; font-family: var(--body); font-weight: 600; font-size: 17px; color: var(--ink2); letter-spacing: 0; }
.b-rows { margin: 0; display: flex; justify-content: space-between; font-size: 16px; }
.b-rows:first-of-type { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 9px; vertical-align: -1px; }
.dot.mine { background: var(--verde); }
.dot.other { background: var(--lila); }
.b-button {
  margin-top: auto;
  display: grid;
  place-items: center;
  min-height: 46px;
  border-radius: 16px;
  border: 1.5px solid var(--lila);
  font-family: var(--round);
  font-weight: 800;
  font-size: 15px;
  animation: b-press 8s var(--ease) infinite;
}
.b-owed { animation: b-owed 8s var(--ease) infinite; }
.b-even { align-items: center; justify-content: center; text-align: center; opacity: 0; animation: b-even 8s var(--ease) infinite; }
.b-check {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--verde-panel);
  color: var(--verde-ink);
  font-size: 30px;
  font-weight: 800;
}
.b-title { margin: 6px 0 0; font-family: var(--round); font-weight: 900; font-size: 28px; }
@keyframes b-press { 0%, 42% { background: #fff; transform: none; } 46% { background: var(--lila-panel); transform: scale(0.96); } 50%, 100% { background: #fff; transform: none; } }
@keyframes b-owed { 0%, 52% { opacity: 1; } 58%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes b-even { 0%, 54% { opacity: 0; transform: scale(0.96); } 60%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }

/* How it works */
.how { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 40px; align-items: start; padding-top: 70px; }
.how-head { display: grid; gap: 12px; position: sticky; top: 110px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.steps li {
  display: flex;
  gap: 18px;
  padding: 24px 26px;
  border-radius: 28px;
  background: var(--bg);
  box-shadow: var(--shadow);
}
.steps p { color: var(--ink2); margin-top: 4px; }
.num {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--verde-panel);
  color: var(--verde-ink);
  font-family: var(--round);
  font-weight: 900;
  font-size: 19px;
}
.num.lila { background: var(--lila-panel); color: var(--lila-ink); }
.num.peach { background: var(--peach-soft); color: #8a4a2a; }

/* Gastos */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; padding-top: 70px; }
.split-copy { display: grid; gap: 16px; }
.ticks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 34px; color: var(--ink2); }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--verde-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e6b5c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.split-art { position: relative; min-height: 420px; display: grid; place-items: center; }
.split-art .blob {
  position: absolute;
  inset: 4% 6%;
  border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%;
  background: linear-gradient(150deg, #dcefe6, #e9e3fa);
}
.split-card { position: relative; width: min(440px, 100%); filter: var(--card-shadow); }

/* Te suena */
.pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 34px; }
.pair { display: grid; gap: 10px; padding: 30px; border-radius: 30px; transition: transform 0.35s var(--ease); }
.pair:nth-child(1) { background: var(--verde-panel); transform: rotate(-1deg); }
.pair:nth-child(2) { background: var(--lila-panel); transform: rotate(0.8deg); }
.pair:nth-child(3) { background: var(--peach-soft); transform: rotate(0.6deg); }
.pair:nth-child(4) { background: var(--sky-soft); transform: rotate(-0.7deg); }
.pair:hover { transform: rotate(0) translateY(-4px); }
.pair q { font-family: var(--round); font-weight: 800; font-size: 23px; line-height: 1.25; quotes: '“' '”'; }
.pair p { color: var(--ink2); font-weight: 600; }

/* Values */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.value { padding: 26px; border-radius: 28px; display: grid; gap: 6px; align-content: start; background: var(--cream); border: 1px solid var(--line); }
.value h3 { font-size: 20px; }
.value p { color: var(--ink2); }

/* FAQ */
.faq-wrap { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: 40px; align-items: start; padding-top: 70px; }
.faq-side { display: grid; gap: 10px; }
.faq-side img { width: min(280px, 80%); }
.faq { display: grid; gap: 12px; }
.faq details { border-radius: 22px; padding: 20px 24px; background: var(--bg); box-shadow: var(--shadow); }
.faq summary { cursor: pointer; font-family: var(--round); font-weight: 800; font-size: 19px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--verde-ink); font-weight: 700; transition: transform 0.25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 10px; color: var(--ink2); }

/* Store badges */
.stores { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.stores .badge-apple { height: 52px; width: auto; }
/* Google's badge has its own clear space; this lines it up with Apple's. */
.stores .badge-google { height: 77px; width: auto; margin: -12px -10px; }
.soon { font-size: 15px; color: var(--ink2); font-weight: 600; }

/* Footer */
footer { padding: 44px 0 60px; color: var(--ink2); font-size: 15px; }
footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer nav a { color: var(--ink2); }
footer .note { margin-top: 18px; font-size: 14px; max-width: 72ch; }

/* Beta testers page */
.beta-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 30px; align-items: center; padding-top: 30px; }
.beta-hero-copy { display: grid; gap: 18px; }
.beta-hero-art { width: min(380px, 100%); justify-self: center; }
.install { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.install-card { padding: 28px; border-radius: 28px; background: var(--bg); box-shadow: var(--shadow); display: grid; gap: 10px; align-content: start; }
.install-card ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--ink2); }
.small-note { font-size: 15px; color: var(--ink2); }
.install-btn { justify-self: start; margin: 4px 0 6px; }
.panel-beta { grid-template-columns: 1fr; aspect-ratio: auto; padding: 44px; }
.panel-beta .panel-copy { max-width: 720px; grid-area: auto; }
.missions { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.missions li { display: flex; gap: 16px; padding: 22px 24px; border-radius: 26px; background: var(--bg); box-shadow: var(--shadow); }
.missions p { color: var(--ink2); margin-top: 4px; }
.legal-short { max-width: 780px; }
.legal-short h2 { font-size: 26px; margin-bottom: 10px; }
.legal-short li { color: var(--ink2); margin-bottom: 8px; }
@media (max-width: 980px) {
  .beta-hero, .install, .missions { grid-template-columns: 1fr; }
  .beta-hero-art { width: 70%; }
  .panel-beta { padding: 30px 24px; }
}

/* Legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: 24px 0 80px; }
.legal h1 { font-size: clamp(36px, 5vw, 52px); margin-bottom: 8px; }
.legal h2 { font-size: 26px; margin: 40px 0 12px; }
.legal p, .legal li { color: var(--ink2); margin: 0 0 12px; }
.legal ul { padding-left: 22px; }
.legal table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 16px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal .box { background: var(--cream); border-radius: 24px; padding: 22px 24px; margin: 18px 0; }
mark.pending { background: #fbe3df; color: #9a2e24; padding: 0 6px; border-radius: 6px; font-weight: 700; }

/* ------------------------------------------------------------ Motion */

/* Reveal as you scroll; site.js adds .in. Without JS everything is visible. */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease) var(--d, 0s), transform 0.9s var(--ease) var(--d, 0s);
}
/* Keep the tilted cards' own rotation once revealed. */
.js .pair.reveal.in:nth-child(1) { transform: rotate(-1deg); }
.js .pair.reveal.in:nth-child(2) { transform: rotate(0.8deg); }
.js .pair.reveal.in:nth-child(3) { transform: rotate(0.6deg); }
.js .pair.reveal.in:nth-child(4) { transform: rotate(-0.7deg); }

/* Gentle bob on the floating cards */
.float { animation: bob 7s ease-in-out infinite; }
.float.slow { animation-duration: 9s; animation-delay: -3s; }
.panel-card.float { animation-name: bob-tilt; }
.panel-flip .panel-card.float { animation-name: bob-tilt-r; }
.notice.float { animation-name: bob-notice; }
@keyframes bob { 50% { translate: 0 -10px; } }
@keyframes bob-tilt { 50% { translate: 0 -10px; rotate: 0.6deg; } }
@keyframes bob-tilt-r { 50% { translate: 0 -10px; rotate: -0.6deg; } }
@keyframes bob-notice { 50% { translate: 0 -8px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The end of each little story, still. */
  .note, .b-button, .b-owed, .b-even { animation: none; }
  .note.summary, .b-owed { opacity: 1; }
  .js .reveal { opacity: 1; transform: none; }
  .float { animation: none; }
  [data-parallax] { transform: none !important; }
}

/* ------------------------------------------------------------ Smaller screens */

@media (max-width: 980px) {
  .top nav { display: none; }
  .top-inner { justify-content: space-between; }
  .hero { display: grid; gap: 10px; padding-top: 20px; }
  .hero-copy { max-width: 620px; }
  .hero-art { margin: 0 -20px; }
  /* The scene's empty left third isn't needed under the words: crop to the phone and houses. */
  .hero-art img { width: 135%; max-width: none; margin-left: -32%; }
  .tiles { grid-template-columns: 1fr; gap: 6px; }
  /* Stacked: words, card, then the props as a strip cropped to their side of the scene. */
  .panel {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    gap: 22px;
    padding: 34px 24px 0;
    border-radius: 34px;
  }
  .panel .panel-copy, .panel .panel-card, .panel .notice, .panel .bundle { grid-area: auto; }
  .panel .panel-copy { order: -1; }
  .panel-bg {
    position: relative;
    inset: auto;
    order: 3;
    width: calc(100% + 48px);
    max-width: none;
    height: var(--art-h, 280px);
    /* The scene's empty top slides under the card. */
    margin: -70px -24px 0;
    object-fit: cover;
    object-position: var(--art-x, 100%) 58%;
    transform: none !important;
  }
  .panel-flip .panel-bg, .panel-envelope .panel-bg { --art-x: 0%; }
  .closing .panel-bg { --art-h: 240px; --art-x: 100%; }
  .panel-card, .panel-flip .panel-card { justify-self: center; width: min(420px, 100%); }
  .notice { transform: rotate(-2deg); }
  .how, .split, .faq-wrap { grid-template-columns: 1fr; gap: 26px; }
  .how-head { position: static; }
  .split-art { min-height: 300px; }
  .pairs, .values { grid-template-columns: 1fr; }
  .faq-side img { display: none; }
  section { padding: 30px 0; }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .wrap { width: calc(100% - 32px); }
  .btn { min-height: 50px; padding: 0 22px; font-size: 17px; }
  .top .btn-small { display: none; }
  .notice strong { white-space: normal; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
}