/* 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; }
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;
  /* 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.9s var(--ease) var(--d, 0s) both; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } }
.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(4, 1fr); gap: 22px; padding-top: 20px; }
/* 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 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; }
.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;
  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-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; }
@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; }
/* 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; }
.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; }
@supports (animation-timeline: view()) {
  /* Each segment follows its own step; the ranges are staggered so 1→2 has finished before 2→3 starts. */
  .steps li:not(:last-child)::after { transform: scaleY(0); animation: step-fill linear both; animation-timeline: view(); }
  .steps li:nth-child(1)::after { animation-range: cover 18% cover 38%; }
  .steps li:nth-child(2)::after { animation-range: cover 30% cover 50%; }
}
@keyframes step-fill { to { transform: scaleY(1); } }
.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); }
/* The two homes' colours and peach, on a diagonal: verde lila peach / lila peach verde. */
.value:nth-child(1), .value:nth-child(6) { background: var(--verde-panel); }
.value:nth-child(2), .value:nth-child(4) { background: var(--lila-panel); }
.value:nth-child(3), .value:nth-child(5) { background: var(--peach-soft); }
.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 .plant-loop { width: min(260px, 80%); height: auto; aspect-ratio: 528 / 720; }
.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); }
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; aspect-ratio: auto; 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(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; }
  .b-check svg path { animation: none; stroke-dashoffset: 0; }
  .hero-copy > * { animation: none; }
  .steps li:not(:last-child)::after { animation: none; transform: none; }
  .faq details::details-content { transition: 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; }
  .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; }
  /* 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 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;
    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 { display: none; }
  .notice strong { white-space: normal; }
  .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 h3 { align-self: end; }
  .tile p { align-self: start; }
}