/* /free lead page. Builds on /solo/solo.css, then flips it to a dark,
 * high energy look for social traffic: navy, brand cyan #2fc4ec and brand
 * purple #7c3aed, with a pink spark (#ff4d6d). The solo palette variables are
 * redefined here so every solo component (fields, ticks, FAQ, chat) follows. */
body.free-page {
  --bg: #0b0f17;
  --paper: rgba(255, 255, 255, .06);
  --alt: rgba(255, 255, 255, .1);
  --ink: #ffffff;
  --body: #c9d2df;
  --muted: #9aa6b8;
  --line: rgba(255, 255, 255, .12);
  --line-2: rgba(255, 255, 255, .2);
  --cyan: #2fc4ec;
  --purple: #7c3aed;
  --pink: #ff4d6d;
  --glow: linear-gradient(100deg, var(--cyan), var(--purple) 55%, var(--pink));
  background: var(--bg);
  color: var(--body);
  overflow-x: hidden;
}
html:has(body.free-page) { background: #0b0f17; }

/* Floating colour blobs behind everything. Decorative only. */
.free-page::before,
.free-page::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .32;
  pointer-events: none;
}
.free-page::before { top: -30vmax; left: -25vmax; background: var(--cyan); animation: drift 18s ease-in-out infinite alternate; }
.free-page::after { bottom: -35vmax; right: -30vmax; background: var(--purple); animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { to { transform: translate(8vmax, 6vmax) scale(1.1); } }

.free-page .solo-top { border-bottom: 0; }
.free-page .solo-logo { color: #fff; display: inline-flex; align-items: center; gap: 10px; }
.free-page .solo-logo img { width: 34px; height: 34px; border-radius: 50%; }
.free-page .sec + .sec { border-top: 0; }
.free-page h1, .free-page h2, .free-page h3 { color: #fff; }
.free-page a { color: var(--cyan); }

/* Hero */
.free-page .hero { padding-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.chips li {
  font-size: 14px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
}
.free-page h1 {
  font-size: clamp(40px, 11vw, 68px);
  line-height: .98;
  letter-spacing: -.045em;
  margin-bottom: 16px;
}
.free-page h1 .pop {
  background: var(--glow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.free-page .hero .sub { color: #dbe3ee; font-size: 20px; }

/* Buttons: glowing gradient pills */
.free-page .btn {
  min-height: 58px;
  border-radius: 999px;
  background: var(--glow);
  background-size: 160% 100%;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  box-shadow: 0 10px 34px rgba(124, 58, 237, .45), 0 0 0 1px rgba(255, 255, 255, .15) inset;
  transition: background-position .4s ease, transform .15s ease;
}
.free-page .btn:hover { background-position: 100% 0; transform: translateY(-2px); }

/* Chat bubble: brighter and bigger */
.free-page .chat {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(47, 196, 236, .35);
  box-shadow: 0 20px 60px rgba(47, 196, 236, .15);
  padding: 18px;
}
.free-page .msg { font-size: 17px; }
.free-page .msg-user { background: rgba(255, 255, 255, .12); color: #fff; }
.free-page .msg-bot { background: linear-gradient(135deg, #1d2b4a, #2a1d4a); color: #fff; }
.chat-note { margin-top: 8px; }

/* Forms: dark glass card with a gradient edge */
.free-page .check {
  background: rgba(13, 18, 30, .85);
  border: 1px solid transparent;
  background-clip: padding-box;
  border-radius: 22px;
  padding: 26px 20px;
  position: relative;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
}
.free-page .check::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 23px;
  background: var(--glow);
}
.free-page .eyebrow { color: var(--cyan); }
.free-page .field label { color: #fff; }
.free-page .field input {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .2);
  color: #fff;
}
.free-page .field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(47, 196, 236, .25); }
.free-page .field input::placeholder { color: #7f8ba0; }
.free-page .tick { color: var(--body); }
.free-page .tick input { accent-color: var(--cyan); }
.free-page .field-error { color: #ff8da1; }
.free-page .small { color: var(--muted); }
.opt-label { font-weight: 400; color: var(--muted); }

#step2 .done { margin: 0 0 22px; font-size: 19px; color: #fff; }
#step2 .done:focus { outline: none; }
#step2-done .done { margin-top: 18px; }
.next-offer { margin-top: 28px; padding: 22px 20px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }

/* Ticks list gets coloured checks */
.free-page .ticks li::before { color: var(--cyan); }
.free-page .ticks li { color: #dbe3ee; }

/* "What AI says" illustration */
.says {
  margin: 18px 0 8px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
  overflow: hidden;
}
.says-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; }
.says-row + .says-row { border-top: 1px solid var(--line); }
.says-ai { font-weight: 700; color: #fff; min-width: 78px; }
.says-tag { font-size: 14px; font-weight: 600; line-height: 1; padding: 8px 11px; border-radius: 999px; }
.tag-good { background: rgba(52, 211, 153, .18); color: #6ee7b7; }
.tag-neutral { background: rgba(255, 255, 255, .1); color: #c9d2df; }
.tag-warn { background: rgba(251, 191, 36, .18); color: #fcd34d; }
.tag-bad { background: rgba(255, 77, 109, .2); color: #ff8da1; }

.free-page .portrait { box-shadow: 0 0 0 3px var(--purple), 0 12px 40px rgba(124, 58, 237, .4); }

/* FAQ */
.free-page .faq summary { color: #fff; }
.free-page .faq p { color: var(--body); }

.free-page .solo-foot { color: var(--muted); border-top: 1px solid var(--line); }
.free-page .solo-foot a { color: var(--body); }

/* Tags pop in one by one when scrolled into view (motion.js .reveal). */
@media (prefers-reduced-motion: no-preference) {
  .reveal.is-in .says-row { animation: says-in .35s ease both; }
  .reveal.is-in .says-row:nth-child(2) { animation-delay: .15s; }
  .reveal.is-in .says-row:nth-child(3) { animation-delay: .3s; }
}
@keyframes says-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .free-page::before, .free-page::after { animation: none; }
  .free-page .btn, .free-page .btn:hover { transition: none; transform: none; }
}

/* Laptops: a little more room, bigger type */
@media (min-width: 768px) {
  .free-page .hero .sub { font-size: 22px; }
  .free-page .check { padding: 32px 30px; }
}