/* Conversion Theme — statisches Stylesheet
   Design-Tokens 1:1 aus dem urspruenglichen Tailwind-/shadcn-Setup uebernommen. */

:root {
  --background: hsl(220 40% 8%);
  --foreground: hsl(0 0% 100%);
  --muted: hsl(220 25% 15%);
  --muted-10: hsl(220 25% 15% / 0.1);
  --muted-20: hsl(220 25% 15% / 0.2);
  --muted-50: hsl(220 25% 15% / 0.5);
  --muted-foreground: hsl(220 20% 70%);
  --border: hsl(220 30% 20%);
  --border-40: hsl(220 30% 20% / 0.4);
  --border-20: hsl(220 30% 20% / 0.2);
  --card: hsl(220 35% 12%);
  --card-border: hsl(220 30% 18%);
  --primary: hsl(16 100% 60%);
  --primary-border: hsl(16 100% 69%);
  --primary-foreground: hsl(0 0% 100%);
  --accent: hsl(152 70% 45%);
  --accent-10: hsl(152 70% 45% / 0.1);
  --accent-20: hsl(152 70% 45% / 0.2);
  --yellow: hsl(45 93% 47%);
  --elevate-1: rgba(255, 255, 255, 0.04);
  --elevate-2: rgba(255, 255, 255, 0.09);

  --radius-sm: 0.1875rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5625rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  --shadow-sm: 0 2px 0 0 hsl(220 25% 0% / 0.25), 0 1px 2px -1px hsl(220 25% 0% / 0.3);
  --shadow-lg: 0 2px 0 0 hsl(220 25% 0% / 0.4), 0 4px 6px -1px hsl(220 25% 0% / 0.45);
  --shadow-xl: 0 2px 0 0 hsl(220 25% 0% / 0.45), 0 8px 10px -1px hsl(220 25% 0% / 0.5);
  --shadow-2xl: 0 2px 0 0 hsl(220 25% 0% / 0.55);
}

/* ---------- Reset ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1, h2, h3 { line-height: 1.2; font-weight: 700; }

ul { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- Layout ---------- */

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 80rem;
}

.container--5xl { max-width: 64rem; }
.container--6xl { max-width: 72rem; }
.container--4xl { max-width: 56rem; }

.section { padding-block: 6rem; }
.section--sm { padding-block: 3rem; }          /* py-12 */
.section--sm-plus { padding-block: 3rem; }     /* py-12 md:py-16 */
.section--md { padding-block: 4rem; }          /* py-16 */
.section--md-plus { padding-block: 4rem; }     /* py-16 md:py-24 */
.section--lg-plus { padding-block: 5rem; }     /* py-20 md:py-24 */
.section--muted { background: var(--muted-10); }
.section--muted-strong {
  background: var(--muted-20);
  border-block: 1px solid var(--border-40);
}
.section--bordered { border-block: 1px solid var(--border-40); }

.section-head {
  text-align: center;
  margin-bottom: 5rem;
}
.section-head h2 { font-size: 1.5rem; line-height: 2rem; }
.section-head p {
  max-width: 64rem;
  margin-top: 1.5rem;
  margin-inline: auto;
  font-size: 1.125rem;
  color: var(--muted-foreground);
  line-height: 1.625;
}
/* HowItWorks begrenzt den Fliesstext enger (max-w-4xl statt max-w-5xl) */
.section-head--narrow p { max-width: 56rem; }

.cta-wrap { padding-top: 0.5rem; }

.split {
  display: grid;
  gap: 4rem;
  align-items: center;
}

.text-accent { color: var(--accent); }
.text-primary { color: var(--primary); }
.text-muted { color: var(--muted-foreground); }

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  min-height: 2.25rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary-border);
}

/* Aufhellung bei Hover, wie das hover-elevate-Utility im Original */
.btn::after,
.card--feature::after,
.app-tile::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 999;
}
.btn:hover::after,
.card--feature:hover::after,
.app-tile:hover::after { background: var(--elevate-1); }
.btn:active::after { background: var(--elevate-2); }

.btn--lg {
  min-height: 2.5rem;
  padding-block: 0;
  padding-inline: 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.btn--cta {
  background: #ff6b35;
  border-color: #ff6b35;
  font-weight: 700;
  box-shadow: var(--shadow-xl);
}
.btn--cta:hover { background: #ff5520; border-color: #ff5520; }

.btn--icon {
  min-height: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  flex: none;
  background: transparent;
  color: inherit;
  border: 1px solid var(--elevate-1);
  box-shadow: var(--shadow-sm);
}

.btn--ghost {
  background: transparent;
  color: inherit;
  border-color: transparent;
  box-shadow: none;
}

.btn--block { width: 100%; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid var(--border);
  background: hsl(220 40% 8% / 0.95);
}

@supports (backdrop-filter: blur(8px)) {
  .site-header {
    background: hsl(220 40% 8% / 0.6);
    backdrop-filter: blur(8px);
  }
}

.site-header__bar {
  display: flex;
  height: 5rem;
  align-items: center;
  justify-content: space-between;
}

.site-header__left { display: flex; align-items: center; gap: 3rem; }
.site-header__logo img { height: 2rem; width: auto; }

.site-nav { display: none; gap: 2rem; }
.site-nav a {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transition: color 0.15s;
}
.site-nav a:hover { color: var(--primary); }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }
.site-header__cta { display: none; }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--border);
  padding-block: 1rem;
}
.mobile-menu[data-open="true"] { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 1rem; }
.mobile-menu a { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }

.menu-icon--close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-icon--open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-icon--close { display: block; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding-block: 6rem;
  background: linear-gradient(to bottom, var(--background), var(--muted-20));
}

.hero__content { display: flex; flex-direction: column; gap: 2.5rem; }

.badge-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  border-radius: 9999px;
  background: var(--muted);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
}

.hero h1 {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.check-list { display: flex; flex-direction: column; gap: 1rem; }
.check-list li { display: flex; align-items: flex-start; gap: 1rem; }
.check-list__icon {
  margin-top: 0.125rem;
  flex: none;
  padding: 0.375rem;
  border-radius: 9999px;
  background: var(--accent-20);
  color: var(--accent);
  line-height: 0;
}
.check-list span { font-size: 1.125rem; line-height: 1.625; }

.payment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding-top: 0.5rem;
}
.payment-row .icon-mask {
  width: 3rem;
  height: 2rem;
  color: var(--muted-foreground);
  opacity: 0.7;
  transition: opacity 0.15s;
}
.payment-row .icon-mask:hover { opacity: 1; }

.video-frame {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
}
.wistia_responsive_padding { padding: 56.25% 0 0 0; position: relative; }
.wistia_responsive_wrapper {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.wistia_embed { height: 100%; position: relative; width: 100%; }
.wistia_swatch {
  height: 100%;
  left: 0;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: opacity 200ms;
  width: 100%;
}
.wistia_swatch img { filter: blur(5px); height: 100%; object-fit: contain; width: 100%; }

/* ---------- Testimonial ---------- */

.testimonial { display: flex; flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
.testimonial__avatar {
  width: 6rem;
  height: 6rem;
  flex: none;
  border-radius: 9999px;
  overflow: hidden;
  background: #fff;
}
.testimonial__avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__body { flex: 1; }
.testimonial__quote { font-size: 1rem; line-height: 1.625; margin-bottom: 0.75rem; }
.testimonial__stars { display: flex; gap: 0.25rem; justify-content: center; margin-bottom: 0.5rem; }
.testimonial__name { font-weight: 600; }
.testimonial__name span { color: var(--muted-foreground); font-weight: 400; }

.stars { display: flex; gap: 0.25rem; }
.star { width: 1rem; height: 1rem; fill: var(--yellow); color: var(--yellow); }
.star--lg { width: 1.25rem; height: 1.25rem; fill: #facc15; color: #facc15; }

/* ---------- Partner-Logos ---------- */

.partner-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.partner-row img { width: auto; object-fit: contain; }
.partner-row img[data-size="sm"] { height: 2rem; }
.partner-row img[data-size="md"] { height: 3rem; }
.partner-row img[data-size="lg"] { height: 4rem; }

/* ---------- How it works ---------- */

.steps { display: grid; gap: 3rem; }
.step { text-align: center; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
.step img { width: 10rem; height: 10rem; object-fit: contain; }
.step h3 { font-size: 1.25rem; line-height: 1.75rem; }
.step p { color: var(--muted-foreground); line-height: 1.625; }

/* ---------- Feature-Showcase ---------- */

.showcase { display: flex; flex-direction: column; gap: 8rem; }
.showcase__text { display: flex; flex-direction: column; gap: 2rem; }
.showcase__text h3 { font-size: 1.5rem; line-height: 1.25; }
.showcase__text > p { font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.625; }
.showcase__list { display: flex; flex-direction: column; gap: 1rem; }
.showcase__list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.showcase__list li::before {
  content: "\2714";
  margin-top: 0.25rem;
  color: var(--accent);
  flex: none;
}
.showcase__list span { line-height: 1.625; }

.media-frame {
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
}
.media-frame img { width: 100%; height: auto; object-fit: cover; }

/* ---------- Garantie ---------- */

.guarantee__text { display: flex; flex-direction: column; gap: 2.5rem; }
.guarantee__text h2 { font-size: 1.5rem; line-height: 1.25; }
.guarantee__text > p { font-size: 1.125rem; color: var(--muted-foreground); line-height: 1.625; }
.guarantee__list { display: flex; flex-direction: column; gap: 1.25rem; }
.guarantee__list li { display: flex; align-items: flex-start; gap: 1rem; }
.guarantee__list span { font-size: 1rem; line-height: 1.625; }

/* ---------- Proof-Karussell ---------- */

.proof { position: relative; max-width: 64rem; margin-inline: auto; }
.proof__row { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.proof__viewport { overflow: hidden; flex: 1; }
.proof__track {
  display: flex;
  gap: 1rem;
  transition: transform 0.3s ease-in-out;
}
.proof__slide {
  min-width: calc(33.333% - 1rem);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.proof__slide img { width: 100%; height: 100%; object-fit: cover; }
.proof__dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.proof__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: hsl(220 20% 70% / 0.3);
  transition: all 0.2s;
  padding: 0;
}
.proof__dot[aria-selected="true"] { width: 2rem; background: var(--primary); }

/* ---------- Feature-Grid ---------- */

.feature-grid { display: grid; gap: 2rem; margin-bottom: 5rem; }

.card--feature {
  position: relative;
  z-index: 0;
  padding: 2rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--card-border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.card--feature__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.card--feature__media img { width: 100%; height: 100%; object-fit: cover; }
.card--feature h3 { font-size: 1.125rem; line-height: 1.75rem; }
.card--feature p { color: var(--muted-foreground); line-height: 1.625; }

.extra-features { text-align: center; }
.extra-features h3 { font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 2rem; }
.extra-features ul {
  display: grid;
  gap: 1rem;
  max-width: 64rem;
  margin-inline: auto;
}
.extra-features li { display: flex; align-items: center; gap: 0.5rem; text-align: left; }
.extra-features li::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: var(--accent-10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 1rem no-repeat;
}

/* ---------- Shopify-Apps ---------- */

.apps-head { text-align: center; margin-bottom: 2.5rem; }
.apps-head h2 { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
.apps-head p {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--muted-foreground);
  max-width: 42rem;
  margin-inline: auto;
}
.apps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.app-tile {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--radius-lg);
  border: 1px solid hsl(220 30% 20% / 0.5);
}
.app-tile img { height: 2rem; width: auto; object-fit: contain; }

/* ---------- Vergleichstabelle ---------- */

.compare-head { text-align: center; margin-bottom: 4rem; }
.compare-head h2 { font-size: 1.5rem; line-height: 2rem; }
.compare-head p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }

.compare { display: grid; gap: 3rem; align-items: start; }
.compare__table { display: flex; flex-direction: column; gap: 0.5rem; }
.compare__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--border);
  align-items: center;
}
.compare__row--head {
  padding-top: 0;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1rem;
}
.compare__row--head img { height: 1.5rem; width: auto; margin: 0 auto 0.5rem; }
.compare__label { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.compare__other-head { text-align: center; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--muted-foreground); }
.compare__yes,
.compare__no {
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  text-align: center;
}
.compare__yes { background: var(--accent-10); }
.compare__no { background: var(--muted-50); color: var(--muted-foreground); }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 3rem; align-items: start; }
.faq__intro h2 { font-size: 1.875rem; line-height: 2.25rem; margin-bottom: 1rem; }
.faq__intro p { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); }

.accordion { display: flex; flex-direction: column; gap: 1rem; }
.accordion__item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding-inline: 1.5rem;
}
.accordion__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.25rem;
  text-align: left;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.accordion__trigger svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
  transition: transform 0.2s;
}
.accordion__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease-out;
}
.accordion__trigger[aria-expanded="true"] + .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding-bottom: 1.25rem; font-size: 0.875rem; line-height: 1.25rem; }

/* ---------- Abschluss-CTA ---------- */

.final-cta { padding-block: 4rem; }
.final-cta__text { display: flex; flex-direction: column; gap: 2rem; }
.final-cta__rating { display: flex; align-items: center; gap: 0.5rem; }
.final-cta__rating span { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.final-cta .split { gap: 3rem; }
.final-cta h2 { font-size: 1.875rem; line-height: 1.25; margin-bottom: 1rem; }
.final-cta__lead { color: hsl(0 0% 100% / 0.9); font-size: 1rem; }
.final-cta__list { display: flex; flex-direction: column; gap: 0.75rem; }
.final-cta__list li { display: flex; align-items: center; gap: 0.75rem; }
.final-cta__list span { font-weight: 500; font-size: 0.875rem; line-height: 1.25rem; }
.final-cta__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: hsl(0 0% 100% / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-cta__icon svg { width: 1rem; height: 1rem; }
.final-cta__btn { align-self: flex-start; }
.final-cta img.final-cta__graphic {
  width: 100%;
  height: auto;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
}

/* ---------- Footer ---------- */

.site-footer {
  background: #2c2c2c;
  border-top: 1px solid var(--border-20);
}
.site-footer .container { padding-block: 1rem; }
.site-footer__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.site-footer__copy { font-size: 0.875rem; line-height: 1.25rem; color: hsl(0 0% 100% / 0.7); order: 2; }
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  order: 1;
}
.site-footer__nav a { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; transition: color 0.15s; }
.site-footer__nav a:hover { color: hsl(0 0% 100% / 0.8); }
.site-footer__pay { display: flex; align-items: center; gap: 1rem; order: 3; }
.site-footer__pay .icon-mask {
  width: 2rem;
  height: 2rem;
  color: hsl(0 0% 100% / 0.6);
  transition: color 0.15s;
}
.site-footer__pay .icon-mask:hover { color: hsl(0 0% 100% / 0.8); }
.site-footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-20);
}
.site-footer__social a {
  padding: 0.5rem;
  border-radius: var(--radius-lg);
  background: hsl(0 0% 100% / 0.1);
  transition: background 0.15s;
  line-height: 0;
}
.site-footer__social a:hover { background: hsl(0 0% 100% / 0.2); }
.site-footer__social .icon-mask { width: 1.25rem; height: 1.25rem; color: #fff; }

/* ---------- Rechtsseiten ---------- */

.legal { padding-block: 4rem; }
.legal h1 { font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 3rem; }
.legal__body { display: flex; flex-direction: column; gap: 2rem; font-size: 1rem; line-height: 1.625; }
.legal__body h2 { font-size: 1.5rem; line-height: 2rem; margin-bottom: 1rem; }
.legal__body p { color: var(--muted-foreground); }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page > main { flex: 1; }

/* ---------- Marken-Icons als CSS-Masken ----------
   Pfade stammen 1:1 aus simple-icons (CC0), wie sie das Original ueber
   react-icons eingebunden hat. Als Maske eingefaerbt via currentColor. */

.icon-mask {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: var(--i);
  mask-image: var(--i);
}

.i-paypal { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.016 19.198h-4.2a.562.562 0 0 1-.555-.65L5.093.584A.692.692 0 0 1 5.776 0h7.222c3.417 0 5.904 2.488 5.846 5.5-.006.25-.027.5-.066.747A6.794 6.794 0 0 1 12.071 12H8.743a.69.69 0 0 0-.682.583l-.325 2.056-.013.083-.692 4.39-.015.087zM19.79 6.142c-.01.087-.01.175-.023.261a7.76 7.76 0 0 1-7.695 6.598H9.007l-.283 1.795-.013.083-.692 4.39-.134.843-.014.088H6.86l-.497 3.15a.562.562 0 0 0 .555.65h3.612c.34 0 .63-.249.683-.585l.952-6.031a.692.692 0 0 1 .683-.584h2.126a6.793 6.793 0 0 0 6.707-5.752c.306-1.95-.466-3.744-1.89-4.906z'/%3E%3C/svg%3E"); }

.i-visa { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z'/%3E%3C/svg%3E"); }

.i-amex { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='5' rx='2'/%3E%3Cline x1='2' x2='22' y1='10' y2='10'/%3E%3C/svg%3E"); }

.i-mastercard { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.343 18.031c.058.049.12.098.181.146-1.177.783-2.59 1.238-4.107 1.238C3.32 19.416 0 16.096 0 12c0-4.095 3.32-7.416 7.416-7.416 1.518 0 2.931.456 4.105 1.238-.06.051-.12.098-.165.15C9.6 7.489 8.595 9.688 8.595 12c0 2.311 1.001 4.51 2.748 6.031zm5.241-13.447c-1.52 0-2.931.456-4.105 1.238.06.051.12.098.165.15C14.4 7.489 15.405 9.688 15.405 12c0 2.31-1.001 4.507-2.748 6.031-.058.049-.12.098-.181.146 1.177.783 2.588 1.238 4.107 1.238C20.68 19.416 24 16.096 24 12c0-4.094-3.32-7.416-7.416-7.416zM12 6.174c-.096.075-.189.15-.28.231C10.156 7.764 9.169 9.765 9.169 12c0 2.236.987 4.236 2.551 5.595.09.08.185.158.28.232.096-.074.189-.152.28-.232 1.563-1.359 2.551-3.359 2.551-5.595 0-2.235-.987-4.236-2.551-5.595-.09-.08-.184-.156-.28-.231z'/%3E%3C/svg%3E"); }

.i-applepay { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.15 4.318a42.16 42.16 0 0 0-.454.003c-.15.005-.303.013-.452.04a1.44 1.44 0 0 0-1.06.772c-.07.138-.114.278-.14.43-.028.148-.037.3-.04.45A10.2 10.2 0 0 0 0 6.222v11.557c0 .07.002.138.003.207.004.15.013.303.04.452.027.15.072.291.142.429a1.436 1.436 0 0 0 .63.63c.138.07.278.115.43.142.148.027.3.036.45.04l.208.003h20.194l.207-.003c.15-.004.303-.013.452-.04.15-.027.291-.071.428-.141a1.432 1.432 0 0 0 .631-.631c.07-.138.115-.278.141-.43.027-.148.036-.3.04-.45.002-.07.003-.138.003-.208l.001-.246V6.221c0-.07-.002-.138-.004-.207a2.995 2.995 0 0 0-.04-.452 1.446 1.446 0 0 0-1.2-1.201 3.022 3.022 0 0 0-.452-.04 10.448 10.448 0 0 0-.453-.003zm0 .512h19.942c.066 0 .131.002.197.003.115.004.25.01.375.032.109.02.2.05.287.094a.927.927 0 0 1 .407.407.997.997 0 0 1 .094.288c.022.123.028.258.031.374.002.065.003.13.003.197v11.552c0 .065 0 .13-.003.196-.003.115-.009.25-.032.375a.927.927 0 0 1-.5.693 1.002 1.002 0 0 1-.286.094 2.598 2.598 0 0 1-.373.032l-.2.003H1.906c-.066 0-.133-.002-.196-.003a2.61 2.61 0 0 1-.375-.032c-.109-.02-.2-.05-.288-.094a.918.918 0 0 1-.406-.407 1.006 1.006 0 0 1-.094-.288 2.531 2.531 0 0 1-.032-.373 9.588 9.588 0 0 1-.002-.197V6.224c0-.065 0-.131.002-.197.004-.114.01-.248.032-.375.02-.108.05-.199.094-.287a.925.925 0 0 1 .407-.406 1.03 1.03 0 0 1 .287-.094c.125-.022.26-.029.375-.032.065-.002.131-.002.196-.003zm4.71 3.7c-.3.016-.668.199-.88.456-.191.22-.36.58-.316.918.338.03.675-.169.888-.418.205-.258.345-.603.308-.955zm2.207.42v5.493h.852v-1.877h1.18c1.078 0 1.835-.739 1.835-1.812 0-1.07-.742-1.805-1.808-1.805zm.852.719h.982c.739 0 1.161.396 1.161 1.089 0 .692-.422 1.092-1.164 1.092h-.979zm-3.154.3c-.45.01-.83.28-1.05.28-.235 0-.593-.264-.981-.257a1.446 1.446 0 0 0-1.23.747c-.527.908-.139 2.255.374 2.995.249.366.549.769.944.754.373-.014.52-.242.973-.242.454 0 .586.242.98.235.41-.007.667-.366.915-.733.286-.417.403-.82.41-.841-.007-.008-.79-.308-.797-1.209-.008-.754.615-1.113.644-1.135-.352-.52-.9-.578-1.09-.593a1.123 1.123 0 0 0-.092-.002zm8.204.397c-.99 0-1.606.533-1.652 1.256h.777c.072-.358.369-.586.845-.586.502 0 .803.266.803.711v.309l-1.097.064c-.951.054-1.488.484-1.488 1.184 0 .72.548 1.207 1.332 1.207.526 0 1.032-.281 1.264-.727h.019v.659h.788v-2.76c0-.803-.62-1.317-1.591-1.317zm1.94.072l1.446 4.009c0 .003-.073.24-.073.247-.125.41-.33.571-.711.571-.069 0-.206 0-.267-.015v.666c.06.011.267.019.335.019.83 0 1.226-.312 1.568-1.283l1.5-4.214h-.868l-1.012 3.259h-.015l-1.013-3.26zm-1.167 2.189v.316c0 .521-.45.917-1.024.917-.442 0-.731-.228-.731-.579 0-.342.278-.56.769-.593z'/%3E%3C/svg%3E"); }

.i-googlepay { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.963 7.235A3.963 3.963 0 00.422 9.419a3.963 3.963 0 000 3.559 3.963 3.963 0 003.541 2.184c1.07 0 1.97-.352 2.627-.957.748-.69 1.18-1.71 1.18-2.916a4.722 4.722 0 00-.07-.806H3.964v1.526h2.14a1.835 1.835 0 01-.79 1.205c-.356.241-.814.379-1.35.379-1.034 0-1.911-.697-2.225-1.636a2.375 2.375 0 010-1.517c.314-.94 1.191-1.636 2.225-1.636a2.152 2.152 0 011.52.594l1.132-1.13a3.808 3.808 0 00-2.652-1.033zm6.501.55v6.9h.886V11.89h1.465c.603 0 1.11-.196 1.522-.588a1.911 1.911 0 00.635-1.464 1.92 1.92 0 00-.635-1.456 2.125 2.125 0 00-1.522-.598zm2.427.85a1.156 1.156 0 01.823.365 1.176 1.176 0 010 1.686 1.171 1.171 0 01-.877.357H11.35V8.635h1.487a1.156 1.156 0 01.054 0zm4.124 1.175c-.842 0-1.477.308-1.907.925l.781.491c.288-.417.68-.626 1.175-.626a1.255 1.255 0 01.856.323 1.009 1.009 0 01.366.785v.202c-.34-.193-.774-.289-1.3-.289-.617 0-1.11.145-1.479.434-.37.288-.554.677-.554 1.165a1.476 1.476 0 00.525 1.156c.35.308.785.463 1.305.463.61 0 1.098-.27 1.465-.81h.038v.655h.848v-2.909c0-.61-.19-1.09-.568-1.44-.38-.35-.896-.525-1.551-.525zm2.263.154l1.946 4.422-1.098 2.38h.915L24 9.963h-.965l-1.368 3.391h-.02l-1.406-3.39zm-2.146 2.368c.494 0 .88.11 1.156.33 0 .372-.147.696-.44.973a1.413 1.413 0 01-.997.414 1.081 1.081 0 01-.69-.232.708.708 0 01-.293-.578c0-.257.12-.47.363-.647.24-.173.54-.26.9-.26Z'/%3E%3C/svg%3E"); }

.i-linkedin { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E"); }

.i-instagram { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E"); }

/* ---------- Breakpoints ---------- */

@media (min-width: 640px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .extra-features ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .section--sm-plus { padding-block: 4rem; }
  .section--md-plus { padding-block: 6rem; }
  .section--lg-plus { padding-block: 6rem; }
  .section-head h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .section-head p { font-size: 1.25rem; line-height: 1.75rem; }
  .hero h1 { font-size: 2.75rem; }
  .testimonial { flex-direction: row; text-align: left; gap: 2rem; }
  .testimonial__avatar { width: 8rem; height: 8rem; }
  .testimonial__quote { font-size: 1.125rem; line-height: 1.75rem; }
  .testimonial__stars { justify-content: flex-start; }
  .partner-row { gap: 3rem; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step h3 { font-size: 1.5rem; line-height: 2rem; }
  .showcase__text h3 { font-size: 1.875rem; line-height: 2.25rem; }
  .guarantee__text h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .guarantee__text > p { font-size: 1.25rem; line-height: 1.75rem; }
  .guarantee__list span { font-size: 1.125rem; line-height: 1.75rem; }
  .card--feature h3 { font-size: 1.25rem; line-height: 1.75rem; }
  .extra-features h3 { font-size: 1.5rem; line-height: 2rem; }
  .extra-features ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apps-head h2 { font-size: 1.25rem; line-height: 1.75rem; }
  .apps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .compare-head h2 { font-size: 1.875rem; line-height: 2.25rem; }
  .compare-head p { font-size: 1rem; line-height: 1.5rem; }
  .compare__yes, .compare__no { font-size: 0.875rem; line-height: 1.25rem; }
  .compare__row--head img { height: 1.5rem; }
  .faq__intro h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .faq__intro p { font-size: 1rem; line-height: 1.5rem; }
  .accordion__trigger { font-size: 1rem; line-height: 1.5rem; }
  .accordion__panel p { font-size: 1rem; line-height: 1.5rem; }
  .final-cta { padding-block: 6rem; }
  .final-cta h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .final-cta__lead { font-size: 1.125rem; line-height: 1.75rem; }
  .final-cta__list span { font-size: 1rem; line-height: 1.5rem; }
  .site-footer__main { flex-direction: row; justify-content: space-between; }
  .site-footer__copy { order: 1; }
  .site-footer__nav { order: 2; }
  .site-header__cta { display: inline-flex; }
  .site-nav { display: flex; }
  .menu-toggle { display: none; }
  .legal { padding-block: 6rem; }
  .legal h1 { font-size: 3rem; line-height: 1; }
  .legal__body { font-size: 1.125rem; line-height: 1.75rem; }
}

@media (min-width: 1024px) {
  .section { padding-block: 8rem; }
  .section-head h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .guarantee__text h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .compare-head h2 { font-size: 2.25rem; line-height: 2.5rem; }
  .hero { padding-block: 8rem; }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { gap: 4rem; }
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .extra-features ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .faq__intro { grid-column: span 2; }
  .faq__list { grid-column: span 3; }
  .final-cta h2 { font-size: 3rem; line-height: 1; }
  .showcase__media--left { order: 1; }
  .showcase__text--left { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}