/*
 * Supplemental utilities for pages added beyond the 1:1 home clone (e.g. /about).
 * The original site ships a purged Tailwind build that only contains the classes
 * it actually used, so any new class introduced here must be defined. Values
 * mirror Tailwind's defaults; the original index.css is left untouched.
 */

.pt-16 { padding-top: 4rem; }
.mt-1 { margin-top: 0.25rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
.leading-tight { line-height: 1.25; }

.w-20 { width: 5rem; }
.h-20 { height: 5rem; }
.w-32 { width: 8rem; }
.h-32 { height: 8rem; }
.object-cover { object-fit: cover; }

/* Avatar ring (replaces ring-2 + arbitrary ring colour which were purged). */
.team-avatar { box-shadow: 0 0 0 2px rgba(232, 82, 58, 0.3); transition: box-shadow 0.3s ease; }
.group:hover .team-avatar { box-shadow: 0 0 0 2px rgba(232, 82, 58, 0.6); }

@media (min-width: 1024px) {
  .lg\:pt-24 { padding-top: 6rem; }
  .lg\:pb-24 { padding-bottom: 6rem; }
  .lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
}

/* ---------------------------------------------------------------------------
 * Story-funnel rebuild: utilities used by the new home sections and the
 * /pricing and /blog pages that were not in the original purged build.
 * ------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

/* Deepest background shade (#0E0E0E) - replaces #0A0A0A; these arbitrary
 * classes are not in the original purged Tailwind build. */
.bg-\[\#0E0E0E\] { background-color: #0e0e0e; }
.bg-\[\#0E0E0E\]\/98 { background-color: #0e0e0efa; }

/* Fixed/parallax banner background (e.g. About hero). Mobile keeps `scroll`
 * because iOS Safari renders `fixed` backgrounds unreliably. */
.lc-banner-fixed { background-attachment: scroll; }
@media (min-width: 1024px) {
  .lc-banner-fixed { background-attachment: fixed; }
}

.max-w-xl { max-width: 36rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-\[12rem\] { max-width: 12rem; }

/* CRM page utilities not in the original purged build. Alpha colours mirror the
 * build's hex8 format (e.g. text-white/70 = #ffffffb3). */
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-white\/55 { color: #ffffff8c; }
.text-white\/45 { color: #ffffff73; }
.bg-white\/15 { background-color: #ffffff26; }
.border-\[\#E8523A\]\/30 { border-color: #e8523a4d; }
@media (min-width: 768px) {
  .md\:items-center { align-items: center; }
}
.scroll-mt-20 { scroll-margin-top: 5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-6 { padding-top: 1.5rem; }
.mt-12 { margin-top: 3rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-2 { row-gap: 0.5rem; }
.opacity-80 { opacity: 0.8; }
.top-9 { top: 2.25rem; }
.-right-4 { right: -1rem; }
.h-11 { height: 2.75rem; }
.w-11 { width: 2.75rem; }

.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:translate-x-0\.5 { transform: translateX(0.125rem); }

@media (min-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:items-end { align-items: flex-end; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .lg\:py-28 { padding-top: 7rem; padding-bottom: 7rem; }
  /* 7/5 split for the "Who We Are" guide teaser (col-span-6 already exists). */
  .lg\:col-span-7 { grid-column: span 7 / span 7; }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
}

/* Drop shadow on the /crm hero dashboard screenshot. Not in the original purged
 * Tailwind build, so define them here (Tailwind default 2xl shadow, black/40). */
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.shadow-black\/40 { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4); }

/* ---------------------------------------------------------------------------
 * Hero CRM device - iPad-style framed screenshot that bleeds off the right.
 * ------------------------------------------------------------------------- */
.lc-device {
  background: #161616;
  padding: 10px;
  border-radius: 24px;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.lc-device > img { display: block; width: 100%; height: auto; border-radius: 14px; }

/* Mobile: device shown in flow beneath the hero copy. */
.lc-hero-device-mobile { margin-top: 2.5rem; }

/* Desktop: device lifted out and bleeding off the right edge (~half visible). */
.lc-hero-device { display: none; }
@media (min-width: 1024px) {
  .lc-hero-device-mobile { display: none; }
  .lc-hero-device {
    display: block;
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translateY(-50%);
    width: 78vw;
    max-width: 1280px;
    z-index: 5;
  }
}

/* Mobile: center the hero copy (text, capped paragraphs, CTAs, trust badges).
   Reverts to the left-aligned desktop layout at lg (1024px+). */
@media (max-width: 1023px) {
  .lc-hero-copy { text-align: center; }
  .lc-hero-copy .max-w-lg { margin-left: auto; margin-right: auto; }
  .lc-hero-copy ul { justify-content: center; }
  .lc-hero-cta { justify-content: center; }
}

/* ---------------------------------------------------------------------------
 * Buttons - single source of truth (see partials/_button.ejs).
 * Self-contained CSS so a button can never break from a missing purged
 * Tailwind utility (e.g. the px-7 bug). Variants: primary / outline / ghost.
 * Sizes: sm / md / lg. Modifiers: --block. Rendered as <a> or <button>.
 * ------------------------------------------------------------------------- */
.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-family: inherit;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: 9999px;
  border: 2px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
    transform 0.1s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.lc-btn:focus-visible { outline: 2px solid #e8523a; outline-offset: 2px; }
.lc-btn:active { transform: scale(0.97); }
.lc-btn:disabled,
.lc-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.lc-btn > svg { width: 1em; height: 1em; flex: 0 0 auto; }

/* Sizes */
.lc-btn--sm { height: 2.25rem; padding: 0 1.25rem; font-size: 0.875rem; }
.lc-btn--md { height: 2.75rem; padding: 0 2rem; font-size: 0.9375rem; }
.lc-btn--lg { height: 3.25rem; padding: 0 2.5rem; font-size: 1rem; }

/* Variants */
.lc-btn--primary {
  background-color: #e8523a;
  color: #fff;
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.45);
}
.lc-btn--primary:hover { background-color: #d8462f; }
.lc-btn--outline {
  background-color: transparent;
  color: #fff;
  border-color: #e8523a;
}
.lc-btn--outline:hover { background-color: rgba(232, 82, 58, 0.1); }
.lc-btn--ghost {
  background-color: transparent;
  color: #fff;
}
.lc-btn--ghost:hover { background-color: rgba(255, 255, 255, 0.06); }

/* Modifiers */
.lc-btn--block { width: 100%; }

/* Circular play badge used inside the hero's secondary button. */
.lc-btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background-color: #e8523a;
  color: #fff;
  flex: 0 0 auto;
}
.lc-btn__badge > svg { width: 0.75rem; height: 0.75rem; }

/* ---------------------------------------------------------------------------
 * Audio player (custom controls over native <audio>) - call-samples section.
 * ------------------------------------------------------------------------- */
.lc-audio {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
}
.lc-audio__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: #e8523a;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.lc-audio__btn:hover { background: #d8462f; }
.lc-audio__btn:active { transform: scale(0.95); }
.lc-audio__btn:focus-visible { outline: 2px solid #e8523a; outline-offset: 2px; }
.lc-audio__main { flex: 1 1 auto; min-width: 0; }
.lc-audio__track {
  position: relative;
  height: 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  overflow: hidden;
}
.lc-audio__track:focus-visible { outline: 2px solid #e8523a; outline-offset: 3px; }
.lc-audio__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  border-radius: 9999px;
  background: #e8523a;
  transition: width 0.1s linear;
}
.lc-audio__time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------------
 * Calendly inline embed - booking section.
 * ------------------------------------------------------------------------- */
.lc-calendly {
  position: relative;
  min-height: 700px;
  border-radius: 12px;
  overflow: hidden;
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.lc-calendly__loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
}
.lc-calendly__spinner {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  border: 3px solid rgba(232, 82, 58, 0.25);
  border-top-color: #e8523a;
  animation: lc-spin 0.8s linear infinite;
}
@keyframes lc-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
 * Slider / carousel (testimonials) - shows 1/2/3 cards, moves one at a time.
 * Translation is computed in px (handles the gap) in main.ts.
 * ------------------------------------------------------------------------- */
.lc-slider { position: relative; }
.lc-slider__viewport { overflow: hidden; }
.lc-slider__track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.lc-slider__slide { flex: 0 0 100%; min-width: 0; } /* 1 per view (mobile) */
@media (min-width: 640px) { .lc-slider__slide { flex-basis: calc((100% - 1.5rem) / 2); } } /* 2 */
@media (min-width: 1024px) { .lc-slider__slide { flex-basis: calc((100% - 3rem) / 3); } } /* 3 */

.lc-slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: #141414;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lc-slider__btn:hover { background: #1a1a1a; border-color: rgba(232, 82, 58, 0.5); color: #e8523a; }
.lc-slider__btn:focus-visible { outline: 2px solid #e8523a; outline-offset: 2px; }
.lc-slider__btn--prev { left: -0.5rem; }
.lc-slider__btn--next { right: -0.5rem; }
@media (min-width: 1024px) {
  .lc-slider__btn--prev { left: -1.25rem; }
  .lc-slider__btn--next { right: -1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .lc-slider__track { transition: none; } }

/* ---------------------------------------------------------------------------
 * Blog article prose. Rendered Markdown bodies (.lc-prose) ship as bare HTML
 * tags, so style them here to match the dark theme. Kept deliberately scoped
 * to .lc-prose so it never leaks into the Tailwind-driven marketing sections.
 * ------------------------------------------------------------------------- */
.lc-prose { color: rgba(255, 255, 255, 0.72); font-size: 1.125rem; line-height: 1.8; }
.lc-prose > * + * { margin-top: 1.5rem; }
.lc-prose h2 { font-family: "Playfair Display", Georgia, serif; color: #fff; font-size: 1.875rem; line-height: 1.25; font-weight: 700; margin-top: 3rem; margin-bottom: 0.25rem; letter-spacing: -0.01em; }
.lc-prose h3 { color: #fff; font-size: 1.375rem; line-height: 1.3; font-weight: 600; margin-top: 2.25rem; }
.lc-prose h4 { color: #fff; font-size: 1.125rem; font-weight: 600; margin-top: 1.75rem; }
.lc-prose p { margin: 0; }
.lc-prose a { color: #e8523a; text-decoration: underline; text-underline-offset: 2px; }
.lc-prose a:hover { color: #ff6b54; }
.lc-prose strong { color: #fff; font-weight: 600; }
.lc-prose em { font-style: italic; }
.lc-prose ul, .lc-prose ol { margin: 1.5rem 0; padding-left: 1.5rem; }
.lc-prose li { margin-top: 0.5rem; }
.lc-prose ul li { list-style: disc; }
.lc-prose ol li { list-style: decimal; }
.lc-prose li::marker { color: rgba(232, 82, 58, 0.8); }
.lc-prose blockquote { border-left: 3px solid #e8523a; padding: 0.25rem 0 0.25rem 1.25rem; margin: 2rem 0; color: rgba(255, 255, 255, 0.85); font-style: italic; }
.lc-prose blockquote p { margin: 0; }
.lc-prose img { border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.08); margin: 2rem 0; max-width: 100%; height: auto; }
.lc-prose code { background: #161616; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; padding: 0.15em 0.4em; font-size: 0.9em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #f0c9c0; }
.lc-prose pre { background: #0e0e0e; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; padding: 1.25rem; overflow-x: auto; margin: 2rem 0; }
.lc-prose pre code { background: none; border: none; padding: 0; color: rgba(255, 255, 255, 0.8); }
.lc-prose hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.1); margin: 3rem 0; }
.lc-prose h2:first-child, .lc-prose h3:first-child { margin-top: 0; }
.lc-prose table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 1rem; }
.lc-prose th, .lc-prose td { border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.65rem 0.85rem; text-align: left; }
.lc-prose th { background: #141414; color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------------------
 * "The Plan" vertical timeline (home how-it-works). Numbered nodes on an
 * animated rail; items fade/slide in on scroll and the rail "draws" itself as
 * the section scrolls past. Behaviour wired in main.ts (initTimelines).
 * ------------------------------------------------------------------------- */
.lc-timeline {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* The static rail + animated progress fill, centred on the node column. */
.lc-timeline__rail {
  position: absolute;
  left: 1.5rem;
  top: 0;
  height: 0;
  width: 2px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 9999px;
  pointer-events: none;
}
.lc-timeline__progress {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0%;
  border-radius: 9999px;
  background: linear-gradient(to bottom, #e8523a, #ff7a63);
  box-shadow: 0 0 4px rgba(232, 82, 58, 0.2);
  transition: height 0.15s linear;
}

.lc-timeline__item {
  position: relative;
  display: flex;
  gap: 1.25rem;
  padding-bottom: 2.75rem;
}
.lc-timeline__item:last-child { padding-bottom: 0; }

/* Numbered node sitting on the rail. */
.lc-timeline__node {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: #141414;
  border: 2px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.lc-timeline__node.is-active {
  background: #e8523a;
  border-color: #e8523a;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(232, 82, 58, 0.1);
}

.lc-timeline__content {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.35rem;
  padding-bottom: 0.25rem;
}
.lc-timeline__title {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 1rem;
}
.lc-timeline__points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.lc-timeline__point {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.95rem;
  line-height: 1.65;
}
.lc-timeline__check {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.28rem;
  color: #e8523a;
}

/* Reveal-on-scroll. The hidden initial state is applied ONLY after main.ts marks
 * the timeline `.is-animated`, so the copy is always visible when JS is
 * unavailable (progressive enhancement). The node scales about its centre (so
 * its rail position never shifts) and the copy slides up. */
.lc-timeline.is-animated .lc-timeline__node { opacity: 0; transform: scale(0.4); }
.lc-timeline.is-animated .lc-timeline__content {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease 0.1s, transform 0.55s ease 0.1s;
}
.lc-timeline.is-animated .lc-timeline__item.is-visible .lc-timeline__node { opacity: 1; transform: scale(1); }
.lc-timeline.is-animated .lc-timeline__item.is-visible .lc-timeline__content { opacity: 1; transform: translateY(0); }

@media (min-width: 640px) {
  .lc-timeline__item { gap: 1.75rem; padding-bottom: 3.25rem; }
  .lc-timeline__title { font-size: 1.375rem; }
  .lc-timeline__point { font-size: 1rem; }
}

/* Desktop: centered, alternating timeline. The rail and nodes run down the
 * page centre (aligned with the centred heading); steps 01/03 sit to the left
 * and 02/04 to the right. Mobile keeps the readable left-rail layout above. */
@media (min-width: 768px) {
  .lc-timeline { max-width: 64rem; }
  .lc-timeline__rail { left: 50%; }
  .lc-timeline__item {
    display: grid;
    grid-template-columns: 1fr 3rem 1fr;
    column-gap: 2.5rem;
    align-items: start;
    padding-bottom: 3.5rem;
  }
  .lc-timeline__node { grid-column: 2; grid-row: 1; }
  .lc-timeline__content {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    max-width: 26rem;
  }
  .lc-timeline__item:nth-of-type(even) .lc-timeline__content {
    grid-column: 3;
    justify-self: start;
  }
}

/* No-motion preference: show everything, no transitions. JS also short-circuits. */
@media (prefers-reduced-motion: reduce) {
  .lc-timeline.is-animated .lc-timeline__node,
  .lc-timeline.is-animated .lc-timeline__content {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .lc-timeline__progress { transition: none; }
}

/* "CRM is coming soon" flag - a flashing pill pinned atop each CRM section. */
.lc-soon-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 9999px;
  background: rgba(232, 82, 58, 0.12);
  border: 1px solid rgba(232, 82, 58, 0.45);
  color: #e8523a;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  animation: lc-soon-flash 1.5s ease-in-out infinite;
}
.lc-soon-flag__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #e8523a;
  animation: lc-soon-blink 1.5s ease-in-out infinite;
}
@keyframes lc-soon-flash {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(232, 82, 58, 0); }
  50% { opacity: 0.6; box-shadow: 0 0 14px 2px rgba(232, 82, 58, 0.35); }
}
@keyframes lc-soon-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .lc-soon-flag,
  .lc-soon-flag__dot { animation: none; }
}