/* ============================================================================
   index.css — page-specific styles for index.html (home)

   Section order (mirrors HTML):
   1. HERO        — .hero-strat big-type asymmetric, brand-tinted aurora bg
   2. ROI         — .roi-calc with sliders + live output card
   3. SERVICES    — .services-teaser intro + .services-marquee strip
   4. COMPARISON  — .comparison three-card "How we're different"
   5. TESTIMONIALS— .testimonials two-card grid (FTC anchors)
   6. FAQ HOME    — .faq-home accordion wrapper (reuses faq.css selectors)
   7. FINAL CTA   — .final-cta rounded panel

   Reuses primitives from global.css + variables.css (.kicker, .btn, .container).
   FAQ accordion item styles come from faq.css (linked from index.html head).
   ============================================================================ */


/* ============================================================================
   1. HERO — Big-type asymmetric. Single column at every breakpoint, headline
   carries the section, brand-tinted aurora drifts behind. Proof chips sit
   inline below the CTAs (no more floating-over-a-video treatment).
   ============================================================================ */

.hero-strat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-bg);
  /* Neutralize .section--hero's padding-block so .hero-strat__inner
     controls top/bottom spacing precisely. Otherwise we get section
     padding stacked on top of the inner's padding-top and the hero
     pushes everything below the fold. */
  padding-block: 0;
  /* Full-viewport hero. min-height (not height) so content can grow past
     100dvh on small phones without clipping behind the nav. dvh (dynamic
     viewport height) handles iOS Safari's collapsing URL bar correctly. */
  min-height: 80dvh;
}

/* ── Aurora overlay ──────────────────────────────────────────────────────
   Two layered repeating gradients (cream wash + brand-tinted aurora) blurred
   together and animated via background-position. Mask fades the effect into
   the top-right corner so it never competes with the headline on the left.
   Pure CSS port of the Aceternity React aurora-background component. */
.hero-strat__aurora {
  position: absolute;
  inset: -10px;
  z-index: 0;
  pointer-events: none;
  filter: blur(10px);
  opacity: 0.55;
  background-image:
    repeating-linear-gradient(100deg,
      var(--color-bg) 0%, var(--color-bg) 7%,
      transparent 10%, transparent 12%,
      var(--color-bg) 16%),
    repeating-linear-gradient(100deg,
      var(--color-ink) 10%,
      var(--color-accent) 15%,
      var(--color-ink-72) 20%,
      var(--color-accent-soft) 25%,
      var(--color-ink) 30%);
  background-size: 300% 200%, 200% 100%;
  background-position: 50% 50%, 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
          mask-image: radial-gradient(ellipse at 100% 0%, black 10%, transparent 70%);
  animation: aurora-drift 60s linear infinite;
  will-change: background-position;
}

@keyframes aurora-drift {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-strat__aurora { animation: none; }
}

/* ── Inner stack ─────────────────────────────────────────────────────── */

.hero-strat__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  max-width: 1080px;
  /* Halve the visible left gap. Original gap on wide viewports was
     `(viewport - max-width)/2 + container-pad`; halving means a centering
     margin of `(viewport - max-width)/4` plus half the container pad.
     max(0, …) protects against negative margins below max-width. */
  margin-left: max(0px, calc((100vw - 1080px) / 4));
  margin-right: auto;
  padding-inline: calc(var(--container-pad) / 2);
  /* Match the parent's 100dvh so the inner is the full hero height,
     then push content to the bottom-left via justify-content. */
  min-height: 80dvh;
  /* Top padding is just nav clearance — the content lives at the bottom. */
  padding-top: calc(var(--nav-height) + var(--space-4));
  padding-bottom: var(--space-16);
}

@media (min-width: 768px) {
  .hero-strat__inner {
    padding-inline: calc(var(--container-pad-md) / 2);
    padding-bottom: var(--space-20);
  }
}

@media (min-width: 1280px) {
  .hero-strat__inner {
    padding-inline: calc(var(--container-pad-lg) / 2);
  }
}

/* Push the entire content block to the bottom of the flex column.
   margin-top: auto on the first child lets content overflow naturally
   if it ever exceeds the container height (instead of clipping behind
   the nav, which justify-content: flex-end would do). */
.hero-strat__inner > :first-child {
  margin-top: auto;
}

/* ── Headline ────────────────────────────────────────────────────────── */
/* Cap at 4.8rem (76.8px) — measured max for "Custom business systems," to
   fit on one line is 79.3px in the ~1016px headline column; the old 5rem
   (80px) cap overflowed by 1px and wrapped to 3 lines. The forced <br/>
   gives a clean two-line headline: clause / clause. */

.hero-strat__headline {
  font-size: clamp(2.75rem, 5vw + 0.5rem, 4.8rem);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin: 0;
}

/* Optical balance: the second clause renders ~3% narrower than the first,
   so bump it 4% so the bottom line extends very slightly past the top. */
.hero-strat__headline .hero-strat__line2 {
  font-size: 1.04em;
}

/* Drop the controlled line break on narrow viewports so the headline can
   flow naturally instead of stranding "built for your business" alone. */
@media (max-width: 600px) {
  .hero-strat__headline br { display: none; }
  .hero-strat__headline .hero-strat__line2 { font-size: 1em; }
}

/* Accent treatment for "AI workflows" — always painted in the brand
   accent navy. No color transition; the only motion is the word-by-word
   stagger reveal on first paint. The headline carries .is-revealed once
   the stagger finishes, but nothing in CSS hooks that anymore. */
.hero-strat__headline .accent-words {
  color: var(--color-accent);
}

/* ── Lead ────────────────────────────────────────────────────────────── */
/* 10% bump on top of global .lead (which is 1.125rem) — hero lede gets
   more weight in the bottom-left stack. */

.hero-strat__lead {
  max-width: 58ch;
  margin: 0;
  font-size: 1.25rem;
}

/* ── CTA row ─────────────────────────────────────────────────────────── */
/* Primary button: scoped 10% bump on .btn-lg by overriding height,
   horizontal padding, and font-size. Doesn't touch the global .btn-lg
   used elsewhere on the site. */

.hero-strat__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  margin-top: var(--space-2);
}

.hero-strat__cta .btn-lg {
  height: 44px;
  padding: 0 36px;
  font-size: 1rem;
}

.hero-strat__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: 1.1rem;
  color: var(--color-ink-72);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}

.hero-strat__cta-secondary:hover,
.hero-strat__cta-secondary:focus-visible {
  color: var(--color-ink);
}

.hero-strat__cta-arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-standard);
}

.hero-strat__cta-secondary:hover .hero-strat__cta-arrow,
.hero-strat__cta-secondary:focus-visible .hero-strat__cta-arrow {
  transform: translateX(4px);
}


/* ============================================================================
   2. SERVICES — intro block + scrolling marquee
   ============================================================================ */

.services-teaser {
  padding-top: var(--space-32);
}

@media (max-width: 767px) {
  .services-teaser {
    padding-top: var(--space-16);
  }
}

.services-teaser__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.services-teaser h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  margin: 0;
}

.services-teaser__body {
  margin: 0;
  max-width: 56ch;
}

/* ── Marquee strip ──────────────────────────────────────────────────────── */

.services-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: var(--space-6) 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-strong);
  border-bottom: 1px solid var(--color-border-strong);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
}

.services-marquee__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-6);
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: services-marquee-scroll 60s linear infinite;
  will-change: transform;
}

.services-marquee:hover .services-marquee__track,
.services-marquee:focus-within .services-marquee__track {
  animation-play-state: paused;
}

@keyframes services-marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.services-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 1.5rem 2.25rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 1.25rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.services-chip:hover,
.services-chip:focus-visible {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
  outline: none;
}

.services-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-accent);
  transition: color var(--duration-base) var(--ease-standard);
}

.services-chip__icon svg {
  width: 26px;
  height: 26px;
}

.services-chip:hover .services-chip__icon,
.services-chip:focus-visible .services-chip__icon {
  color: var(--color-bg);
}

@media (prefers-reduced-motion: reduce) {
  .services-marquee__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .services-marquee {
    padding: var(--space-4) 0;
  }
  .services-marquee__track {
    gap: var(--space-4);
  }
  .services-chip {
    padding: 1rem 1.5rem;
    font-size: 1rem;
  }
  .services-chip__icon svg {
    width: 20px;
    height: 20px;
  }
}


/* ============================================================================
   3. ROI CALCULATOR — three sliders + live monthly output card.
   Behavior wired in main.js via [data-roi-input], [data-roi-output].
   ============================================================================ */

/* ~30vh breathing room between the 100dvh hero and the first content
   section. clamp keeps it sensible on small phones (min 96px) and 4K
   displays (max 360px). dvh handles iOS Safari's URL bar correctly. */
.roi-calc {
  background: var(--color-bg);
  padding-top: clamp(var(--space-24), 30dvh, 360px);
}

.roi-calc__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

.roi-calc__header h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  margin: 0;
}

.roi-calc__header .lead {
  margin: 0;
}

.roi-calc__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: stretch;
}

@media (min-width: 900px) {
  .roi-calc__grid {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-12);
  }
}

.roi-calc__inputs {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* vertical-center sliders within the grid-stretched card */
  gap: var(--space-6);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
}

.roi-input {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.roi-input__label {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink-72);
  letter-spacing: 0.01em;
}

.roi-input__row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.roi-input__row input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 24px;
  cursor: pointer;
}

.roi-input__row input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
}

.roi-input__row input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
}

.roi-input__row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  border: 3px solid var(--color-bg);
  box-shadow: var(--shadow-cta);
  cursor: grab;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.roi-input__row input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.08);
}

.roi-input__row input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  border: 3px solid var(--color-bg);
  box-shadow: var(--shadow-cta);
  cursor: grab;
}

.roi-input__row input[type="range"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-pill);
}

.roi-input__value {
  flex-shrink: 0;
  min-width: 4.5rem;
  text-align: right;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

/* ── Output card — poster-style: center-aligned, generous padding, large
   numbers, hairline divider between metrics, centered CTA below. */

.roi-calc__output {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: 0;  /* spacing handled via explicit margins on .roi-divider + .roi-calc__cta */
  background: var(--color-card);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-8);
  box-shadow: var(--shadow-md);
}

@media (min-width: 900px) {
  .roi-calc__output {
    padding: var(--space-16) var(--space-10);
  }
}

.roi-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

/* Divider lives as its own flex sibling so the parent's gap provides equal
   spacing above and below the line. Replaces the previous border-bottom on
   the first .roi-result, which left the line visually closer to the top
   metric than the bottom one. */
.roi-divider {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--color-border-strong);
  /* Identical padding above and below so the line sits mathematically
     equidistant between the two metric blocks. */
  margin: var(--space-6) 0;
}

.roi-result__num {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: clamp(2.5rem, 5vw + 0.5rem, 3.75rem);
  letter-spacing: var(--ls-display);
  color: var(--color-ink);
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}

.roi-result--accent .roi-result__num {
  color: var(--color-accent);
}

.roi-result__label {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--color-ink-56);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.roi-calc__cta {
  align-self: center;
  margin-top: var(--space-10);
}


/* ============================================================================
   4. COMPARISON — three-card "How we're different"
   ============================================================================ */

.comparison__header {
  text-align: center;
  margin-bottom: var(--space-16);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.comparison__header .kicker {
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  .comparison__header {
    margin-bottom: var(--space-10);
  }
}

.comparison h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  margin: 0;
}

.comparison__lede {
  font-family: var(--font-body);
  font-size: var(--fs-body-lead);
  color: var(--color-ink-72);
  line-height: var(--lh-body);
  margin: 0;
  max-width: 36em;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  align-items: stretch;
  padding-block: var(--space-3);
}

@media (max-width: 1023px) {
  .comparison-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: 36rem;
    margin-inline: auto;
  }
}

.comparison-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform 280ms ease-out, box-shadow 280ms ease-out;
}

.comparison-card--highlight {
  background: var(--color-card);
  border: 2px solid var(--color-accent);
  box-shadow: 0 0 0 6px rgba(30, 58, 95, 0.06),
              0 24px 48px -12px rgba(30, 58, 95, 0.18),
              0 8px 16px -4px rgba(30, 58, 95, 0.10);
}

@media (min-width: 1024px) {
  .comparison-card--highlight {
    transform: scale(1.025);
    z-index: 1;
  }
  .comparison-card--highlight .comparison-card__badge {
    top: -16px;
  }
}

.comparison-card__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 9999px;
  white-space: nowrap;
}

.comparison-card__header {
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.comparison-card__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.625rem;
  letter-spacing: var(--ls-h1);
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.comparison-card__tagline {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-ink-56);
  line-height: var(--lh-body);
  margin: 0;
}

.comparison-card--highlight .comparison-card__name {
  color: var(--color-accent);
}

.comparison-card__name--wordmark {
  display: flex;
  align-items: center;
  line-height: 1;
  margin: 0 0 var(--space-2);
}

.comparison-card__name--wordmark img {
  display: block;
  height: 28px;
  width: auto;
}

@media (max-width: 767px) {
  .comparison-card__name--wordmark img {
    height: 24px;
  }
}

.comparison-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.comparison-card__list li {
  position: relative;
  padding-left: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
}

.comparison-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ink-40);
}

.comparison-card--highlight .comparison-card__list li {
  color: var(--color-ink);
}
.comparison-card--highlight .comparison-card__list li::before {
  background: var(--color-accent);
}


/* ============================================================================
   5. TESTIMONIALS — anchored by FTC (Taylor + LinkedIn announcement).
   Two cards in a grid. Feature card (Taylor) is taller and stands out.
   ============================================================================ */

.testimonials__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-12);
  /* Widened so the H2 "Trusted by teams that count on automation." breaks
     onto exactly 2 lines at desktop instead of 3. */
  max-width: 880px;
}

.testimonials__header h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  margin: 0;
}

.testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: stretch;
}

@media (min-width: 900px) {
  .testimonials__grid {
    grid-template-columns: 1.25fr 1fr;
    gap: var(--space-8);
  }
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: 0;
}

.testimonial-card--feature {
  background: var(--color-card);
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.testimonial-card__rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--color-accent);
}

.testimonial-card__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  line-height: 1.55;
  color: var(--color-ink);
}

.testimonial-card--feature .testimonial-card__quote {
  font-size: 1.25rem;
}

.testimonial-card__quote p {
  margin: 0;
}

.testimonial-card__quote p + p {
  margin-top: var(--space-4);
}

.testimonial-card__attr {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.testimonial-card__logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: contain;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 4px;
}

.testimonial-card__person {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-card__name {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
  color: var(--color-ink);
}

.testimonial-card__role {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--color-ink-56);
}

/* Right column when the testimonial pair is replaced by a single CTA button.
   The button sits vertically + horizontally centered in the column so it
   visually anchors the right side without competing with Taylor's quote on
   the left. */
.testimonials__cta-col {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Two-line CTA button — overrides the .btn defaults (36-40px fixed height,
   white-space: nowrap, single-line padding) to host stacked text + arrow. */
.testimonials__cta-btn {
  height: auto;
  min-height: 88px;
  padding: var(--space-5) var(--space-8);
  white-space: normal;
  text-align: left;
  font-size: 1.0625rem;
  line-height: 1.3;
  gap: var(--space-4);
}

.testimonials__cta-text {
  display: inline-block;
}


/* ============================================================================
   6. FAQ HOME — header + accordion. The .faq-* item styles are inherited
   from faq.css (linked from index.html head). This block styles the
   surrounding header and wrapper only.
   ============================================================================ */

.faq-home__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-10);
  max-width: 60ch;
}

.faq-home__header h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-tight);
  margin: 0;
}

.faq-home__header .lead {
  margin: 0;
}


/* ============================================================================
   7. FINAL CTA — rounded panel with intro + brand-promise bullets
   ============================================================================ */

.final-cta {
  background: var(--color-bg);
}

.cta-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  align-items: flex-start;
  justify-content: space-between;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
}

.cta-panel__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  flex: 1;
}

.cta-panel__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-h1);
  color: var(--color-ink);
  margin: 0;
}

.cta-panel__description {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink-72);
  margin: 0;
  max-width: 32em;
}

.cta-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.cta-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex-shrink: 0;
}

.cta-panel__list li {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
}

.cta-panel__list svg {
  flex-shrink: 0;
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .cta-panel {
    flex-direction: row;
    gap: var(--space-12);
    padding: var(--space-16) var(--space-20);
  }
  .cta-panel__intro {
    max-width: 50%;
  }
  .cta-panel__list {
    width: 33%;
  }
}