/*
 * Site UI layer, loaded after the Webflow export (sorank.webflow.css): one scale for the
 * buttons, on top of the exported colors and corner radii (both unchanged).
 *
 * Sizes: navbar 42 px (the home hero button too, same size as the header one), standard 48 px.
 */
.black-button,
.white-button {
  min-height: 48px;
  padding: 14px 22px;
  gap: 8px;
  font-size: 16px;
  line-height: 20px;
}
.black-button .cta-text,
.white-button .cta-text {
  line-height: 20px;
}
.navbar .black-button,
.navbar .white-button,
.black-button.btn-hero,
.white-button.btn-hero {
  min-height: 42px;
  padding: 11px 18px;
}

/*
 * Hero call to action pair: the free trial, then a second button beside it (feature pages: scroll to
 * the features under the video; home: Google sign-up). Wraps under the first one on narrow screens.
 */
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.hero-ctas > a {
  margin: 0;
}
.hero-ctas .icon-google {
  width: 18px;
  height: 18px;
}
/* Target of the feature pages' "Learn more" button: clear of the sticky navbar. */
#features {
  scroll-margin-top: 80px;
}

/* Free audit form of the home page. */
#saBouton {
  min-height: 48px;
  padding-inline: 22px;
}

/* Cookie banner choices and newsletter forms (Webflow w-button). */
.button-6.w-button {
  min-height: 40px;
  padding: 9px 16px;
}

/* Hero rating of the social proof band (HeroSocialProof): Google mark, five stars, score. */
.hero-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-rating-g {
  display: block;
  width: 14px;
  height: 14px;
  padding: 1px;
  border-radius: 50%;
  background: #fff;
}
.hero-rating-score {
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
}

/*
 * Hero image whose decorative card hangs below it (seo-tool: `.heroimgcon.hideimg`, 30 px, 44 px on
 * phones): its column keeps that room, so the card stays clear of the social proof band below.
 */
.home-03-hero-content:has(> .hero-right > .heroimgcon.hideimg) {
  padding-bottom: 30px;
}
@media screen and (max-width: 479px) {
  .home-03-hero-content:has(> .hero-right > .heroimgcon.hideimg) {
    padding-bottom: 44px;
  }
}

/* Home "One solution" grid: MCP server and free tools cards under the features. */
.home-extras {
  margin-top: 10px;
}

/*
 * Long words on narrow screens: a German compound ("Mindestauszahlungsschwelle") in a 32-40 px
 * heading is wider than a phone, which scrolled the page sideways. Headings break such a word
 * instead (only when it cannot fit on its own line), German ones with real hyphenation.
 */
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}
@media screen and (max-width: 767px) {
  :lang(de) h1,
  :lang(de) h2,
  :lang(de) h3 {
    hyphens: auto;
  }
}
/* TopBusinessSoftware badge: 50 px box whose text link shows until its script draws the badge. */
.sf-root {
  max-width: 100%;
  overflow-wrap: anywhere;
}
/*
 * Webflow grids (1fr tracks) grow with their widest content, so a card list could push the page
 * wider than a tablet (/ai-model at 768 px) or a small phone (/about at 320 px). Cells shrink.
 */
.grid-3x1 > *,
.grid-1x3 > *,
.grid-2x1 > * {
  min-width: 0;
}
/* About page pipeline card (Finds / Writes / Links / Publishes): 2 x 2 on small phones. */
@media screen and (max-width: 479px) {
  .w-embed .sk10 .row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Inline SVG icons (src/components/ui/Icon.astro): never shrunk in a flex row. */
.ui-icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}

/*
 * Blue sections (hero, feature and CTA blocks): their sky image is a CSS background with no
 * colour, so until it loaded the hero was white and its white title invisible. Same blue
 * underneath (average colour of clear-blue-sky.avif, preloaded by BaseLayout).
 */
.home,
.feature,
.cta-container,
.section.blue-background {
  background-color: #4f81ef;
}

/* Rich text: space between consecutive paragraphs (feature blocks, guides). */
.w-richtext p + p {
  margin-top: 12px;
}
/* Feature page screenshots: the full width of their column (they were capped at 350 px). */
.feature-shot {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: 10px;
}

/*
 * One side gutter for the content of every section, aligned with the navbar (20 px up to
 * tablets, 15 px on phones): the exported containers kept 0 to 12 px on narrow screens.
 * Narrow containers stay centered at their maximum width and keep the gutter below it.
 */
/* The 1200 px container had no side padding: its cards touched the screen edges up to 1240 px. */
.container-1200 {
  padding-left: 20px;
  padding-right: 20px;
}
@media screen and (max-width: 991px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .container-faq,
  .container-900px,
  .container-800px-no-overflow,
  .container-800px-overflow {
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (max-width: 479px) {
  .container,
  .container-1200 {
    padding-left: 15px;
    padding-right: 15px;
  }
  .container.full-w-mobile {
    padding-left: 0;
    padding-right: 0;
  }
  .cta-container {
    padding-left: 15px;
    padding-right: 15px;
  }
  .container-faq,
  .container-900px,
  .container-800px-no-overflow,
  .container-800px-overflow {
    width: calc(100% - 30px);
  }
}

/* Key passages of reviews (and articles): highlighted in light blue, not the browser's yellow. */
mark {
  padding: 0 0.15em;
  border-radius: 3px;
  background-color: #e3edff;
  color: inherit;
}