/* 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.woff2') format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk_400Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk_600SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk_700Bold.woff2') format('woff2');
  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; }
/* Nothing scrolls sideways, not even the hero's decorations at the edges (clip, unlike hidden, can't be scrolled at all). */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.6;
  overflow-x: clip;
  -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; text-wrap: balance; }
p, li, q, small, summary, .lead { text-wrap: pretty; }
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;
  /* A floating bar of frosted glass. The blur is kept to this one small bar (cheap enough), and goes opaque for
     people who ask their system for less transparency. */
  top: 12px;
  width: min(1220px, 100% - 24px);
  margin: 12px auto 0;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: saturate(1.8) blur(18px);
  backdrop-filter: saturate(1.8) blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 2px rgba(44, 48, 56, 0.04), 0 10px 30px rgba(44, 48, 56, 0.06);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.top .top-inner { width: auto; padding-inline: 22px 10px; min-height: 64px; }
[data-parallax] { will-change: transform; }
.top.scrolled { background: rgba(255, 255, 255, 0.66); box-shadow: 0 1px 2px rgba(44, 48, 56, 0.05), 0 16px 40px rgba(44, 48, 56, 0.1); }
@media (prefers-reduced-transparency: reduce) {
  .top { background: rgba(255, 255, 255, 0.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Keyboard focus, always visible. */
:focus-visible { outline: 3px solid var(--verde-ink); outline-offset: 3px; border-radius: 12px; }
.btn:focus-visible { border-radius: 999px; }
.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; }
/* The hero arrives in order on load, in pure CSS: it never waits for a script (it's the first thing people see). */
.hero-copy > * { animation: hero-in 0.5s var(--ease) var(--d, 0s) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(10px); } }
.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-head { padding-top: 20px; }
.tiles-head .lead { margin-top: 10px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-top: 28px; }
/* The clay loops: square, on their own colour; the white ones lift off the page with a shadow. */
.tile .loop { width: 100%; max-width: 280px; aspect-ratio: 1; border-radius: 32px; display: block; object-fit: cover; margin-bottom: 8px; }
.tile .loop.lila { background: var(--lila-panel); }
.tile .loop.white { background: #fff; box-shadow: var(--shadow); }
.tile { text-align: center; display: grid; gap: 8px; justify-items: center; }
.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;
  /* The panel's proportion is a minimum, not a cage: it grows when its content needs more room (narrow desktops, zoom). */
  --ratio: 0.4583;
  min-height: calc(min(1180px, 100vw - 40px) * var(--ratio));
  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; --ratio: 0.4167; }
.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; --ratio: 0.375; }
.closing .panel-copy { max-width: 520px; }
.closing .panel-copy .btn { justify-self: start; }

/* 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;
  /* Larger than the blob's middle, so its corners peek out over the edge. */
  width: min(440px, 100%);
  min-height: 336px;
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--shadow-lift);
}
.b-state { position: absolute; inset: 0; padding: 30px 30px 28px; 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;
  position: relative;
  isolation: isolate;
  animation: b-press 8s var(--ease) infinite;
}
.b-button::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--lila-panel); opacity: 0; animation: b-tint 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-check svg path {
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 21; stroke-dashoffset: 21;
  animation: b-draw 8s var(--ease) infinite;
}
/* Drawn just after "Estáis a la par" appears (see b-even). */
@keyframes b-draw { 0%, 57% { stroke-dashoffset: 21; } 66%, 100% { stroke-dashoffset: 0; } }
.b-title { margin: 6px 0 0; font-family: var(--round); font-weight: 900; font-size: 28px; }
.b-even small { max-width: 30ch; text-wrap: balance; }
@keyframes b-press { 0%, 42% { transform: none; } 46% { transform: scale(0.96); } 50%, 100% { transform: none; } }
@keyframes b-tint { 0%, 42% { opacity: 0; } 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@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; }
/* A line from each number to the next; it fills in eucalipto as the step scrolls past the middle of the screen. */
.steps li { position: relative; }
.js .steps li.reveal { transform: none; }
.steps .num { position: relative; z-index: 2; background: var(--verde); }
/* The numbers wear the line's stronger colours. */
.steps .num.lila { background: var(--lila); color: #3f2f72; }
.steps .num.peach { background: var(--peach); color: #6e3518; }
.steps li:not(:last-child)::before,
.steps li:not(:last-child)::after {
  content: ''; position: absolute; z-index: 1; left: 44px; top: 46px; width: 8px; height: calc(100% + 14px); border-radius: 8px;
}
/* Each segment carries the colour of the number it leaves into the colour of the next: eucalipto → lila → peach. */
.steps li:nth-child(1)::before { background: linear-gradient(var(--verde-panel), var(--lila-panel)); }
.steps li:nth-child(2)::before { background: linear-gradient(var(--lila-panel), var(--peach-soft)); }
.steps li:nth-child(1)::after { background: linear-gradient(var(--verde), var(--lila)); }
.steps li:nth-child(2)::after { background: linear-gradient(var(--lila), #f7c9ae); }
.steps li:not(:last-child)::after { transform-origin: top; }
/* Each segment draws itself once, when its step comes into view, and stays whole: no half-filled line wherever the
   scroll stops. 1→2 first, 2→3 just after. Without JavaScript the lines are simply there. */
.js .steps li:not(:last-child)::after { transform: scaleY(0); transition: transform 0.7s cubic-bezier(0.3, 0.7, 0.3, 1); }
.js .steps li.in:not(:last-child)::after { transform: scaleY(1); }
.js .steps li:nth-child(1)::after { transition-delay: 0.25s; }
.js .steps li:nth-child(2)::after { transition-delay: 0.55s; }
.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: what they think, as a speech bubble (its sharp corner points at whoever says it); what the app
   does, underneath with a tick. */
.pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 26px; margin-top: 38px; }
.pair { display: grid; gap: 16px; align-content: start; }
.pair:nth-child(1) { --tone: var(--verde-panel); --tilt: -1deg; }
.pair:nth-child(2) { --tone: var(--lila-panel); --tilt: 0.8deg; }
.pair:nth-child(3) { --tone: var(--peach-soft); --tilt: 0.6deg; }
.pair:nth-child(4) { --tone: var(--sky-soft); --tilt: -0.7deg; }
.pair q {
  position: relative;
  display: block;
  padding: 24px 28px;
  border-radius: 28px 28px 28px 10px;
  background: var(--tone);
  rotate: var(--tilt);
  font-family: var(--round);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.25;
  quotes: '“' '”';
  transition: rotate 0.35s var(--ease);
}
.pair:hover q { rotate: 0deg; }
.pair p { position: relative; padding: 2px 0 0 40px; color: var(--ink2); font-weight: 600; }
.pair p::before {
  content: '✓';
  position: absolute;
  left: 4px;
  top: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--verde-ink);
  background: var(--verde-panel);
}

/* Values */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
/* A light list: a coloured dot, the title and a line. The homes' colours and peach on a diagonal. */
.values { gap: 30px 40px; }
.value { position: relative; padding-left: 30px; display: grid; gap: 6px; align-content: start; }
.value::before { content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%; background: var(--dot); }
.value:nth-child(1), .value:nth-child(6) { --dot: var(--verde); }
.value:nth-child(2), .value:nth-child(4) { --dot: var(--lila); }
.value:nth-child(3), .value:nth-child(5) { --dot: var(--peach); }
.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: stretch; padding-top: 70px; }
.faq-side { display: grid; gap: 10px; align-content: space-between; }
/* The plant sits on the last question's baseline: its pot ends 9.7 % above the bottom of the video. */
.faq-side .plant-loop { width: min(260px, 80%); height: auto; aspect-ratio: 528 / 720; margin-bottom: calc(min(260px, 80%) * -0.1326); }
.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); }
/* Answers open and close smoothly where the browser can animate to "auto"; elsewhere they simply open. */
:root { interpolate-size: allow-keywords; }
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }

/* Store badges */
.stores { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.stores .badge-apple { height: 52px; width: auto; }
/* Google's badge has clear space above and below (29 of its 250 px each): sized so the visible badge is 52 px, like Apple's. */
.stores .badge-google { height: 68px; width: auto; margin: -8px 0; }
.soon { font-size: 15px; color: var(--ink2); font-weight: 600; }
.soon-tag {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--lila-panel); color: var(--lila-ink); font-family: var(--round); font-weight: 800; font-size: 15px;
}

/* Footer */
#descargar { margin-top: clamp(64px, 12vh, 150px); }
footer { padding: 104px 0 72px; 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); text-decoration: none; transition: color 0.2s; }
footer nav a:hover { color: var(--ink); }
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; border-radius: 32px; }
.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; --ratio: 0; padding: 44px; }
.panel-beta .panel-copy { max-width: 720px; grid-area: auto; }
.section-art { width: 132px; height: auto; margin: 0 auto -6px; }
.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(10px); }
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s var(--ease) var(--d, 0s), transform 0.45s 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 */
/* Motion only while on screen (site.js marks .paused) and while the page is visible. */
.paused, .paused *, .paused::after, .paused *::after, .page-hidden * { animation-play-state: paused !important; }
.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-button::after, .b-owed, .b-even { animation: none; }
  .b-check svg path { animation: none; stroke-dashoffset: 0; }
  .hero-copy > * { animation: none; }
  .js .steps li:not(:last-child)::after { transition: none; transform: none; }
  .faq details::details-content { transition: none; }
  .note.summary, .b-owed { opacity: 1; }
  .js .reveal { opacity: 1; transform: none; }
  .float { animation: none; }
  .hero-layer, .hero-stack .stroke { animation: none; }
  .js .slide, .js .slide .pop, .ink, .ink-drop { transition: none; }
  .moment img { translate: none; }
  [data-parallax] { transform: none !important; }
}

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

@media (max-width: 980px) {
  .top nav { display: none; }

  .top-inner { justify-content: space-between; }
  .top { top: 8px; margin-top: 8px; width: calc(100% - 16px); border-radius: 20px; }
  .top .top-inner { padding-inline: 16px 8px; min-height: 58px; }
  .hero { display: grid; gap: 10px; padding-top: 20px; }
  .hero-copy { max-width: 620px; }
  .hero-art { margin: 0 -20px; overflow: hidden; }
  /* The scene's empty left third isn't needed under the words: crop to the phone and houses. */
  .hero-stack { width: 135%; max-width: none; margin-left: -32%; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  /* Stacked: words, card, then the props as a strip cropped to their side of the scene. */
  .panel {
    grid-template-columns: 1fr;
    aspect-ratio: auto;
    --ratio: 0;
    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 .plant-loop { 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 { min-height: 38px; padding: 0 14px; font-size: 15px; margin-left: auto; }
  .notice strong { white-space: normal; }
  .hero-art { margin: 0 -16px; }
  /* The balance card narrower than the blob, so the blob shows around it and the corners still peek out. */
  .split-art { min-height: 400px; }
  .split-art .blob { inset: 2% 0; }
  .balance { width: min(310px, 90%); }
  .b-state { padding: 26px 24px 24px; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  /* Phones: each tile as a row, the loop beside its words. */
  .tiles { grid-template-columns: 1fr; gap: 14px; }
  .tile { grid-template-columns: 112px 1fr; column-gap: 16px; row-gap: 2px; text-align: left; justify-items: start; align-items: center; }
  .tile .loop { grid-row: span 2; max-width: 112px; border-radius: 24px; margin: 0; }
  .tile:nth-child(even) { grid-template-columns: 1fr 112px; text-align: right; justify-items: end; }
  .tile:nth-child(even) .loop { grid-column: 2; grid-row: 1 / span 2; }
  .tile:nth-child(even) h3, .tile:nth-child(even) p { grid-column: 1; }
  .pair { width: 92%; }
  .pair:nth-child(even) { justify-self: end; }
  .tile h3 { align-self: end; }
  .tile p { align-self: start; }
}


/* ------------------------------------------------------------ Website v2 */

/* Hero: the plate, and three layers over it that move gently. */
.hero-stack { position: relative; }
.hero-stack img { display: block; width: 100%; height: auto; }
.hero-layer { position: absolute; inset: 0; height: 100%; pointer-events: none; }
/* The recording on the phone: 540 × 1174 px of video, mapped onto the screen's four corners in the 2000 × 1500 picture
   (measured from the plate), then scaled with the picture by site.js (--k). Hidden until then: the painted screen shows. */
.hero-screen {
  position: absolute; left: 0; top: 0; width: 540px; height: 1174px;
  transform-origin: 0 0;
  transform: scale(var(--k, 0)) matrix3d(0.692924623, -0.0733781256, 0, -9.59922821e-05, -0.0952940231, 0.881296292, 0, -2.24453403e-05, 0, 0, 1, 0, 1031, 142.5, 0, 1);
  border-radius: 84px; overflow: hidden; pointer-events: none; visibility: hidden;
}
.hero-screen.ready { visibility: visible; }
.hero-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Pivots from the delivery (hero-layers.json), as a share of the 2000 × 1500 canvas. */
.hero-leaves { transform-origin: 41.25% 76.3%; animation: hero-sway 7s ease-in-out infinite; }
.hero-keyring { transform-origin: 83.55% 70.2%; animation: hero-swing 4.6s ease-in-out infinite; }
/* Each accent stroke on its own: a little turn and a little grow, out of step with the others. */
.hero-strokes { position: absolute; inset: 0; pointer-events: none; }
.hero-stack .stroke { position: absolute; height: auto; animation: stroke-wiggle var(--t, 3s) ease-in-out var(--d, 0s) infinite; }
.stroke.s1 { --t: 2.8s; --d: -0.4s; --r: 9deg; }
.stroke.s2 { --t: 3.3s; --d: -1.6s; --r: -8deg; }
.stroke.s3 { --t: 3.1s; --d: -1.1s; --r: 10deg; }
.stroke.s4 { --t: 2.6s; --d: -2s; --r: -9deg; }
@keyframes stroke-wiggle {
  0%, 100% { rotate: 0deg; scale: 1; }
  30% { rotate: var(--r); scale: 1.1; }
  60% { rotate: calc(var(--r) * -0.4); scale: 0.92; }
}
@keyframes hero-sway { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
@keyframes hero-swing { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }

/* Slideshow 1: a stage that takes each slide's colour (the same as the scene's own background). */
.show { margin-top: 34px; }
.show-stage { --stage: #eaf6f1; position: relative; display: grid; border-radius: 40px; overflow: hidden; background: var(--stage); transition: background-color 0.6s var(--ease); touch-action: pan-y; }
.show-stage[data-tone='verde'] { --stage: #eaf6f1; }
.show-stage[data-tone='lila'] { --stage: #f3effc; }
.show-stage[data-tone='sky'] { --stage: #edf4fb; }
.show-stage[data-tone='peach'] { --stage: #fdf1ea; }
.slide { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 0 20px; padding-left: 56px; }
.slide-copy { display: grid; gap: 12px; max-width: 420px; padding: 44px 0; }
.slide-copy h3 { font-size: clamp(30px, 3.1vw, 42px); line-height: 1.08; text-wrap: balance; }
.slide-copy p { font-size: 18px; color: var(--ink2); text-wrap: pretty; }
.slide-art { position: relative; align-self: stretch; }
.slide-art img { display: block; width: 100%; height: auto; }
/* With the script, one slide at a time, crossfading; without it, they simply follow one another. */
.js .slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 0.55s var(--ease), visibility 0s linear 0.55s; }
.js .slide.is-on { opacity: 1; visibility: visible; transition: opacity 0.55s var(--ease); }
/* A small piece of the app that pops in once the slide is there: frosted glass floating over the scene,
   beside the objects and just over the phone's edge (each slide sets its spot with --x and --y). */
.pop {
  position: absolute;
  left: var(--x, 4%);
  top: var(--y, 60%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 11px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 4px rgba(44, 48, 56, 0.06), 0 22px 44px rgba(44, 48, 56, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-family: var(--round);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
}
@media (prefers-reduced-transparency: reduce) {
  .pop { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.pop small { display: block; font-family: var(--body); font-weight: 600; font-size: 13px; color: var(--ink2); }
.pop svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%; color: var(--verde-ink); background: var(--verde-panel); }
.js .slide .pop { opacity: 0; translate: 0 12px; scale: 0.96; transition: opacity 0.4s var(--ease), translate 0.4s var(--ease), scale 0.4s var(--ease); }
.js .slide.is-on .pop { opacity: 1; translate: 0 0; scale: 1; transition-delay: 0.5s; }
.show-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.show-tabs { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 25px; background: var(--cream); isolation: isolate; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.show-tabs::-webkit-scrollbar { display: none; }
.show-tabs button,
.show-pause,
.year-nav button {
  position: relative;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  background: var(--cream);
  font: 700 15px var(--round);
}
.show-tabs button { flex: none; z-index: 1; height: 42px; padding: 0 18px; border-radius: 21px; color: var(--ink2); background: transparent; overflow: hidden; transition: color 0.3s var(--ease); }
.show-tabs button[aria-selected='true'] { color: var(--ink); }
/* The lilac bubble under the chosen tab, moving like ink: its leading edge runs ahead, the trailing one
   follows, and a drop lags behind and melts back in (an SVG "goo" filter joins them). */
.ink-layer { position: absolute; top: 0; bottom: 0; left: 0; z-index: 0; pointer-events: none; filter: url(#goo); }
.ink, .ink-drop { position: absolute; top: 4px; bottom: 4px; border-radius: 21px; background: #d9cff6; }
.ink {
  left: var(--l, 4px);
  right: var(--r, 4px);
  transition:
    left var(--ld-t, 0.5s) cubic-bezier(0.65, 0, 0.25, 1) var(--ld, 0s),
    right var(--rd-t, 0.5s) cubic-bezier(0.65, 0, 0.25, 1) var(--rd, 0s);
}
.ink-drop { width: 34px; left: var(--dl, 4px); transition: left 0.75s cubic-bezier(0.55, 0, 0.2, 1) 0.06s; }
.no-ink .ink, .no-ink .ink-drop { transition: none; }
.show-tabs button:focus-visible, .show-pause:focus-visible, .year-nav button:focus-visible { outline: 2px solid rgba(91, 74, 138, 0.55); outline-offset: 3px; }
/* The slide's time: an invisible line under its tab whose animation sets the pace (when it ends, the next
   slide comes; pausing pauses it). */
.tab-progress { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 3px; opacity: 0; transform-origin: left; transform: scaleX(0); }
.show.is-playing [aria-selected='true'] .tab-progress { animation: tab-progress 7s linear forwards; }
.show.is-held [aria-selected='true'] .tab-progress { animation-play-state: paused; }
@keyframes tab-progress { to { transform: scaleX(1); } }
.show-pause { width: 42px; height: 42px; border-radius: 21px; display: grid; place-items: center; }
.show-pause .i-play, .show.is-stopped .show-pause .i-pause { display: none; }
.show.is-stopped .show-pause .i-play { display: block; }
.no-autoplay .show-pause { display: none; }

/* Slideshow 2: the year, a row of cards that drifts and can be swiped. */
.year-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.year-head .lead { max-width: 560px; margin-top: 12px; }
.year-nav { display: flex; gap: 8px; }
.year-nav button { width: 46px; height: 46px; border-radius: 23px; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow); }
.year-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 300px;
  gap: 18px;
  margin-top: 8px;
  padding: 24px 2px 34px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Room below for the cards' shadows (a scrolling row clips whatever pokes out), taken back with the margin. */
  padding-bottom: 64px;
  margin-bottom: -30px;
}
/* Soft blobs in the four tones behind the row, fading out on every side (no box). They stay put while the
   cards slide over them, so each frosted card changes tint as it moves. */
.year { position: relative; isolation: isolate; }
.year::before {
  content: '';
  position: absolute;
  inset: 150px -60px -20px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(22% 42% at 12% 42%, rgba(168, 213, 196, 0.8), transparent 70%),
    radial-gradient(20% 40% at 36% 70%, rgba(188, 174, 232, 0.75), transparent 70%),
    radial-gradient(21% 42% at 62% 38%, rgba(247, 201, 174, 0.75), transparent 70%),
    radial-gradient(21% 42% at 88% 64%, rgba(188, 215, 242, 0.8), transparent 70%);
}
.year-row::-webkit-scrollbar { display: none; }
.year-row:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 30px; }
/* Every card the same shape: picture, a two-line title, the text, and the chip on the bottom line. */
.moment {
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  padding: 14px 22px 22px;
  border-radius: 32px;
  /* Frosted glass, with a breath of the card's own tone; a bright rim on top where the light hits. */
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18) 60%), color-mix(in srgb, var(--tone) 25%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 2px rgba(44, 48, 56, 0.04), 0 14px 30px rgba(44, 48, 56, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: translate 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.moment:hover { translate: 0 -4px; box-shadow: 0 2px 4px rgba(44, 48, 56, 0.05), 0 22px 40px rgba(44, 48, 56, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
/* The picture drifts a little against the card as the row moves (site.js sets --drift). */
.moment img { width: 100%; height: auto; margin: -4px 0 0; translate: var(--drift, 0) 0; transition: translate 0.25s linear; }
@media (prefers-reduced-transparency: reduce) {
  .moment { background: var(--tone); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.moment h3 { font-size: 21px; line-height: 1.15; min-height: 2.3em; display: flex; align-items: flex-end; }
.moment p { font-size: 16px; color: var(--ink2); }
.pop.small {
  position: static;
  z-index: auto;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  justify-self: start;
  max-width: 100%;
  margin-top: 10px;
  padding: 9px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 1px 2px rgba(44, 48, 56, 0.06), 0 8px 18px rgba(44, 48, 56, 0.1);
}

/* The payoff: the bridge between both homes, the logo, the last reasons and the button. */
.payoff {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: 60px;
  padding: 0 40px 56px;
  border-radius: 40px;
  text-align: center;
  background: var(--verde-panel);
}
.payoff-art { width: min(860px, 100%); height: auto; margin-top: -70px; }
.payoff-logo { width: 220px; height: auto; margin-top: -10px; }
.payoff h2 { max-width: 640px; }
.reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; text-align: left; }
.reasons li { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; }
.reasons svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%; color: var(--verde-ink); background: #fff; }
.payoff .stores { justify-content: center; }

@media (max-width: 980px) {
  .slide { grid-template-columns: 1fr; padding: 0; }
  .slide-art { order: -1; }
  .slide-copy { padding: 0 26px 30px; max-width: none; }
  .slide-copy h3 { font-size: 30px; }
  .pop { font-size: 14px; padding: 9px 14px 9px 9px; }
  .pop svg { width: 26px; height: 26px; padding: 6px; }
  .year-head { display: grid; }
  .year-nav { display: none; }
  .year-row { grid-auto-columns: 78%; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .year::before { inset: 220px -20px -20px; }
  .payoff { padding: 0 22px 40px; }
  .payoff-art { margin-top: -40px; }
}
@media (max-width: 520px) {
  .pairs { grid-template-columns: 1fr; gap: 30px; }
  .year-row { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .show-tabs button { padding: 0 13px; font-size: 14px; }
  .show-bar { justify-content: flex-start; }
  .reasons li { font-size: 17px; }
}

/* «Próximamente en», on its own line above the store badges until the apps are out. */
.soon-label { margin: 6px 0 -8px; font-family: var(--round); font-weight: 800; font-size: 14px; color: var(--lila-ink); }