/* Clay Sky skin. Layout from the PDF sketch. Colors/type only via tokens. */

html.is-page-lock,
html.is-page-lock body {
  overflow: hidden !important;
  overscroll-behavior: none;
  overflow-anchor: none;
}

html.is-page-lock body {
  position: fixed;
  inset: 0;
  width: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  cursor: auto;
}

html {
  scroll-padding-top: 92px;
}

a,
button,
[role="button"] {
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: var(--space-sm);
  top: -40px;
  background: var(--color-paper-white);
  color: var(--color-ink);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-cta-sm);
  z-index: 60;
}

.skip:focus {
  top: var(--space-sm);
}

/* ── nav pill ── */

.nav {
  position: fixed;
  top: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: min(var(--nav-width), calc(100vw - var(--space-lg)));
  height: var(--nav-height);
  padding: 6px;
  box-sizing: border-box;
  background: var(--color-paper-white);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-nav);
}

.nav-mark {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 16px;
  background: var(--grad-orb);
  box-shadow: var(--shadow-orb);
  display: grid;
  place-items: center;
}

.nav-mark i {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-avatar);
  background: var(--color-sky-mid);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
  min-width: 0;
  padding-left: var(--space-2xs);
}

.nav-links a {
  font-size: var(--text-nav);
  line-height: var(--leading-nav);
  font-weight: 500;
  color: var(--color-ink-mute);
  text-decoration: none;
  transition: color var(--dur-ui) var(--ease-ui);
}

.nav-links a:hover {
  color: var(--color-ink-hover);
}

.nav-cta {
  margin-left: auto;
  flex-shrink: 0;
}

.nav-burger {
  display: none;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-cta-sm);
  font-size: 22px;
  color: var(--color-ink);
}

/* ── hero ── */

.hero {
  --hills: 72vh;
  --meadow-fade: 48vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100svh;
  padding: 32px var(--gutter) 24px;
  border-radius: 0;
  background: #1d7fff;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  text-align: center;
  color: var(--color-on-sky);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--hills);
  background: url("../assets/meadow.webp") center 42% / cover no-repeat;
  pointer-events: none;
  z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
}

.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--meadow-fade);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-paper) 0%, transparent) 0%,
    color-mix(in srgb, var(--color-paper) 18%, transparent) 22%,
    color-mix(in srgb, var(--color-paper) 48%, transparent) 48%,
    color-mix(in srgb, var(--color-paper) 78%, transparent) 72%,
    color-mix(in srgb, var(--color-paper) 96%, transparent) 88%,
    var(--color-paper) 100%
  );
  pointer-events: none;
  z-index: 2;
}

.hero-rings {
  display: block;
  position: absolute;
  inset: 0;
  background: var(--grad-sky);
  pointer-events: none;
  z-index: 0;
}

.hero-rings span {
  display: none;
}

.hero-inner {
  position: relative;
  z-index: 3;
  flex: 1 0 auto;
  width: 100%;
  max-width: min(var(--content), 100%);
  margin: 0 auto;
  text-align: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.hero-sit {
  margin: 0;
  max-width: min(48em, 100%);
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
  color: var(--color-on-sky-solid);
  text-align: center;
  opacity: 0.88;
  transition:
    opacity 480ms var(--ease-out),
    transform 480ms var(--ease-out),
    filter 480ms var(--ease-out);
}

.hero-meta-line {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-on-sky-solid);
  text-align: center;
  opacity: 0.68;
}

.hero-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  text-align: center;
  transition:
    opacity 480ms var(--ease-out),
    transform 480ms var(--ease-out),
    filter 480ms var(--ease-out);
}

.hero-meta-logo {
  display: block;
  flex: 0 0 auto;
  height: 36px;
  width: auto;
  background: none;
}

.hero-meta-copy {
  margin: 0;
  width: 100%;
  min-width: 0;
  font-family: var(--font-body);
  color: #000;
  text-align: center;
}

.hero-meta-copy strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: inherit;
}

.hero-meta-copy span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: inherit;
  opacity: 0.88;
}

.top-slots {
  position: relative;
  z-index: 30;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #111;
}

.top-slots-label {
  margin: 0;
  flex: 0 1 auto;
  font-family: var(--font-body);
  font-size: clamp(10px, 2.7vw, 13px);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.top-slots-track {
  flex: 1 1 5em;
  min-width: 4.5em;
  width: auto;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}

.top-slots-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #e11900;
}

.hero.is-open .hero-inner {
  max-width: 1280px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  overflow: visible;
  width: 100%;
}

.hero h1,
.hero-vow {
  margin: 0 auto;
  max-width: 32em;
  color: #fff;
  font-style: normal;
  text-align: center;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: normal;
  letter-spacing: -0.03em;
  margin-bottom: 48px;
}

.hero h1 i {
  font-style: italic;
  font-weight: 800;
}

.hero-vow {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.02em;
  max-width: 30em;
  margin-bottom: 30px;
  opacity: 0.96;
}

.mark-orange {
  color: #ffcc00;
}

.hero h1 u {
  text-decoration: underline solid #fff 0.08em;
  text-underline-offset: 0.18em;
}

.hero h1 u .hw {
  text-decoration: none;
  border-bottom: 0.08em solid #fff;
  padding-bottom: 0.08em;
}

.hero h1 .hw,
.hero-vow .hw {
  display: inline-block;
  will-change: opacity, transform, filter;
  transition:
    opacity 480ms var(--ease-out),
    transform 480ms var(--ease-out),
    filter 480ms var(--ease-out);
  transition-delay: calc(var(--i) * 28ms);
}

.hero-inner.is-melting .hw,
.hero-inner.is-melting .hero-sit,
.hero-inner.is-melting .hero-meta,
.hero-inner.is-melting .hero-meta-line {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(10px);
}

.hero-inner.is-melting .demo-lead,
.hero-inner.is-melting .demo-hint,
.hero-inner.is-melting .demo-proof,
.hero-inner.is-melting .nick-field,
.hero-inner.is-melting .demo-idle input,
.hero-inner.is-melting .demo-cta-row,
.hero-inner.is-melting .btn-pill,
.hero-inner.is-melting .chat-err {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    opacity 420ms var(--ease-out),
    transform 420ms var(--ease-out),
    filter 420ms var(--ease-out);
}

.hero-inner.is-melting .demo-lead,
.hero-inner.is-melting .demo-hint,
.hero-inner.is-melting .demo-proof {
  transition-delay: 0ms;
}

.hero-inner.is-melting .nick-field,
.hero-inner.is-melting .demo-idle input {
  transition-delay: 40ms;
}

.hero-inner.is-melting .demo-cta-row,
.hero-inner.is-melting .btn-pill {
  transition-delay: 70ms;
}

/* ── liquid drop (hero → theater) ── */

.liquid {
  position: absolute;
  left: 0;
  right: 0;
  top: 36%;
  height: 300px;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.liquid-halo {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.12) 46%,
    rgba(255, 255, 255, 0) 72%
  );
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 480ms var(--ease-out), transform 720ms var(--ease-out);
}

.liquid.is-gather .liquid-halo,
.liquid.is-idle .liquid-halo {
  opacity: 1;
  transform: scale(1);
}

.liquid.is-idle .liquid-halo {
  animation: halo-pulse 1.4s var(--ease-in-out) infinite;
}

.liquid.is-pop .liquid-halo {
  opacity: 0;
  transform: scale(1.35);
  transition-duration: 320ms;
}

.liquid-svg {
  position: absolute;
  width: 0;
  height: 0;
}

.liquid-field {
  position: relative;
  width: 240px;
  height: 240px;
  filter: url(#liquid-goo);
}

.drop {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: var(--color-paper-white);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 32px rgba(255, 255, 255, 0.28);
  opacity: 0;
  transform: translate(calc(-50% + var(--ox, 0px)), calc(-50% + var(--oy, 80px)))
    scale(0.42);
}

.drop.core {
  width: 108px;
  height: 108px;
  --ox: 0px;
  --oy: 28px;
  background:
    radial-gradient(circle at 32% 28%, #fff 0 26%, #eef4ff 62%, #dce8ff 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    inset 0 -10px 18px rgba(110, 160, 255, 0.2),
    0 14px 36px rgba(255, 255, 255, 0.32);
}

.drop.core::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 24%;
  top: 11%;
  height: 30%;
  border-radius: 50%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0)
  );
}

.drop.d1 {
  width: 46px;
  height: 46px;
  --ox: -52px;
  --oy: 70px;
}

.drop.d2 {
  width: 62px;
  height: 62px;
  --ox: 4px;
  --oy: 86px;
}

.drop.d3 {
  width: 40px;
  height: 40px;
  --ox: 48px;
  --oy: 62px;
}

.liquid.is-gather .drop {
  animation: drop-merge 740ms var(--ease-out) forwards;
}

.liquid.is-gather .d2 {
  animation-delay: 30ms;
}

.liquid.is-gather .d1 {
  animation-delay: 70ms;
}

.liquid.is-gather .d3 {
  animation-delay: 110ms;
}

.liquid.is-gather .core {
  animation-delay: 180ms;
}

.liquid.is-idle .drop {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.liquid.is-idle .core {
  animation: blob-breath 1.4s var(--ease-in-out) infinite;
}

.liquid.is-pop .drop {
  animation: drop-pop 340ms var(--ease-out) forwards;
}

@keyframes drop-merge {
  0% {
    opacity: 0;
    transform: translate(
        calc(-50% + var(--ox, 0px)),
        calc(-50% + var(--oy, 80px))
      )
      scale(0.42);
  }
  42% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes blob-breath {
  0%,
  100% {
    border-radius: 58% 42% 54% 46%;
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    border-radius: 42% 58% 46% 54%;
    transform: translate(-50%, -50%) scale(1.16);
  }
}

@keyframes halo-pulse {
  0%,
  100% {
    transform: scale(0.88);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.22);
    opacity: 1;
  }
}

@keyframes drop-pop {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.55);
  }
}

/* ── demo (no frame) ── */

.hero {
  transition:
    min-height 920ms var(--ease-in-out),
    padding 920ms var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
  .hero {
    transition: none;
  }
}

.hero.is-theater {
  min-height: 0;
}

.hero.is-open {
  box-sizing: border-box;
  min-height: 100dvh;
  height: auto;
  padding-top: 80px;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: visible;
  contain: none;
}

.hero.is-open .hero-copy {
  display: flex;
  flex: none;
  margin: 0;
}

.hero.is-open h1 {
  font-size: clamp(22px, 3.4vw, 38px);
}

.hero.is-open .hero-vow {
  font-size: clamp(16px, 2.6vw, 28px);
}

.hero.is-theater h1,
.hero.is-open h1,
.hero.is-theater .hero-vow,
.hero.is-open .hero-vow {
  transition: none;
}

.hero.is-open h1,
.hero.is-open .hero-vow {
  opacity: 1;
  transform: none;
}

.demo {
  position: relative;
  z-index: 5;
  max-width: 640px;
  margin: var(--space-xl) auto 0;
  text-align: center;
  scroll-margin-top: 96px;
  transition: max-width 920ms var(--ease-in-out), margin 920ms var(--ease-out);
}

.hero:not(.is-open):not(.is-theater) .demo {
  margin: 0;
  height: 0;
  min-height: 0;
  overflow: hidden;
}

.hero.is-theater .demo,
.hero:has(#chat-load:not([hidden])) .demo,
.hero:has(#chat-talk:not([hidden])) .demo {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.hero.is-open .demo {
  max-width: 400px;
  width: 100%;
  flex: 0 0 auto;
  height: auto;
  max-height: none;
  min-height: var(--chat-h);
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.hero.is-open.is-spread .demo {
  max-width: min(1200px, calc(100vw - 32px));
  height: auto;
  min-height: var(--chat-h);
  flex: 0 0 auto;
}

.demo-stage {
  position: relative;
  min-height: 0;
  transition: min-height 920ms var(--ease-in-out);
}

.hero.is-theater .demo-stage {
  min-height: 320px;
}

.hero.is-open .demo-stage {
  min-height: 0;
  flex: none;
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hero.is-open.is-spread .demo-stage {
  height: auto;
  flex: none;
}

.demo-board {
  display: grid;
  grid-template-columns: minmax(280px, 400px);
  grid-template-rows: minmax(0, 1fr) auto;
  justify-content: center;
  gap: 0;
  align-items: stretch;
  text-align: left;
  transform: scale(0.98);
  opacity: 0;
  transition: grid-template-columns 1.08s var(--ease-out);
}

.demo-board.is-in {
  animation: ig-in 860ms var(--ease-out) forwards;
}

.demo-board.is-spread {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.hero.is-open .demo-board {
  flex: none;
  height: auto;
  min-height: 0;
  max-height: none;
  grid-template-rows: auto var(--chat-h) auto;
}

.hero.is-open .demo-board .ig {
  height: var(--chat-h);
  min-height: var(--chat-h);
  max-height: var(--chat-h);
}

.demo-board.has-offer .ig {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.hero.is-open.is-spread .demo-board {
  flex: none;
  height: auto;
  max-height: none;
}

.demo-board .ig {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 400px;
  justify-self: center;
  grid-column: 1;
  grid-row: 2;
}

.hero.is-open.is-spread .demo-board.is-spread .ig {
  max-width: none;
  height: var(--chat-h);
  min-height: var(--chat-h);
  max-height: var(--chat-h);
}

.side-card {
  box-sizing: border-box;
  display: none;
  background: rgba(8, 10, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 22px 20px;
  color: #fff;
  backdrop-filter: blur(16px);
  transform-origin: left center;
}

.live-col {
  display: none;
}

.demo-board.is-spread .live-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  width: 100%;
  min-height: 0;
  animation: liquid-from-chat 1.08s var(--ease-out) both;
  animation-delay: 60ms;
}

.demo-board.is-spread .side-card {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
  order: 1;
}

@keyframes liquid-from-chat {
  0% {
    opacity: 0;
    transform: translateX(-56px) scale(0.84);
    filter: blur(14px);
    clip-path: inset(10% 72% 10% 0 round 24px);
  }
  42% {
    opacity: 1;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: inset(0 0 0 0 round 24px);
  }
}

.side-kicker {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.live-empty,
.live-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.live-stack {
  display: grid;
  gap: 16px;
}

.live-row strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}

.live-row p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.live-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.live-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: #fff;
}

.live-acts {
  display: grid;
  gap: 8px;
}

.live-act {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transform: translateY(6px);
}

.live-act.is-on,
.live-act.is-done {
  opacity: 1;
  transform: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}

.live-act i {
  flex: none;
  width: 16px;
  color: rgba(255, 255, 255, 0.35);
  font-style: normal;
}

.live-act.is-done i {
  color: #53fd18;
}

.chat-prompts {
  display: none;
  position: relative;
  overflow: hidden;
  place-items: center;
  margin: 0;
  min-height: 1.4em;
  max-width: 100%;
  width: 100%;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #fff;
  text-align: center;
}

.demo-board.is-spread .chat-prompts {
  display: grid;
  order: 2;
  font-weight: 800;
}

.chat-prompt {
  grid-area: 1 / 1;
  max-width: 22em;
  margin: 0;
  opacity: 0;
  transform: translateX(70%);
  pointer-events: none;
  text-wrap: balance;
  transition:
    transform 620ms var(--ease-out),
    opacity 420ms var(--ease-out);
}

.chat-prompt.is-on {
  opacity: 1;
  transform: translateX(0);
}

.chat-prompt.is-out {
  opacity: 0;
  transform: translateX(-70%);
}

.demo-title {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6.6vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--color-on-sky);
  font-style: normal;
  transform-origin: 50% 80%;
  transition:
    transform var(--dur-theater) var(--ease-out),
    opacity 560ms var(--ease-out);
}

.demo-title.is-squeeze,
.demo-idle.is-squeeze {
  transform: scale(0.36);
  opacity: 0.72;
  pointer-events: none;
  transition:
    transform 2000ms cubic-bezier(0.45, 0, 0.12, 1),
    opacity 1600ms var(--ease-in-out);
}

.demo-title.is-shrink,
.demo-idle.is-shrink {
  transform: scale(0.1);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 480ms var(--ease-in),
    opacity 360ms var(--ease-in);
}

.demo-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 0;
  transform-origin: 50% 42%;
  transition:
    transform var(--dur-theater) var(--ease-out),
    opacity 560ms var(--ease-out);
}

.hero-vsl {
  width: min(640px, 100%);
  aspect-ratio: 1.5533980582524272;
  margin: 0 auto;
  border-radius: var(--radius-cta);
  overflow: hidden;
  background: #111;
  box-shadow: var(--shadow-orb);
}

.hero-vsl wistia-player {
  display: block;
  width: 100%;
  height: 100%;
}

wistia-player[media-id="qryq141tjw"]:not(:defined) {
  display: block;
  width: 100%;
  height: 100%;
  background: center / cover no-repeat
    url("https://fast.wistia.com/embed/medias/qryq141tjw/swatch");
  filter: blur(5px);
}

.demo-idle.is-chat-on .nick-field,
.demo-idle.is-chat-on .demo-cta-row,
.demo-idle.is-chat-on .chat-err {
  display: none;
}

.demo-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(520px, 100%);
  margin: 16px 0 0;
}

.nick-field {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: min(520px, 100%);
  height: 56px;
  padding: 0 22px;
  border-radius: var(--radius-pill);
  background: var(--color-paper-white);
  box-shadow: var(--shadow-chip);
  cursor: text;
}

.nick-at {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-ink-4);
  pointer-events: none;
}

.nick-field:focus-within .nick-at,
.nick-field.is-filled .nick-at {
  color: var(--color-ink);
}

.demo-idle input {
  width: auto;
  min-width: 8.5ch;
  max-width: calc(100% - 1.2em);
  flex: 0 1 auto;
  height: 56px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-ink);
  text-align: left;
  box-shadow: none;
  field-sizing: content;
  outline: none;
}

.demo-idle input::placeholder {
  color: var(--color-ink-4);
}

.demo-lead {
  margin: 0;
  color: #000;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.demo-lead.mark-orange {
  color: #ffcc00;
}

.demo-proof {
  width: min(520px, 100%);
  text-align: center;
}

.demo-proof p {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #ffcc00;
}

.demo-proof p:last-child {
  margin-bottom: 0;
}

.demo-hint {
  margin: 0;
  color: #000;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
}

.btn-pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  background: var(--color-paper-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-nav);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  box-shadow: var(--shadow-chip);
  transition:
    box-shadow var(--dur-hover) var(--ease-out),
    transform 160ms var(--ease-out);
}

.btn-pill:hover {
  box-shadow: var(--shadow-white-btn);
}

@media (hover: hover) and (pointer: fine) {
  .btn-pill:active {
    transform: scale(0.97);
  }
}

.btn-pill:disabled {
  opacity: 0.5;
  cursor: default;
}

.demo-cta-row {
  display: flex;
  width: min(520px, 100%);
  align-items: stretch;
}

.demo-cta-row .btn-pill {
  box-sizing: border-box;
  width: 100%;
  flex: none;
  min-height: 56px;
  padding: 12px 20px;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  text-wrap: balance;
}

.btn-pill-lead {
  background: #ffcc00;
  color: #111;
  text-align: center;
  text-wrap: balance;
}

.btn-pill-lead:hover {
  background: #f0c000;
  box-shadow: var(--shadow-white-btn);
}

.chat-below {
  display: none;
  grid-column: 1;
  grid-row: 3;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 400px;
  justify-self: center;
}

.demo-board.has-offer .chat-below {
  display: flex;
}

.btn-pill-ghost {
  background: transparent;
  color: #fff;
  box-shadow: none;
  border: 1.5px solid rgba(255, 255, 255, 0.88);
}

.btn-pill-ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.btn-pill-ig {
  background: var(--ig-out);
  color: var(--ig-text);
  min-width: 64px;
  padding: 0 18px;
  height: 40px;
  font-size: 14px;
}

.chat-hint {
  margin: var(--space-xs) 0 0;
  color: var(--color-ink-3);
  font-size: var(--text-body);
}

.chat-hint button {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--color-ink);
  text-decoration: underline;
}

.chat-err {
  margin-top: var(--space-sm);
  padding: var(--space-sm);
  color: var(--color-on-sky);
  max-width: 420px;
}

.ig .chat-err {
  max-width: none;
  margin: 0 12px 12px;
  color: var(--ig-meta);
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.35;
}

.ig .chat-err p {
  margin: 0;
}

.chat-err .btn-pill {
  margin-top: var(--space-sm);
}

.ig .chat-err .btn-pill {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  font-size: 14px;
}

.chat-offer {
  width: 100%;
  max-width: 400px;
  justify-self: center;
  box-sizing: border-box;
  padding: 16px 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-top: 0;
  border-radius: 0 0 28px 28px;
  background: #111;
  color: var(--ig-text);
  text-align: left;
}

.chat-offer p {
  margin: 0;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ig-text);
  text-align: center;
}

.chat-offer > .btn-pill {
  display: flex;
  width: 100%;
  margin-top: 14px;
  min-height: 52px;
  padding: 12px 16px;
}

.chat-offer .lead-form {
  width: 100%;
  gap: 10px;
  margin-bottom: 12px;
}

.chat-offer .lead-form-row {
  flex-direction: row;
  width: 100%;
}

.chat-offer .lead-form-row input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  background: #1c1c1e;
  color: var(--ig-text);
  border: 1px solid #3a3a3c;
  padding: 12px 16px;
  font-size: 15px;
}

.chat-offer .lead-form-row input::placeholder {
  color: #8e8e8e;
}

.chat-offer .lead-form-row .btn-pill {
  flex: 0 0 auto;
  width: auto;
  min-width: 108px;
  min-height: 48px;
  padding: 0 22px;
  background: #fff;
  color: #111;
}

.chat-offer .lead-form-consent {
  color: var(--ig-meta);
  font-size: 12px;
}

.chat-offer .lead-form-status {
  font-size: 13px;
}

.chat-offer .lead-form-status.is-ok {
  color: #53fd18;
}

.ig-wait-hint {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #8e8e8e;
  white-space: nowrap;
}

.demo-theater {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 8px 0 24px;
  min-height: 320px;
  opacity: 1;
  transform: none;
  transition:
    opacity 480ms var(--ease-in),
    transform 520ms var(--ease-in);
}

.demo-theater.is-out {
  opacity: 0;
  transform: scale(0.86);
}

.theater-core {
  position: relative;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
}

.demo-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  opacity: 0;
  pointer-events: none;
}

.demo-theater.is-burst .demo-burst {
  animation: burst-ring 720ms var(--ease-out) forwards;
}

.demo-theater.is-burst .demo-burst-2 {
  animation-delay: 80ms;
  border-color: rgba(255, 255, 255, 0.7);
}

.demo-theater.is-burst .demo-burst-3 {
  animation-delay: 160ms;
  border-color: rgba(255, 255, 255, 0.45);
}

.demo-sparks {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.demo-sparks i {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--color-paper-white);
  opacity: 0;
}

.demo-theater.is-burst .demo-sparks i {
  animation: spark 860ms var(--ease-out) forwards;
}

.demo-theater.is-burst .demo-sparks i:nth-child(1) { --dx: 98px; --dy: -18px; animation-delay: 30ms; }
.demo-theater.is-burst .demo-sparks i:nth-child(2) { --dx: 72px; --dy: 64px; animation-delay: 70ms; }
.demo-theater.is-burst .demo-sparks i:nth-child(3) { --dx: -12px; --dy: 96px; animation-delay: 40ms; }
.demo-theater.is-burst .demo-sparks i:nth-child(4) { --dx: -88px; --dy: 42px; animation-delay: 90ms; }
.demo-theater.is-burst .demo-sparks i:nth-child(5) { --dx: -96px; --dy: -36px; animation-delay: 50ms; }
.demo-theater.is-burst .demo-sparks i:nth-child(6) { --dx: -38px; --dy: -92px; animation-delay: 110ms; }
.demo-theater.is-burst .demo-sparks i:nth-child(7) { --dx: 48px; --dy: -88px; animation-delay: 20ms; }
.demo-theater.is-burst .demo-sparks i:nth-child(8) { --dx: 18px; --dy: 88px; animation-delay: 130ms; }

.theater-ava-wrap {
  position: relative;
  width: 112px;
  height: 112px;
}

.theater-ava,
.theater-ava-ph {
  width: 112px;
  height: 112px;
  border-radius: var(--radius-avatar);
  object-fit: cover;
  background: var(--color-paper-white);
  box-shadow: var(--shadow-orb);
  transform: scale(0.42);
  opacity: 0;
}

.theater-ava-ph {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  color: var(--color-sky-deep);
}

.theater-ava {
  position: absolute;
  inset: 0;
}

.demo-theater.is-burst .theater-ava-ph,
.demo-theater.is-burst .theater-ava.is-on {
  animation: pop-ava 820ms var(--ease-out) forwards;
}

.theater-name {
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  padding: 0.12em 0.15em 0;
  color: var(--color-on-sky);
  letter-spacing: -0.03em;
  max-width: min(520px, 92vw);
  overflow: visible;
}

.theater-handle {
  margin-top: -6px;
  font-size: 15px;
  color: var(--color-on-sky-2);
}

.theater-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(320px, 78%);
}

.theater-bar {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 99px;
  overflow: hidden;
}

.theater-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--color-paper-white);
  border-radius: 99px;
  transition: width 820ms var(--ease-out);
}

#theater-pct {
  font-size: 13px;
  color: var(--color-on-sky-2);
  font-variant-numeric: tabular-nums;
  min-width: 3.2ch;
}

.theater-status {
  margin: 10px auto 0;
  max-width: min(640px, 92vw);
  min-height: 2.6em;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-on-sky);
  transition:
    opacity 780ms var(--ease-in-out),
    filter 780ms var(--ease-in-out),
    transform 780ms var(--ease-out);
}

.theater-lines {
  display: none;
}

.theater-err {
  margin-top: 8px;
  max-width: 420px;
  color: var(--color-on-sky);
}

.theater-err .btn-pill {
  margin-top: var(--space-sm);
}

.theater-status.is-out {
  opacity: 0;
  filter: blur(7px);
  transform: translateY(10px);
}

.theater-name,
.theater-handle,
.theater-bar-row {
  opacity: 0;
  transform: translateY(12px);
}

.demo-theater.is-ready .theater-name {
  animation: settle-in 720ms var(--ease-out) 140ms forwards;
}

.demo-theater.is-ready .theater-handle {
  animation: settle-in 720ms var(--ease-out) 200ms forwards;
}

.demo-theater.is-ready .theater-bar-row {
  animation: settle-in 720ms var(--ease-out) 280ms forwards;
}

.demo-theater.is-ready .theater-status {
  opacity: 1;
}

.ig {
  --ig-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--ig-bg);
  color: var(--ig-text);
  border-radius: 28px;
  overflow: hidden;
  text-align: left;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--ig-font);
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero.is-open .ig {
  min-height: 0;
  height: 100%;
  max-height: none;
}

.ig-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ig-line);
  min-height: 68px;
  flex-shrink: 0;
  z-index: 4;
  background: #000;
}

.ig-ava-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.ig-ava,
.ig-ava-ph {
  width: 44px;
  height: 44px;
  max-width: none;
  border-radius: var(--radius-avatar);
  object-fit: cover;
  background: #262626;
}

.ig-ava-ph {
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
}

.ig-ava {
  position: absolute;
  inset: 0;
}

.ig-who {
  min-width: 0;
  flex: 1;
}

.ig-who strong {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ig-who strong::after {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0.85;
}

.ig-who span {
  display: block;
  font-size: 13px;
  color: var(--ig-meta);
}

.ig-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ig-text);
  flex-shrink: 0;
}

.ig-tool,
.ig-compose-attach {
  border: 0;
  background: var(--ig-btn);
  color: inherit;
  padding: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.ig-tools .ig-tool {
  pointer-events: none;
}

.ig-tools svg,
.ig-compose-attach svg {
  display: block;
}

.ig-disc {
  display: none;
}

.ig-compose {
  padding: 8px 12px 12px;
  flex-shrink: 0;
}

.ig-compose-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  border: 0;
  border-radius: 24px;
  background: #1c1c1e;
  padding: 4px 10px 4px 4px;
}

.ig-cam {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--ig-cam);
  display: grid;
  place-items: center;
  padding: 0;
}

.ig-compose-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f5f5f5;
  flex-shrink: 0;
}

.ig-compose-icons.is-hid {
  display: none;
}

.ig-ico {
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

#voice-btn {
  width: 36px;
  height: 36px;
  margin: -7px 0;
  touch-action: none;
  cursor: pointer;
}

.bubble-photo {
  display: block;
  max-width: 220px;
  max-height: 280px;
  border-radius: 14px;
  object-fit: cover;
}

.bubble.has-photo {
  padding: 4px;
  background: transparent;
}

.bubble-stack:has(.has-voice) {
  width: min(252px, 82%);
}

.bubble.user.has-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 12px 8px 10px;
}

.voice-play {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  display: grid;
  place-items: center;
  padding: 0;
}

.voice-play svg {
  display: block;
}

.voice-wave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5px;
  height: 18px;
  flex: 1 1 auto;
  min-width: 0;
}

.voice-wave i {
  display: block;
  flex: 1 1 0;
  min-width: 2px;
  max-width: 3px;
  height: 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
  transform-origin: center;
}

.bubble.is-playing .voice-wave i {
  animation: voice-bar 0.7s ease-in-out infinite;
}

.bubble.is-playing .voice-wave i:nth-child(3n) { animation-delay: 80ms; }
.bubble.is-playing .voice-wave i:nth-child(3n+1) { animation-delay: 40ms; }
.bubble.is-playing .voice-wave i:nth-child(3n+2) { animation-delay: 120ms; }

@keyframes voice-bar {
  50% { transform: scaleY(0.45); }
}

.voice-dur {
  flex-shrink: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
  min-width: 2.6ch;
}

.ig-compose-pill.is-rec {
  background: #2a1216;
}

.ig-compose-pill.is-rec #draft,
.ig-compose-pill.is-rec .ig-cam,
.ig-compose-pill.is-rec .ig-compose-icons {
  display: none;
}

.voice-rec {
  display: none;
  flex: 1;
  align-items: center;
  gap: 10px;
  color: #ff6b7a;
  font-size: 14px;
  padding: 0 8px;
}

.ig-compose-pill.is-rec .voice-rec {
  display: flex;
}

.voice-rec b {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.voice-rec button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.voice-cancel {
  margin-left: auto;
  opacity: 0.72;
}

.ig-compose-pill input,
.ig-compose-ph {
  flex: 1;
  min-width: 0;
  height: 42px;
  border: 0;
  background: transparent;
  color: var(--ig-text);
  padding: 0;
  font-family: var(--ig-font);
  font-size: 15px;
  line-height: 42px;
}

.ig-compose-pill input:focus {
  outline: none;
}

.ig-compose-pill input::placeholder,
.ig-compose-ph {
  color: #8e8e8e;
}

.ig-compose-acts {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ig-text);
  flex-shrink: 0;
}

.ig-compose-acts svg {
  display: block;
}

.ig-compose-send {
  border: 0;
  background: none;
  color: var(--ig-out);
  font-family: var(--ig-font);
  font-size: 15px;
  font-weight: 650;
  padding: 0 2px;
  flex-shrink: 0;
}

@keyframes burst-ring {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.45); opacity: 0; }
}

@keyframes spark {
  0% { transform: translate(0, 0) scale(1); opacity: 0.95; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.15); opacity: 0; }
}

@keyframes pop-ava {
  0% { transform: scale(0.42); opacity: 0; }
  58% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes settle-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes ig-in {
  from { transform: scale(0.94); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes ig-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-inner.is-melting .hw,
  .hero-inner.is-melting .hero-sit,
  .hero-inner.is-melting .hero-meta,
  .hero-inner.is-melting .demo-lead,
  .hero-inner.is-melting .demo-hint,
  .hero-inner.is-melting .demo-proof,
  .hero-inner.is-melting .nick-field,
  .hero-inner.is-melting .demo-idle input,
  .hero-inner.is-melting .demo-cta-row,
  .hero-inner.is-melting .btn-pill,
  .hero-inner.is-squeezing .hero-copy,
  .hero-inner.is-squeezing .squeeze-layer,
  .squeeze-layer.is-squeeze,
  .demo-title.is-squeeze,
  .demo-idle.is-squeeze,
  .demo-title.is-shrink,
  .demo-idle.is-shrink,
  .liquid.is-gather .drop,
  .liquid.is-idle .core,
  .liquid.is-idle .liquid-halo,
  .liquid.is-pop .drop,
  .demo-theater.is-burst .theater-ava,
  .demo-theater.is-burst .theater-ava-ph,
  .demo-theater.is-burst .demo-burst,
  .demo-theater.is-burst .demo-sparks i,
  .demo-theater.is-ready .theater-name,
  .demo-theater.is-ready .theater-bar-row,
  .demo-theater.is-ready .theater-status,
  .ig.is-in,
  .demo-board.is-in,
  .demo-board.is-spread .live-col,
  .demo-board.is-spread .side-card,
  .chat-prompt {
    animation: none;
    transform: none;
    opacity: 1;
    filter: none;
    clip-path: none;
    transition: none;
  }

  .chat-prompt:not(.is-on) {
    opacity: 0;
  }

  .ig-dots i {
    animation: none !important;
    opacity: 0.75;
  }
}

.chat-stream {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 12px 10px;
}

#chat-bubbles {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.ig-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 88%;
}

.ig-row + .bubble-stack,
.bubble-stack + .ig-row {
  margin-top: 16px;
}

.ig-row-ava,
.ig-row-ava-ph {
  width: 28px;
  height: 28px;
  max-width: none;
  border-radius: var(--radius-avatar);
  object-fit: cover;
  background: #262626;
  flex-shrink: 0;
  display: block;
}

.ig-row-ava-ph {
  display: inline-block;
}

.ig-row .bubble {
  max-width: 100%;
}

.bubble {
  max-width: 82%;
  padding: 8px 14px;
  border-radius: 22px;
  font-size: 15px;
  line-height: 1.4;
}

.bubble.assistant {
  align-self: flex-start;
  background: var(--ig-in);
  color: var(--ig-text);
  border-bottom-left-radius: 8px;
}

.bubble.user {
  align-self: flex-end;
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 8px;
  background-color: #c44bff;
  background-image: var(--ig-grad);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 100% var(--ig-thread-h, 240%);
  background-position: 0 var(--ig-thread-y, 0);
}

.bubble.user.has-photo {
  padding: 0;
  background: none;
  background-image: none;
  box-shadow: none;
}

.bubble.user.has-photo .bubble-photo {
  display: block;
  max-width: min(240px, 72vw);
  max-height: 320px;
  border-radius: 16px;
}

.bubble-stack {
  align-self: flex-end;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 82%;
  margin-left: auto;
}

.bubble-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.bubble-stack .bubble.user {
  margin-left: 0;
  max-width: 100%;
}

.ig-heart {
  position: absolute;
  left: 2px;
  bottom: -9px;
  z-index: 2;
  min-width: 26px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  background: #262626;
  border: 1px solid #363636;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

.bubble-stack:has(.ig-heart) .ig-seen {
  margin-top: 14px;
}

.ig-seen {
  margin: 4px 2px 0;
  font-size: 11px;
  line-height: 1;
  color: #8e8e8e;
}

.ig-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 10px 12px;
  flex: 0 0 auto;
}

.ig-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a8a8a8;
  animation: ig-dot 1.05s ease-in-out infinite;
}

.ig-dots i:nth-child(2) { animation-delay: 140ms; }
.ig-dots i:nth-child(3) { animation-delay: 280ms; }

#chat-typing {
  padding: 0;
  width: fit-content;
  max-width: 88%;
  flex: 0 0 auto;
  background: transparent;
}

#chat-typing .bubble.ig-dots {
  max-width: none;
}

.chat-compose {
  display: flex;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}

.chat-compose input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 0;
  border-radius: var(--radius-input);
  background: var(--color-paper-chip);
  padding: 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--color-ink);
}

.chat-compose .btn-pill {
  padding: 0 20px;
  height: 48px;
}

.typing {
  align-self: flex-start;
  color: var(--color-ink-3);
  font-size: 13px;
}

.pill-field {
  position: relative;
  z-index: 4;
  width: 100%;
}

.pill-field-sky {
  background: transparent;
  border-radius: 0;
  margin-top: 0;
  padding: 4px 20px 8px;
  min-height: 0;
  box-sizing: border-box;
  flex: 0 0 auto;
}

.pill-field-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 12px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 16px;
}

.pill-row,
.pill-track {
  display: contents;
}

.pill-chip {
  --r: 0deg;
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  white-space: normal;
  text-align: left;
  background: var(--color-paper-white);
  color: var(--color-ink);
  border-radius: 22px;
  padding: 10px 16px 10px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  box-shadow: var(--shadow-chip);
  transform: rotate(var(--r));
  animation: pill-idle 5.2s ease-in-out infinite;
  touch-action: manipulation;
  max-width: 280px;
}

.pill-chip:nth-child(3n) {
  margin-top: 12px;
  animation-delay: -1.4s;
}

.pill-chip:nth-child(4n) {
  margin-bottom: 8px;
  animation-delay: -2.6s;
}

.pill-chip:nth-child(5n) {
  margin-top: -4px;
  animation-delay: -0.8s;
}

.pill-emo {
  font-size: 18px;
  line-height: 1.2;
  flex-shrink: 0;
}

.pill-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  color: var(--color-ink-2);
}

.pill-desc {
  display: block;
}

.pill-copy strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.pill-chip:hover,
.pill-chip:focus-visible,
.pill-chip.is-pop {
  animation: pill-pop 480ms cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
  z-index: 2;
}

@keyframes pill-idle {
  0%,
  100% { transform: rotate(var(--r)) translateY(0); }
  50% { transform: rotate(var(--r)) translateY(-6px); }
}

@keyframes pill-pop {
  0% { transform: rotate(var(--r)) translateY(0) scale(1); }
  40% { transform: rotate(var(--r)) translateY(-14px) scale(1.08); }
  100% { transform: rotate(var(--r)) translateY(-4px) scale(1.04); }
}

/* ── VSL circle ── */

.close {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(36em, calc(100% - var(--gutter) * 2));
  margin: 100px auto 4px;
  text-align: center;
}

.close-slots {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-on-sky-solid);
  opacity: 0.92;
}

.close-vow {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-on-sky-solid);
  opacity: 0.84;
  max-width: 28em;
}

.close .hero-meta {
  margin: 0 auto;
  width: 100%;
}

.hero.is-open .close {
  display: flex;
  width: 100%;
  margin: 100px auto 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.cards-1 {
  display: grid;
  grid-template-columns: minmax(0, 28em);
  justify-content: center;
}


/* ── paper sections ── */

.wrap {
  width: min(var(--content), calc(100% - var(--gutter) * 2));
  margin: 0 auto;
}

.sec {
  padding: var(--space-3xl) 0;
  background: var(--color-paper);
}

#rozmowy.sec {
  padding-top: 10px;
  padding-bottom: 0;
}

#faq.sec {
  padding-top: 30px;
  padding-bottom: 20px;
}

.sec h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-style: normal;
  color: var(--color-ink);
  text-align: center;
}

.h2-tight {
  margin-bottom: 4px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(64px, 12vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.guarantee {
  max-width: 1120px;
  margin: 0 auto;
}

.guarantee p {
  margin: 0;
  font-size: clamp(32px, 5.6vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-align: center;
  color: var(--color-ink);
}

.lead {
  max-width: 760px;
  margin: var(--space-md) auto 0;
  text-align: center;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.45;
  color: var(--color-ink-2);
}

.lead-strong {
  color: var(--color-ink);
  font-weight: 600;
}

.feat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--space-xl);
}

.feat-card {
  background: var(--color-paper-white);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 18px 16px 16px;
  min-width: 0;
}

.feat-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.feat-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-ink-2);
}

@media (max-width: 900px) {
  .feat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.cards-3.cards-1 {
  grid-template-columns: minmax(0, 1fr);
  justify-content: center;
  margin-top: 10px;
}

.convo-card {
  min-width: 0;
}

.convo-kicker {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}

.convo-result {
  margin: 2px 0 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: #1258c0;
  font-variant-numeric: tabular-nums;
}

.convo {
  --ig-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #000;
  color: #f5f5f5;
  border-radius: 22px;
  border: 1px solid #262626;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
  font-family: var(--ig-font);
}

.convo .ig-head {
  padding: 10px 12px;
  min-height: 58px;
  gap: 10px;
}

.convo .ig-ava-wrap,
.convo .ig-ava,
.convo .ig-ava-ph {
  width: 36px;
  height: 36px;
}

.convo .ig-ava {
  position: static;
  display: block;
}

.convo .ig-who strong {
  font-size: 14px;
  font-weight: 650;
}

.convo .ig-who span {
  font-size: 12px;
}

.convo .ig-tools {
  gap: 12px;
}

.convo .ig-tools svg {
  width: 20px;
  height: 20px;
}

.convo-stream {
  padding: 12px 10px 8px;
  max-height: 460px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.convo .bubble {
  font-size: 14px;
  line-height: 1.35;
  padding: 8px 12px;
  border-radius: 18px;
  max-width: 82%;
}

.convo .bubble.assistant {
  background: var(--ig-in);
  color: #f5f5f5;
  border-bottom-left-radius: 6px;
}

.convo .bubble.user {
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 6px;
  background-color: #c44bff;
  background-image: var(--ig-grad);
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 100% var(--ig-thread-h, 240%);
  background-position: 0 var(--ig-thread-y, 0);
}

.convo .ig-tool {
  width: 32px;
  height: 32px;
}

.convo .ig-compose {
  padding: 6px 10px 10px;
}

.convo .ig-compose-pill {
  min-height: 40px;
}

.convo .ig-compose-ph {
  height: 38px;
  line-height: 38px;
  font-size: 14px;
}

.proof-more {
  text-align: center;
  margin: var(--space-lg) 0 0;
}

.who-card.guarantee-card {
  text-align: center;
}

.who-card.guarantee-card h2 {
  margin-bottom: var(--space-md);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 15px;
  color: var(--color-ink-3);
}

.guarantee-lead {
  margin: 0 auto;
  max-width: 22em;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}

.guarantee-note {
  margin: var(--space-md) auto 0;
  max-width: 34em;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink-2);
}

.offer-split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-xl);
  align-items: center;
  margin-top: var(--space-xl);
}

.photo {
  margin: 0;
}

.photo img {
  width: 100%;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  object-fit: contain;
  display: block;
}

.offer-copy {
  min-width: 0;
}

.offer-copy p {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink-2);
}

.offer-copy strong {
  color: var(--color-ink);
  font-weight: 700;
}

.offer-copy u {
  text-underline-offset: 0.16em;
  text-decoration-thickness: 0.08em;
}

.offer-stack {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
}

.offer-stack li {
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-paper-3);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--color-ink-2);
}

.offer-stack li .offer-stack-title {
  display: block;
  color: var(--color-ink);
  font-weight: 700;
  margin-bottom: 0.2em;
}

.offer-stack .offer-stack-guarantee {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-top: 0;
  background: var(--color-sky-pale);
  border-radius: var(--radius-faq);
}

.offer-stack .offer-stack-guarantee .offer-stack-title {
  color: var(--color-sky-mid);
}

.offer-copy .btn-pill {
  width: 100%;
  max-width: 100%;
  background: linear-gradient(160deg, #ffa31a 0%, #ff7a00 100%);
  color: #0a0a0a;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(255, 122, 0, 0.45);
  border: 0;
}

.offer-copy .btn-pill:hover {
  background: linear-gradient(160deg, #ffb03a 0%, #ff8a14 100%);
  box-shadow: 0 8px 22px rgba(255, 122, 0, 0.45);
}

.offer-copy .offer-note {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-body);
  color: var(--color-ink-3);
}

.lead-form {
  position: relative;
  display: grid;
  gap: 10px;
  width: 100%;
}

.lead-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lead-form-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.lead-form-row input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--color-paper-3);
  border-radius: var(--radius-pill);
  padding: 14px 18px;
  background: var(--color-paper-white);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-nav);
}

.lead-form-row input::placeholder {
  color: var(--color-ink-3);
}

.lead-form-row .btn-pill {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.lead-form-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-ink);
  font-weight: 700;
}

.lead-form-ig {
  width: fit-content;
  justify-self: start;
}

.lead-form-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 18px;
}

.lead-form-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  flex: 1 1 16em;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-ink-2);
  cursor: pointer;
}

.lead-form-consent input {
  margin: 3px 0 0;
  flex: 0 0 auto;
}

.lead-form-self {
  flex: 0 0 auto;
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.lead-form-status {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.lead-form-status.is-ok {
  color: #148c45;
}

.lead-form-status.is-err {
  color: #b42318;
}

.lead-form-foot {
  width: min(40em, calc(100% - 32px));
  margin: 0 auto var(--space-lg);
  padding: 0 16px;
}

.lead-form-foot .btn-pill {
  background: linear-gradient(160deg, #ffa31a 0%, #ff7a00 100%);
  color: #0a0a0a;
  font-weight: 700;
}

html:has(.book-dialog[open]) {
  overflow: hidden;
}

.book-dialog {
  box-sizing: border-box;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.book-dialog:not([open]) {
  display: none;
}

.book-dialog[open] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  position: fixed;
  inset: 12px;
}

.book-dialog::backdrop {
  background: rgba(10, 18, 32, 0.46);
}

.book-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  padding: 22px 16px 18px;
  border-radius: var(--radius-faq);
  background: var(--color-paper-white);
  box-shadow: var(--shadow-card);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.book-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.book-dialog-close {
  appearance: none;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  width: 40px;
  height: 40px;
  margin: -8px -8px 0 0;
  padding: 0;
  color: var(--color-ink-2);
  font: inherit;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.book-dialog-close:hover,
.book-dialog-close:focus-visible {
  color: var(--color-ink);
}

.book-dialog h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-align: left;
  overflow-wrap: anywhere;
}

.book-dialog-lead {
  margin: 0;
  color: var(--color-ink-2);
  font-size: 14px;
  line-height: 1.35;
}

.book-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
}

.book-opt {
  font-weight: 400;
  opacity: 0.6;
}

.book-field input,
.book-field select,
.book-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--color-paper-3);
  border-radius: var(--radius-input);
  padding: 12px 16px;
  background: var(--color-paper-white);
  color: var(--color-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 500;
}

.book-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  padding-right: 40px;
}

.book-field textarea {
  min-height: 4.6em;
  resize: none;
  line-height: 1.35;
}

.book-ig {
  display: flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--color-paper-3);
  border-radius: var(--radius-input);
  background: var(--color-paper-white);
}

.book-ig-at {
  flex: 0 0 auto;
  padding: 0 2px 0 16px;
  color: var(--color-ink-2);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.book-ig:focus-within {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

.book-ig input {
  flex: 1 1 auto;
  border: 0;
  padding-left: 0;
  background: transparent;
}

.book-ig input:focus,
.book-ig input:focus-visible {
  outline: none;
}

.book-field input::placeholder,
.book-field textarea::placeholder {
  color: var(--color-ink-3);
}

.book-form .lead-form-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  color: var(--color-ink-2);
}

.book-form .lead-form-consent span {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.book-form .btn-pill {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-top: 4px;
}

@media (max-width: 640px) {
  .book-dialog[open] {
    inset: 8px;
  }

  .book-form {
    padding: 20px 14px 16px;
  }

  .book-dialog h2 {
    font-size: 20px;
  }
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-lg);
  align-items: start;
}

.faq-box,
.who-card {
  background: var(--color-paper-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
}

.faq-box h2,
.who-card h2 {
  text-align: left;
  font-size: 28px;
  margin-bottom: var(--space-md);
}

.faq-item {
  border-top: 1px solid var(--color-paper-3);
}

.faq-item button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  align-items: baseline;
  border: 0;
  background: transparent;
  padding: var(--space-sm) 0;
  font-family: var(--font-body);
  font-size: var(--text-nav);
  font-weight: 600;
  color: var(--color-ink);
  text-align: left;
}

.faq-plus {
  color: var(--color-sky-deep);
  transition: transform var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}

.faq-item.open .faq-plus {
  transform: rotate(45deg);
}

.faq-a {
  display: none;
  margin: 0 0 var(--space-sm);
  color: var(--color-ink-3);
  font-size: var(--text-body);
}

.faq-item.open .faq-a {
  display: block;
}

.who-stack {
  display: grid;
  gap: var(--space-md);
}

.who-card ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--color-ink-2);
}

.who-card li + li {
  margin-top: var(--space-sm);
}

.who-card li strong {
  display: block;
  color: var(--color-ink);
  font-weight: 700;
  margin-bottom: 0.2em;
}

.faq-demo {
  text-align: center;
  margin: 16px 0 0;
  position: relative;
  z-index: 41;
}

.legal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 8px var(--gutter) 8px;
  text-align: center;
  color: var(--color-ink-3);
  font-size: 13px;
  background: var(--color-paper);
}

.legal-row {
  display: block;
}

.legal a,
.legal-cookies {
  color: var(--color-ink-2);
}

.legal-cookies {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.will-appear {
  opacity: 0;
  transform: translateY(var(--appear-y));
}

.will-appear.is-in {
  animation: appear var(--dur-appear) var(--ease-out) forwards;
}

@keyframes appear {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .will-appear,
  .will-appear.is-in {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .pill-chip,
  .pill-chip:hover,
  .pill-chip.is-pop,
  .pill-row.is-marquee .pill-track {
    animation: none;
  }

}

@media (max-width: 1100px) and (min-width: 834px) {
  .demo-board.is-spread {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 833px) {
  :root {
    --chat-h: 72vh;
    --gutter: 24px;
  }

  .nav-links {
    display: none;
  }

  .nav-burger {
    display: grid;
    place-items: center;
  }

  .nav.is-open .nav-links {
    display: flex;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--color-paper-white);
    border-radius: var(--radius-nav);
    box-shadow: var(--shadow-nav);
    padding: var(--space-sm);
    flex-direction: column;
    align-items: flex-start;
  }

  .hero {
    --hills: 44%;
    --meadow-fade: 48%;
    min-height: auto;
    justify-content: flex-start;
    padding: 22px 20px 16px;
    padding-top: max(22px, env(safe-area-inset-top));
  }

  .hero.is-open {
    --hills: 78vh;
    --meadow-fade: 50vh;
  }

  .hero.is-theater {
    --hills: 22vh;
    --meadow-fade: 18vh;
  }

  .hero-inner {
    min-width: 0;
    max-width: 100%;
  }

  .hero::after {
    background-position: center 38%;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 10%,
      #000 52%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 10%,
      #000 52%,
      transparent 100%
    );
  }

  .hero.is-open::after {
    background-position: center 48%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16%);
  }

  .hero.is-theater::after {
    background-position: center 18%;
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 8%,
      #000 40%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 8%,
      #000 40%,
      transparent 100%
    );
  }

  .hero-copy {
    gap: 8px;
  }

  .hero-sit {
    font-size: 14px;
    letter-spacing: 0;
    max-width: 100%;
    line-height: 1.35;
  }

  .hero-meta {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    text-align: center;
    padding: 0 4px;
  }

  .hero-meta-logo {
    height: 28px;
  }

  .hero-meta-copy strong {
    font-size: 14px;
    line-height: 1.3;
  }

  .hero-meta-copy span {
    font-size: 13px;
    white-space: normal;
  }

  .top-slots {
    gap: 8px;
    padding: 7px 10px;
  }

  .top-slots-label {
    font-size: clamp(9px, 2.55vw, 11px);
    letter-spacing: 0.03em;
  }

  .lead-form-row {
    flex-direction: column;
  }

  .lead-form-row .btn-pill,
  .lead-form-ig {
    width: 100%;
  }

  .chat-offer .lead-form-row {
    flex-direction: row;
  }

  .chat-offer .lead-form-row .btn-pill {
    width: auto;
  }

  .hero h1,
  .hero-vow {
    max-width: 24em;
    text-align: center;
  }

  .hero h1 {
    font-size: clamp(22px, 5.6vw, 26px);
    line-height: normal;
    max-width: 24em;
    margin-bottom: 36px;
  }

  .hero-vow {
    font-size: 17px;
    line-height: 1.38;
    max-width: 24em;
  }

  .demo-prompt {
    margin-top: 10px;
    gap: 2px;
  }

  .demo-lead {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
  }

  .demo-proof p {
    font-size: 16px;
  }

  .demo-hint {
    margin: 0;
    font-size: 15px;
  }

  .demo-idle {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    gap: 12px;
  }

  .hero-vsl {
    width: 100%;
    border-radius: var(--radius-cta-sm);
  }

  .nick-field {
    width: 100%;
  }

  .demo-idle input {
    width: auto;
  }

  .demo {
    margin-top: 0;
  }

  .hero.is-theater {
    min-height: 0;
    padding-bottom: 24px;
  }

  .hero.is-open .pill-field {
    display: none;
  }

  .hero.is-open {
    position: relative;
    min-height: 0;
    padding-top: 52px;
    padding-bottom: 12px;
    overflow: visible;
    height: auto;
    z-index: auto;
    transition: none;
  }

  .hero.is-open h1 {
    font-size: clamp(20px, 5.4vw, 24px);
    line-height: 1.18;
    max-width: 18em;
    letter-spacing: -0.03em;
  }

  .hero.is-open .hero-vow {
    display: block;
    font-size: clamp(14px, 3.8vw, 16px);
    margin-bottom: 0;
  }

  .hero.is-open .demo,
  .hero.is-open.is-spread .demo {
    max-width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    flex: 0 0 auto;
    margin-top: 12px;
  }

  .demo-board .ig,
  .ig {
    max-width: none;
  }

  .demo {
    scroll-margin-top: 88px;
  }

  .demo-title {
    font-size: clamp(32px, 10vw, 48px);
  }

  .hero-clay {
    width: 88px;
    height: 88px;
  }

  .offer-split,
  .faq-grid,
  .cards-3,
  .cards-3.cards-1 {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  #rozmowy h2.h2-tight {
    font-size: clamp(26px, 7vw, 32px);
    line-height: 1.18;
    letter-spacing: -0.03em;
    padding: 0 4px;
  }

  #faq.sec {
    padding-bottom: 16px;
  }

  .faq-demo {
    margin-bottom: 12px;
  }

  .guarantee-lead {
    font-size: clamp(21px, 5.6vw, 28px);
    max-width: 100%;
  }

  .guarantee-note {
    font-size: 15px;
    line-height: 1.5;
  }

  .demo-idle .demo-cta-row {
    width: 100%;
  }

  .demo-idle .demo-cta-row .btn-pill {
    width: 100%;
    min-height: 56px;
    font-size: 15px;
    padding: 12px 16px;
  }

  .hero:not(.is-open) .close {
    margin: 100px auto 0;
    padding-bottom: 0;
    gap: 8px;
    width: 100%;
  }

  .close-slots {
    font-size: 12px;
  }

  .close-vow {
    font-size: 13px;
    line-height: 1.35;
  }

  .close .btn-pill {
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }

  .demo-board,
  .demo-board.is-spread,
  .hero.is-open .demo-board {
    grid-template-columns: 1fr;
    grid-template-rows: auto var(--chat-h) auto;
  }

  .demo-board .ig,
  .hero.is-open .demo-board .ig {
    grid-column: 1;
    grid-row: 2;
  }

  .chat-below {
    grid-row: 3;
  }

  .demo-board.is-spread .live-col {
    display: contents;
  }

  .demo-board.is-spread .side-card {
    grid-column: 1;
    grid-row: 3;
    order: 0;
  }

  .hero.is-open .ig,
  .hero.is-open.is-spread .demo-board.is-spread .ig {
    width: 100%;
    max-width: 100%;
    height: var(--chat-h);
    min-height: var(--chat-h);
    max-height: var(--chat-h);
    box-sizing: border-box;
  }

  .hero.is-open .chat-stream {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  .chat-prompts,
  .demo-board.is-spread .chat-prompts {
    display: grid;
    grid-column: 1;
    grid-row: 1;
    order: 0;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    font-size: clamp(24px, 7vw, 32px);
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #fff;
  }

  .demo-board.is-spread .live-col {
    align-items: stretch;
    min-width: 0;
    padding: 0;
    animation: none;
    clip-path: none;
    filter: none;
    transform: none;
  }

  .demo-board.is-spread .side-card {
    background: var(--color-paper-white);
    color: var(--color-ink);
    border: 0;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 18px 18px 20px;
    overflow: visible;
    max-width: 100%;
  }

  .demo-board.is-spread .side-kicker {
    margin-bottom: 8px;
    color: var(--color-ink-3);
  }

  .demo-board.is-spread .live-empty,
  .demo-board.is-spread .live-note {
    color: var(--color-ink-2);
    font-size: 14px;
  }

  .demo-board.is-spread .live-row strong {
    color: var(--color-ink-3);
  }

  .demo-board.is-spread .live-row p,
  .demo-board.is-spread .live-act {
    color: var(--color-ink);
    font-size: 14px;
  }

  .demo-board.is-spread .live-chip {
    background: var(--color-paper-chip);
    border-color: transparent;
    color: var(--color-ink);
  }

  .ig-compose-pill input,
  #draft {
    scroll-margin: 0;
  }

  #oferta {
    padding-bottom: 0;
  }

  .ig {
    min-height: 0;
  }

  @keyframes liquid-from-chat-up {
    0% {
      opacity: 0;
      transform: translateY(-28px) scale(0.92);
      filter: blur(12px);
      clip-path: inset(0 0 68% 0 round 24px);
    }
    40% {
      opacity: 1;
      filter: blur(4px);
    }
    100% {
      opacity: 1;
      transform: none;
      filter: none;
      clip-path: inset(0 0 0 0 round 24px);
    }
  }

  .btn-pill {
    width: 100%;
  }

  .ig-compose {
    flex-direction: row;
  }

  .ig .btn-pill-ig {
    width: auto;
  }

  .nav-cta.btn-pill {
    width: auto;
    padding: 10px 14px;
    font-size: 14px;
  }

  .pill-field,
  .pill-field-sky {
    min-width: 0;
    max-width: 100%;
  }

  .pill-field-sky {
    border-radius: 0;
    margin-top: 0;
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
    max-width: none;
    min-height: 0;
    padding: 6px 0 8px;
  }

  .pill-field-inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 2px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    overflow: hidden;
  }

  .pill-row {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    touch-action: manipulation;
    --chip-w: calc((100vw - 32px) / 2);
  }

  .pill-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    width: max-content;
    max-width: none;
    padding: 4px 8px;
  }

  .pill-row.is-marquee .pill-track {
    animation: pill-marquee-rtl var(--marquee-s, 72s) linear infinite;
    will-change: transform;
    backface-visibility: hidden;
  }

  .pill-row[data-dir="ltr"].is-marquee .pill-track {
    animation-name: pill-marquee-ltr;
  }

  .pill-row.is-held .pill-track {
    animation-play-state: paused;
  }

  @keyframes pill-marquee-rtl {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-50%, 0, 0);
    }
  }

  @keyframes pill-marquee-ltr {
    from {
      transform: translate3d(-50%, 0, 0);
    }
    to {
      transform: translate3d(0, 0, 0);
    }
  }

  .pill-chip {
    flex: 0 0 calc((100vw - 32px) / 2);
    width: calc((100vw - 32px) / 2);
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 12px 12px 12px 10px;
    font-size: 12px;
    line-height: 1.2;
    gap: 8px;
    border-radius: 18px;
    transform: none;
    animation: none;
    transition: transform 680ms ease-out;
    touch-action: pan-x;
    user-select: none;
    -webkit-user-select: none;
  }

  .pill-chip:hover,
  .pill-chip:focus-visible,
  .pill-chip.is-pop {
    animation: none;
    transform: none;
    z-index: auto;
  }

  .pill-chip.is-press {
    animation: none;
    transform: scale(1.045);
    z-index: 2;
  }

  .pill-chip:nth-child(3n),
  .pill-chip:nth-child(3n + 1),
  .pill-chip:nth-child(3n + 2),
  .pill-chip:nth-child(4n),
  .pill-chip:nth-child(5n),
  .pill-chip:nth-child(7n) {
    margin: 0;
  }

  .pill-copy {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    font-size: 11px;
    line-height: 1.2;
    gap: 2px;
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
    max-width: calc(100% - 28px);
  }

  .pill-copy strong {
    font-size: 14px;
    line-height: 1.15;
  }

  .pill-desc {
    display: block;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    max-width: 100%;
    max-height: 2.4em;
  }

  .pill-emo {
    font-size: 16px;
    line-height: 1;
    align-self: center;
  }

  .hero-clay {
    display: none;
  }
}

@media (max-width: 833px) and (prefers-reduced-motion: reduce) {
  .pill-chip,
  .pill-chip.is-press {
    transition: none;
    transform: none;
  }
}

.ads-consent {
  position: fixed;
  z-index: 80;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  background: var(--glass-strong);
  color: var(--color-ink);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(16px);
}

.ads-consent[hidden] {
  display: none;
}

.ads-consent-main {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.ads-consent p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-ink-2);
}

.ads-consent a {
  color: inherit;
}

.ads-consent-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px 8px;
  flex: 0 0 auto;
}

.ads-consent-ghost {
  appearance: none;
  background: none;
  border: 0;
  padding: 8px 8px;
  color: var(--color-ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.ads-consent-ghost:hover,
.ads-consent-ghost:focus-visible {
  color: var(--color-ink);
}

.ads-consent-yes {
  appearance: none;
  flex: 0 0 auto;
  margin-left: 6px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--color-candy-green);
  color: #111;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.ads-consent-yes:hover,
.ads-consent-yes:focus-visible {
  filter: brightness(0.96);
}

.ads-consent.is-customize .ads-consent-main .ads-consent-actions {
  display: none;
}

.ads-consent-panel {
  display: grid;
  gap: 10px;
}

.ads-consent-panel[hidden] {
  display: none;
}

.ads-consent-opt {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-ink-2);
  cursor: pointer;
}

.ads-consent-opt input {
  margin: 3px 0 0;
}

.ads-consent-opt strong {
  display: block;
  color: var(--color-ink);
  font-weight: 700;
}

@media (max-width: 640px) {
  .ads-consent-main {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }

  .ads-consent-actions {
    width: 100%;
  }

  .ads-consent-yes {
    margin-left: auto;
  }
}

/* ==========================================================================
   Długa strona pod hero (06.09.2026, wzór koperagency.pl):
   problem → autor → pary → rozmowy → dlaczego → porównanie → kroki →
   gwarancja → dla kogo → przegląd → zaufanie → wyniki → FAQ → finał
   ========================================================================== */

.hero-bullets {
  list-style: none;
  margin: -24px auto 28px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 46em;
}

.hero-bullets li {
  flex: 1 1 14em;
  max-width: 19em;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.32;
  color: var(--color-on-sky-solid);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 18px;
  padding: 10px 14px;
  text-align: center;
}

.hero.is-open .hero-bullets,
.hero.is-theater .hero-bullets {
  display: none;
}

.cta-note {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-on-sky-solid);
  opacity: 0.86;
  text-align: center;
}

.proofbar {
  margin: 8px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-on-sky-solid);
  opacity: 0.9;
  text-align: center;
}

.proofbar i {
  font-style: normal;
  opacity: 0.55;
  margin: 0 9px;
}

.sec .proofbar {
  margin-top: var(--space-lg);
  color: var(--color-ink-2);
  opacity: 1;
}

.sec .cta-note {
  color: var(--color-ink-3);
}

.sec-long {
  padding: var(--space-2xl) 0;
}

.sec-long + .sec-long {
  padding-top: 0;
}

#problem.sec-long {
  padding-top: var(--space-3xl);
}

#co-masz.sec-long {
  padding-bottom: var(--space-3xl);
}

#dlaczego.sec-long {
  padding-top: var(--space-3xl);
}

#wyniki.sec-long {
  padding-bottom: var(--space-3xl);
}

#final.sec-long {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

.kicker {
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sky-deep);
  text-align: center;
}

.kicker-plain {
  margin-top: var(--space-md);
  margin-bottom: 10px;
}

.sec .h2-md {
  font-size: clamp(28px, 3.8vw, 46px);
  max-width: 22em;
  margin: 0 auto;
}

.prose {
  max-width: 38em;
  margin: var(--space-md) auto 0;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--color-ink-2);
}

.prose p {
  margin: 0 0 1em;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose strong {
  color: var(--color-ink);
}

.prose a {
  color: var(--color-sky-deep);
}

.prose ol,
.prose ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
}

.prose li + li {
  margin-top: 0.35em;
}

.prose .big {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-ink);
}

.prose .sign {
  margin-top: 1.4em;
  font-weight: 700;
  color: var(--color-ink);
}

.author {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  max-width: 52em;
  margin: 0 auto;
}

.author-photo {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-avatar);
  object-fit: cover;
  box-shadow: var(--shadow-card);
  background: var(--color-paper-3);
}

.author .prose {
  margin-top: 0;
}

.pairs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--space-xl);
}

.pair {
  background: var(--color-paper-white);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 20px 20px 18px;
  display: grid;
  gap: 8px;
  align-content: start;
}

.pair h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.pair p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.42;
  color: var(--color-ink-2);
}

.pair .pair-gain {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--color-paper-3);
  color: var(--color-ink);
  font-weight: 600;
}

.pair .pair-gain::before {
  content: "Co z tego masz";
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-sky-deep);
}

.nots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 var(--space-sm);
}

.nots span {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-paper-chip);
  color: var(--color-ink-3);
  text-decoration: line-through;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
}

.diff {
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: 40em;
  margin: var(--space-sm) auto var(--space-md);
  padding: 0;
}

.diff li {
  background: var(--color-paper-white);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.42;
  color: var(--color-ink-2);
}

.diff li strong {
  display: block;
  margin-bottom: 2px;
  color: var(--color-ink);
}

.cmp-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--space-xl);
  border-radius: 28px;
  background: var(--color-paper-white);
  box-shadow: var(--shadow-card);
}

.cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
}

.cmp th,
.cmp td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--color-paper-3);
}

.cmp thead th {
  border-top: 0;
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--color-ink);
}

.cmp tbody th {
  width: 22%;
  font-weight: 700;
  color: var(--color-ink);
}

.cmp td {
  color: var(--color-ink-2);
}

.cmp .is-robert {
  background: var(--color-sky-pale);
  color: var(--color-ink);
  font-weight: 600;
}

.cmp thead th.is-robert {
  color: var(--color-sky-deep);
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--space-xl);
}

.step {
  background: var(--color-paper-white);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 20px 18px;
}

.step-day {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-sky-deep);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.step h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.42;
  color: var(--color-ink-2);
}

.vow-box {
  max-width: 44em;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-card);
  background: var(--grad-hero);
  color: #fff;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.vow-box blockquote {
  margin: 0 0 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.vow-box p {
  margin: 0 0 0.8em;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.vow-box p:last-child {
  margin-bottom: 0;
}

.who-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--space-xl);
}

.who {
  background: var(--color-paper-white);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 20px 18px;
}

.who h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.who p {
  margin: 0;
  font-size: 14px;
  line-height: 1.42;
  color: var(--color-ink-2);
}

.who.is-not {
  background: var(--color-paper-chip);
  box-shadow: none;
}

.who-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-lg);
}

.review {
  max-width: 52em;
  margin: var(--space-lg) auto 0;
  padding: clamp(24px, 4vw, 44px);
  border-radius: var(--radius-card);
  background: var(--color-paper-white);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.review-bonus {
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: #ffcc00;
  color: #111;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
}

.review .prose {
  margin-top: 0;
}

.review-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: var(--space-md) 0;
  text-align: left;
}

.review-items div {
  background: var(--color-paper);
  border-radius: 20px;
  padding: 16px;
}

.review-items h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.review-items p {
  margin: 0;
  font-size: 14px;
  line-height: 1.42;
  color: var(--color-ink-2);
}

.review .btn-pill,
.final .btn-pill {
  display: flex;
  width: 100%;
  max-width: 400px;
  min-height: 52px;
  margin: 0 auto;
  align-items: center;
  justify-content: center;
}

.cases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--space-xl);
}

.case {
  background: var(--color-paper-white);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 22px 20px;
}

.case h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.case ul {
  margin: 0;
  padding-left: 1.1em;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-ink-2);
}

.case li + li {
  margin-top: 8px;
}

.case li strong {
  color: var(--color-ink);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: var(--space-md);
}

.stat {
  background: var(--color-paper-white);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 22px 18px;
  text-align: center;
}

.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-sky-deep);
}

.stat span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-ink-2);
}

.final {
  text-align: center;
}

.final ul {
  list-style: none;
  display: grid;
  gap: 8px;
  max-width: 36em;
  margin: var(--space-md) auto var(--space-lg);
  padding: 0;
  text-align: left;
}

.final li {
  position: relative;
  padding: 12px 16px 12px 40px;
  border-radius: 16px;
  background: var(--color-paper-white);
  box-shadow: var(--shadow-card);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-ink);
}

.final li::before {
  content: "✓";
  position: absolute;
  left: 16px;
  top: 11px;
  color: var(--color-sky-deep);
  font-weight: 800;
}

@media (max-width: 900px) {
  .steps,
  .who-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .review-items,
  .pairs,
  .cases {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .author {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .author-photo {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 560px) {
  .steps,
  .who-grid {
    grid-template-columns: 1fr;
  }

  .hero-bullets {
    gap: 6px;
    margin: -18px auto 22px;
  }

  .hero-bullets li {
    flex-basis: 100%;
    max-width: none;
    font-size: 12.5px;
    line-height: 1.28;
    padding: 8px 12px;
  }

  .sec-long {
    padding: var(--space-xl) 0;
  }
}

/* ==========================================================================
   Nowy fold i kolejność (07.09.2026, notatki Adriana do struktury Kopera):
   callout → H1 → 3 ptaszki → przycisk → 2 ptaszki dowodu → pasek Meta 30/70
   z pojedynczym tickerem pigułek → czat AI (placeholder) → dalej sekcje.
   ========================================================================== */

.hero {
  --hills: 230px;
  --meadow-fade: 170px;
  min-height: 0;
  padding-bottom: 28px;
}

.hero-inner {
  flex: 0 0 auto;
}

.hero h1 {
  margin-bottom: 26px;
}

.hero-ticks {
  list-style: none;
  margin: 0 auto 26px;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 34em;
  text-align: left;
}

.hero-ticks li {
  position: relative;
  padding-left: 30px;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 600;
  line-height: 1.38;
  color: var(--color-on-sky-solid);
}

.hero-ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffcc00;
  color: #111;
  font-size: 13px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.hero-cta .btn-pill-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(440px, 100%);
  min-height: 58px;
  padding: 14px 24px;
  font-size: 17px;
  font-weight: 700;
  white-space: normal;
}

.hero-proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
}

.hero-proof li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-on-sky-solid);
  opacity: 0.92;
}

.hero-proof li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  color: #ffcc00;
}

.meta-strip {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(150px, 30%) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  width: min(var(--content), 100%);
  margin: 44px auto 0;
}

.meta-strip-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.meta-strip-badge .hero-meta-logo {
  height: 34px;
}

.meta-strip-badge .hero-meta-copy strong {
  font-size: 14px;
}

.meta-strip-badge .hero-meta-copy span {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  opacity: 0.8;
}

.ticker {
  overflow: hidden;
  min-width: 0;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.ticker-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: ticker-move var(--ticker-s, 300s) linear infinite;
  will-change: transform;
}

.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track {
  animation-play-state: paused;
}

.ticker .pill-chip,
.ticker .pill-chip:nth-child(3n),
.ticker .pill-chip:nth-child(4n),
.ticker .pill-chip:nth-child(5n) {
  flex: 0 0 auto;
  margin: 0 8px 0 0;
  max-width: none;
  transform: none;
  animation: none;
  white-space: nowrap;
}

.ticker .pill-chip:hover,
.ticker .pill-chip:focus-visible,
.ticker .pill-chip.is-pop {
  animation: none;
  transform: translateY(-2px);
}

.ticker .pill-desc {
  white-space: nowrap;
}

@keyframes ticker-move {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track {
    animation: none;
  }
}

#czat-ai.sec-long {
  padding-top: var(--space-3xl);
  padding-bottom: 0;
}

.chat-ph {
  max-width: 34em;
  margin: var(--space-lg) auto 0;
  padding: 0 0 28px;
  border-radius: 28px;
  background: var(--ig-bg);
  color: var(--ig-text);
  box-shadow: var(--shadow-card);
  text-align: center;
  overflow: hidden;
}

.chat-ph-bar {
  display: flex;
  gap: 6px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--ig-line);
}

.chat-ph-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ig-in);
}

.chat-ph-title {
  margin: 26px 0 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.chat-ph-text {
  margin: 0 auto;
  max-width: 26em;
  padding: 0 20px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ig-meta);
}

#problem.sec-long {
  padding-top: var(--space-3xl);
}

.prose.lines p {
  margin-bottom: 0.7em;
}

.prose.lines p.big {
  margin: 0.9em 0 0.8em;
}

#rozmowy.sec {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

#rozmowy .kicker {
  margin-bottom: 10px;
}

.cta-block {
  margin-top: var(--space-lg);
  text-align: center;
}

.cta-block .btn-pill-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(440px, 100%);
  min-height: 56px;
  margin: 0 auto;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  white-space: normal;
}

.cta-block .cta-note {
  margin-top: 10px;
}

.cta-block .proofbar {
  margin-top: 10px;
}

.cmp {
  min-width: 520px;
}

.cmp tbody th {
  width: 26%;
}

@media (max-width: 833px) {
  .hero {
    --hills: 150px;
    --meadow-fade: 120px;
  }

  .meta-strip {
    grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
    gap: 12px;
    margin-top: 32px;
  }

  .meta-strip-badge .hero-meta-logo {
    height: 26px;
  }

  .meta-strip-badge .hero-meta-copy strong {
    font-size: 12px;
  }

  .meta-strip-badge .hero-meta-copy span {
    display: none;
  }

  .hero h1 {
    margin-bottom: 22px;
  }

  .hero-ticks li {
    font-size: 14px;
  }

  .hero-cta .btn-pill-lead {
    min-height: 54px;
    font-size: 15px;
  }
}

/* ==========================================================================
   Ciemny motyw z grainem (07.09.2026, Adrian: „czarny, ale trochę jaśniejszy
   czarny, z grainem”). Tokeny nadpisane na końcu pliku, więc karty, tabela,
   FAQ, dialog i pigułki przechodzą na ciemno bez ruszania ich reguł.
   ========================================================================== */

:root {
  --color-paper: #181818;
  --color-paper-white: #212121;
  --color-paper-2: #1c1c1c;
  --color-paper-3: #2e2e2e;
  --color-paper-chip: #262626;
  --color-ink: rgba(255, 255, 255, 0.94);
  --color-ink-2: rgba(255, 255, 255, 0.74);
  --color-ink-3: rgba(255, 255, 255, 0.58);
  --color-ink-4: rgba(255, 255, 255, 0.5);
  --color-ink-mute: rgba(255, 255, 255, 0.64);
  --color-ink-hover: rgba(255, 255, 255, 0.92);
  --color-sky-pale: rgba(29, 127, 255, 0.16);
  --color-sky-ice: rgba(29, 127, 255, 0.22);
  --shadow-card:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 34px rgba(0, 0, 0, 0.45);
  --shadow-chip: 0 6px 16px rgba(0, 0, 0, 0.42);
  --grad-card-wash: linear-gradient(180deg, #232323 0%, #1a1a1a 100%);
  --grad-canvas: radial-gradient(87% 87% at 50% 50%, #1c1c1c 0%, #161616 100%);
  color-scheme: dark;
}

html,
body {
  background: var(--color-paper);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.11;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 240px 240px;
}

.hero {
  background: var(--color-paper);
}

.hero-rings {
  background:
    radial-gradient(70% 60% at 50% -10%, rgba(29, 127, 255, 0.42) 0%, rgba(29, 127, 255, 0) 70%),
    var(--color-paper);
}

.hero::after,
.hero::before {
  display: none;
}

.hero-meta-copy {
  color: var(--color-ink);
}

.hero-meta-copy span {
  color: var(--color-ink-2);
}

.meta-strip-badge .hero-meta-logo {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.pill-chip {
  border: 1px solid var(--color-paper-3);
}

.chat-ph {
  border: 1px solid var(--color-paper-3);
  background: #0f0f0f;
}

.cmp thead th.is-robert,
.cmp .is-robert {
  color: var(--color-ink);
}

.cmp thead th.is-robert {
  color: #6fb0ff;
}

.kicker,
.stat b,
.prose a,
.faq-plus {
  color: #6fb0ff;
}

.pair .pair-gain::before {
  color: #6fb0ff;
}

.nots span {
  border: 1px solid var(--color-paper-3);
}

.who.is-not {
  border: 1px solid var(--color-paper-3);
}

.review-items div {
  background: var(--color-paper);
  border: 1px solid var(--color-paper-3);
}

.final li::before {
  color: #6fb0ff;
}

.book-dialog,
.ads-consent {
  background: var(--color-paper-white);
  color: var(--color-ink);
}

.book-field input,
.book-field select,
.book-field textarea {
  background: var(--color-paper);
  color: var(--color-ink);
  border-color: var(--color-paper-3);
}

.book-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

.legal {
  background: var(--color-paper);
}