/* Competitor comparison table styles */
.scroll-box {
  overflow-x: auto;
}

.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.comp-table th,
.comp-table td {
  padding: .75rem .5rem;
  text-align: center;
}

.comp-table th {
  background: #1A202C;
  font-weight: 600;
}

.comp-table td:first-child {
  text-align: left;
}

.comp-table tr:nth-child(even) {
  background: #131313;
}

.comp-table .good {
  color: #B794F4;
  font-weight: 700;
}

.comp-table .warn {
  color: #F6E05E;
}

@media(max-width:700px) {

  .comp-table th,
  .comp-table td {
    padding: .5rem .25rem;
    font-size: .85rem;
  }
}

/* Section fade-in animation (SEO-safe) */
.section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .45s ease-out, transform .45s ease-out;
}

.section.in-view {
  opacity: 1;
  transform: translateY(0);
}

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

:root {
  --clr-bg: #111111;
  --clr-text: #F7FAFC;
  --clr-accent: #B794F4;
  --clr-muted: #A0AEC0;
  --font-sans: 'Inter', sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: var(--clr-bg);
  color: var(--clr-text);
  font-family: var(--font-sans);
  line-height: 1.6;
}

a {
  text-decoration: none;
}

.container {
  width: min(100% - 2rem, 1200px);
  margin: 0 auto;
  padding: 2rem 0;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
}

.btn {
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  min-height: 44px;
  border-radius: 0.375rem;
  display: inline-block;
  box-sizing: border-box;
}

/* Checklist alignment fix for mobile and desktop */
.comparison-checklist {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 400px;
}

.comparison-checklist li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid #222;
}

.comparison-checklist li:last-child {
  border-bottom: none;
}

.comparison-checklist span {
  flex: 1 1 0;
  text-align: left;
}

.comparison-checklist span:nth-child(2),
.comparison-checklist span:nth-child(3) {
  flex: 0 0 32px;
  text-align: center;
  font-size: 1.25rem;
}

@media (max-width: 700px) {
  .comparison-checklist {
    max-width: 100%;
  }

  .comparison-checklist li {
    flex-direction: row;
    padding: 0.75rem 0.25rem;
  }

  .comparison-checklist span {
    font-size: 1.05rem;
  }

  .comparison-checklist span:nth-child(2),
  .comparison-checklist span:nth-child(3) {
    font-size: 1.25rem;
    min-width: 32px;
  }
}

.btn.solid {
  background: var(--clr-accent);
  color: var(--clr-bg);
}

.btn.outline {
  border: 2px solid var(--clr-text);
  color: var(--clr-text);
}

.section {
  padding: 3rem 0;
  /* tightened spacing */
}

.section-title {
  text-align: center;
  font-size: 2.75rem;
  /* bumped size */
  margin-bottom: 1.5rem;
  font-weight: 700;
}

.hero-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.hero-copy {
  flex: 1 1 320px;
}

.hero-title {
  font-size: 3.25rem;
  /* reduced from 4rem */
  color: var(--clr-accent);
  margin: 0 0 1rem;
}

@media (max-width: 600px) {
  .hero-title {
    font-size: 2.5rem;
    /* smaller font on narrow viewports */
  }
}

.hero-subtitle {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
}

.hero-demo {
  flex: 1 1 320px;
}

.timeline {
  background: var(--clr-bg);
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.timeline-item .time {
  width: 5rem;
  font-size: 0.875rem;
  color: var(--clr-muted);
  flex-shrink: 0;
}

.timeline-item .icon {
  font-size: 1.25rem;
}

.timeline-item .icon.complete {
  color: var(--clr-text);
}

.timeline-item .icon.warning {
  color: var(--clr-muted);
}

.timeline-item .content {
  font-size: 0.875rem;
}

.timeline-item .muted {
  color: var(--clr-muted);
  margin-left: 0.5rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
  /* tightened grid gap */
}

.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.card {
  background: #1A202C;
  /* subtle contrast */
  padding: 2rem;
  border-radius: 0.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform .2s, box-shadow .2s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.circle {
  background: var(--clr-accent);
  color: var(--clr-bg);
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  border-radius: 50%;
  margin: 0 auto 1rem;
  font-weight: 700;
}

.sm {
  font-size: 0.875rem;
}

.muted {
  color: var(--clr-muted);
}

i.fa-2x {
  margin-bottom: 0.75rem;
  color: var(--clr-accent);
}

.card-pricing {
  border: 2px solid var(--clr-accent);
}

.card-pricing h3 {
  color: var(--clr-accent);
  margin-bottom: .5rem;
}

.pricing {
  font-size: 1.5rem;
  font-weight: 700;
}

.cta-banner {
  background: var(--clr-accent);
  text-align: center;
  padding: 4rem 0;
}

.cta-title {
  font-size: 2rem;
  color: var(--clr-bg);
  margin-bottom: 1rem;
}

.btn.cta-primary {
  background: var(--clr-text);
  color: var(--clr-bg);
}

.btn.cta-outline {
  border: 2px solid var(--clr-text);
  color: var(--clr-text);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

.footer-inner .link {
  color: var(--clr-muted);
  font-size: 0.875rem;
}

.copy {
  width: 100%;
  text-align: center;
  font-size: 0.75rem;
  color: var(--clr-muted);
}

/* Connected horizontal stepper */
.stepper {
  --accent: var(--clr-accent);
  /* reuse existing palette */
  --circle-size: 2.25rem;
  display: flex;
  gap: 1.5rem;
  counter-reset: step;
  margin: 3rem 0 1rem;
  padding: 0;
  list-style: none;
}

.stepper .step {
  flex: 1;
  text-align: center;
  position: relative;
  padding-top: calc(var(--circle-size) + 1rem);
}

/* numbered circles */
.stepper .step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background: var(--accent);
  color: var(--clr-bg);
  font-weight: 700;
  font-size: 1rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* connector lines */
.stepper .step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--circle-size) / 2);
  left: 50%;
  width: calc(100% + 1.5rem);
  /* same as gap */
  height: 4px;
  background: var(--accent);
  z-index: -1;
  /* place behind circles */
}

/* responsive: stack on narrow screens */
@media (max-width: 640px) {
  .stepper {
    flex-direction: column;
  }

  .stepper .step {
    text-align: left;
    padding-left: calc(var(--circle-size) + 0.75rem);
    padding-top: 0;
  }

  .stepper .step::before {
    left: 0;
    transform: none;
  }

  .stepper .step:not(:last-child)::after {
    top: var(--circle-size);
    left: calc(var(--circle-size) / 2);
    width: 4px;
    height: calc(100% + 1.5rem);
  }
}

/* connector lines – default state (width 0) */
.stepper .step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: calc(var(--circle-size) / 2);
  left: 50%;
  width: 0;
  /* ⇦ start collapsed */
  height: 4px;
  background: var(--accent);
  z-index: -1;
}

/* animate when the whole section is in view */
.section.in-view .stepper .step:nth-child(1)::after {
  animation: drawLine .8s ease-out forwards;
  /* first segment */
  animation-delay: .15s;
  /* slight pause */
}

.section.in-view .stepper .step:nth-child(2)::after {
  animation: drawLine .8s ease-out forwards;
  /* second segment */
  animation-delay: 1s;
  /* fires after #1 */
}

/* keyframes (unchanged) */
@keyframes drawLine {
  from {
    width: 0;
  }

  to {
    width: calc(100% + 1.5rem);
  }
}


/* =======================
   MOBILE VERTICAL STEPPER
   =======================*/
@media (max-width: 640px) {

  /* start each vertical connector at height 0 */
  .stepper .step:not(:last-child)::after {
    width: 4px;
    /* slim vertical bar */
    height: 0;
    /* collapsed */
    top: var(--circle-size);
    /* begins just under the circle */
    left: calc(var(--circle-size) / 2);
  }

  /* animate when section enters viewport */
  .section.in-view .stepper .step:nth-child(1)::after {
    animation: drawDown .8s ease-out forwards;
    animation-delay: .15s;
  }

  .section.in-view .stepper .step:nth-child(2)::after {
    animation: drawDown .8s ease-out forwards;
    animation-delay: 1s;
  }
}

/* keyframes for vertical growth */
@keyframes drawDown {
  from {
    height: 0;
  }

  to {
    height: calc(100% + 1.5rem);
  }
}

/* ===============================
   Vertical animated use-case list
   ===============================*/
.use-stepper {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 600px;
  position: relative;
}

.use-step {
  display: flex;
  gap: 1rem;
  position: relative;
  margin-bottom: 2.5rem;
}

/* icon */
.u-icon {
  flex: none;
  font-size: 1.6rem;
  color: var(--clr-accent);
  position: relative;
  top: 2px;
  /* slight vertical centring */
}

/* connector line (starts collapsed) */
.use-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 0.8rem;
  /* horizontally centres under icon */
  top: 1.9rem;
  /* starts just below icon */
  width: 4px;
  height: 0;
  background: var(--clr-accent);
  opacity: 0;
  /* invisible until animated */
}

/* === Animation when section enters viewport === */
@keyframes drawDownY {
  from {
    height: 0;
    opacity: 1;
  }

  to {
    height: calc(100% + 1.5rem);
    opacity: 1;
  }
}

.section.in-view .use-step:nth-child(1)::after {
  animation: drawDownY .8s ease-out forwards;
  animation-delay: .15s;
}

.section.in-view .use-step:nth-child(2)::after {
  animation: drawDownY .8s ease-out forwards;
  animation-delay: 1s;
}

.section.in-view .use-step:nth-child(3)::after {
  animation: drawDownY .8s ease-out forwards;
  animation-delay: 1.85s;
}

/* ==============================
   POLISH: keep line off the icon
   ==============================*/

/* 1. Give each icon its own “mask” circle that sits ABOVE the line */
:root {
  --u-icon: 1.75rem;
}

/* easy one-stop sizing tweak */

.u-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--u-icon);
  height: var(--u-icon);
  background: var(--clr-bg);
  /* same as section bg → masks line */
  border-radius: 50%;
  /* circular mask */
  z-index: 1;
  /* ensure it sits above the line */
}

/* shrink the actual FontAwesome glyph to fit nicely inside */
.u-icon i {
  font-size: 1.25rem;
  color: var(--clr-accent);
}

/* 2. Re-anchor the vertical connector so it begins below the icon */
.use-step:not(:last-child)::after {
  left: calc(var(--u-icon)/2 - 2px);
  /* still centred under icon */
  top: var(--u-icon);
  /* start AT icon’s bottom edge */
  /* other properties (width, background, etc.) unchanged */
}


/* ------------------------------------------------------------------
   1.  Extend the connector-animation to the new 4th & 5th list items
   ------------------------------------------------------------------*/

.section.in-view .use-step:nth-child(4)::after {
  animation: drawDownY .8s ease-out forwards;
  animation-delay: 2.7s;
  /* +0.85 s offset from step 3 */
}

.section.in-view .use-step:nth-child(5)::after {
  animation: drawDownY .8s ease-out forwards;
  animation-delay: 3.55s;
  /* +0.85 s offset from step 4 */
}

/* ------------------------------------------------------------------
   2.  Keep the connector visible but not “inside” the icons
   (icon mask already does the job, so no extra tweaks needed here)
   ------------------------------------------------------------------*/
/* ============  PAIN SECTION  ============ */
.pain-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.pain .section-title { text-align:center; }


.pain-list {
  margin: 2rem 0 2.5rem;
  padding: 0;
  list-style: none;
  font-size: 1.25rem;
  line-height: 1.55;
}

.pain-list li {
  position: relative;
  padding-left: 2.5rem;
  /* room for animated check */
  margin: 1.15rem 0;
  opacity: .8;
}

/* animated checkmark */
.pain-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .2rem;
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--clr-accent);
  border-radius: .3rem;
  box-sizing: border-box;
  transform: scale(0);
  transform-origin: left top;
  transition: .4s cubic-bezier(.25, .6, .35, 1);
}

.pain-list li.scrolled::before {
  background: var(--clr-accent);
  transform: scale(1);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 14%, 82% 0, 44% 62%);
}

.pain-list li.scrolled {
  opacity: 1;
}

/* bolden when checked */

.pain-cta {
  display: inline-block;
  font-size: 1.05rem;
  padding: .8rem 1.5rem;
}

/* ==== Pain checklist  ==== */
.pain-wrap {
  max-width: 620px;
}

.pain .section-title {
  text-align: center;
}

/* list container */
.pain-list {
  list-style: none;
  margin: 2rem 0 2.5rem;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1.5;
}

/* each line */
.pain-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding-left: .6rem;
  /* space for accent bar */
  margin: 1.2rem 0;
  opacity: .85;
}

/* left accent bar – animated */
.pain-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .15rem;
  width: 4px;
  height: 0;
  background: var(--clr-accent);
  transition: height .4s ease-out;
}

.pain-list li.in-view::before {
  height: 1.8rem;
}

/* grows on scroll */

/* icon circle */
.pain-list .icon{
  flex:none;
  width:1.9rem; height:1.9rem;
  display:grid; place-items:center;
  background:var(--clr-accent);
  border-radius:.4rem;
  color:var(--clr-bg);
  font-size:1rem;
  margin-top:.1rem;
}

/* purple highlight on keywords */
.hl {
  font-weight: 700;
  color: var(--clr-accent);
}

/* CTA */
.pain-cta {
  display: inline-block;
  margin-top: .3rem;
}

/* small screens */
@media(max-width:480px) {
  .pain-list {
    font-size: 1.1rem;
  }
}

/* Stronger hover / focus state for the primary button */
.btn.solid:hover,
.btn.solid:focus {
  filter: brightness(1.15);   /* 15 % lighter */
  transform: translateY(-2px);
  transition: filter .15s, transform .15s;
}

/* Improve contrast for the light-gray text in the GIF demo */
.timeline-item .muted {
  color: #CBD5E0;   /* light slate (~4.7:1 on #111 bg) */
  /* or use var(--clr-text) if you prefer full white */
}

/* ==============================================
   MOBILE TWEAK – clean wraps for pain checklist
   ==============================================*/
@media (max-width: 480px) {
  /* turn each line into a 2-column grid: [icon] [full text] */
  .pain-list li{
    display: grid;
    grid-template-columns: auto 1fr;   /* icon | text */
    gap: .65rem;
    padding-left: 0;                   /* remove left indent */
    margin: .9rem 0;
  }

  /* hide the vertical accent bar on tiny screens (optional) */
  .pain-list li::before{ display:none; }

  /* slim the icon pill */
  .pain-list .icon{
    width: 1.45rem;
    height: 1.45rem;
    font-size: .85rem;
  }
}

.priv-list{
  list-style:none;
  margin:2rem auto;
  padding:0;
  max-width:700px;
  font-size:1.1rem;
  line-height:1.6;
}
.priv-list li{
  display:flex;
  gap:.85rem;
  margin:1rem 0;
}
.priv-icon{
  flex:none;
  width:1.6rem; height:1.6rem;
  display:grid; place-items:center;
  background:var(--clr-accent);
  color:var(--clr-bg);
  border-radius:.35rem;
  font-size:.9rem;
}

/* ===== Text-only tech badges ===== */
.badge-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  justify-content:center;
  margin-top:2rem;
}

.badge{
  font-size:.85rem;
  padding:.45rem .9rem;
  border:1px solid #4A5568;        /* slate border */
  border-radius:.35rem;
  background:#1A202C;
  color:#CBD5E0;                   /* light gray */
  transition:color .25s, border-color .25s, background .25s;
  user-select:none;
}

.badge:hover,
.badge:focus{
  background:var(--clr-accent);
  border-color:var(--clr-accent);
  color:var(--clr-bg);
}

/* mobile: stack nicer */
@media(max-width:480px){
  .badge-bar{ justify-content:flex-start; }
}