/* Readyo · chrome: sticky download dock, tour dialog, footer. */

/* ---------- Dock ---------- */
.dock {
  position: sticky; bottom: 0; z-index: var(--z-sticky);
  padding: var(--space-sm) var(--space-sm) max(var(--space-sm), env(safe-area-inset-bottom));
  pointer-events: none;
}
.dock__inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--space-sm);
  width: min(100%, 26rem); margin-inline: auto;
  padding: 0.4rem 0.4rem 0.4rem 0.6rem;
  border-radius: 1.25rem;
  background: rgb(11 10 51 / 0.94);
  border: 1px solid var(--color-line-strong);
  box-shadow: 0 1.25rem 2.5rem -1rem rgb(0 0 0 / 0.6);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.dock__icon { width: 2.75rem; height: 2.75rem; border-radius: 22%; flex: none; }
.dock__text { flex: 1; min-width: 0; line-height: 1.25; font-size: var(--text-sm); color: var(--color-text-muted); }
.dock__text b { display: block; font-size: var(--text-base); color: var(--color-text); font-weight: 800; }
.dock__text span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.js .dock {
  position: fixed; left: 0; right: 0;
  opacity: 0; visibility: hidden; transform: translateY(120%);
  transition: opacity 400ms var(--ease), transform 500ms var(--ease), visibility 0s linear 500ms;
}
.js .dock.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* ---------- Tour dialog ---------- */
.tour {
  width: min(100% - 2rem, 24rem);
  max-height: calc(100svh - 2rem);
  padding: 0.75rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-card);
  background: var(--color-card); color: var(--color-text);
  overflow: auto;
}
.tour::backdrop { background: rgb(10 10 14 / 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tour__bar { display: flex; align-items: center; justify-content: space-between; padding: 0 0.25rem 0.6rem 0.5rem; }
.tour__title { font-weight: 700; }
.tour__close {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--color-card-2); color: var(--color-text); cursor: pointer;
}
.tour__close svg { width: 1.1rem; height: 1.1rem; }
.tour video { width: 100%; max-height: calc(100svh - 9rem); aspect-ratio: 9 / 16; object-fit: contain; border-radius: var(--radius-lg); background: #000; }
.tour__cap { padding: 0.6rem 0.5rem 0.15rem; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ---------- Footer ---------- */
/* One navy card on the page: brand row, link columns with the voice-bars mark beside them, a faded wordmark,
   then a bar with the social circles and the copyright. */
.foot { padding: clamp(1.5rem, 4vw, 3rem) clamp(0.75rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); }
.foot__card {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card);
  padding: clamp(1.5rem, 4vw, 3rem);
  display: grid; gap: var(--space-xl);
}
.foot__mast { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-line); }
.foot__tag { flex: 1 1 16rem; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); max-width: 34ch; }
.foot__cta { margin-left: auto; }
.foot__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 13rem); gap: var(--space-2xl); align-items: center; }
.foot__nav { display: grid; grid-template-columns: repeat(5, minmax(0, auto)); justify-content: space-between; gap: var(--space-xl) var(--space-lg); }
.foot__h { margin: 0 0 var(--space-sm); font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.foot__col ul { list-style: none; margin: 0; padding: 0; }
.foot__col a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm);
  transition: color var(--dur-fast) var(--ease);
}
.foot__col a:hover { color: var(--color-lime); }
.foot__col a[aria-current="page"] { color: var(--color-lime); }
.foot__art { width: 100%; max-width: 13rem; height: auto; justify-self: end; transform: rotate(-8deg); filter: drop-shadow(0 0 2.5rem rgb(201 240 94 / 0.25)); }
.foot__art rect { fill: var(--color-lime); }
.foot__art circle { fill: var(--color-purple); }
.foot__word {
  position: absolute; inset-inline: 0; bottom: 3.5rem; z-index: -1; text-align: center; pointer-events: none; user-select: none;
  font-size: clamp(5rem, 21vw, 15rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.8;
  color: rgb(255 255 255 / 0.06);
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, transparent 90%); mask-image: linear-gradient(to bottom, #000 10%, transparent 90%);
}
.foot__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.foot__socials { display: flex; gap: var(--space-xs); }
.foot__social {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--color-line-strong); color: var(--color-text);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.foot__social svg { width: 18px; height: 18px; fill: currentColor; }
.foot__social:hover { border-color: var(--color-lime); color: var(--color-lime); }
.foot__copy { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.foot__legal { margin: 0; font-size: var(--text-xs); line-height: 1.6; color: var(--color-text-muted); padding-top: var(--space-lg); border-top: 1px solid var(--color-line); }
.foot__legal a { color: var(--color-text-muted); }

@media (max-width: 80rem) {
  .foot__nav { grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: var(--space-xl) var(--space-2xl); }
}
@media (max-width: 56rem) {
  .foot__body { grid-template-columns: 1fr; }
  .foot__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
  .foot__art { max-width: 8rem; justify-self: start; }
}
@media (max-width: 30rem) {
  .foot__cta { margin-left: 0; }
}