/* ==========================================================================
   Vaytax v2 — Full-page components (2026-04-23)
   Shared CSS for the v2 editorial marketing pages:
   pricing, about, legal (impressum/datenschutz/agb), verticals, blog.
   Load alongside styles-v2.css.
   ========================================================================== */

/* ---------- Page container widths ---------- */
.v2-container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.v2-container-narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }
.v2-container-prose { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ---------- Page hero (light bg, flag eyebrow + serif title) ---------- */
.v2-page-hero {
  background: #f8f9fb;
  padding: 120px 24px 80px;
  border-bottom: 1px solid #e6e6e6;
  text-align: left;
}
.v2-page-hero.centered { text-align: center; }
.v2-page-hero .eyebrow-flag {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
  color: #8a6d3b;
}
.v2-page-hero .eyebrow-flag::before {
  content: '';
  display: inline-block;
  width: 24px; height: 8px;
  background: linear-gradient(
    90deg,
    #000 0%, #000 33.333%,
    #dd0000 33.333%, #dd0000 66.666%,
    #ffcc00 66.666%, #ffcc00 100%
  );
  border-radius: 1px;
  margin: 0;
  vertical-align: 0;
}
.v2-page-hero h1 {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  color: #233985;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  margin: 0 0 20px;
  text-wrap: balance;
  letter-spacing: -0.3px;
  max-width: 820px;
}
.v2-page-hero.centered h1 { margin-left: auto; margin-right: auto; }
.v2-page-hero .lede {
  font-family: 'Roboto', sans-serif;
  font-size: 18px; line-height: 1.6;
  color: #7a7a7a; margin: 0; max-width: 640px;
}
.v2-page-hero.centered .lede { margin-left: auto; margin-right: auto; }
.v2-page-hero .last-updated {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: #7a7a7a; margin-top: 24px;
}

/* ---------- Dark gradient hero (blog masthead, verticals) ---------- */
.v2-dark-hero {
  background: linear-gradient(135deg, #14203b 0%, #233985 100%);
  color: #fff;
  padding: 120px 24px 90px;
  position: relative;
  overflow: hidden;
}
.v2-dark-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(
    90deg,
    #000 0%, #000 33.333%,
    #dd0000 33.333%, #dd0000 66.666%,
    #ffcc00 66.666%, #ffcc00 100%
  );
}
.v2-dark-hero .eyebrow-gold {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
  color: #ffcc00; margin-bottom: 20px;
}
.v2-dark-hero h1 {
  font-family: 'Marcellus', serif;
  font-weight: 400; color: #fff;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.05; margin: 0 0 20px;
  max-width: 820px;
  text-wrap: balance;
  letter-spacing: -0.3px;
}
.v2-dark-hero h1 em,
.v2-dark-hero h1 .accent { color: #ffcc00; font-style: italic; font-weight: 400; }
.v2-dark-hero .lede {
  font-family: 'Roboto', sans-serif;
  font-size: 19px; line-height: 1.6;
  color: rgba(255,255,255,0.8); max-width: 640px;
  margin: 0;
}

/* ---------- Section heading utilities ---------- */
.v2-section-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
  color: #8a6d3b; margin-bottom: 12px;
}
.v2-section-title {
  font-family: 'Marcellus', serif;
  font-weight: 400; color: #233985;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1.15; margin: 0 0 24px;
  max-width: 720px;
  text-wrap: balance;
}

/* ---------- Pricing: main plan card ---------- */
.v2-pricing-grid {
  display: grid; gap: 32px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
}
@media (max-width: 900px) {
  .v2-pricing-grid { grid-template-columns: 1fr; }
}
.v2-plan-main {
  background: #fff;
  border: 2px solid #233985;
  border-radius: 12px;
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.v2-plan-main::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(
    90deg,
    #000 0%, #000 33.333%,
    #dd0000 33.333%, #dd0000 66.666%,
    #ffcc00 66.666%, #ffcc00 100%
  );
}
.v2-plan-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
  color: #8a6d3b; margin-bottom: 8px;
}
.v2-plan-title {
  font-family: 'Marcellus', serif;
  font-weight: 400; color: #233985;
  font-size: 28px; margin: 0 0 24px; line-height: 1.2;
}
.v2-plan-toggle {
  display: inline-flex; background: #f0f4ff;
  border-radius: 999px; padding: 4px;
  margin-bottom: 24px;
}
.v2-plan-toggle button {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 16px; border-radius: 999px; border: none;
  background: transparent; color: #233985; cursor: pointer;
}
.v2-plan-toggle button.active {
  background: #233985; color: #fff;
}
.v2-plan-price {
  display: flex; align-items: baseline; gap: 12px;
}
.v2-plan-price .amount {
  font-family: 'Marcellus', serif; font-size: 72px;
  color: #233985; line-height: 1;
}
.v2-plan-price .unit {
  font-family: 'Roboto', sans-serif; font-size: 15px; color: #7a7a7a;
}
.v2-plan-period {
  font-family: 'Roboto', sans-serif; font-size: 13px; color: #7a7a7a;
  margin-top: 4px;
}
.v2-plan-divider { height: 1px; background: #e6e6e6; margin: 32px 0; }
.v2-plan-features-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: #14203b; margin-bottom: 16px;
}
.v2-plan-features {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px;
}
@media (max-width: 500px) {
  .v2-plan-features { grid-template-columns: 1fr; }
}
.v2-plan-features li {
  font-family: 'Roboto', sans-serif; font-size: 14px;
  color: #262626; display: flex; align-items: flex-start; gap: 10px;
}
.v2-plan-features li::before {
  content: '';
  flex-shrink: 0; margin-top: 3px;
  display: inline-block; width: 16px; height: 16px;
  border-radius: 50%; background: #e6f3ea;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M4.5 8l2.5 2.5L11.5 5.5' stroke='%231f7a3f' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: center;
}
.v2-plan-cta {
  margin-top: 32px; width: 100%;
  padding: 14px 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.5px;
  cursor: pointer; background: #ffcc00; color: #14203b;
  border: none; border-radius: 2px;
  display: inline-block; text-align: center; text-decoration: none;
}
.v2-plan-cta:hover { background: #e6b800; }

/* Registration (dark) card */
.v2-plan-dark {
  background: #14203b; color: #fff;
  border-radius: 12px; padding: 40px;
  display: flex; flex-direction: column;
}
.v2-plan-dark .v2-plan-tag { color: #ffcc00; }
.v2-plan-dark .v2-plan-title { color: #fff; font-size: 24px; margin-bottom: 20px; }
.v2-plan-dark-intro {
  font-family: 'Roboto', sans-serif; font-size: 14px;
  line-height: 1.6; color: rgba(255,255,255,0.75); margin: 0 0 28px;
}
.v2-plan-dark .v2-plan-price .amount { font-size: 52px; color: #fff; }
.v2-plan-dark .v2-plan-price .unit { color: rgba(255,255,255,0.6); font-size: 14px; }
.v2-plan-dark .v2-plan-period { color: rgba(255,255,255,0.6); font-size: 12px; }
.v2-plan-dark .v2-plan-divider {
  background: rgba(255,255,255,0.1); margin: 28px 0;
}
.v2-plan-dark-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.v2-plan-dark-features li {
  font-family: 'Roboto', sans-serif; font-size: 13px;
  color: rgba(255,255,255,0.85);
  display: flex; gap: 10px; align-items: flex-start;
}
.v2-plan-dark-features li::before {
  content: '▸'; color: #ffcc00; margin-top: 2px;
}
.v2-plan-dark-note {
  margin-top: 28px; padding: 16px;
  background: rgba(255,204,0,0.08); border-radius: 6px;
  font-family: 'Roboto', sans-serif; font-size: 13px;
  line-height: 1.5; color: #ffcc00;
}
.v2-plan-dark-note span { color: rgba(255,255,255,0.75); }

/* ---------- Pricing: add-ons table ---------- */
.v2-addons-table {
  background: #fff; border: 1px solid #e6e6e6;
  border-radius: 8px; overflow: hidden;
}
.v2-addons-row {
  display: grid; gap: 16px;
  grid-template-columns: 220px 1fr 120px;
  align-items: center;
  padding: 20px 28px;
  border-bottom: 1px solid #f0f0f0;
}
.v2-addons-row:last-child { border-bottom: none; }
.v2-addons-row .name {
  font-family: 'Marcellus', serif; font-size: 17px; color: #14203b;
}
.v2-addons-row .desc {
  font-family: 'Roboto', sans-serif; font-size: 14px;
  color: #7a7a7a; line-height: 1.5;
}
.v2-addons-row .amt {
  font-family: 'Roboto Mono', monospace; font-size: 14px;
  color: #233985; font-weight: 500; text-align: right;
}
@media (max-width: 700px) {
  .v2-addons-row { grid-template-columns: 1fr; gap: 6px; }
  .v2-addons-row .amt { text-align: left; }
}

/* ---------- Pricing: 3-col comparison ---------- */
.v2-price-compare {
  background: #f0f4ff; border-radius: 12px;
  padding: 48px 40px;
  display: grid; gap: 32px;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}
@media (max-width: 800px) { .v2-price-compare { grid-template-columns: 1fr; } }
.v2-price-compare .tier {
  font-family: 'Marcellus', serif; font-size: 32px; color: #14203b;
}
.v2-price-compare .highlight {
  background: #14203b; color: #fff; padding: 24px; border-radius: 8px;
  margin: -8px; position: relative;
}
.v2-price-compare .highlight .tier { color: #fff; }
.v2-price-compare small {
  display: block;
  font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: #8a6d3b; margin-bottom: 6px;
}
.v2-price-compare .highlight small { color: #ffcc00; }
.v2-price-compare .caption {
  font-family: 'Roboto', sans-serif; font-size: 12px; color: #7a7a7a;
}
.v2-price-compare .highlight .caption { color: rgba(255,255,255,0.7); }

/* ---------- Legal page: two-column section ---------- */
.v2-legal-section {
  padding: 28px 0;
  border-bottom: 1px solid #e6e6e6;
  display: grid; grid-template-columns: 180px 1fr; gap: 32px;
}
.v2-legal-section:last-of-type { border-bottom: none; }
@media (max-width: 800px) {
  .v2-legal-section { grid-template-columns: 1fr; gap: 12px; }
}
.v2-legal-section h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: #233985; margin: 0; padding-top: 4px;
}
.v2-legal-body p,
.v2-legal-body ul,
.v2-legal-body ol {
  font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 1.7;
  color: #262626; margin: 0 0 10px;
}
.v2-legal-body ul, .v2-legal-body ol { padding-left: 22px; }
.v2-legal-body li { margin-bottom: 6px; }
.v2-legal-body strong { color: #14203b; }

/* ---------- About: founder portrait card ---------- */
.v2-founder-grid {
  display: grid; gap: 56px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
}
@media (max-width: 900px) { .v2-founder-grid { grid-template-columns: 1fr; } }
.v2-founder-portrait {
  background: linear-gradient(135deg, #f0f4ff 0%, #fff8e1 100%);
  border-radius: 12px; padding: 32px;
  position: relative; overflow: hidden;
}
.v2-founder-portrait::before {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, #000 0 33.333%, #dd0000 33.333% 66.666%, #ffcc00 66.666%);
}
.v2-founder-photo {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  background: #fff; border-radius: 6px; margin-bottom: 20px;
  display: block;
}
.v2-founder-tag {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: #8a6d3b; margin-bottom: 4px;
}
.v2-founder-name {
  font-family: 'Marcellus', serif; font-size: 22px; color: #233985;
}
.v2-founder-meta {
  font-family: 'Roboto', sans-serif; font-size: 13px; color: #7a7a7a;
  margin-top: 6px; line-height: 1.5;
}
.v2-founder-narrative h2 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #233985;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2;
  margin: 0 0 24px;
}
.v2-founder-narrative p {
  font-family: 'Roboto', sans-serif; font-size: 17px; line-height: 1.7;
  color: #262626; margin: 0 0 20px;
}

/* Pull quote (gold italic) */
.v2-pullquote {
  margin: 32px 0 0;
  padding: 20px 24px;
  border-left: 3px solid #ffcc00;
  background: #fff8e1;
  font-family: 'Marcellus', serif; font-size: 18px; font-style: italic;
  color: #14203b; line-height: 1.5;
}
.v2-pullquote footer {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: #8a6d3b; margin-top: 16px; font-style: normal;
}

/* About: stats band */
.v2-about-stats {
  background: #14203b; padding: 64px 24px;
  position: relative; overflow: hidden;
}
.v2-about-stats::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(
    90deg,
    #000 0%, #000 33.333%,
    #dd0000 33.333%, #dd0000 66.666%,
    #ffcc00 66.666%, #ffcc00 100%
  );
}
.v2-about-stats-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: 32px; grid-template-columns: repeat(4, 1fr); color: #fff;
}
@media (max-width: 800px) { .v2-about-stats-grid { grid-template-columns: 1fr 1fr; } }
.v2-about-stats .k {
  font-family: 'Marcellus', serif; font-size: 44px; color: #ffcc00; line-height: 1;
}
.v2-about-stats .label {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px; color: #fff; margin-top: 12px;
}
.v2-about-stats .sub {
  font-family: 'Roboto', sans-serif; font-size: 13px;
  color: rgba(255,255,255,0.6); margin-top: 4px;
}

/* About: company card */
.v2-company-grid {
  display: grid; gap: 32px; grid-template-columns: 1fr 1fr;
}
@media (max-width: 900px) { .v2-company-grid { grid-template-columns: 1fr; } }
.v2-company-dl {
  margin: 0; font-family: 'Roboto', sans-serif; font-size: 14px;
  color: #262626; line-height: 1.8;
}
.v2-company-dl > div {
  display: grid; grid-template-columns: 160px 1fr;
  padding: 8px 0; border-bottom: 1px solid #f0f0f0;
}
.v2-company-dl dt {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  color: #8a6d3b; padding-top: 2px;
}
.v2-company-dl dd { margin: 0; color: #14203b; }

/* ---------- Vertical page: data panel ---------- */
.v2-vert-hero-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: 48px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 900px) { .v2-vert-hero-grid { grid-template-columns: 1fr; } }
.v2-vert-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 28px;
}
.v2-vert-panel-label {
  font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 12px;
}
.v2-vert-panel-inner {
  font-family: 'Roboto Mono', monospace; font-size: 11px;
  color: rgba(255,255,255,0.75); line-height: 1.8;
}
.v2-vert-panel-data {
  margin-top: 10px; padding: 12px 14px;
  background: rgba(255,255,255,0.03); border-radius: 4px;
}
.v2-vert-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.v2-vert-row:last-child { margin-bottom: 0; }
.v2-vert-row span:first-child { white-space: nowrap; }
.v2-vert-row span:last-child { white-space: nowrap; }
.v2-vert-row.total {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Trigger cards */
.v2-trigger-grid {
  display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) { .v2-trigger-grid { grid-template-columns: 1fr; } }
.v2-trigger-card {
  border: 1px solid #e6e6e6; border-radius: 8px; padding: 24px 28px;
  position: relative; overflow: hidden;
}
.v2-trigger-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--vert-accent, #ff9900);
}
.v2-trigger-card h3 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #14203b;
  font-size: 20px; margin: 0 0 10px;
}
.v2-trigger-card p {
  font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 1.6;
  color: #7a7a7a; margin: 0;
}

/* Workflow steps */
.v2-workflow { display: grid; gap: 0; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { .v2-workflow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .v2-workflow { grid-template-columns: 1fr; } }
.v2-workflow .step { padding: 0 24px 0 0; }
.v2-workflow .step + .step {
  border-left: 1px solid #e6e6e6; padding-left: 24px;
}
@media (max-width: 500px) {
  .v2-workflow .step + .step { border-left: none; padding-left: 0; margin-top: 32px; }
}
.v2-workflow .num {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--vert-accent, #233985);
  color: var(--vert-accent, #233985);
  font-family: 'Marcellus', serif; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.v2-workflow h4 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #14203b;
  font-size: 18px; margin: 0 0 8px;
}
.v2-workflow p {
  font-family: 'Roboto', sans-serif; font-size: 13px; line-height: 1.6;
  color: #7a7a7a; margin: 0;
}

/* CTA band */
.v2-cta-band {
  background: #f8f9fb; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 56px 48px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}
.v2-cta-band h3 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #233985;
  font-size: 28px; margin: 0 0 10px;
}
.v2-cta-band p {
  font-family: 'Roboto', sans-serif; font-size: 15px;
  color: #7a7a7a; margin: 0; line-height: 1.6;
}
.v2-cta-band .btn-cta {
  padding: 14px 24px;
  font-family: 'Montserrat', sans-serif; font-size: 11px;
  font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px;
  cursor: pointer; background: #233985; color: #fff;
  border: none; border-radius: 2px; text-decoration: none;
  display: inline-block;
}
.v2-cta-band .btn-cta:hover { background: #14203b; }

/* ---------- Blog index ---------- */
.v2-blog-featured {
  display: grid; gap: 48px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
@media (max-width: 900px) { .v2-blog-featured { grid-template-columns: 1fr; } }
.v2-blog-featured-image {
  height: 380px; border-radius: 12px; overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #233985 0%, #14203b 100%);
  display: flex; align-items: center; justify-content: center;
}
.v2-blog-featured-image .featured-badge {
  position: absolute; left: 20px; top: 20px;
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 6px 12px; border-radius: 999px;
  background: #ffcc00; color: #14203b;
}
.v2-blog-featured-image img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.9;
}
.v2-blog-featured-content h2 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #233985;
  font-size: 34px; line-height: 1.15; margin: 0 0 16px;
  text-wrap: balance;
}
.v2-blog-featured-content h2 a { color: inherit; text-decoration: none; }
.v2-blog-featured-content p {
  font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 1.7;
  color: #262626; margin: 0 0 24px;
}
.v2-blog-cat {
  display: inline-block;
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: #8a6d3b; margin-bottom: 14px;
}
.v2-byline {
  display: flex; gap: 14px; align-items: center;
  font-family: 'Roboto', sans-serif; font-size: 13px; color: #7a7a7a;
}
.v2-byline-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover; background: #f0f4ff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Marcellus', serif; color: #233985;
}
.v2-byline .name { color: #14203b; font-weight: 500; }

.v2-blog-filter {
  display: flex; gap: 8px; flex-wrap: wrap;
  border-bottom: 1px solid #e6e6e6; padding-bottom: 20px;
}
.v2-blog-filter a, .v2-blog-filter button {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid #e6e6e6; background: #fff; color: #14203b;
  text-decoration: none;
}
.v2-blog-filter .active,
.v2-blog-filter a.active,
.v2-blog-filter button.active {
  background: #233985; color: #fff; border-color: #233985;
}

.v2-blog-grid {
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.v2-blog-card {
  text-decoration: none; color: inherit; display: block;
}
.v2-blog-thumb {
  height: 180px; border-radius: 8px; margin-bottom: 16px; overflow: hidden;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #e8edff;
}
.v2-blog-thumb.c1 { background: #e8edff; }
.v2-blog-thumb.c2 { background: #fff4e1; }
.v2-blog-thumb.c3 { background: #e6f3ea; }
.v2-blog-thumb.c4 { background: #ffecec; }
.v2-blog-thumb.c5 { background: #eef0f7; }
.v2-blog-thumb .letter {
  font-family: 'Marcellus', serif; font-size: 92px; line-height: 1;
  color: rgba(35,57,133,0.15); user-select: none;
}
.v2-blog-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; inset: 0;
}
.v2-blog-thumb .stripe {
  position: absolute; bottom: 12px; left: 12px;
  display: flex; height: 3px;
}
.v2-blog-thumb .stripe span { width: 10px; height: 3px; }
.v2-blog-card h3 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #233985;
  font-size: 19px; line-height: 1.3; margin: 0 0 10px;
  text-wrap: balance;
}
.v2-blog-card .meta {
  font-family: 'Roboto', sans-serif; font-size: 12px; color: #7a7a7a;
}

/* ---------- Blog article ---------- */
.v2-article-header {
  background: #f8f9fb;
  padding: 120px 24px 60px;
  border-bottom: 1px solid #e6e6e6;
}
.v2-article-header-inner {
  max-width: 760px; margin: 0 auto;
}
.v2-article-header .eyebrow-flag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: #8a6d3b; margin-bottom: 24px;
}
.v2-article-header .eyebrow-flag::before {
  content: ''; display: inline-block;
  width: 24px; height: 8px; border-radius: 1px;
  background: linear-gradient(
    90deg,
    #000 0%, #000 33.333%,
    #dd0000 33.333%, #dd0000 66.666%,
    #ffcc00 66.666%, #ffcc00 100%
  );
}
.v2-article-header h1 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #233985;
  font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1.1;
  margin: 0 0 24px; text-wrap: balance; letter-spacing: -0.3px;
}
.v2-article-header .lede {
  font-family: 'Roboto', sans-serif; font-size: 19px; line-height: 1.55;
  color: #7a7a7a; margin: 0 0 32px;
}
.v2-byline-line {
  display: flex; gap: 14px; align-items: center;
  padding-top: 24px; border-top: 1px solid #e6e6e6;
}
.v2-byline-line .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid #e6e6e6;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Marcellus', serif; color: #233985; font-size: 20px;
  overflow: hidden;
}
.v2-byline-line .avatar img { width: 100%; height: 100%; object-fit: cover; }
.v2-byline-line .info {
  flex: 1; font-family: 'Roboto', sans-serif;
}
.v2-byline-line .info .name { font-size: 14px; color: #14203b; font-weight: 500; }
.v2-byline-line .info .meta { font-size: 13px; color: #7a7a7a; }

.v2-article-body-grid {
  max-width: 1100px; margin: 0 auto;
  padding: 72px 24px 96px;
  display: grid; gap: 56px;
  grid-template-columns: 220px minmax(0, 760px);
}
@media (max-width: 900px) {
  .v2-article-body-grid { grid-template-columns: 1fr; gap: 32px; }
}
.v2-article-toc {
  position: sticky; top: 96px; align-self: start;
}
.v2-article-toc-title {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px; color: #8a6d3b;
  margin-bottom: 16px;
}
.v2-article-toc ol {
  list-style: none; padding: 0; margin: 0;
  font-family: 'Roboto', sans-serif; font-size: 13px; line-height: 1.6;
}
.v2-article-toc li {
  padding-left: 14px; margin-bottom: 10px;
  border-left: 2px solid #e6e6e6; color: #7a7a7a;
}
.v2-article-toc li.active,
.v2-article-toc li:hover { border-left-color: #233985; color: #14203b; font-weight: 500; }
.v2-article-toc a { color: inherit; text-decoration: none; }

/* Article body typography treatment */
.v2-article-body {
  font-family: 'Roboto', sans-serif; font-size: 17px; line-height: 1.75;
  color: #262626;
}
.v2-article-body > p:first-of-type::first-letter {
  font-family: 'Marcellus', serif; font-size: 68px;
  float: left; line-height: 0.9; color: #233985;
  margin-right: 12px; margin-top: 6px;
}
.v2-article-body h2 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #233985;
  font-size: 28px; line-height: 1.2; margin: 40px 0 16px;
}
.v2-article-body h3 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #233985;
  font-size: 22px; line-height: 1.3; margin: 32px 0 14px;
}
.v2-article-body p { margin: 0 0 24px; }
.v2-article-body ul,
.v2-article-body ol { margin: 0 0 24px; padding-left: 22px; }
.v2-article-body li { margin-bottom: 8px; }
.v2-article-body blockquote,
.v2-article-pullquote {
  margin: 40px 0;
  padding: 28px 32px;
  border-left: 3px solid #ffcc00;
  background: #fff8e1;
  font-family: 'Marcellus', serif; font-size: 22px; line-height: 1.4;
  color: #14203b; font-style: italic;
}
.v2-article-pullquote footer,
.v2-article-body blockquote footer {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: #8a6d3b; margin-top: 16px; font-style: normal;
}
.v2-article-callout {
  padding: 20px 24px; background: #f0f4ff;
  border-left: 3px solid #233985; border-radius: 0 6px 6px 0;
  margin: 32px 0;
}
.v2-article-callout .label {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.2px; color: #233985;
  margin-bottom: 6px;
}
.v2-article-callout p {
  margin: 0; font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 1.6;
}
.v2-article-callout a { color: #233985; border-bottom: 1px solid currentColor; }

/* Related posts */
.v2-article-related {
  border-top: 1px solid #e6e6e6; background: #f8f9fb;
  padding: 80px 24px;
}
.v2-related-head {
  max-width: 1100px; margin: 0 auto 32px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.v2-related-head h3 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #233985;
  font-size: 24px; margin: 0;
}
.v2-related-head a {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1px; color: #8a6d3b;
  text-decoration: none;
}
.v2-related-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.v2-related-card {
  text-decoration: none; color: inherit;
  background: #fff; border-radius: 8px; padding: 24px;
  border: 1px solid #e6e6e6; display: block;
}
.v2-related-card h4 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #233985;
  font-size: 18px; margin: 0; line-height: 1.3;
}

/* ---------- Shared button ---------- */
.v2-btn-primary {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 14px 24px;
  background: #233985; color: #fff;
  border: none; border-radius: 2px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.v2-btn-primary:hover { background: #14203b; }
.v2-btn-gold {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 14px 24px;
  background: #ffcc00; color: #14203b;
  border: none; border-radius: 2px; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.v2-btn-gold:hover { background: #e6b800; }
.v2-btn-outline-light {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 14px 24px;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,0.25); border-radius: 2px;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.v2-btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.05); }

/* ---------- Section spacing ---------- */
.v2-section { padding: 80px 24px; }
.v2-section-sm { padding: 56px 24px; }
.v2-section-lg { padding: 120px 24px; }
.v2-section-bg-soft { background: #f8f9fb; }

/* ==========================================================================
   v2 SHARED HEADER + FOOTER — so individual pages don't need to inline it
   ========================================================================== */

/* Header (uses project's existing <header id="header"> + .header-inner + .logo + #nav markup) */
#header {
  position: sticky; top: 0; z-index: 1000;
  background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  transition: box-shadow .3s;
}
#header.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
#header .header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 80px; padding: 0 40px;
  max-width: 1240px; margin: 0 auto;
}
#header .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
#header .logo-mark { display: flex; flex-direction: column; gap: 2px; }
#header .logo-stripe { display: flex; height: 3px; width: 80px; }
#header .logo-stripe.de .s1 { flex: 1; background: #000; }
#header .logo-stripe.de .s2 { flex: 1; background: #dd0000; }
#header .logo-stripe.de .s3 { flex: 1; background: #ffcc00; }
#header .logo-text {
  font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 600;
  letter-spacing: 3px; color: #14203b; text-transform: uppercase;
}
#header .logo-sub {
  font-family: 'Montserrat', sans-serif; font-size: 9px; font-weight: 400;
  letter-spacing: 1.5px; color: #bcbcbc; text-transform: uppercase;
}
#header nav { display: flex; align-items: center; gap: 32px; }
#header nav a {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500;
  text-transform: uppercase; color: #14203b; position: relative;
  text-decoration: none; letter-spacing: 0.5px;
}
#header nav a:not(.btn)::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 100%; height: 1px; background: #233985;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease-out;
}
#header nav a:not(.btn):hover::after { transform: scaleX(1); }
#header .btn-blue {
  padding: 10px 24px; border: 1.5px solid #233985;
  border-radius: 6px; background: transparent; color: #233985;
  text-decoration: none;
}
#header .btn-blue:hover { background: #233985; color: #fff; }
#header .mobile-toggle { display: none; background: none; border: none; cursor: pointer; }
#header .mobile-toggle span {
  display: block; width: 22px; height: 2px; background: #14203b;
  margin: 5px 0; border-radius: 1px;
}
body.has-fixed-header { padding-top: 80px; }

@media (max-width: 900px) {
  #header .header-inner { padding: 0 20px; height: 64px; }
  #header nav { display: none; position: absolute; top: 64px; left: 0; right: 0;
                background: #fff; flex-direction: column; padding: 20px;
                gap: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
  #header nav.open { display: flex; }
  #header .mobile-toggle { display: block; }
  body.has-fixed-header { padding-top: 64px; }
}

/* Footer — v2 dark footer with flag-stripe left accent */
body > footer.v2-footer {
  background: #14203b; color: rgba(255,255,255,0.65);
  padding: 64px 40px 32px;
  position: relative;
}
body > footer.v2-footer::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(
    180deg,
    #000 0%, #000 33.333%,
    #dd0000 33.333%, #dd0000 66.666%,
    #ffcc00 66.666%, #ffcc00 100%
  );
}
.v2-footer-grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: 48px;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
@media (max-width: 900px) { .v2-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .v2-footer-grid { grid-template-columns: 1fr; } }
.v2-footer-brand .flag-stripe { width: 80px; margin-bottom: 8px; }
.v2-footer-brand .logo-text {
  font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 600;
  letter-spacing: 3px; color: #fff; text-transform: uppercase; margin-bottom: 16px;
}
.v2-footer-brand p {
  font-family: 'Roboto', sans-serif; font-size: 13px; line-height: 1.7;
  color: rgba(255,255,255,0.65); margin: 0 0 12px;
}
.v2-footer-brand a { color: #d4bfa3; }
.v2-footer-col h4 {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 2px;
  color: #fff; margin-bottom: 20px;
}
.v2-footer-col ul { list-style: none; padding: 0; margin: 0; }
.v2-footer-col li { margin-bottom: 8px; }
.v2-footer-col a {
  font-family: 'Roboto', sans-serif; font-size: 14px;
  color: rgba(255,255,255,0.65); text-decoration: none;
}
.v2-footer-col a:hover { color: #fff; }
.v2-footer-bottom {
  max-width: 1100px; margin: 48px auto 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: rgba(255,255,255,0.5);
}

/* ---------- Legal article (long-form body for impressum/datenschutz/agb) ---------- */
.v2-legal-article {
  max-width: 820px; margin: 0 auto; padding: 64px 24px 100px;
}
.v2-legal-article h2 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #233985;
  font-size: 20px; line-height: 1.3;
  margin: 40px 0 14px;
}
.v2-legal-article h2:first-of-type { margin-top: 0; }
.v2-legal-article h3 {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px; color: #233985;
  margin: 24px 0 8px;
}
.v2-legal-article p,
.v2-legal-article ul,
.v2-legal-article ol {
  font-family: 'Roboto', sans-serif; font-size: 15px; line-height: 1.75;
  color: #262626; margin: 0 0 16px;
}
.v2-legal-article ul,
.v2-legal-article ol { padding-left: 22px; }
.v2-legal-article li { margin-bottom: 6px; }
.v2-legal-article strong { color: #14203b; }
.v2-legal-article a { color: #233985; }
.v2-legal-article a:hover { color: #14203b; text-decoration: underline; }

/* ==========================================================================
   v2 VERTICAL PAGE overrides (amazon-fba, shopify-sellers)
   Applied via <body class="v2-vertical-amazon"> / <body class="v2-vertical-shopify">
   Upgrades existing .hero / .problem / .solution / .final-cta etc. to v2 look
   without rewriting page content.
   ========================================================================== */

.v2-vertical-amazon { --vert-accent: #ff9900; }
.v2-vertical-shopify { --vert-accent: #96bf47; }

.v2-vertical-amazon .hero,
.v2-vertical-shopify .hero {
  background: linear-gradient(135deg, #14203b 0%, #233985 100%);
  color: #fff;
  padding: 120px 24px 90px;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.v2-vertical-amazon .hero::before,
.v2-vertical-shopify .hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(
    90deg,
    #000 0%, #000 33.333%,
    #dd0000 33.333%, #dd0000 66.666%,
    #ffcc00 66.666%, #ffcc00 100%
  );
}
.v2-vertical-amazon .hero .container,
.v2-vertical-shopify .hero .container {
  text-align: left;
}
.v2-vertical-amazon .hero h1,
.v2-vertical-shopify .hero h1 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #fff;
  font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05;
  margin: 0 0 20px; max-width: 820px;
  text-wrap: balance; letter-spacing: -0.3px;
}
.v2-vertical-amazon .hero h1 em,
.v2-vertical-shopify .hero h1 em,
.v2-vertical-amazon .hero h1 .accent,
.v2-vertical-shopify .hero h1 .accent {
  color: #ffcc00; font-style: italic; font-weight: 400;
}
.v2-vertical-amazon .hero p,
.v2-vertical-shopify .hero p {
  font-family: 'Roboto', sans-serif; font-size: 19px; line-height: 1.6;
  color: rgba(255,255,255,0.8); max-width: 640px;
}
.v2-vertical-amazon .hero .amazon-badge,
.v2-vertical-shopify .hero .badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px; margin-bottom: 24px;
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: rgba(255,255,255,0.9);
}
.v2-vertical-amazon .hero .amazon-badge::before,
.v2-vertical-shopify .hero .badge::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--vert-accent);
  box-shadow: 0 0 12px var(--vert-accent);
}
.v2-vertical-shopify .hero .badge .dot { display: none; }
.v2-vertical-amazon .hero .cta-btn,
.v2-vertical-shopify .hero .cta-btn {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 14px 24px; background: #ffcc00; color: #14203b;
  border: none; border-radius: 2px; display: inline-block;
  margin-top: 12px; text-decoration: none;
}
.v2-vertical-amazon .hero .cta-sub,
.v2-vertical-shopify .hero .cta-sub {
  color: rgba(255,255,255,0.55); font-size: 13px; margin-top: 16px;
}

/* Problem/trigger sections */
.v2-vertical-amazon .problem,
.v2-vertical-shopify .problem,
.v2-vertical-shopify .decision {
  padding: 96px 24px;
  background: #fff;
}
.v2-vertical-amazon .problem h2,
.v2-vertical-shopify .problem h2,
.v2-vertical-shopify .decision h2,
.v2-vertical-shopify .tldr h2 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #233985;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem); line-height: 1.15;
  text-align: left; max-width: 720px; margin: 0 0 32px;
}
.v2-vertical-amazon .problem-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 700px) { .v2-vertical-amazon .problem-grid { grid-template-columns: 1fr; } }
.v2-vertical-amazon .problem-card {
  border: 1px solid #e6e6e6; border-radius: 8px; padding: 24px 28px;
  position: relative; overflow: hidden;
  background: #fff;
}
.v2-vertical-amazon .problem-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: var(--vert-accent);
}
.v2-vertical-amazon .problem-card h3 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #14203b;
  font-size: 20px; margin: 0 0 10px;
}
.v2-vertical-amazon .problem-card p {
  font-family: 'Roboto', sans-serif; font-size: 14px; line-height: 1.6;
  color: #7a7a7a; margin: 0;
}
.v2-vertical-amazon .problem-card .icon {
  font-size: 22px; margin-bottom: 12px; display: none;
}

/* Solution / steps */
.v2-vertical-amazon .solution {
  padding: 96px 24px;
  background: #f8f9fb;
}
.v2-vertical-amazon .solution h2 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #233985;
  font-size: clamp(1.75rem, 3.5vw, 2.25rem); text-align: left;
  margin: 0 0 48px; max-width: 720px;
}
.v2-vertical-amazon .steps {
  display: grid; gap: 0;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1100px; margin: 0 auto;
}
@media (max-width: 800px) { .v2-vertical-amazon .steps { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 500px) { .v2-vertical-amazon .steps { grid-template-columns: 1fr; } }
.v2-vertical-amazon .steps .step { padding: 0 24px 0 0; background: transparent; border: none; }
.v2-vertical-amazon .steps .step + .step {
  border-left: 1px solid #e6e6e6; padding-left: 24px;
}
@media (max-width: 800px) { .v2-vertical-amazon .steps .step + .step { border-left: none; padding-left: 0; } }
.v2-vertical-amazon .steps .step-num {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--vert-accent); color: var(--vert-accent);
  font-family: 'Marcellus', serif; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px; background: transparent;
}
.v2-vertical-amazon .steps .step h3 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #14203b;
  font-size: 18px; margin: 0 0 8px;
}
.v2-vertical-amazon .steps .step p {
  font-family: 'Roboto', sans-serif; font-size: 13px; line-height: 1.6;
  color: #7a7a7a;
}

/* Final CTA band */
.v2-vertical-amazon .final-cta,
.v2-vertical-shopify .final-cta {
  background: #14203b; color: #fff;
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.v2-vertical-amazon .final-cta::before,
.v2-vertical-shopify .final-cta::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(
    90deg,
    #000 0%, #000 33.333%,
    #dd0000 33.333%, #dd0000 66.666%,
    #ffcc00 66.666%, #ffcc00 100%
  );
}
.v2-vertical-amazon .final-cta h2,
.v2-vertical-shopify .final-cta h2 {
  font-family: 'Marcellus', serif; font-weight: 400; color: #fff;
  font-size: 32px; max-width: 640px; margin: 0 auto 16px;
}
.v2-vertical-amazon .final-cta p,
.v2-vertical-shopify .final-cta p {
  font-family: 'Roboto', sans-serif; font-size: 16px;
  color: rgba(255,255,255,0.75); max-width: 520px; margin: 0 auto 28px;
}
.v2-vertical-amazon .final-cta .cta-btn,
.v2-vertical-shopify .final-cta .cta-btn {
  background: #ffcc00; color: #14203b;
  padding: 14px 28px; font-family: 'Montserrat', sans-serif; font-size: 11px;
  font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px;
  border: none; border-radius: 2px;
  text-decoration: none; display: inline-block;
}