/* Zero Social, version E: the landing page for Zero today, in the vision page's world. It loads
   version C's design system and film (/landing/c.css, /landing/film.js) and adds what a
   today-first page needs: a "what brings you here" picker that tailors the page, the app's
   clay icons floating in the film, communities that pop out of the globe one by one, and quiet
   glass panels for the checks and the questions. Copy stays to one short line per idea. */

:root { color-scheme: dark; }

/* the gutter and fixed controls also clear a phone's notch and side bars */
.stage { padding-left: max(var(--pad), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad), env(safe-area-inset-right, 0px)); }
.nav { top: calc(16px + env(safe-area-inset-top, 0px)); }
.rail { right: calc(22px + env(safe-area-inset-right, 0px)); }

/* ── hero: the picker ───────────────────────────────────────────────────── */
.ch.hero .copy { max-width: 980px; }
.ch.hero .voice { margin-top: 18px; }
.pick { margin-top: 30px; display: grid; justify-items: center; gap: 14px; }
.pick-q { margin: 0; font: 600 12px/16px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tertiary); }
.goal-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.goal-chip {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px 0 6px; border-radius: 9999px;
  border: 1px solid var(--edge-strong); background: rgba(22, 22, 27, 0.55); color: var(--ink);
  font: 600 15px/1 var(--sans); cursor: pointer; white-space: nowrap;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s var(--ease);
}
.goal-chip img { width: 36px; height: 34px; object-fit: contain; transition: transform 0.4s var(--ease); }
.goal-chip:hover { border-color: rgba(255, 255, 255, 0.32); }
.goal-chip:hover img { transform: translateY(-2px) rotate(-6deg) scale(1.08); }
.goal-chip:active { transform: scale(0.97); }
.goal-chip[aria-pressed="true"] { background: var(--ink); color: #121212; border-color: var(--ink); }
.hero .ctas { margin-top: 26px; }

/* the app's clay icons, floating in the film around the ring */
.floaters { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.floater { position: absolute; left: 0; top: 0; width: 92px; will-change: transform, opacity; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)); transition: filter 0.4s var(--ease); }
.floater.hot { filter: drop-shadow(0 0 22px rgba(255, 255, 255, 0.35)) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.45)) brightness(1.12); }

/* ── your goal ──────────────────────────────────────────────────────────── */
.goal-panel { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: center; width: min(1080px, 100%); }
.goal-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 100%; perspective: 900px; }
.goal-art::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.1), transparent); }
.goal-art img { position: relative; width: 74%; max-width: 340px; animation: bob 6s ease-in-out infinite alternate; transform-style: preserve-3d; filter: drop-shadow(0 34px 40px rgba(0, 0, 0, 0.5)); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.goal-art img.swap { opacity: 0; transform: scale(0.86) rotate(-6deg); }
@keyframes bob { from { translate: 0 0; rotate: -3deg; } to { translate: 0 -16px; rotate: 3deg; } }
.goal-copy { min-width: 0; text-align: left; }
.goal-copy .over { margin-bottom: 14px; }
.goal-copy .display { text-wrap: balance; }
.goal-copy .sub { margin: 16px 0 0; max-width: 46ch; }
.g-swap { transition: opacity 0.3s var(--ease), filter 0.3s var(--ease); }
.g-swap.out { opacity: 0; filter: blur(6px); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.cchip { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px 0 5px; border-radius: 9999px; background: rgba(26, 26, 31, 0.7); border: 0.5px solid var(--edge-strong); font: 600 14.5px/1 var(--sans); color: var(--ink); white-space: nowrap; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cchip img { width: 36px; height: 34px; object-fit: contain; }
.cchip .glyph { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); color: var(--ink); font-size: 12.5px; font-weight: 700; }
/* switch goals with the icons alone */
.goal-switch { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.goal-switch button { width: 50px; height: 50px; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--edge-strong); background: rgba(22, 22, 27, 0.55); cursor: pointer; transition: background 0.25s, border-color 0.25s, transform 0.2s var(--ease); }
.goal-switch button img { width: 36px; height: 34px; object-fit: contain; opacity: 0.6; transition: opacity 0.25s, transform 0.4s var(--ease); }
.goal-switch button:hover img { opacity: 1; transform: rotate(-6deg) scale(1.08); }
.goal-switch button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.goal-switch button[aria-pressed="true"] img { opacity: 1; }

/* ── communities: one at a time, popping out of the turning globe ──────────
   No card behind them: the icon sits on its spot, the name floats beside it. */
.lbl.comm.ic.ride { display: flex; align-items: center; gap: 10px; width: max-content; max-width: none; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; transition: opacity 0.5s var(--ease); }
.lbl.comm.ic.ride::before { display: none; }
.lbl.comm.ic.ride[data-side="l"] { flex-direction: row-reverse; }
.lbl.comm.ic.ride .mk { flex: none; width: 46px; height: 44px; object-fit: contain; opacity: 0; transform: scale(0.2) translateY(12px); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55)); transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s var(--ease); }
.lbl.comm.ic.ride .glyph { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #121212; font: 700 13px/1 var(--sans); filter: none; box-shadow: 0 0 18px var(--c); }
.lbl.comm.ic.ride b { font: 600 17px/22px var(--sans); color: #fff; white-space: nowrap; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85); opacity: 0; transform: translateX(-8px); transition: opacity 0.45s var(--ease) 0.15s, transform 0.55s var(--ease) 0.15s; }
.lbl.comm.ic.ride[data-side="l"] b { transform: translateX(8px); }
.lbl.comm.ic.ride.is .mk, .lbl.comm.ic.ride.is b { opacity: 1; transform: none; }
/* each kind's step carries its colour, matching the spots on the globe */
.kdot { display: inline-block; width: 10px; height: 10px; margin-right: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px var(--c); vertical-align: 0.18em; }
@media (max-width: 1099px) {
  .ticker { min-height: 76px; }
  .ticker .mk { width: 52px; height: 48px; object-fit: contain; margin: 0 auto 2px; }
  .ticker .glyph { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #121212; font: 700 14px/1 var(--sans); }
  .ticker b::before { display: none; }
}

/* ── safety and questions: quiet glass panels over the film ─────────────── */
.glass { background: rgba(20, 20, 25, 0.62); border: 0.5px solid var(--edge-strong); border-radius: 24px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.checks { list-style: none; margin: 30px auto 0; padding: 22px 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; max-width: 640px; text-align: left; }
.checks li { position: relative; padding-left: 34px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.checks li::before { content: ''; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }
.checks li::after { content: ''; position: absolute; left: 8px; top: 5px; width: 5px; height: 10px; border: solid #121212; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.safety .fine a { color: var(--ink); border-bottom: 1px solid var(--edge-strong); }

/* the doorway: copy inside the logo drawn in dots */
.hole .btn { margin-top: 18px; }

/* questions: a chapter that grows with its content instead of pinning */
.ch.flow { height: auto; }
.ch.flow .stage { position: relative; height: auto; min-height: 100vh; padding-block: clamp(110px, 14vh, 160px); }
@supports (height: 1svh) { .ch.flow { height: auto; } .ch.flow .stage { height: auto; min-height: 100svh; } }
.faq-wrap { width: min(760px, 100%); text-align: left; }
.faq-wrap .display { text-align: left; }
.faq { margin-top: 26px; padding: 6px 24px; }
.faq details { border-bottom: 0.5px solid var(--edge-strong); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; font: 600 17px/24px var(--sans); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-size: 24px; font-weight: 400; line-height: 1; color: var(--tertiary); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 60ch; }

/* how it works, step two: the five goals float in a row, yours lit */
.how-goals { position: absolute; left: 50%; top: 50%; z-index: 1; width: max-content; display: flex; align-items: center; gap: clamp(10px, 2vw, 28px); transform: translate(-50%, -54%); opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease); }
#how.on[data-at="1"] .how-goals { opacity: 1; }
.how-goals img { width: clamp(54px, 7vw, 100px); opacity: 0.32; filter: grayscale(0.7) drop-shadow(0 16px 20px rgba(0, 0, 0, 0.45)); transform: scale(0.8); transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), filter 0.5s var(--ease); animation: bob 5s ease-in-out infinite alternate; }
.how-goals img:nth-child(2) { animation-delay: -1.2s; }
.how-goals img:nth-child(3) { animation-delay: -2.4s; }
.how-goals img:nth-child(4) { animation-delay: -3.6s; }
.how-goals img:nth-child(5) { animation-delay: -4.8s; }
.how-goals img.on { opacity: 1; filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.28)) drop-shadow(0 18px 24px rgba(0, 0, 0, 0.5)); transform: scale(1.18); }

/* phones: a get-the-app button that follows you down the page */
.sticky-cta { display: none; }

@media (prefers-reduced-motion: reduce) {
  .goal-art img, .how-goals img { animation: none; }
}

/* ── below laptop ───────────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .goal-panel { grid-template-columns: 1fr; gap: 6px; justify-items: center; }
  .goal-art { width: min(240px, 60vw); }
  .goal-copy { text-align: center; }
  .goal-copy .sub { margin-left: auto; margin-right: auto; }
  .goal-copy .chips, .goal-switch { justify-content: center; }
  .checks { grid-template-columns: 1fr; max-width: 420px; }
}

/* ── phone ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .nav { top: calc(10px + env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); }
  .ch.hero .copy { margin-bottom: 6vh; }
  .ch.hero .voice { font-size: 17px; margin-top: 12px; }
  .pick { margin-top: 22px; gap: 10px; }
  .goal-chips { gap: 6px; }
  .goal-chip { height: 40px; padding: 0 13px 0 4px; font-size: 13.5px; gap: 6px; }
  .goal-chip img { width: 30px; height: 28px; }
  .ch.hero .ctas { display: none; }
  .floater { width: 52px; }
  .goal-art { width: min(190px, 50vw); }
  .chips { margin-top: 20px; }
  .cchip { height: 38px; font-size: 13.5px; }
  .cchip img { width: 30px; height: 28px; }
  .goal-switch button { width: 44px; height: 44px; }
  .goal-switch button img { width: 30px; height: 28px; }
  .checks { padding: 18px 20px; gap: 10px; }
  .checks li { font-size: 15px; }
  .faq { padding: 2px 18px; }
  /* bottom copy clears the sticky button */
  .stage.split > .copy.bottom { margin-bottom: 96px; }
  .sticky-cta { display: block; position: fixed; z-index: 40; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); transform: translateY(170%); transition: transform 0.4s var(--ease); }
  .sticky-cta.show { transform: none; }
  .sticky-cta .btn { width: 100%; }
}