/* Hand-maintained overrides for the Webflow export. Loaded LAST in MarketingShell,
   so it wins over the auto-generated files (webflow.css / citrus-*.webflow.css /
   global-styles.css) and is never clobbered by scripts/convert-webflow-page.ts. */

/* The live Webflow site carries this rule as a custom head embed ("Keep this css
   code to improve the font quality"), which the code export does not include, so
   the migrated site rendered text with default (subpixel) smoothing and looked
   heavier/blurrier than the original. Reproduced verbatim. */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
  -webkit-appearance: none;
}

/* The exported `.link-block { box-sizing: content-box; width: 100% }` combines with
   the feature cards' 24px padding + 1px border to render each card 50px wider than
   its grid cell, pushing a ~5px horizontal scroll on phones (and a latent overflow
   at desktop max-width). Border-box folds the padding/border back inside the width. */
.link-block.feature_card,
.link-block.feature_card-copy {
  box-sizing: border-box;
}

/* The export shrinks the "/ Billed Annually" caption to .6rem (9.6px) under 480px,
   below a legible floor and inconsistent with the ~14px it uses on other cards.
   Raise it to 12px on phones; the 1rem desktop size is untouched. Same block bumps
   the pricing CTA label from .75rem (12px) back to 14px so the primary buttons read
   at a normal size on phones. */
@media screen and (max-width: 479px) {
  .pricing_top-row-price-month {
    font-size: 0.75rem;
  }

  .button.max-width-full.is-pricing-button {
    font-size: 0.875rem;
  }
}

/* The exported `.testimonials_item` sets `white-space: pre-wrap`. On Webflow's
   live (minified) HTML that only affects the quote text, but our fragments keep the
   export's pretty-printed indentation + newlines between the card's child elements,
   which pre-wrap then renders as literal whitespace, blowing the card height up so
   the quote and the author block sit far apart (justify-content: space-between).
   Fold the structural whitespace back to normal so each card sizes to its content. */
.testimonials_item,
.testimonials_item-2 {
  white-space: normal;
}

/* Tap-target comfort on touch widths (<= 991px covers phones + tablets). Desktop
   layout is left byte-identical. Two targets from the audit sat above the 24px WCAG
   floor but below the 44px comfort recommendation:
   - social icons render a 32px (2rem) box; grow the hit area to 44px (the icon glyph
     is flex-centered, so its visual size is unchanged, only the tappable box grows).
   - footer legal links are full-width but only 21px tall; vertical padding lifts the
     row to ~44px without shrinking the existing full-width horizontal hit area. */
@media screen and (max-width: 991px) {
  .social-link-wrapper {
    width: 2.75rem;
    height: 2.75rem;
  }

  .footer_legal-link {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }
}