/* ─── Buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  border-radius: 0;
  transition: all var(--duration-base) var(--ease-out);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
}

/* Primary — baby blue fill with hard offset shadow (brutalist) */
.btn--primary {
  background-color: var(--bone);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.btn--primary:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--ink);
}

.btn--primary:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 var(--ink);
}

/* Secondary — paper fill, no shadow */
.btn--secondary {
  background-color: var(--paper);
  color: var(--ink);
  border-color: var(--ink);
}

.btn--secondary:hover {
  background-color: var(--ink);
  color: var(--white);
}

/* Ghost — text only with hover colour */
.btn--ghost {
  background-color: transparent;
  color: var(--ink);
  border-color: transparent;
  padding: 0.875rem 1rem;
}

.btn--ghost:hover {
  color: var(--hot);
}

/* White — for dark backgrounds */
.btn--white {
  background-color: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

.btn--white:hover {
  background-color: transparent;
  color: var(--white);
  border-color: var(--white);
}

/* Accent — orange ember, reserved for high-intent moments */
.btn--accent {
  background-color: var(--hot);
  color: var(--white);
  border-color: var(--hot);
}

.btn--accent:hover {
  background-color: var(--hot-hover);
  border-color: var(--hot-hover);
  transform: translateY(-1px);
}

.btn--lg {
  padding: 0.75rem 1.75rem;
  font-size: var(--text-sm);
}

.btn--sm {
  padding: 0.5rem 1.125rem;
  font-size: var(--text-xs);
}

.btn--icon-right svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-base) var(--ease-out);
}

.btn--icon-right:hover svg {
  transform: translateX(3px);
}

/* Dark-context buttons (any .section--dark or .cta-band) */
/* Primary — baby blue face, dark navy border, orange offset shadow */
.section--dark .btn--primary,
.cta-band .btn--primary {
  background-color: var(--bone);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 6px 6px 0 var(--hot);
}

.section--dark .btn--primary:hover,
.cta-band .btn--primary:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--hot);
}

.section--dark .btn--primary:active,
.cta-band .btn--primary:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 var(--hot);
}

/* Secondary — outlined paper on transparent */
.section--dark .btn--secondary,
.cta-band .btn--secondary {
  background-color: transparent;
  color: var(--paper);
  border-color: var(--paper);
  box-shadow: none;
}

.section--dark .btn--secondary:hover,
.cta-band .btn--secondary:hover {
  background-color: var(--paper);
  color: var(--ink);
}

/* ─── Cards ─── */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  transition: all var(--duration-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card--dark {
  background: var(--ink);
  color: var(--text-inverse);
}

.card--accent {
  background: var(--hot);
  color: var(--white);
}

.card--bone {
  background: var(--bone);
}

.card--bordered {
  border: 1px solid var(--border-light);
}

.card--flat {
  background: var(--paper-dark);
}

.card--flat:hover {
  transform: none;
  box-shadow: none;
}

.card__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: var(--space-3);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-4);
}

.card__text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.card--dark .card__text {
  color: rgba(255, 255, 255, 0.65);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-6);
  transition: gap var(--duration-base) var(--ease-out);
}

.card__link:hover {
  gap: var(--space-3);
  color: var(--hot);
}

.card--dark .card__link:hover {
  color: var(--hot);
}

.card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: var(--space-4);
}

/* ─── Feature list ─── */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.feature-list__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.feature-list__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--ink); /* list arrows are structure, not the blurple active detail (Danny, 4 Nov 2026) */
  margin-top: 2px;
}

.feature-list__text {
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/* ─── Stats ─── */
.stat {
  text-align: center;
}

.stat__number {
  font-family: var(--font-display);
  font-size: var(--text-6xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.04em;
}

.stat__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}

.section--dark .stat__label {
  color: rgba(255, 255, 255, 0.6);
}

/* ─── Trust strip ─── */
.trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-8) 0;
  flex-wrap: wrap;
}

.trust-strip__logo {
  height: 28px;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: all var(--duration-base) var(--ease-out);
}

.trust-strip__logo:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* ─── Marquee / ticker ─── */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: var(--space-4) 0;
  background: var(--ink);
  color: var(--white);
  margin-top: 12px;
}

.marquee__track {
  display: inline-flex;
  animation: marquee 60s linear infinite;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.marquee__separator {
  color: var(--blurple-bright); /* bright blurple: the navy-legible secondary, per brand-guidelines.md */
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── CTA Band ─── */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-24) 0 var(--space-10);
  text-align: left;
}

.cta-band__title {
  font-family: var(--font-display);
  font-size: clamp(5rem, 4rem + 9vw, 12rem);
  font-weight: var(--weight-bold);
  line-height: calc(0.85em + 5px);
  letter-spacing: -0.05em;
  color: var(--paper);
  margin-bottom: var(--space-20);
}

.cta-band__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.cta-band__actions {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}

/* "Start now" — light blue face, dark navy border, orange offset shadow */
.cta-band__btn-primary {
  background: var(--bone);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  box-shadow: 6px 6px 0 var(--hot);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.cta-band__btn-primary:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--hot);
}

.cta-band__btn-primary:active {
  transform: translate(6px, 6px);
  box-shadow: 0 0 0 var(--hot);
}

.cta-band__btn-primary svg {
  width: 14px;
  height: 14px;
  transition: transform var(--duration-base) var(--ease-out);
}

.cta-band__btn-primary:hover svg {
  transform: translateX(3px);
}

/* Outlined "Book a demo" — paper border on dark bg */
.cta-band__btn-secondary {
  background: transparent;
  color: var(--paper);
  border: 2px solid var(--paper);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

.cta-band__btn-secondary:hover {
  background: var(--paper);
  color: var(--ink);
}

/* ─── Section call to action: a button row under a section, centred on
   desktop and left-aligned on phones (css/mobile.css) ─── */
.section-cta {
  text-align: center;
  margin-top: var(--space-10);
}

.section-cta-row {
  justify-content: center;
}

/* ─── Section header ─── */
.section-header--tight {
  margin-bottom: calc(var(--space-6) + 5px) !important;
}

.section-header {
  max-width: 720px;
  margin-bottom: var(--space-12);
}

.section-header--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-header__overline {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--hot);
  margin-bottom: var(--space-4);
}

.section-header__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: var(--space-4);
}

.section-header__subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 600px;
}

.section-header--center .section-header__subtitle {
  margin-left: auto;
  margin-right: auto;
}

.section--dark .section-header__subtitle {
  color: rgba(255, 255, 255, 0.65);
}

/* ─── FAQ Accordion ─── */
.faq-item {
  border-bottom: 1px solid var(--border-light);
}

.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-6) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  text-align: left;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.faq-item__question:hover {
  color: var(--hot);
}

.faq-item__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform var(--duration-base) var(--ease-out);
}

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

.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-slow) var(--ease-out);
}

.faq-item.is-open .faq-item__answer {
  max-height: 500px;
}

.faq-item__answer-inner {
  padding-bottom: var(--space-6);
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

/* ─── Badge / pill ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-full);
  background: var(--hot-light);
  color: var(--hot);
}

/* ─── Divider ─── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border-light);
  border: none;
}

/* ─── Form inputs ─── */
.input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  font-size: var(--text-base);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11, 27, 51, 0.08);
}

.input::placeholder {
  color: var(--mute);
}

.input--lg {
  padding: 1.125rem 1.5rem;
  font-size: var(--text-md);
}

textarea.input {
  resize: vertical;
  min-height: 120px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* ─── Phone carousel ─── */
/* A [data-phone-carousel] grid becomes one swipeable row on phones, one
   full-width card at a time, moving on its own (js/main.js) with dots
   underneath (Danny, 3-4 Nov 2026). Homepage Six ways, Card machines. */
.carousel-dots {
  display: none;
}

@media (max-width: 640px) {
  /* The gap matches the gutter so the next card starts exactly at the
     screen edge instead of peeking in */
  body .container [data-phone-carousel] {
    display: flex;
    gap: var(--container-pad);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    scrollbar-width: none;
  }

  body .container [data-phone-carousel]::-webkit-scrollbar {
    display: none;
  }

  body .container [data-phone-carousel] > * {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* Dots are a graphic, so they centre under the card */
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }

  .carousel-dots__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: width var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out);
  }

  .carousel-dots__dot.is-active {
    width: 28px;
    border-radius: 5px;
    background: var(--ink);
  }
}

/* ─── Live counter pill ─── */
.live-pill {
  display: inline-flex;
  align-items: stretch;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: calc(var(--space-6) - 15px);
}

.live-pill__live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  background: var(--ink);
  color: var(--white);
  border: 1.25px solid var(--ink);
}

.live-pill__dot {
  width: 4.5px;
  height: 4.5px;
  border-radius: 50%;
  background: var(--green); /* emerald — semantic: live */
  animation: pulse-ring 2s ease-in-out infinite;
  flex-shrink: 0;
}

.live-pill__count-wrap {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--paper);
  color: var(--ink);
  border: 1.25px solid var(--ink);
}

.live-pill__count {
  font-weight: var(--weight-bold);
  margin-right: 0.4em;
}

/* A section headline that stays on one line on desktop: lifts the 720px
   header cap. Narrower screens wrap as normal. */
@media (min-width: 1024px) {
  .section-header--one-line {
    max-width: none;
  }

  .section-header--one-line .section-header__title {
    white-space: nowrap;
  }
}

/* ─── Phones: hero first, graphic after (Emily's layout, approved by Danny
   23 Oct 2026). Below 1024px the demo graphic used to sit above the
   headline and push the buttons off the first screen; it now follows them,
   and the gaps around the hero tighten on phones. ─── */
@media (max-width: 1024px) {
  .solution-hero__visual {
    order: 1 !important;
  }
}

@media (max-width: 640px) {
  .hero__title,
  .solution-hero__title {
    margin-top: 0 !important;
    margin-bottom: var(--space-5) !important;
  }

  /* 16px clear between buttons once the primary's 6px shadow is counted
     (Danny, 3 Nov 2026) */
  body .hero__actions,
  body .solution-hero__actions {
    gap: var(--space-4) calc(var(--space-4) + 6px);
    margin-top: var(--space-6);
  }

  /* "Let's get paid." matches the homepage's "Get paid." on phones
     (Danny, 4 Nov 2026) */
  .cta-band__title {
    font-size: 30vw;
    margin-bottom: var(--space-10);
  }

  .cta-band__footer {
    row-gap: var(--space-10);
  }

  /* Less air above "Let's get paid." on phones: 64px, not 96px
     (Danny, 4 Nov 2026) */
  .cta-band {
    padding-top: var(--space-16);
  }

  body .hero__actions .btn--lg,
  body .solution-hero__actions .btn--lg {
    padding: 0.625rem 0.8125rem;
  }

  body .proof-strip,
  body .solution-hero__trust {
    margin-top: var(--space-5);
    font-size: 0.8125rem;
  }

  .proof-strip .trust-line__star,
  .solution-hero__trust .trust-line__star {
    width: 18px;
    height: 18px;
    vertical-align: -3px;
    margin-right: 6px;
  }
}

/* Hairline between two back-to-back sections of the same colour: container
   width so it lines up with the content, quiet enough to organise without
   decorating (Danny, 4 Nov 2026) */
.section-rule {
  border: 0;
  border-top: 1px solid rgba(11, 27, 51, 0.12);
  margin: 0;
}