@charset "UTF-8";
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fff;
  color: #16161d;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: #ddd0ff;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

@keyframes floaty {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}
.page {
  --accent: #6c40f0;
  --accent2: #9277ff;
  overflow-x: hidden;
}

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 28px;
  padding-right: 28px;
}

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

.eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #e7dcff;
  border: 1px solid #c4adff;
  color: #4a23c8;
  font-size: 13px;
  font-weight: 600;
}
.badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.badge--on-dark {
  margin-bottom: 24px;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 11px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary {
  padding: 11px 18px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 16px rgba(108, 64, 240, 0.26);
}
.btn--dark {
  background: #16161d;
  color: #fff;
}
.btn--lg {
  border-radius: 12px;
  font-size: 15px;
  padding: 14px 24px;
  box-shadow: 0 8px 20px rgba(108, 64, 240, 0.3);
}
.btn--dark.btn--lg {
  box-shadow: none;
  padding: 15px 26px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--accent2), var(--accent));
  box-shadow: 0 4px 12px rgba(108, 64, 240, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand__mark--sm {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  box-shadow: none;
}
.brand__name {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.brand__name--sm {
  font-weight: 700;
  font-size: 15px;
}
.brand__accent {
  color: var(--accent);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #eeeef3;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.nav__end {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 500;
  color: #54545e;
}
.nav__links a {
  text-decoration: none;
}

.hero {
  position: relative;
  background: #fff;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.04fr 1fr;
  gap: 56px;
  align-items: center;
  padding-top: 74px;
  padding-bottom: 84px;
}
.hero__title {
  margin: 0 0 22px;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.hero__lead {
  margin: 0 0 32px;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.55;
  color: #55555f;
}
.hero__art {
  position: relative;
}

.signup--center {
  text-align: center;
}

.waitlist-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 540px;
}
.waitlist-form--center {
  max-width: 520px;
  margin: 0 auto;
  justify-content: center;
}
.waitlist-form button[type=submit] {
  flex: 0 0 auto;
}
@media (max-width: 540px) {
  .waitlist-form button[type=submit] {
    flex: 1 1 100%;
    width: 100%;
  }
}

.input {
  border: 1px solid #e2e2ea;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  border-radius: 12px;
}

.input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 16px;
  color: #16161d;
  outline: none;
}
.input--on-dark {
  flex-basis: 260px;
  border: none;
  padding: 15px 18px;
}

.form-error {
  margin: 9px 0 0;
  color: #d7392b;
  font-size: 13px;
  font-weight: 500;
}
.form-error--on-dark {
  margin-top: 11px;
  color: #ffe0dc;
}

.signup-success {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 540px;
  padding: 16px 18px;
  background: #f3f0ff;
  border: 1px solid #e1d8ff;
  border-radius: 14px;
}
.signup-success--on-dark {
  display: inline-flex;
  max-width: none;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.28);
  text-align: left;
}
/* On the dark banner the title inherits the panel's white, but the note's
   default dark gray is unreadable — lift it to a muted white. */
.signup-success--on-dark .signup-success__note {
  color: rgba(255, 255, 255, 0.78);
}
.signup-success__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.signup-success__icon--on-dark {
  width: 32px;
  height: 32px;
  background: #fff;
  color: var(--accent);
  font-size: 16px;
}
.signup-success__title {
  margin: 0;
  font-weight: 700;
  font-size: 15px;
}
.signup-success__note {
  margin: 2px 0 0;
  font-size: 14px;
  color: #5b5b66;
}

.social-proof {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
}
.social-proof__text {
  margin: 0;
  font-size: 14px;
  color: #55555f;
}
.social-proof__text strong {
  color: #16161d;
}

.avatars {
  display: flex;
}
.avatars--on-dark .avatars__item {
  border-color: rgba(255, 255, 255, 0.55);
}
.avatars__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  user-select: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.avatars__item--more {
  width: auto;
  padding: 0 9px;
  margin-left: -10px;
  border-radius: 999px;
  background: #16161d;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}
.avatars__item--1 {
  background: linear-gradient(135deg, #ffc6a6, #ff9f6e);
}
.avatars__item--2 {
  background: linear-gradient(135deg, #a6c8ff, #6e9fff);
  margin-left: -10px;
}
.avatars__item--3 {
  background: linear-gradient(135deg, #c6b5ff, #9277ff);
  margin-left: -10px;
}
.avatars__item--4 {
  background: linear-gradient(135deg, #a9e6c8, #5bb98c);
  margin-left: -10px;
}

/* Signup micro-interaction: the avatar stack pops when a visitor joins. */
.avatars.is-celebrating .avatars__item {
  animation: avatarPop 0.5s ease;
}
.avatars.is-celebrating .avatars__item--1 {
  animation-delay: 0s;
}
.avatars.is-celebrating .avatars__item--2 {
  animation-delay: 0.06s;
}
.avatars.is-celebrating .avatars__item--3 {
  animation-delay: 0.12s;
}
.avatars.is-celebrating .avatars__item--more {
  animation-delay: 0.18s;
}
@keyframes avatarPop {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-4px) scale(1.14);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .avatars.is-celebrating .avatars__item {
    animation: none;
  }
}

.platform-strip {
  background: #fff;
}
.platform-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.platform-strip__inner::before, .platform-strip__inner::after {
  content: "";
  flex: 1 1 40px;
  height: 1px;
  background: #efeff3;
}
.platform-strip__label {
  font-size: 13px;
  font-weight: 500;
  color: #9a9aa6;
  text-align: center;
}
.platform-strip__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 7px;
  border-radius: 999px;
  background: #f5f5f8;
  font-size: 14px;
  font-weight: 600;
  color: #3c3c46;
}
.platform-badge__icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.platform-badge__icon svg {
  width: 100%;
  height: 100%;
}
.platform-badge__icon--tiktok {
  color: #16161d;
}
.platform-badge__icon--meta {
  color: #0866ff;
}
.platform-badge__icon--youtube {
  color: #ff0000;
}

.feature {
  background: #fff;
}
.feature--alt {
  background: #f9f9fa;
  border-top: 1px solid #efeff3;
  border-bottom: 1px solid #efeff3;
}
.feature__inner {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 96px;
}
.feature__inner--media-first {
  grid-template-columns: 1.5fr 0.85fr;
}
.feature__title {
  margin: 0 0 18px;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.feature__lead {
  margin: 0 0 28px;
  max-width: 480px;
  font-size: 17px;
  line-height: 1.6;
  color: #55555f;
}
/* Plain media figures (e.g. the ad breakdown) need the default <figure>
   inline margin cleared, or it shrinks + centers the image on mobile. */
.feature__media {
  margin: 0;
}
.feature__media--center {
  display: flex;
  justify-content: center;
}

/* Collections (04) is a plain white feature section; the lilac ramp now lives
   on Insights (05), the last feature before the CTA. */
#collections .feature__inner {
  grid-template-columns: 0.85fr 1.15fr;
}

.frame {
  margin: 0;
  border-radius: 20px;
  border: 1px solid #ececf2;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 50px rgba(20, 20, 45, 0.09);
}
.frame--narrow {
  display: block;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 18px 50px rgba(20, 20, 45, 0.1);
}

.checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.checklist__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: #3c3c46;
}

.check-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f1ecff;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.breakdown-art {
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.spec-list {
  margin: 0;
  padding-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.spec + .spec {
  padding-top: 11px;
  border-top: 1px solid #f0f0f4;
}
.spec__label {
  font-size: 13px;
  color: #8b8b95;
}
.spec__value {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #2d2d36;
  text-align: right;
}
.spec__value--tag {
  color: var(--accent);
  background: #f1ecff;
  border-radius: 7px;
  padding: 4px 10px;
}

.chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 440px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  padding: 11px 14px;
  background: #fff;
  border: 1px solid #e9e9ef;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #3c3c46;
}

.patterns {
  background: linear-gradient(180deg, #f4f1ff, #fbfaff);
}
.patterns__inner {
  max-width: 1080px;
  text-align: center;
  padding-top: 104px;
  padding-bottom: 104px;
}
.patterns__title {
  margin: 0 auto 18px;
  max-width: 760px;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
}
.patterns__lead {
  margin: 0 auto 44px;
  max-width: 600px;
  font-size: 18px;
  line-height: 1.6;
  color: #55555f;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  max-width: 840px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 11px 20px;
  background: #fff;
  border: 1px solid #ece7f8;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: #3c3c46;
}
.tag--active {
  color: var(--accent);
  border-color: #e2d8ff;
  box-shadow: 0 4px 14px rgba(108, 64, 240, 0.08);
}

.insights {
  background: #fff;
}
.insights__inner {
  padding-top: 96px;
  padding-bottom: 96px;
}
.insights__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.section-head {
  text-align: center;
  margin-bottom: 52px;
}
.section-head__title {
  margin: 0 auto 16px;
  max-width: 680px;
  font-size: 42px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-weight: 800;
}
.section-head__lead {
  margin: 0 auto;
  max-width: 560px;
  font-size: 17px;
  line-height: 1.6;
  color: #55555f;
}

/* The insights graphic is a crisp, high-contrast set of cards. Rather than
   let it sit stark on the white section, embed it in a soft tinted mat with a
   gentle shadow and round the image itself, so it reads as calm, not harsh. */
.insights .frame {
  border: none;
  background: #f4f2fb;
  border-radius: 24px;
  padding: clamp(18px, 3vw, 38px);
  box-shadow: 0 22px 54px rgba(20, 20, 45, 0.06);
}
.insights .frame img {
  display: block;
  border-radius: 14px;
}

.chart-card {
  display: block;
  padding: 28px 30px;
  text-align: left;
}
.chart-card__title {
  margin: 0 0 24px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #16161d;
}

.bar-chart {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 21px;
}
.bar-chart__row {
  display: grid;
  grid-template-columns: 150px 1fr 42px;
  align-items: center;
  gap: 14px;
}
.bar-chart__label {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  font-weight: 500;
  color: #3c3c46;
}
.bar-chart__dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c, var(--accent));
}
.bar-chart__track {
  height: 8px;
  border-radius: 999px;
  background: #ececf2;
  overflow: hidden;
}
.bar-chart__fill {
  display: block;
  height: 100%;
  width: var(--v, 0%);
  border-radius: 999px;
  background: var(--accent);
}
.bar-chart__pct {
  font-size: 15px;
  font-weight: 700;
  color: #16161d;
  text-align: right;
}

.donut-chart {
  display: flex;
  align-items: center;
  gap: 30px;
}

.donut {
  flex: 0 0 auto;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle closest-side, transparent 60%, #000 61%);
  mask: radial-gradient(circle closest-side, transparent 60%, #000 61%);
}
.donut--platforms {
  background: conic-gradient(#6c40f0 0 42%, #6e9fff 42% 72%, #eba6df 72% 88%, #ff5c5c 88% 96%, #d8dae2 96% 100%);
}

.donut-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.donut-legend__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  font-size: 15px;
}
.donut-legend__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c, var(--accent));
}
.donut-legend__name {
  font-weight: 500;
  color: #3c3c46;
}
.donut-legend__pct {
  font-weight: 700;
  color: #16161d;
}

.feature--alt .frame {
  box-shadow: 0 16px 44px rgba(20, 20, 45, 0.07);
}

.collections-art {
  width: 100%;
  max-width: 600px;
  height: auto;
}

.final-cta {
  background: #fff;
  padding: 96px 28px;
}
.final-cta__panel {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 84px 64px;
  border-radius: 28px;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(620px 360px at 88% -20%, rgba(108, 64, 240, 0.55), transparent 60%), #131019;
  border: 1px solid #241d33;
  box-shadow: 0 30px 70px rgba(20, 16, 40, 0.35);
}
.final-cta__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  /* Bleed the feed past the right edge so the rightmost cards are clipped
     by the panel border instead of stopping short — reads as an endless feed. */
  right: -40px;
  z-index: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  padding: 0;
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0, 0, 0, 0.55) 62%, #000 85%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 38%, rgba(0, 0, 0, 0.55) 62%, #000 85%);
}
.final-cta__content {
  position: relative;
  z-index: 1;
}
.final-cta__eyebrow {
  display: inline-block;
  margin: 0 0 22px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b9a6ff;
}
.final-cta__title {
  margin: 0 0 30px;
  max-width: 760px;
  font-size: 60px;
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 800;
}
.final-cta__title .accent2 {
  color: #c0aeff;
}
.final-cta__row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}
.final-cta__fineprint {
  margin: 0;
  padding-left: 22px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.final-cta__fineprint strong {
  color: inherit;
  font-weight: 600;
}

.cta-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 600px;
  padding: 6px 6px 6px 20px;
  background: #fff;
  border-radius: 999px;
}
.cta-pill__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 12px 0;
  font-family: inherit;
  font-size: 15px;
  color: #16161d;
}
.cta-pill__go {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cta-pill__go svg {
  width: 20px;
  height: 20px;
}

.creative-col {
  flex: 0 0 150px;
  animation: creative-scroll 34s linear infinite;
  will-change: transform;
}
.creative-col--b {
  animation-duration: 44s;
  animation-direction: reverse;
}
.creative-col--c {
  flex-basis: 138px;
  animation-duration: 54s;
}

.creative-card {
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.creative-card__media {
  position: relative;
  display: block;
  height: 196px;
  background: rgba(255, 255, 255, 0.07);
}
.creative-card__media--tall {
  height: 226px;
}
.creative-card__media--short {
  height: 162px;
}
.creative-card__plat {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}
.creative-card__menu {
  position: absolute;
  top: 13px;
  right: 9px;
  width: 16px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.35);
}
.creative-card__time {
  position: absolute;
  left: 9px;
  bottom: 9px;
  width: 30px;
  height: 14px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.creative-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px 11px;
}
.creative-card__avatar {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.creative-card__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.creative-card__line {
  display: block;
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
}
.creative-card__line--short {
  width: 58%;
  background: rgba(255, 255, 255, 0.1);
}
.creative-card__save {
  flex: 0 0 auto;
  display: block;
  width: 11px;
  height: 14px;
  border-radius: 2px;
  background: rgba(146, 119, 255, 0.55);
}

@keyframes creative-scroll {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
.site-footer {
  background: #fff;
  border-top: 1px solid #eeeef3;
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 34px;
  padding-bottom: 34px;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-footer__tagline {
  margin-left: 8px;
  font-size: 13px;
  color: #a6a6b2;
}
.site-footer__links {
  display: flex;
  gap: 24px;
  font-size: 14px;
  color: #8b8b95;
}
.site-footer__links a {
  text-decoration: none;
}

@media (max-width: 900px) {
  .hero__inner,
  .feature__inner,
  .insights__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* #collections overrides the base grid with an ID selector, which also
     out-ranks the rule above — so it needs its own ID-level reset to collapse. */
  #collections .feature__inner {
    grid-template-columns: 1fr;
  }
  /* The hero's desktop vertical padding (74/84px) leaves a large empty void
     between the stacked hero image and the platform strip on mobile — tighten. */
  .hero__inner {
    padding-top: 40px;
    padding-bottom: 48px;
  }
  .feature__inner--media-first .feature__body {
    order: -1;
  }
  .hero__title {
    font-size: 40px;
  }
  .feature__title,
  .section-head__title,
  .patterns__title {
    font-size: 34px;
  }
  .nav__links {
    display: none;
  }
  /* Below the single-row width, stack the strip in source order so each part
     gets its own row: full-width line / label / badges / full-width line. */
  .platform-strip__inner {
    gap: 18px;
  }
  /* Each hairline spans the full content width as a top / bottom divider. */
  .platform-strip__inner::before,
  .platform-strip__inner::after {
    flex-basis: 100%;
  }
  .platform-strip__list {
    flex-basis: 100%;
    justify-content: center;
  }
  .final-cta__panel {
    padding: 52px 26px;
  }
  .final-cta__title {
    font-size: 40px;
  }
}
/* =============================================================
   Footer — stack brand over links on phones. The tagline is long,
   so let the brand row wrap and drop it onto its own line instead
   of cramming it beside the "Hooklen" wordmark.
   ============================================================= */
@media (max-width: 600px) {
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .site-footer__brand {
    flex-wrap: wrap;
  }
  .site-footer__tagline {
    flex-basis: 100%;
    margin-left: 0;
  }
  .site-footer__links {
    flex-wrap: wrap;
    gap: 14px 22px;
  }
}
/* ============================================================= */
/* Interactivity: button hover states + floating hero widgets    */
/* ============================================================= */
/* ---- Button hover / active / focus ---- */
.btn {
  transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.18s ease;
}

.btn--primary:hover {
  background: #7b51f4;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(108, 64, 240, 0.36);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: 0 5px 14px rgba(108, 64, 240, 0.3);
}

.btn--lg:hover {
  box-shadow: 0 14px 30px rgba(108, 64, 240, 0.4);
}

.btn--dark:hover {
  background: #25252f;
  transform: translateY(-2px);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* round arrow submit button in the final CTA */
.cta-pill__go {
  transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.2s ease;
}

.cta-pill__go svg {
  transition: transform 0.18s ease;
}

/* The button is nested tightly in the pill, so hover only deepens the purple —
   no scaling or arrow movement that would crowd the pill's rounded edge. */
.cta-pill__go:hover {
  background: #7b51f4;
}

.cta-pill__go:active {
  transform: scale(0.97);
}

/* nav links — underline grows in on hover */
.nav__links a {
  position: relative;
  padding-bottom: 2px;
  transition: color 0.18s ease;
}

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}

.nav__links a:hover {
  color: #16161d;
}

.nav__links a:hover::after {
  transform: scaleX(1);
}

/* ============================================================= */
/* Pattern tags — live "analysis" reveal + scanning highlight    */
/* ============================================================= */
.tag {
  position: relative;
  transition: opacity 0.5s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

/* leading dot that reveals when a pattern is detected.
   The dot's box (width + margin) is reserved at all times so an
   active/detected tag never changes width — this keeps the centered
   flex-wrap cloud from reflowing (no tags jumping between rows). */
.tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 999px;
  background: #c7c2d4; /* idle / not-yet-detected */
  vertical-align: middle;
  transition: background-color 0.25s ease;
}

.tag--detected::before,
.tag--active::before {
  background: var(--accent);
}

/* staggered entrance once the cloud scrolls into view */
.tag-cloud.is-armed .tag {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
}

.tag-cloud.is-armed.is-visible .tag {
  opacity: 1;
  transform: none;
}

/* the scanner passing over a tag */
.tag--scanning {
  color: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 20px rgba(108, 64, 240, 0.22);
}

/* a pattern locked in by the analysis */
.tag--detected {
  color: var(--accent);
  border-color: #d9caff;
  background: #fff;
  box-shadow: 0 6px 18px rgba(108, 64, 240, 0.14);
  animation: tag-pop 0.4s ease;
}

@keyframes tag-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}
/* live status line under the cloud */
.tag-scan {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  margin: 34px auto 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #ece7f8;
  font-size: 14px;
  font-weight: 600;
  color: #6a6a76;
}

.tag-scan__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: scan-pulse 1.4s ease-out infinite;
}

@keyframes scan-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(108, 64, 240, 0.45);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(108, 64, 240, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(108, 64, 240, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tag,
  .tag::before {
    transition: none;
  }
  .tag--detected {
    animation: none;
  }
  .tag-scan__dot {
    animation: none;
  }
  .tag-scan {
    display: none;
  }
}

/* ============================================================= */
/* Insights (05) — native, filterable "recurring elements" board */
/* Replaces the old flat PNG with resolution-independent markup   */
/* whose bars re-rank live as you switch niche.                   */
/* ============================================================= */
/* Insights is the last feature before the CTA, so it carries the soft lilac
   tint that ramps into the white final CTA (border-top separates it from the
   white Collections section above; no bottom border = soft merge into CTA). */
.feature--insights {
  background: #f6f5fb;
  border-top: 1px solid #efeff3;
}
.feature--insights .feature__inner {
  grid-template-columns: 1.2fr 0.9fr;
}

/* On the lilac section the tinted tray would blend away, so the panel becomes
   a plain wrapper and the white card floats directly on the tint. */
.ins-panel {
  margin: 0;
  background: transparent;
  padding: 0;
}
.ins-card {
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e9e7f3;
  box-shadow: 0 20px 50px rgba(20, 20, 45, 0.08);
}
.ins-cardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 26px 0;
}
.ins-cardhead h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #16161d;
}
.ins-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #8a8a96;
}
.ins-live__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #27c08a;
  animation: ins-pulse 2.2s infinite;
}
@keyframes ins-pulse {
  0% { box-shadow: 0 0 0 0 rgba(39, 192, 138, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(39, 192, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(39, 192, 138, 0); }
}

.ins-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 15px 26px 2px;
}
.ins-chip {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #3c3c46;
  background: #f6f5fb;
  border: 1px solid #ebe9f4;
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.ins-chip:hover {
  border-color: #c9bff3;
  color: #16161d;
}
.ins-chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 5px 14px rgba(108, 64, 240, 0.26);
}
.ins-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.ins-card .chart-card { padding: 16px 26px 8px; }
.ins-card .bar-chart { gap: 17px; }
.ins-card .bar-chart__row {
  grid-template-columns: 22px 196px 1fr 42px;
  gap: 13px;
}
.bar-chart__rank {
  font-size: 12.5px;
  font-weight: 700;
  color: #c2c2cc;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ins-card .bar-chart__label {
  font-size: 14px;
  white-space: nowrap;
}
.ins-card .bar-chart__row--top .bar-chart__rank { color: var(--accent); }
.ins-card .bar-chart__row--top .bar-chart__label { font-weight: 700; color: #16161d; }
.ins-card .bar-chart__row--top .bar-chart__fill {
  background: linear-gradient(90deg, #6c40f0, #9277ff);
}
.bar-chart__fill {
  transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ins-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 6px 26px 0;
  padding: 14px 0 18px;
  border-top: 1px solid #f0eff7;
  font-size: 12.5px;
  color: #9a9aa4;
}
.ins-foot b { color: #55555f; font-weight: 700; }
.ins-foot__item { white-space: nowrap; }
.ins-foot__sep { color: #cdcdd6; }

@media (max-width: 900px) {
  .feature--insights .feature__inner { grid-template-columns: 1fr; }
  /* The panel is a grid item; without this its min-width:auto resolves to the
     filterbar's (now non-wrapping) min-content and blows the column past the
     viewport. Zeroing it lets the card shrink so the filterbar scrolls instead. */
  .ins-panel { min-width: 0; }
  /* Stack each row: rank + label + % on top, full-width bar below — so long
     labels wrap cleanly instead of squashing the bar into a sliver. */
  .ins-card .bar-chart__row {
    grid-template-columns: 22px 1fr auto;
    grid-template-areas:
      "rank label pct"
      "track track track";
    column-gap: 12px;
    row-gap: 10px;
  }
  .ins-card .bar-chart__rank { grid-area: rank; }
  .ins-card .bar-chart__label { grid-area: label; white-space: normal; }
  .ins-card .bar-chart__pct { grid-area: pct; }
  .ins-card .bar-chart__track { grid-area: track; }
  /* Filters collapse into a single horizontal scroll strip that bleeds to the
     card edges — chips clip under the rounded corners instead of stacking into
     three wrapped rows. Edge fade + hidden scrollbar hint there's more to scroll. */
  .ins-filterbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* overflow-x:auto also clips the vertical axis, so the bottom padding has to
       clear the active chip's drop shadow or it gets sliced off. */
    padding: 15px 26px 16px;
    scroll-snap-type: x proximity;
    scroll-padding-left: 26px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 30px), transparent 100%);
  }
  .ins-filterbar::-webkit-scrollbar { display: none; }
  .ins-chip { flex: 0 0 auto; scroll-snap-align: start; }
  /* Tighter shadow so it fits within the clipped scroll box without slicing. */
  .ins-chip.is-active { box-shadow: 0 4px 11px rgba(108, 64, 240, 0.24); }
  /* Footnote: drop the separator and let "refreshed weekly" take its own line,
     so the count never wraps mid-phrase. */
  .ins-foot__sep { display: none; }
  .ins-foot__item:last-child { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ins-live__dot { animation: none; }
  .bar-chart__fill { transition: none; }
}