/* Pakkam — landing page, implemented from the Figma design
   (file Mba6voGe8NgmZJRW3G5CwZ, node 154:1112).

   Type: Madimi One for the wordmark (Google Fonts), Shantell Sans for
   the note handwriting (Google Fonts — the app's Melon Camp is a
   commercial Khurasan font whose .ttf must never be published on the
   web; see CONTRIBUTING.md), SF Compact Rounded with ui-rounded
   fallbacks for everything else. */

:root {
  --headline: #252e2f;
  --sub: rgba(37, 46, 47, 0.47);
  --dim: #bec0c1;
  --band: #00b4d9;
  --page: #fcfcfc;

  --rounded: "SF Compact Rounded", ui-rounded, "SF Pro Rounded",
    -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI",
    system-ui, sans-serif;
  --hand: "Shantell Sans", var(--rounded);
  --wordmark: "Madimi One", var(--rounded);

  /* The white cards' shared chrome: a 2px soft ring plus a stack of
     ever-larger, ever-fainter drops, straight from the Figma card. */
  --card-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.03),
    -2px 4px 4px rgba(191, 191, 191, 0.09),
    -4px 9px 6px rgba(191, 191, 191, 0.05),
    -8px 16px 7px rgba(191, 191, 191, 0.01);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 12px;
  min-width: 320px;
  background: var(--page);
  color: var(--headline);
  font-family: var(--rounded);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.dim { color: var(--dim); }

/* ============================ Hero band ============================ */

.band {
  position: relative;
  height: 720px;
  border-radius: 30px;
  overflow: hidden;
  background: var(--band);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 68, 82, 0.1),
    0 8px 8px rgba(0, 68, 82, 0.09),
    0 17px 10px rgba(0, 68, 82, 0.05);
}

.nav {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  z-index: 3;
}
.nav__brand { display: flex; align-items: center; gap: 2px; }
.nav__mark { width: 32px; height: 32px; }
.nav__name {
  font-family: var(--wordmark);
  font-size: 23px;
  line-height: 1.6;
  letter-spacing: -1.15px;
  color: #fff;
}
.nav__cta {
  font-family: var(--rounded);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.2);
  border: 0;
  border-radius: 40px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.nav__cta:hover { background: rgba(0, 0, 0, 0.3); }
.nav__cta:active { transform: scale(0.94); }

/* Centered hero copy, white on cyan. */
.hero {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(560px, calc(100% - 32px));
  text-align: center;
  z-index: 2;
}

.hero__title {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  font-size: clamp(40px, 5.3vw, 64px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: #fff;
  text-shadow: 0 12px 27px rgba(46, 231, 255, 0.1), 0 50px 50px rgba(46, 231, 255, 0.09);
  margin: 0 0 16px;
}
.hero__row {
  display: flex;
  align-items: center;
  gap: 0.25em;
  white-space: nowrap;
}

/* The inline chips: a grinning face and a tiny butter note, tilted. */
.hero__chip {
  display: inline-flex;
  flex: 0 0 auto;
}
.hero__chip--face {
  width: 0.96em;
  height: 0.96em;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform: rotate(-5.3deg);
  box-shadow: 0 2px 3px rgba(10, 214, 255, 0.1), 0 6px 6px rgba(10, 214, 255, 0.09);
}
.hero__chip--face img {
  width: 94%;
  height: 94%;
  margin: auto;
  margin-top: 22%;
}
.hero__chip--note {
  flex-direction: column;
  width: 0.94em;
  height: 0.94em;
  padding: 0.03em;
  border-radius: 0.16em;
  background: #f8d574;
  transform: rotate(-12.53deg);
  box-shadow: 0 1.7px 3.3px rgba(45, 157, 180, 0.1), 0 6.7px 6.7px rgba(45, 157, 180, 0.09);
}
.hero__notecard {
  flex: 1;
  min-height: 0;
  width: 100%;
  border-radius: 0.13em;
  background: rgba(255, 255, 255, 0.89);
}
.hero__noteband {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 0.19em;
  padding-top: 0.03em;
  font-family: var(--hand);
  font-size: 0.062em;
  line-height: 1;
  color: #b69e5b;
  white-space: nowrap;
}
.hero__noteband img { width: 1.1em; height: 1.1em; }

.hero__sub {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.36px;
  color: rgba(255, 255, 255, 0.98);
  max-width: 387px;
  margin: 0 0 36px;
}

/* The email capsule: dark translucent pill, white button. */
.capsule {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.32);
  border-radius: 100px;
  padding: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.capsule__field {
  width: 204px;
  border: 0;
  background: none;
  padding: 12px 20px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.48px;
  color: #fff;
}
.capsule__field::placeholder { color: rgba(255, 255, 255, 0.37); }
.capsule__field:focus { outline: none; }
.capsule:focus-within { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45); }
.capsule__field[aria-invalid="true"] { color: #ffd9cc; }

.capsule__btn {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.7px;
  line-height: 1.4;
  color: #000;
  background: #fff;
  border: 0;
  border-radius: 40px;
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.capsule__btn:hover { background: rgba(255, 255, 255, 0.9); }
.capsule__btn:active { transform: scale(0.94); }
.capsule__btn:disabled { opacity: 0.6; cursor: default; }

/* "For our first 100 members" — pinned under the hero block. */
.band__caption {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.26px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  z-index: 2;
}
.band__caption img { width: 14px; height: 14px; }
.band__caption[hidden] { display: none; }
/* The CTA band's copy of the caption sits in flow, not pinned. */
.band__caption--static {
  position: static;
  transform: none;
  margin-top: 14px;
}

.error {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.4px;
  color: #fff;
  margin: 10px 0 0;
}
.error:empty { display: none; }

.count {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, 0.8);
  margin: 12px 0 0;
}
.count[hidden] { display: none; }
.count__dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.count b { color: #fff; font-weight: 600; }

/* One signup unit: form, success state, error and caption together. */
.signup {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Success state — swaps in where the capsule was, white on cyan. */
.done { display: none; }
.done--on {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.form--off { display: none; }
.done__title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -1.2px;
  color: #fff;
  margin: 0 0 4px;
}
.done__body {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.6px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 14px;
}
.share {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  background: #fff;
  border-radius: 50px;
  padding: 4px 4px 4px 20px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14);
}
.share__link {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.5px;
  color: var(--headline);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share__copy {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #fff;
  background: var(--band);
  border: 0;
  border-radius: 40px;
  padding: 8px 16px;
  cursor: pointer;
}
.done__hint {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: -0.5px;
  color: rgba(255, 255, 255, 0.8);
  margin: 12px 0 0;
}

/* ============================ Widgets ============================ */

.chip {
  position: absolute;
  left: 15px;
  top: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.53px;
  color: #160b2e;
  z-index: 1;
}
.chip--light { color: #fff; }
.chip--wave { color: #986c6c; }
.chip__avatar {
  display: flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  overflow: hidden;
}
.chip__avatar img {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.chip__avatar--stack img + img { margin-left: -8px; }

/* --- The note widget (280 × 180, butter) --- */
.notew {
  display: flex;
  flex-direction: column;
  width: 280px;
  height: 180px;
  padding: 4.3px 4.3px 0;
  border-radius: 29.8px;
  background: rgba(255, 188, 0, 0.36);
  box-shadow:
    inset 0 0 0 1.1px rgba(0, 0, 0, 0.05),
    0 1.1px 4.3px rgba(254, 204, 67, 0.45);
}
.notew__card {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px;
  border-radius: 25.6px;
  background: #fffcf4;
  box-shadow: inset 0 0 0 1.1px #fff, 0 1.1px 3.2px rgba(245, 194, 56, 0.1);
}
.notew__text {
  font-family: var(--hand);
  font-size: 12.7px;
  line-height: 16.9px;
  letter-spacing: -0.51px;
  color: #6b510b;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notew__band {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.4px;
  height: 36px;
  font-family: var(--hand);
  font-size: 11.7px;
  line-height: 1;
  letter-spacing: -0.47px;
  color: #b69e5b;
}
.notew__heart { width: 12.8px; height: 12.8px; }

/* --- The mood widget, compact (280 × 180, lilac) --- */
.moodw2 {
  display: flex;
  width: 280px;
  height: 180px;
  padding: 3.75px;
  border-radius: 31.1px;
  background: #b899f8;
  box-shadow:
    inset 0 0 0 1.1px rgba(0, 0, 0, 0.05),
    0 1.1px 4.4px rgba(81, 0, 255, 0.25);
}
.moodw2__pane {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 45px 11px 11px;
  border-radius: 26.7px;
  background: rgba(255, 255, 255, 0.22);
  border: 1.1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 3.3px 6.7px rgba(152, 97, 255, 0.1), 0 12.2px 12.2px rgba(152, 97, 255, 0.09);
}
.moodw2__face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5.6px;
}
.moodw2__facecircle {
  display: block;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.9px rgba(0, 0, 0, 0.16), 0 2.8px 2.8px rgba(136, 71, 255, 0.09);
  overflow: hidden;
}
.moodw2__facecircle img {
  width: 38.6px;
  height: 38.6px;
  margin: 9.3px 0 0 1.5px;
}
.moodw2__feeling {
  font-size: 13.2px;
  font-weight: 500;
  line-height: 17.6px;
  letter-spacing: -0.53px;
  color: #fff;
  text-align: center;
}
.moodw2__controls {
  display: flex;
  gap: 9.4px;
  width: 100%;
}
.moodw2__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.24);
  border-radius: 28.1px;
  height: 33.8px;
}
.moodw2__btn--icon { width: 33.8px; flex: 0 0 33.8px; }
.moodw2__btn--icon img { width: 11.3px; height: 11.3px; }
.moodw2__btn--send {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #fff;
}

/* --- The wave widget (431.7 × 192, blush) — Figma node 153:976 --- */
.wavew {
  display: flex;
  gap: 9.5px;
  width: 431.7px;
  height: 192px;
  padding: 4px;
  border-radius: 33.2px;
  background: #ffdbd6;
  box-shadow:
    inset 0 0 0 1.2px rgba(0, 0, 0, 0.05),
    0 1.2px 4.7px rgba(255, 219, 214, 0.25);
}
.wavew__left {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 14px;
  border-radius: 28.4px;
  background: #fff5f4;
  box-shadow: 0 3.6px 7.1px rgba(255, 219, 214, 0.1), 0 13px 13px rgba(255, 219, 214, 0.09);
}
.wavew__right {
  position: relative;
  flex: 0 0 207px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 46px 12px 12px;
  border-radius: 28.4px;
  background: #ffdbd6;
  border: 1.2px solid #facfc9;
  box-shadow: 0 3.6px 7.1px rgba(255, 219, 214, 0.1), 0 13px 13px rgba(255, 219, 214, 0.09);
}
.wavew__paw { width: 80px; height: auto; }
.wavew__line {
  font-size: 16px;
  font-weight: 500;
  line-height: 18.8px;
  letter-spacing: -0.64px;
  color: #986c6c;
  text-align: center;
  margin: 0;
}
.wavew__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 36px;
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.24);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.64px;
  color: #fff;
}

/* Scaled to the feature slot: 431.7 → 280 wide. */
.wavew-scale {
  width: 280px;
  height: 124.6px;
}
.wavew-scale .wavew {
  transform: scale(0.6486);
  transform-origin: top left;
}

/* The pink paw waves — killed wholesale by the reduced-motion rule. */
.wavew__paw--waving {
  transform-origin: 50% 88%;
  animation: paw-wave 1.8s ease-in-out infinite;
}
@keyframes paw-wave {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(-9deg); }
  60% { transform: rotate(7deg); }
}

/* ============================ Sections ============================ */

.section {
  max-width: 1176px;
  margin-inline: auto;
  padding: 160px clamp(16px, 6vw, 80px) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
main > .section:last-child { padding-bottom: 40px; }

.section__title {
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.05em;
  text-align: center;
  color: var(--headline);
  margin: 0;
  text-wrap: balance;
}
.section__title--narrow { max-width: 420px; }

/* ---------- Features: widgets and labels, zigzagged ---------- */

.zigzag {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.zig {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 64px;
}
.zig__art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 295px;
  height: 204px;
  flex: 0 0 auto;
}
.zig__art--note { transform: rotate(-5deg); }
.zig__art--mood { transform: rotate(4.78deg); }
.zig__art--wave { transform: rotate(-5deg); }
.zig__label {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -1.4px;
  color: var(--headline);
  margin: 0;
  white-space: nowrap;
}

/* ---------- Steps: three tilted cards, scattered ---------- */

.scatter {
  position: relative;
  width: 536px;
  max-width: 100%;
  height: 794px;
}
.scatter__item { position: absolute; }
.scatter__item--1 { left: -50px; top: 20px; transform: rotate(-3.47deg); }
.scatter__item--2 { left: 268px; top: 271px; transform: rotate(2.09deg); }
.scatter__item--3 { left: -24px; top: 511px; transform: rotate(-11.47deg); }

.stepcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 240px;
  height: 240px;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.stepcard__num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 40px 40px 40px 32px;
  background: rgba(37, 46, 47, 0.07);
  border: 1px solid #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -1px;
  color: var(--headline);
}
.stepcard__label {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--headline);
  max-width: 160px;
  margin: 0;
}

/* ---------- Privacy: 2×2 grid of small cards ---------- */

.pgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  width: min(536px, 100%);
  justify-content: center;
}
.pcard {
  flex: 1 0 200px;
  max-width: 256px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.pcard__icon { width: 27px; height: 27px; }
.pcard__label {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--headline);
  max-width: 170px;
  margin: 0;
}

/* ---------- FAQ: separate cards, one open at a time ---------- */

.faq {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(536px, 100%);
}
.faq details {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--card-shadow);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -1px;
  color: rgba(37, 46, 47, 0.81);
}
.faq summary::-webkit-details-marker { display: none; }
.faq__icons { display: flex; flex: 0 0 auto; }
.faq__icons img { width: 20px; height: 20px; }
.faq__minus { display: none; }
.faq details[open] .faq__plus { display: none; }
.faq details[open] .faq__minus { display: block; }
.faq details > p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.9px;
  color: rgba(37, 46, 47, 0.35);
  margin: 20px 0 0;
}
.faq details a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Final CTA: the cyan band again, section-width ---------- */

.band--cta {
  width: 100%;
  height: auto;
  padding: 90px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.band--cta .hero {
  position: static;
  transform: none;
}
.hero__title--sm { font-size: clamp(34px, 3.8vw, 48px); display: block; }

/* ============================ Footer ============================ */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 20px 40px;
  text-align: center;
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 2px;
}
.footer__mark { width: 26px; height: 26px; }
.footer__name {
  font-family: var(--wordmark);
  font-size: 19px;
  letter-spacing: -0.95px;
  color: rgba(9, 31, 34, 0.8);
}
.footer__links {
  display: flex;
  gap: 22px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.4px;
}
.footer__links a { color: var(--sub); text-decoration: none; }
.footer__links a:hover { color: var(--headline); }
.footer__note {
  font-size: 12px;
  letter-spacing: -0.35px;
  color: var(--dim);
  margin: 2px 0 0;
}

/* ============================ Motion ============================ */

/* Blocks fade up as they scroll into view. JS stamps `reveal-armed` on
   <html> before first paint; without JS nothing is ever hidden. */
.reveal-armed :is(.zig, .scatter__item, .pcard, .faq details) {
  opacity: 0;
  translate: 0 18px;
}
.reveal-armed :is(.zig, .scatter__item, .pcard, .faq details).is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ============================ Responsive ============================ */

@media (max-width: 880px) {
  .band { height: 680px; }
  .band__caption { bottom: 64px; }
  .section { padding-top: 100px; gap: 56px; }
  .band--cta { padding: 72px 20px; height: auto; }

  .zig, .zig--flip { flex-direction: column; gap: 24px; }
  .zig--flip { flex-direction: column-reverse; }
  .zig__label { text-align: center; white-space: normal; }

  /* The scatter relaxes into a gently tilted column. */
  .scatter { height: auto; display: flex; flex-direction: column; align-items: center; gap: 28px; }
  .scatter__item { position: static; }
  .scatter__item--1 { transform: rotate(-2.5deg); }
  .scatter__item--2 { transform: rotate(2deg); }
  .scatter__item--3 { transform: rotate(-2.5deg); }
}

@media (max-width: 560px) {
  body { padding: 8px; }
  .band { height: 620px; border-radius: 24px; }
  .band__caption { bottom: 36px; }
  .capsule { width: 100%; max-width: 360px; }
  .capsule__field { flex: 1; width: auto; min-width: 0; }
  .nav__cta { font-size: 14px; padding: 9px 13px; letter-spacing: -0.6px; }
  .hero__sub { font-size: 16px; }
  .zig__label { font-size: 24px; }
  .faq summary { font-size: 18px; }
  .faq details > p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}