/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Burger → X icon animation */
.burger-line {
  position: absolute;
  width: 16px;
  height: 1px;
  background: #18181A;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.burger-line:first-child  { transform: translateY(-5px); }
.burger-line:nth-child(2) { transform: translateY(0); }
.burger-line:last-child   { transform: translateY(5px); }

.is-open > .burger-line:first-child  { transform: rotate(45deg); }
.is-open > .burger-line:nth-child(2) { opacity: 0; }
.is-open > .burger-line:last-child   { transform: rotate(-45deg); }

/* ── Blog card inline link ── */
.blog-card-link {
  transition: color 0.15s ease;
}
.blog-card-link:hover {
  color: #18181A !important;
}
.blog-card-link:active {
  color: #18181A66 !important;
}

/* ── Audit curtain reveal ── */
.curtain-container {
}
/* Mobile */
.audit-problem-section {
  padding: 8px 8px 40px !important;
  gap: 60px !important;
}
.audit-problem-section .audit-header {
  padding: 24px 12px !important;
  gap: 12px !important;
}
.audit-problem-section .audit-headline {
  font-size: 24px !important;
  line-height: 130% !important;
  width: auto !important;
}
.audit-problem-section .audit-body {
  font-size: 15px !important;
  width: auto !important;
  color: #4A4A6A !important;
}
.audit-problem-section .audit-browser-wrap {
  padding: 0 !important;
  gap: 20px !important;
}
.audit-problem-section .audit-browser-wrap .eyebrow {
  padding-left: 12px !important;
}
.audit-problem-section .audit-footer {
  flex-direction: column !important;
  padding: 24px 12px 0 !important;
}
.audit-problem-section .audit-footer-text {
  font-size: 15px !important;
  max-width: none !important;
}
.audit-browser-frame {
  padding: 32px 28px 0 !important;
}
.audit-sticky-header {
  padding: 20px 16px 12px;
}
.audit-sticky-meta {
  display: none !important;
}
@media (min-width: 768px) {
  .audit-sticky-meta {
    display: flex !important;
  }
}
.audit-content-body {
  padding: 16px 16px 24px;
}
@media (min-width: 768px) {
  .audit-sticky-header {
    padding: 24px 32px 16px;
  }
  .audit-content-body {
    padding: 24px 32px 32px;
  }
}
.audit-problem-section .audit-footer {
  align-items: flex-start !important;
}
@media (min-width: 768px) {
  .audit-problem-section .audit-footer {
    align-items: flex-end !important;
  }
}
.audit-browser-frame .curtain-front img {
  height: 280px;
  object-fit: cover;
  object-position: top;
}
/* Tablet */
@media (min-width: 768px) {
  .audit-browser-frame .curtain-front img {
    height: auto;
    object-fit: initial;
  }
  .audit-problem-section {
    padding: 32px !important;
    gap: 120px !important;
  }
  .audit-problem-section .audit-header {
    padding: 0 !important;
    gap: 16px !important;
  }
  .audit-problem-section .audit-headline {
    font-size: 30px !important;
    width: 418px !important;
  }
  .audit-problem-section .audit-body {
    font-size: 15px !important;
    width: 371px !important;
    color: #18181AB3 !important;
  }
  .audit-problem-section .audit-browser-wrap {
    gap: 24px !important;
  }
  .audit-problem-section .audit-browser-wrap .eyebrow {
    padding-left: 0 !important;
  }
  .audit-problem-section .audit-footer {
    flex-direction: row !important;
    padding: 24px 0 0 !important;
  }
  .audit-browser-frame {
    padding: 32px 32px 0 !important;
  }
}
/* Desktop */
@media (min-width: 1024px) {
  .audit-problem-section {
    padding: 40px !important;
    gap: 160px !important;
  }
  .audit-problem-section .audit-header {
    gap: 24px !important;
  }
  .audit-problem-section .audit-headline {
    font-size: 36px !important;
    line-height: 120% !important;
    width: 418px !important;
  }
  .audit-problem-section .audit-body {
    width: 548px !important;
  }
  .audit-problem-section .audit-footer-text {
    max-width: 584px !important;
  }
  .audit-browser-frame {
    padding: 60px 80px 0 !important;
  }
}
/* Wide desktop */
@media (min-width: 1280px) {
  .audit-browser-frame {
    padding: 80px 120px 0 !important;
  }
}
/* /audit page variant — narrower title, body, and footer text */
@media (min-width: 768px) {
  .audit-problem-v2 .audit-headline {
    width: 428px !important;
  }
  .audit-problem-v2 .audit-body {
    width: 428px !important;
  }
  .audit-problem-v2 .audit-footer-text {
    max-width: 328px !important;
  }
}
@media (min-width: 1024px) {
  .audit-problem-v2 .audit-headline {
    width: 428px !important;
  }
  .audit-problem-v2 .audit-body {
    width: 428px !important;
  }
  .audit-problem-v2 .audit-footer-text {
    max-width: 328px !important;
  }
}
@media (min-width: 1024px) {
  .audit-browser-frame {
    padding: 60px 80px 0 !important;
  }
}
@media (min-width: 1280px) {
  .audit-browser-frame {
    padding: 80px 120px 0 !important;
  }
}
.curtain-card {
  position: relative;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.curtain-back {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.curtain-front {
  position: relative;
  z-index: 2;
}
.curtain-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: #18181A;
  z-index: 10;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}
.curtain-handle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  will-change: top, left;
  width: 44px;
  height: 28px;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 80px;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.2s ease;
}
.curtain-handle-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.curtain-handle-arrow--flip {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}
.curtain-back [data-audit-flip-target="scroller"] {
  scrollbar-width: none;
  -ms-overflow-style: none;
  pointer-events: none;
}
.curtain-back [data-audit-flip-target="scroller"]::-webkit-scrollbar {
  display: none;
}

/* ── Eyebrow label ── */
.eyebrow {
  font-family: Menlo, ui-monospace, 'SFMono-Regular', 'SF Mono', Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
  line-height: 130%;
  color: #18181A99;
  text-transform: none;
  letter-spacing: normal;
}

/* ── Nav menu item hover ── */
.nav-menu-item {
  background: #FCFCFD;
  color: #18181A;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-menu-item:hover {
  background: #18181A;
  color: #FCFCFD;
}

/* ── Mobile menu link hover ── */
.mobile-menu-link {
  transition: background 0.15s ease;
}
.mobile-menu-link:hover {
  background: #E9E9F2;
}
.mobile-menu-link .menu-arrow {
  opacity: 0;
  transition: opacity 0.15s ease;
}
.mobile-menu-link:hover .menu-arrow {
  opacity: 1;
}

/* ── Hide scrollbar for carousels ── */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── Reveal animations ── */
.reveal-hidden {
  opacity: 0;
  transform: translateY(1.5rem);
}

.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .reveal-hidden {
    opacity: 0;
    transform: none;
  }
  .revealed {
    transition-duration: 0.01ms;
  }
}

/* ── Lab section — Paper 1TF9-0 ──
   Asymmetric padding: small top (lets the [Lab] eyebrow hug the top
   edge), generous bottom. 160px section gap between [Lab] / header /
   filter+grid block on desktop, scaled down for tablet/mobile. */
.lab-section {
  padding: 24px 16px 80px;
  gap: 60px;
}
@media (min-width: 680px) {
  .lab-section { padding: 32px 32px 120px; gap: 100px; }
}
@media (min-width: 1024px) {
  .lab-section { padding: 44px 40px 160px; gap: 160px; }
}

/* ── About page sections — Paper symmetric section padding ──
   Used by How I Work (1B7P-1), End-to-end capability (1B8P-1), etc.
   Scales 80→120→160px across mobile/tablet/desktop. The desktop value
   matches Paper's p-40 (160px on all sides). */
.about-section-pad {
  padding: 80px 16px;
}
@media (min-width: 680px) {
  .about-section-pad { padding: 120px 32px; }
}
@media (min-width: 1024px) {
  .about-section-pad { padding: 160px; }
  /* Cards in How I Work lock to 343px height so the body paragraph
     hugs the bottom (matches Paper's justify-between with fixed height). */
  .about-how-i-work-card { min-height: 343px; }
}

/* ── Audit Money Funnel (interactive Matter.js section) ── */
.audit-funnel-section {
  position: relative;
  padding: 160px 0 0;
  gap: 120px;
}
.audit-funnel-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 640px;
  padding: 0 16px;
}
.audit-funnel-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Stage spans the full section width so the dollar pile can spread
     laterally past the funnel. Height is set explicitly by JS once the
     scale is known. */
  /* Clip chips/coins that physics simulates above the visible top of the
     funnel so they don't paint over the headline/subtitle copy block. */
  overflow: hidden;
}
.audit-funnel-svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 980px;
  /* Funnel keeps its natural aspect ratio (980/577). Height auto-sizes
     so the SVG occupies just the top of the stage; below + beside it
     is the accumulation area where coins pile up. */
  height: auto;
  pointer-events: none;
}
.audit-funnel-tags,
.audit-funnel-coins {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}
.audit-funnel-confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* Confetti canvas: above the dollar pile (auto z-index in stage's
     stacking context) but below the CTA card (z-index: 2). */
  z-index: 1;
}
.audit-funnel-tag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #FFFFFF;
  border: 0;
  border-radius: 100px;
  white-space: nowrap;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  color: #000000;
  -webkit-font-smoothing: antialiased;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-synthesis: none;
  will-change: transform;
  transition: opacity 220ms ease;
  opacity: 0;
}
.audit-funnel-tag[data-chip-ready] {
  opacity: 1;
}
.audit-funnel-tag.is-removing {
  opacity: 0 !important;
  pointer-events: none;
}
.audit-funnel-tag svg {
  flex-shrink: 0;
  pointer-events: none;
}
.audit-funnel-tag__label {
  display: inline-block;
  white-space: nowrap;
  flex-shrink: 0;
  pointer-events: none;
}
.audit-funnel-coin {
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}
.audit-funnel-coin svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.audit-funnel-coin--small {
  width: 28px;
  height: 28px;
  background: #D6D6F0;
}
.audit-funnel-coin--small svg {
  width: 12px;
  height: 12px;
}
.audit-funnel-hint {
  position: absolute;
  /* High z-index so the Repeat button always sits above the dollar
     pile that piles up under the CTA card in the final state. */
  z-index: 10;
  isolation: isolate;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  margin: 0;
  /* Click variant (default): flat label — no border, padding, or
     background. The Repeat variant adds a bordered pill via .is-repeat
     below. */
  padding: 0;
  border: 0;
  background: transparent;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 130%;
  color: #18181A99;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  opacity: 0;
  transition: opacity 220ms ease, background-color 180ms ease, border-color 180ms ease;
  pointer-events: none;
}
.audit-funnel-hint.is-visible {
  opacity: 1;
}
.audit-funnel-hint svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.audit-funnel-hint__variant {
  display: none;
  gap: 8px;
}
/* Click variant — vertical icon + text, centered (Paper 1FKA-0). */
.audit-funnel-hint:not(.is-repeat) .audit-funnel-hint__variant--click {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.audit-funnel-hint__variant--click span {
  width: 170px;
  text-align: center;
  white-space: normal;
}
/* Repeat variant — horizontal bordered pill (Paper 1GSZ-1). */
.audit-funnel-hint.is-repeat {
  cursor: pointer;
  pointer-events: auto;
  padding: 8px 16px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 4px;
}
.audit-funnel-hint.is-repeat .audit-funnel-hint__variant--repeat {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}
.audit-funnel-hint.is-repeat:hover {
  background: #F2F2FA;
  border-color: rgba(0, 0, 0, 0.18);
  color: #18181A;
}

/* Final-state CTA — Paper 1HU8-0. Two-tier card: white top section
   (icon + copy + primary button) on a lavender base; the lavender
   shows through under the white section as a thin meta strip. JS
   positions via transform inside the stage; visibility toggles via
   .is-visible. */
.audit-funnel-cta {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 533px;
  background: #F2F2FA;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  overflow: hidden;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
  will-change: transform;
  pointer-events: none;
}
.audit-funnel-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms ease, visibility 0s;
  pointer-events: auto;
}
.audit-funnel-cta__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 28px;
  padding: 60px 32px;
  background: #FCFCFD;
  border-radius: 0 0 8px 8px;
}
.audit-funnel-cta__hero-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.audit-funnel-cta__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  gap: 8px;
}
.audit-funnel-cta__title {
  margin: 0;
  align-self: stretch;
  font-size: 14px;
  line-height: 130%;
  color: #18181A;
  text-align: center;
}
.audit-funnel-cta__subtitle {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 150%;
  color: rgba(24, 24, 26, 0.6);
  text-align: center;
  max-width: 370px;
}
.audit-funnel-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 4px 4px 24px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 130%;
  text-decoration: none;
  white-space: nowrap;
  background: #18181A;
  color: #FCFCFD;
  flex-shrink: 0;
}
.audit-funnel-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
}
.audit-funnel-cta__icon svg {
  width: 16px;
  height: 16px;
}
.audit-funnel-cta__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  padding: 16px 32px;
}
.audit-funnel-cta__meta {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 12px;
  line-height: 130%;
  color: rgba(24, 24, 26, 0.5);
}
.audit-funnel-coin.is-fading {
  transition: opacity 280ms ease;
  opacity: 0 !important;
}

/* ── Audit Pillars — "How deep I go" (Paper 1AMX-1) ── */
.audit-pillars-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 160px 40px;
  background: #E9E9F2;
  border-radius: 8px;
  overflow: hidden;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
.audit-pillars-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1044px;
  gap: 80px;
}
.audit-pillars-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  align-self: stretch;
}
.audit-pillars-title {
  margin: 0;
  font-size: 36px;
  line-height: 120%;
  color: #18181A;
  text-align: center;
  max-width: 736px;
}
.audit-pillars-subtitle {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 150%;
  color: #4A4A6A;
  text-align: center;
  max-width: 370px;
}
.audit-pillars-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-self: stretch;
}
.audit-pillar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 4px;
  background: #FCFCFD;
  border-radius: 8px;
  overflow: hidden;
}
.audit-pillar__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.audit-pillar__title {
  flex: 1;
  padding: 16px;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 130%;
  color: #18181A;
}
.audit-pillar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: #F2F2F9;
  border-radius: 6px;
}
.audit-pillar__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
}
.audit-pillar__desc {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 150%;
  color: #4A4A6A;
  max-width: 200px;
}
.audit-pillar__count {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  color: rgba(24, 24, 26, 0.6);
  flex-shrink: 0;
}
.audit-pillars-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 24px;
  align-self: stretch;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.audit-pillars-footer-text {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  color: rgba(24, 24, 26, 0.6);
  text-align: center;
  width: 306px;
  flex-shrink: 0;
}

@media (max-width: 1023px) {
  .audit-pillars-section {
    padding: 120px 24px;
  }
  .audit-pillars-inner {
    gap: 60px;
  }
  .audit-pillars-title {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .audit-pillars-section {
    padding: 80px 16px;
  }
  .audit-pillars-inner {
    gap: 40px;
  }
  .audit-pillars-title {
    font-size: 26px;
  }
  .audit-pillars-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Audit Inside — "What's inside" (Paper 1KHE-0) ── */
.audit-inside-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 160px 40px;
  background: #FCFCFD;
  border-radius: 8px;
  overflow: hidden;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
.audit-inside-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1440px;
  gap: 80px;
}
.audit-inside-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 24px;
}
.audit-inside-title {
  margin: 0;
  font-size: 36px;
  line-height: 120%;
  color: #18181A;
}
.audit-inside-subtitle {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 150%;
  color: rgba(24, 24, 26, 0.7);
  max-width: 356px;
}

/* Showcase row: two preview cards */
.audit-inside-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-self: stretch;
}
.audit-inside-showcase__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  background: #FCFCFD;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  overflow: hidden;
}
.audit-inside-showcase__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: stretch;
  padding: 48px 32px 0;
  background: #E9E9F2;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  outline: 1px solid #E9E9F2;
  outline-offset: -1px;
}
.audit-inside-preview-card {
  position: relative;
  width: 100%;
  max-width: 602px;
  height: 360px;
  background: #FCFCFD;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}
.audit-inside-preview-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(233, 233, 242, 0) 71.6%, #E9E9F2 100%);
}
.audit-inside-showcase__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 24px;
}
.audit-inside-showcase__title {
  margin: 0;
  max-width: 400px;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 130%;
  color: #18181A;
  font-weight: 400;
}
.audit-inside-showcase__desc {
  margin: 0;
  max-width: 400px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 150%;
  color: rgba(74, 74, 106, 0.8);
}

/* Bonus row */
.audit-inside-bonus {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: stretch;
}
.audit-inside-bonus__label {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  color: rgba(24, 24, 26, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.audit-inside-bonus__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-self: stretch;
}
.audit-inside-bonus-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 4px;
  background: #FCFCFD;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  overflow: hidden;
}
.audit-inside-bonus-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #F2F2F9;
  border-radius: 4px;
}
.audit-inside-bonus-card__body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 20px;
}
.audit-inside-bonus-card__col {
  flex: 0 0 50%;
  min-width: 0;
}
.audit-inside-bonus-card__title {
  margin: 0;
  max-width: 180px;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 130%;
  color: #18181A;
  font-weight: 400;
}
.audit-inside-bonus-card__desc {
  margin: 0;
  max-width: 400px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 150%;
  color: rgba(74, 74, 106, 0.8);
}
.audit-inside-footer-wrap {
  align-self: stretch;
}

/* Shared metric footer (3 metrics + CTA). Used in audit_inside and services_cards. */
.metric-footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 24px;
  gap: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.metric-footer__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.metric-footer__metrics {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.metric-footer__metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
}
@media (min-width: 768px) {
  .metric-footer__metrics {
    flex-direction: row;
    gap: 16px;
  }
  .metric-footer__metric {
    flex: 1;
  }
}
@media (min-width: 1024px) {
  .metric-footer {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .metric-footer__metrics {
    width: 75%;
  }
  .metric-footer__cta {
    width: 25%;
    flex-shrink: 0;
    align-items: flex-end;
  }
}

@media (max-width: 1023px) {
  .audit-inside-section { padding: 120px 24px; }
  .audit-inside-inner { gap: 60px; }
  .audit-inside-title { font-size: 30px; }
  .audit-inside-showcase__preview { height: 360px; padding: 32px 24px 0; }
  .audit-inside-preview-card { height: 320px; }
}
@media (max-width: 767px) {
  .audit-inside-section { padding: 80px 16px; }
  .audit-inside-inner { gap: 40px; }
  .audit-inside-title { font-size: 26px; }
  .audit-inside-showcase { grid-template-columns: 1fr; }
  .audit-inside-showcase__preview { height: 300px; padding: 24px 16px 0; }
  .audit-inside-preview-card { height: 270px; }
  .audit-inside-showcase__info,
  .audit-inside-bonus-card__body { flex-direction: column; }
  .audit-inside-bonus__grid { grid-template-columns: 1fr; }
}

/* ── Audit Notes — Paper 1AWQ-1 ── */
.audit-notes-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 160px 40px;
  background: #FCFCFD;
  border-radius: 8px;
  overflow: hidden;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
.audit-notes-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1440px;
  gap: 80px;
}
.audit-notes-header {
  display: flex;
  align-self: stretch;
}
.audit-notes-title {
  margin: 0;
  font-size: 36px;
  line-height: 120%;
  color: #18181A;
}

@media (max-width: 1023px) {
  .audit-notes-section { padding: 120px 24px; }
  .audit-notes-inner { gap: 60px; }
  .audit-notes-title { font-size: 30px; }
}
@media (max-width: 767px) {
  .audit-notes-section { padding: 80px 16px; }
  .audit-notes-inner { gap: 40px; }
  .audit-notes-title { font-size: 26px; }
  /* Tighten the article-card header padding inside this section on
     mobile (other usages of the article card keep their 24px default).
     !important needed to override the partial's inline style. */
  .audit-notes-grid .article-card__head {
    padding: 16px 16px 24px !important;
  }
}

/* ── Audit testimonial — Paper 1ASF-1 ── */
.audit-testimonial-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 160px 0;
  background: #FCFCFD;
  border-radius: 12px;
  overflow: hidden;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
.audit-testimonial-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 1440px;
  padding: 0 32px;
  gap: 80px;
}
.audit-testimonial-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}
.audit-testimonial-title {
  margin: 0;
  flex: 1;
  font-size: 36px;
  line-height: 120%;
  color: #18181A;
  text-align: left;
}

/* Quote card */
.audit-testimonial-card {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 60px;
  padding: 4px;
  background: #F6F6FA;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px;
}
.audit-testimonial-card__head {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  gap: 60px;
}
.audit-testimonial-card__avatar-wrap {
  flex-shrink: 0;
  width: 140px;
  display: flex;
  align-items: center;
}
.audit-testimonial-card__avatar {
  width: 102px;
  height: 102px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.audit-testimonial-card__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #C4C4D8;
  color: #FCFCFD;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 500;
}
.audit-testimonial-card__author {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  align-self: stretch;
  gap: 1px;
  padding: 28px;
}
.audit-testimonial-card__name {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 130%;
  color: #18181A;
}
.audit-testimonial-card__role {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  color: rgba(24, 24, 26, 0.5);
}
.audit-testimonial-card__linkedin {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 28px;
  display: inline-flex;
  color: #DADAE7;
  transition: color 180ms ease, opacity 180ms ease;
}
.audit-testimonial-card__linkedin:hover {
  color: #18181A;
}
.audit-testimonial-card__linkedin--fallback {
  opacity: 0.5;
}
.audit-testimonial-card__linkedin--fallback:hover {
  opacity: 0.9;
}
.audit-testimonial-card__body {
  display: flex;
  align-items: flex-end;
  gap: 60px;
  padding: 32px;
}
.audit-testimonial-card__mark {
  flex-shrink: 0;
  width: 140px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  font-family: "Inter", system-ui, sans-serif;
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  color: #18181A;
}
.audit-testimonial-card__quote {
  margin: 0;
  flex: 1;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 145%;
  color: #18181A;
}

/* Footer */
.audit-testimonial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.audit-testimonial-footer__left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.audit-testimonial-footer__title {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  color: #18181A;
}
.audit-testimonial-footer__sub {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  color: rgba(24, 24, 26, 0.5);
}
.audit-testimonial-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 4px 4px 24px;
  border-radius: 4px;
  background: #18181A;
  color: #FCFCFD;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 180ms ease;
}
.audit-testimonial-cta:hover {
  background: #2A2A2E;
}
.audit-testimonial-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.audit-testimonial-cta__icon svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1399px) {
  .audit-testimonial-section { padding: 120px 0; }
  .audit-testimonial-inner { gap: 60px; padding: 0 32px; }
  .audit-testimonial-card { gap: 40px; }
  .audit-testimonial-card__head { gap: 32px; }
  .audit-testimonial-card__body { gap: 32px; padding: 24px; }
  .audit-testimonial-card__avatar-wrap { width: 102px; }
  .audit-testimonial-card__mark { width: 102px; font-size: 36px; }
}
@media (max-width: 767px) {
  .audit-testimonial-section { padding: 80px 0; }
  .audit-testimonial-inner { gap: 40px; padding: 0 16px; }
  .audit-testimonial-header { justify-content: flex-start; }
  .audit-testimonial-title { font-size: 26px; text-align: left; }
  .audit-testimonial-card { gap: 24px; padding: 16px; }
  .audit-testimonial-card__head {
    flex-direction: column;
    gap: 16px;
  }
  .audit-testimonial-card__avatar-wrap { width: auto; }
  .audit-testimonial-card__avatar,
  .audit-testimonial-card__avatar--initials {
    width: 80px;
    height: 80px;
    font-size: 18px;
  }
  .audit-testimonial-card__author { padding: 0; }
  .audit-testimonial-card__linkedin { padding: 0; align-self: flex-start; }
  .audit-testimonial-card__body {
    padding: 0;
    gap: 12px;
    align-items: flex-start;
    flex-direction: column;
  }
  .audit-testimonial-card__mark {
    width: auto;
    justify-content: flex-start;
    font-size: 32px;
  }
  .audit-testimonial-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  .audit-testimonial-footer__left { flex-direction: column; gap: 2px; }
}

/* ── FAQ — Paper 1AYG-1 ── */
.faq-section {
  padding: 160px;
}
.faq-inner {
  max-width: 1440px;
  gap: 40px;
}
.faq-left {
  width: 40%;
}
@media (max-width: 1399px) {
  .faq-section { padding: 120px 40px; }
  .faq-inner { gap: 32px; }
}
@media (max-width: 1023px) {
  .faq-section { padding: 96px 32px; }
  .faq-inner { gap: 48px; }
}
@media (max-width: 679px) {
  .faq-section { padding: 64px 16px; }
  .faq-inner { gap: 40px; }
  /* Mobile FAQ item paddings (Paper 1SAG-1). !important to override
     the partial's inline `padding: 24px`. */
  .faq-item { padding: 20px 16px !important; }
}

/* ── Who I work with — Paper 1AUA-1 ── */
.who-section {
  padding: 160px;
  /* matches Paper 1AUA-1 padding 160 all sides on desktop */
}
.who-inner {
  max-width: 1440px;
  gap: 80px;
  /* gap inside inner wrapper = 80px between header and grid */
}
@media (max-width: 1399px) {
  .who-section { padding: 120px 40px; }
  .who-inner { gap: 60px; }
}
@media (max-width: 1023px) {
  .who-section { padding: 96px 32px; }
}
@media (max-width: 679px) {
  .who-section { padding: 64px 16px; }
  .who-inner { gap: 48px; }
}

/* ── Audit Review CTA — "Book a free site review" (Paper 1AQR-1) ── */
.audit-review-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 160px;
  background: #E9E9F2;
  border-radius: 8px;
  overflow: hidden;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
.audit-review-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1024px;
  gap: 80px;
}
.audit-review-header {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.audit-review-headline {
  margin: 0;
  flex: 1;
  font-size: 36px;
  line-height: 120%;
  color: #18181A;
  text-align: center;
  max-width: 612px;
}

/* Two-column card */
.audit-review-card {
  display: flex;
  align-items: stretch;
  justify-content: center;
  align-self: stretch;
  background: #F2F2FA;
  border-radius: 8px;
  overflow: hidden;
}
.audit-review-card__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 24px;
  padding: 32px;
  background: #FCFCFD;
}
.audit-review-card__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.audit-review-card__title {
  margin: 0;
  font-size: 24px;
  line-height: 130%;
  color: #18181A;
}
.audit-review-card__sub {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  color: rgba(24, 24, 26, 0.5);
}
.audit-review-card__steps {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.audit-review-card__step {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.audit-review-card__num {
  flex-shrink: 0;
  width: 20px;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 130%;
  color: #A0A0B8;
}
.audit-review-card__step-text {
  flex: 1;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 150%;
  color: #18181A;
}
.audit-review-card__cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.audit-review-card__meta {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  color: rgba(24, 24, 26, 0.5);
}

/* Author (right) column */
.audit-review-card__author {
  flex-shrink: 0;
  width: 344px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 4px;
  background: #F6F6FA;
  position: relative;
}
.audit-review-card__avatar {
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}
.audit-review-card__author-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 24px;
  padding: 28px;
}
.audit-review-card__author-copy {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 12px;
}
.audit-review-card__author-title {
  margin: 0;
  align-self: stretch;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 130%;
  color: #18181A;
  font-weight: 400;
}
.audit-review-card__author-text {
  margin: 0;
  align-self: stretch;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  color: rgba(24, 24, 26, 0.6);
}

/* Footer — Telegram fallback row */
.audit-review-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.audit-review-footer__text {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  color: rgba(24, 24, 26, 0.6);
  white-space: pre-wrap;
}

/* Primary CTA pill — shared between Book a review & Send a message */
.audit-review-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 4px 4px 24px;
  border-radius: 4px;
  background: #18181A;
  color: #FCFCFD;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 130%;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color 180ms ease;
}
.audit-review-cta:hover {
  background: #2A2A2E;
}
.audit-review-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}
.audit-review-cta__icon svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1023px) {
  .audit-review-section {
    padding: 120px 24px;
  }
  .audit-review-inner {
    gap: 60px;
  }
  .audit-review-headline {
    font-size: 30px;
  }
  .audit-review-card {
    flex-direction: column;
  }
  /* Tablet author card (Paper 1RO0-1): column layout. Top row holds the
     ❓ icon on the left (pulled out of the body's flow with
     position: absolute) and a 102×102 photo on the right. The text
     block sits below them, with the description capped at 390 css px. */
  .audit-review-card__author {
    width: auto;
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 0;
    padding: 4px;
  }
  .audit-review-card__avatar {
    width: 102px;
    height: 102px;
    align-self: flex-end;
  }
  .audit-review-card__author-body {
    flex: none;
    padding: 24px 28px;
    gap: 12px;
  }
  .audit-review-card__author-body > svg {
    position: absolute;
    top: 24px;
    left: 32px;
    width: 20px;
    height: 20px;
  }
  .audit-review-card__author-text {
    max-width: 390px;
  }
}
@media (max-width: 767px) {
  .audit-review-section {
    padding: 80px 16px;
  }
  .audit-review-inner {
    gap: 40px;
  }
  .audit-review-headline {
    font-size: 24px;
  }
  .audit-review-card__main {
    padding: 16px;
  }
  .audit-review-card__title {
    font-size: 20px;
  }
  .audit-review-card__cta-row {
    flex-direction: column;
    align-items: flex-start;
  }
  /* Mobile author card (Paper 1T0L-0): column layout. Top row holds the
     ❓ icon on the left (pulled out of the body's flow with
     position: absolute) and a 72×72 photo on the right. The text block
     sits below them with a 12px left indent. */
  .audit-review-card__author {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 4px;
  }
  .audit-review-card__avatar {
    width: 72px;
    height: 72px;
    align-self: flex-end;
  }
  .audit-review-card__author-body {
    flex: none;
    padding: 0 0 28px 12px;
    gap: 12px;
  }
  .audit-review-card__author-body > svg {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 20px;
    height: 20px;
  }
  .audit-review-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 768px) {
  .audit-funnel-section {
    padding: 160px 0 0;
    gap: 120px;
  }
  .audit-funnel-copy h2 {
    font-size: 36px;
  }
}
@media (max-width: 1023px) {
  /* Tablet/mobile: only top padding. The stage already extends below the
     hint by ACCUM_H_INITIAL, which gives roughly the same CSS breathing
     room as the top padding — and in the final state lets the dollar
     pile reach the section edge without extra rules. Mobile overrides
     with its own padding. */
  .audit-funnel-section {
    padding: 120px 0 0;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet-only tweaks: roomier chip padding + smaller visible coins so
     they don't appear to overlap. Physics radii stay at the COIN_*
     constants in the controller (22 for users, 14 for dollars), so
     shrinking the visible circle leaves a gap between neighbours.
     Each variant gets its own rule — otherwise `.audit-funnel-coin`
     (same specificity as `.audit-funnel-coin--small`) would override
     the small variant by source order. */
  .audit-funnel-section {
    gap: 60px;
  }
  /* Keep the visible funnel narrower than the stage so the chip labels
     fit and the dollar accumulation has lateral space on either side.
     The JS controller caps funnelCssW to the same 760 — must stay in
     sync with this value. */
  .audit-funnel-svg {
    max-width: 760px;
  }
  .audit-funnel-tag {
    padding: 10px 18px;
  }
  .audit-funnel-coin:not(.audit-funnel-coin--small) {
    width: 36px;
    height: 36px;
  }
  .audit-funnel-coin:not(.audit-funnel-coin--small) svg {
    width: 14px;
    height: 14px;
  }
  .audit-funnel-coin--small {
    width: 22px;
    height: 22px;
  }
  .audit-funnel-coin--small svg {
    width: 10px;
    height: 10px;
  }
}
@media (max-width: 767px) {
  /* Mobile: section padding-x = 0 so the dollar accumulation reaches
     the section's edges, but the funnel SVG itself keeps a 24 px gap
     on each side. The stage spans the full section width; the funnel
     SVG is inset via calc(), and the controller mirrors the same 48 px
     subtraction when computing scale so chips + funnel walls match
     the SVG visually. Element sizes stay constant; physics inflation
     adapts to scale. */
  .audit-funnel-section {
    padding: 80px 0 0;
    gap: 40px;
  }
  .audit-funnel-svg {
    width: calc(100% - 32px);
    max-width: none;
    /* Match the controller's mobile topOffset so the visible funnel
       lines up with where the JS positions chips / coins. */
    top: var(--funnel-top-offset, 200px);
    height: auto;
  }
  /* Mobile CTA card padding per Paper 1T3I-0 (32 top/bottom, 20 sides,
     20 gap). Desktop is roomier (60 / 32 / 28). */
  .audit-funnel-cta__top {
    padding: 32px 20px;
    gap: 20px;
  }
  /* CTA card inset by 16px on each side from the section edges (card
     is absolute-positioned + transform-centred, so a width override
     is enough). */
  .audit-funnel-cta {
    width: calc(100% - 32px);
  }
  .audit-funnel-copy h2 {
    font-size: 26px !important;
    line-height: 130% !important;
  }
  .audit-funnel-tag {
    font-size: 11px;
    padding: 5px 10px 5px 6px;
  }
  .audit-funnel-coin:not(.audit-funnel-coin--small) {
    width: 28px;
    height: 28px;
  }
  .audit-funnel-coin:not(.audit-funnel-coin--small) svg {
    width: 12px;
    height: 12px;
  }
  .audit-funnel-coin--small {
    width: 18px;
    height: 18px;
  }
  .audit-funnel-coin--small svg {
    width: 8px;
    height: 8px;
  }
}