/* Project-specific overrides on top of the Webflow-generated CSS.
   Keeping these separate so future re-exports from Webflow are easy to diff against. */

/* Actually load the Inter font. The Webflow export only put this @import inline
   on index.html (inside a "fonts w-embed" div) — legal.html and this page never
   had it, so both were silently falling back to the browser's default serif font
   the entire time despite every heading/body class correctly requesting "Inter."
   Moved here so it's loaded once, on every page, instead of copy-pasted per page. */
@import url('https://fonts.googleapis.com/css?family=Inter:400,500');

/* Color-scheme variable remapping. On the original export this lived as an inline
   <style> embed on index.html only — moved here so every page gets it, not just
   the one Webflow happened to put it on. Without this, any real site component
   (faq1, pricing19, layout396, etc.) reused on a new page defaults to white text
   (the color-scheme-1/dark-hero default) instead of the correct color for
   whichever color-scheme class actually wraps it. */
.color-scheme-1 {}
.color-scheme-2 {
  --color-scheme-1--text: var(--color-scheme-2--text);
  --color-scheme-1--background: var(--color-scheme-2--background);
  --color-scheme-1--foreground: var(--color-scheme-2--foreground);
  --color-scheme-1--border: var(--color-scheme-2--border);
  --color-scheme-1--accent: var(--color-scheme-2--accent);
}
.color-scheme-3 {
  --color-scheme-1--text: var(--color-scheme-3--text);
  --color-scheme-1--background: var(--color-scheme-3--background);
  --color-scheme-1--foreground: var(--color-scheme-3--foreground);
  --color-scheme-1--border: var(--color-scheme-3--border);
  --color-scheme-1--accent: var(--color-scheme-3--accent);
}
.color-scheme-4 {
  --color-scheme-1--text: var(--color-scheme-4--text);
  --color-scheme-1--background: var(--color-scheme-4--background);
  --color-scheme-1--foreground: var(--color-scheme-4--foreground);
  --color-scheme-1--border: var(--color-scheme-4--border);
  --color-scheme-1--accent: var(--color-scheme-4--accent);
}

/* "How it works" section: swap the flat gray for a faint purple tint,
   and give cards a white background so they read as distinct cards. */
.section_layout396.color-scheme-2 {
  background-color: var(--_primitives---colors--violet-lighter);
}

.section_layout396 .layout396_card {
  background-color: var(--_primitives---colors--white);
  border-color: var(--_primitives---colors--violet-light);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.section_layout396 .layout396_item-icon-wrapper {
  color: var(--_primitives---colors--violet);
}

/* "Next"/"Done" are plain status text now, not links — no underline, ever. */
.section_layout396 .button.is-link,
.section_layout396 .button.is-link:hover {
  text-decoration: none;
}

/* Step sequence hint: hovering a card lights up the *next* card,
   signaling progression without making "Next" a fake link. */
.layout396_row:has(.layout396_card:nth-child(1):hover) .layout396_card:nth-child(2),
.layout396_row:has(.layout396_card:nth-child(2):hover) .layout396_card:nth-child(3) {
  border-color: var(--_primitives---colors--violet);
  box-shadow: 0 0 0 2px var(--_primitives---colors--violet-light), 0 0 28px 4px rgba(42, 9, 68, 0.2);
}

/* Small eyebrow labels ("Packages", "Reach out") were too small to read as intentional. */
.text-style-tagline {
  font-size: 1.125rem;
}

/* Pricing section: same faint-purple treatment for consistency with "How it works". */
.section_pricing19.color-scheme-2 {
  background-color: var(--_primitives---colors--violet-lighter);
}

.section_pricing19 .pricing19_plan {
  background-color: var(--_primitives---colors--white);
  border-color: var(--_primitives---colors--violet-light);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.section_pricing19 .pricing19_icon-wrapper {
  color: var(--_primitives---colors--violet);
}

/* Cash Tracker (2nd plan) gets a subtle emphasis border — no badge, no banner,
   just a slightly stronger presence since it's the higher-commitment tier. */
.section_pricing19 .pricing19_plan:nth-child(2) {
  border-width: 2px;
  border-color: var(--_primitives---colors--violet);
}

/* Hover feedback: a slight lift + glow, so the cards feel responsive
   without turning them into fake links. */
.section_pricing19 .pricing19_plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -8px rgba(42, 9, 68, 0.35);
  border-color: var(--_primitives---colors--violet);
}

/* FAQ section: same faint-purple family, applied subtly — a tinted divider
   and icon color rather than full card treatment, since this is a plain list. */
.section_faq7.color-scheme-2,
.section_faq7 .section_faq1 {
  background-color: var(--_primitives---colors--violet-lighter);
}

.section_faq7 .faq1_question {
  border-top-color: var(--_primitives---colors--violet-light);
  transition: background-color 0.2s ease;
}

.section_faq7 .faq1_question:hover {
  background-color: var(--_primitives---colors--violet-lightest);
}

.section_faq7 .faq1_list {
  border-bottom-color: var(--_primitives---colors--violet-light);
}

.section_faq7 .faq1_icon-wrapper {
  color: var(--_primitives---colors--violet);
}

/* Nav links: gold hover to match the existing brand accent (logo, "Book a call" button).
   Also fixes a pre-existing bug — "Home" (the current-page link) was rendering in
   near-black text against the dark navbar, making it nearly invisible. */
.navbar1_link {
  transition: color 0.2s ease;
}

.navbar1_link:hover {
  color: var(--_primitives---colors--gold);
}

.navbar1_link.w--current {
  color: var(--_primitives---colors--gold);
}

/* Navbar was feeling a bit cramped vertically — give it more breathing room.
   (The logo's own height="120" attribute already exceeds the default min-height,
   so padding is what actually creates visible extra space, not min-height.) */
.navbar1_component {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Footer: reuse the navbar's dark-slate so header and footer bookend the page,
   giving a real color boundary between the contact section and the footer
   instead of them blending into one continuous violet block. */
.footer11_component {
  background-color: var(--_primitives---colors--dark-slate);
}

/* Contact form: the two-column grid gives the form column ~600px on desktop,
   which reads as sprawling. Cap the form itself to a tighter, more readable width. */
.contact6_form-block {
  max-width: 30rem;
}

/* Legal page: was a single unbroken wall of text. Gives it the same visual
   language as the rest of the site (violet section, clear hierarchy) while
   keeping a narrower reading column, since long-form text is easier to read
   at ~700px than stretched across the full container. */
.legal-updated {
  color: var(--_primitives---colors--white-60, rgba(255, 255, 255, 0.7));
  margin-top: 0.5rem;
}

.section_legal.color-scheme-2 {
  background-color: var(--_primitives---colors--violet-lighter);
}

/* Tighten the top/bottom padding on the legal hero and body sections specifically —
   scoped to these classes so the shared "padding-section-large" utility used
   elsewhere on the site (hero, pricing, FAQ, etc.) is untouched. */
.legal-hero-section .padding-section-large,
.section_legal .padding-section-large {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.legal-container {
  max-width: 36rem;
  margin: 0 auto;
}

.legal-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--_primitives---colors--violet);
  margin-top: 2rem;
  margin-bottom: 1.125rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--_primitives---colors--violet-light);
}

.legal-section-title:first-child {
  margin-top: 0;
}

.legal-item {
  margin-bottom: 1.25rem;
}

.legal-item-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.legal-item p,
.legal-item li {
  line-height: 1.6;
}

.legal-item ul {
  margin: 0.25rem 0 0.75rem 1.25rem;
  padding: 0;
}

.legal-item li {
  margin-bottom: 0.4rem;
}

.legal-link {
  color: var(--_primitives---colors--violet);
  text-decoration: underline;
}

.legal-contact {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--_primitives---colors--violet-light);
  font-size: 0.95rem;
}

/* Bookkeeping clean-up/catch-up page — reuses real site components (header96,
   layout396, pricing19, faq1, cta51) wherever an equivalent exists, so it feels
   consistent with the homepage rather than a one-off design. Only genuinely new
   patterns (trade pills, numbered steps) get custom classes here. */

/* Smaller CTA button + separated microcopy, same treatment as the legal/preview work. */
.cleanup-cta-button {
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
}

.cleanup-microcopy {
  margin-top: 1.5rem;
  opacity: 0.7;
}

/* Body copy in the light sections needs an explicit dark color — same fix as the
   preview draft's bug: without this it inherits the site's white default (correct
   for the dark hero/CTA sections, invisible everywhere else). */
.cleanup-body,
.cleanup-note {
  color: var(--_primitives---colors--neutral-darkest);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.cleanup-note {
  font-size: 0.95rem;
  color: var(--_primitives---colors--dark-slate);
  margin-top: 1rem;
}

.cleanup-subhead {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--_primitives---colors--neutral-darkest);
  margin-bottom: 0.5rem;
}

/* Trade pills — deliberately violet, not gold (gold stays reserved for primary CTAs). */
.cleanup-trades-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.25rem 0;
}

.cleanup-trade-pill {
  background: var(--_primitives---colors--white);
  border: 1px solid var(--_primitives---colors--violet-light);
  color: var(--_primitives---colors--violet);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* Numbered process steps. */
.cleanup-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  color: var(--_primitives---colors--neutral-darkest);
}

.cleanup-steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 1.25rem;
  line-height: 1.55;
}

.cleanup-steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9rem;
  height: 1.9rem;
  background: var(--_primitives---colors--violet);
  color: var(--_primitives---colors--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

/* "What's included" feature list: reuses .pricing19_feature-list from the homepage
   pricing cards, but that context is normally narrow (inside a card) — widen the
   text a bit and make sure it's readable against this section's white background. */
.cleanup-feature-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1rem 0;
}

.cleanup-feature-list .pricing19-feature-icon-wrapper,
.cleanup-feature-list .pricing19_feature-icon-wrapper {
  color: var(--_primitives---colors--violet);
}

.cleanup-feature-list .pricing19_feature {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  color: var(--_primitives---colors--neutral-darkest);
}

/* Catch-up vs. clean-up comparison: only 2 cards, not 3 — override the homepage's
   3-column grid, and give these cards the same hover feedback as pricing cards
   (a bit of interaction, matching the homepage) instead of the sequence-hint glow,
   which doesn't apply to a side-by-side comparison. */
.cleanup-compare-row {
  grid-template-columns: 1fr 1fr;
}

/* Webflow's own .layout396_row stacks to 1 column at 991px and below (tablet
   and phone). This override had no matching breakpoint, so it stayed 2-up
   at every screen size, including phones. */
@media screen and (max-width: 991px) {
  .cleanup-compare-row {
    grid-template-columns: 1fr;
  }
}

.cleanup-compare-row .layout396_card {
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.cleanup-compare-row .layout396_card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -8px rgba(42, 9, 68, 0.35);
  border-color: var(--_primitives---colors--violet);
}

/* Single pricing card: the homepage's 2-up flex grid centers a lone child
   automatically, just cap its width so it doesn't stretch too wide. */
.cleanup-pricing-grid .pricing19_plan {
  max-width: 26rem;
}

/* Smooth open/close for the FAQ accordion's hand-built JS toggle (see this
   page's inline script) since it has no Webflow-compiled interaction data. */
.faq1_answer {
  transition: height 0.3s ease;
  overflow: hidden;
}

/* Job-costing caveat on the clean-up page: called out as a card matching
   the "How it works" / catch-up-vs-clean-up card treatment (white bg,
   violet border, subtle hover lift) instead of a plain paragraph. */
.cleanup-callout {
  background-color: var(--_primitives---colors--white);
  border: 1px solid var(--_primitives---colors--violet-light);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.cleanup-callout:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -8px rgba(42, 9, 68, 0.35);
  border-color: var(--_primitives---colors--violet);
}

.cleanup-callout strong {
  color: var(--_primitives---colors--violet);
}

/* Homepage pricing-section callout linking to the clean-up/catch-up page,
   styled like a pricing19_plan card so it reads as part of the same section. */
.cleanup-promo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding: 1.75rem 2rem;
  border-radius: 1rem;
  border: 1px solid var(--_primitives---colors--violet-light);
  background-color: var(--_primitives---colors--white);
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.cleanup-promo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px -8px rgba(42, 9, 68, 0.35);
  border-color: var(--_primitives---colors--violet);
}

.cleanup-promo-text {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* .button-3 inherits Webflow's default .w-button color: white, which is
   invisible against this card's white/light background (it only works on
   the dark hero section it was designed for). Border swapped from the
   default gold to violet to match this card's border instead. */
.cleanup-promo-card .button-3 {
  color: var(--_primitives---colors--violet);
  border-color: var(--_primitives---colors--violet-light);
}

.cleanup-promo-card .button-3:hover {
  border-color: var(--_primitives---colors--violet);
}