/* solutions-v3.css: shared visual components for the Solutions pages
   (amazon-fba, shopify-sellers, etsy-sellers, tiktok-shop-sellers,
   b2b-distribution, importing-into-germany, german-vat-by-country).
   RJ 08.10.2026: "they look all the same ... MORE VISUALS". Same visual
   language as the homepage hero (home-v3.css, hv-*) and /product
   (product-v3.css): white dashboard cards, caps labels, status pills, mono
   figures, browser frames for real screenshots. Every class is prefixed sv-
   so nothing here reaches the shared chrome. Loaded after home-v2.css.
   Brand: navy #14203b / #1a2b4a, gold #8a6d3b (text #7a5f2f), light gold
   #d4bfa3, ground #eef1f7 to #f8f9fb. Every figure in these cards is example
   data and every card says "Test data". */

/* ---------- Hero grid: text left, visual right ---------- */
/* The homepage wrap is 1168px; the seller heroes were 1100px with no visual.
   Widen to the homepage measure so the text column keeps its line length. */
.hero .hero-inner:has(> .hero-top.sv-hero-grid) { max-width: 1168px; }
.hero .hero-top.sv-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 436px);
  gap: 52px;
  align-items: center;
  margin-bottom: 44px;
}
@media (max-width: 1000px) {
  .hero .hero-top.sv-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero .hero-top.sv-hero-grid > .sv-visual { max-width: 520px; }
}

/* ---------- Visual wrapper (card + floats) ---------- */
.sv-visual { position: relative; margin: 0; min-width: 0; font-family: 'Roboto', Arial, sans-serif; }
.sv-floats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; position: relative; z-index: 1; }

@media (min-width: 1001px) {
  /* The card is inset 24px; the floats overlap only the card's empty footer
     strip (::after), never a row of the card, and reach the column edge. */
  .sv-visual.has-float { padding-right: 24px; }
  .sv-visual.has-float > .sv-card::after { content: ""; display: block; height: 44px; background: #f8f9fb; border-top: 1px solid #e6e6e6; }
  .sv-visual.has-float .sv-floats { margin: -32px -24px 0 0; justify-content: flex-end; flex-wrap: nowrap; }
  .sv-visual.has-float .sv-floats.left { margin: -32px 0 0 -12px; justify-content: flex-start; }
  .sv-floats .sv-float { width: 236px; }
  .sv-floats .sv-float.wide { width: 272px; }
}

/* ---------- Card ---------- */
.sv-card {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(20, 32, 59, .28), 0 1px 0 rgba(20, 32, 59, .04);
  color: #14203b; text-align: left;
}
.sv-card-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 15px 20px; border-bottom: 1px solid #e6e6e6;
  font-family: 'Montserrat', Arial, sans-serif; text-transform: uppercase;
}
.sv-card-head b { font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; color: #1a2b4a; min-width: 0; }
.sv-card-head span { font-size: 11px; letter-spacing: 1px; color: #5f5f5f; white-space: nowrap; }
.sv-card-title { padding: 16px 20px 4px; font-family: 'Marcellus', Georgia, serif; font-size: 19px; line-height: 1.25; color: #1a2b4a; margin: 0; }
.sv-card-sub { padding: 0 20px 14px; font-size: 12.5px; line-height: 1.5; color: #5f6470; margin: 0; border-bottom: 1px solid #e6e6e6; }

.sv-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  padding: 12px 20px; border-bottom: 1px solid #e6e6e6;
  font-size: 13.5px; line-height: 1.4; color: #14203b;
}
.sv-row:last-child { border-bottom: 0; }
.sv-row.c3 { grid-template-columns: minmax(0, 1fr) auto auto; }
.sv-row.th {
  padding: 9px 20px; background: #f8f9fb;
  font-family: 'Montserrat', Arial, sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: #5f5f5f;
}
.sv-row .lbl { min-width: 0; }
.sv-row .sub { display: block; margin-top: 2px; font-size: 11.5px; color: #5f6470; }
.sv-row.dim { color: #5f6470; }
.sv-row.total { background: #f8f9fb; font-weight: 500; }
.sv-row.total .sv-num { font-size: 15px; font-weight: 600; }
.sv-row.navy { background: #1a2b4a; color: #fff; border-bottom: 0; }
.sv-row.navy .sub { color: #c9d1e0; }
.sv-row.navy .sv-num { color: #fff; font-size: 15px; font-weight: 600; }

.sv-num {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 13px; color: #14203b;
}
.sv-code {
  display: inline-block; min-width: 28px; margin-right: 8px; padding: 2px 5px; border: 1px solid #d5dae3; border-radius: 4px;
  font-family: 'Montserrat', Arial, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: .6px;
  text-align: center; color: #1a2b4a; background: #fff; vertical-align: 1px;
}

/* Status pills: the homepage colours (home-v3.css .hv-pill) */
.sv-pill {
  display: inline-block; font-family: 'Montserrat', Arial, sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  line-height: 1.3;
}
.sv-pill.you { background: #fbf1d9; color: #7a5800; }
.sv-pill.prog { background: #e6eefb; color: #1f4a8a; }
.sv-pill.done { background: #e3f4ea; color: #1d6b40; }
.sv-pill.excl { background: #eef0f3; color: #4a5468; }
.sv-pill.next { background: #fff; color: #4a5468; box-shadow: inset 0 0 0 1px #d5dae3; }

/* Two-column card body ("they collect" / "you file") */
.sv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sv-split > div { padding: 14px 18px 16px; min-width: 0; }
.sv-split > div + div { border-left: 1px solid #e6e6e6; }
.sv-split > div.muted { background: #fbfaf7; }
.sv-split h4 {
  margin: 0 0 10px; font-family: 'Montserrat', Arial, sans-serif; font-size: 10.5px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: #7a5f2f; line-height: 1.4;
}
.sv-split h4.navy { color: #1a2b4a; }
.sv-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #e3e6ec; font-size: 12.5px; line-height: 1.35; color: #14203b; }
.sv-line:last-of-type { border-bottom: 0; }
.sv-line .sv-num { font-size: 12px; }
.sv-split .note { margin: 10px 0 0; }
@media (max-width: 440px) {
  .sv-split { grid-template-columns: minmax(0, 1fr); }
  .sv-split > div + div { border-left: 0; border-top: 1px solid #e6e6e6; }
}

/* ---------- Floating card ---------- */
.sv-float {
  background: #fff; border-radius: 8px; box-shadow: 0 16px 40px -12px rgba(20, 32, 59, .32);
  padding: 15px 17px; display: grid; gap: 5px; text-align: left; min-width: 0;
}
.sv-float .lab { font-family: 'Montserrat', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: #7a5f2f; }
.sv-float .lab.navy { color: #1a2b4a; }
.sv-float .big { font-size: 14.5px; font-weight: 500; line-height: 1.35; color: #14203b; }
.sv-float .txt { font-size: 12.5px; line-height: 1.5; color: #3d4a63; }
.sv-float.gold { border-top: 3px solid #8a6d3b; }
.sv-float.navy { background: #1a2b4a; }
.sv-float.navy .lab { color: #d4bfa3; }
.sv-float.navy .big { color: #fff; }
.sv-float.navy .txt { color: #d5dbe6; }

/* ---------- Flow diagram (boxes + arrows) ---------- */
.sv-flow { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); align-items: stretch; gap: 0; padding: 18px 20px 20px; }
.sv-flow-box { border: 1px solid #e3e7ef; border-radius: 8px; padding: 13px 14px; background: #fff; display: grid; gap: 4px; align-content: start; min-width: 0; }
.sv-flow-box.done { border-color: #bfe0cc; background: #f4fbf7; }
.sv-flow-box .step { font-family: 'Montserrat', Arial, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #7a5f2f; }
.sv-flow-box .ttl { font-size: 14px; font-weight: 500; line-height: 1.3; color: #14203b; }
.sv-flow-box .txt { font-size: 12px; line-height: 1.45; color: #5f6470; }
.sv-flow-box .sv-num { font-size: 13.5px; font-weight: 600; margin-top: 2px; }
.sv-flow-arrow { position: relative; align-self: center; height: 2px; margin: 0 6px; background: #d4bfa3; }
.sv-flow-arrow::after { content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #8a6d3b; border-right: 2px solid #8a6d3b; transform: translateY(-50%) rotate(45deg); }
/* Vertical flow: one column, arrows pointing down */
.sv-flow.v { grid-template-columns: minmax(0, 1fr); }
.sv-flow.v .sv-flow-arrow { justify-self: center; width: 2px; height: 22px; margin: 4px 0; }
.sv-flow.v .sv-flow-arrow::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%) rotate(135deg); }
@media (max-width: 640px) {
  .sv-flow { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 16px; }
  .sv-flow .sv-flow-arrow { justify-self: center; width: 2px; height: 22px; margin: 4px 0; }
  .sv-flow .sv-flow-arrow::after { right: auto; left: 50%; top: auto; bottom: 0; transform: translateX(-50%) rotate(135deg); }
}

/* ---------- Product band: real screenshot in a browser frame ---------- */
.sv-band { padding: clamp(52px, 7vw, 92px) 24px; background: linear-gradient(180deg, #f8f9fb 0%, #eef1f7 100%); border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; }
.sv-band-inner { max-width: 1100px; margin: 0 auto; display: grid; justify-items: center; gap: 22px; }
.sv-kick { display: inline-flex; align-items: center; gap: 12px; margin: 0; font-family: 'Montserrat', Arial, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #7a5f2f; }
.sv-kick::before { content: ""; width: 42px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #000 0 33.3%, #dd0000 33.3% 66.6%, #ffcc00 66.6%); }
.sv-band-title { margin: 0; max-width: 760px; text-align: center; font-family: 'Marcellus', Georgia, serif; font-weight: 400; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; color: #1a2b4a; text-wrap: balance; }

.sv-shot { margin: 0; width: 100%; display: grid; justify-items: center; gap: 14px; }
.sv-browser {
  width: 100%; background: #fff; border-radius: 10px; overflow: hidden;
  border: 1px solid #e3e7ef; box-shadow: 0 34px 70px -28px rgba(20, 32, 59, .34);
}
.sv-browser::before { content: ""; display: block; height: 3px; background: linear-gradient(90deg, #000 0 33.3%, #dd0000 33.3% 66.6%, #ffcc00 66.6%); }
.sv-browser-bar { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #f8f9fb; border-bottom: 1px solid #e6e6e6; min-width: 0; }
.sv-browser-bar .dots { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.sv-browser-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #d3d8e0; }
.sv-browser-bar .url { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: #5f6470; }
.sv-browser img, .sv-browser picture { display: block; width: 100%; height: auto; }
.sv-shot.w-lg .sv-browser { max-width: 1040px; }
.sv-shot.w-md .sv-browser { max-width: 880px; }
.sv-shot.w-sm .sv-browser { max-width: 640px; }
.sv-caption { margin: 0; max-width: 640px; text-align: center; font-size: 13px; line-height: 1.55; color: #5b6577; }

/* ---------- Step band (3 or 4 steps, a small visual each) ---------- */
.sv-steps { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; max-width: 1040px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; counter-reset: svstep; }
.sv-steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sv-steps > li { counter-increment: svstep; position: relative; padding: 20px 0 0; border-top: 2px solid #d4bfa3; display: grid; gap: 8px; align-content: start; min-width: 0; }
.sv-steps > li::before { content: counter(svstep, decimal-leading-zero); font-family: 'Marcellus', Georgia, serif; font-size: 26px; line-height: 1; color: #8a6d3b; }
.sv-steps > li.on { border-top-color: #1a2b4a; }
.sv-steps .t { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: #14203b; }
.sv-steps .d { margin: 0; font-size: 13.5px; line-height: 1.6; color: #3d4a63; }
.sv-steps .sv-pill { justify-self: start; }
@media (max-width: 760px) {
  .sv-steps, .sv-steps.four { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sv-steps > li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; padding: 16px 0; border-top-width: 1px; }
  .sv-steps > li::before { grid-row: 1 / span 3; font-size: 22px; }
  .sv-steps > li > * { grid-column: 2; }
}

/* ---------- Country tiles (german-vat-by-country) ---------- */
.sv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 30px 0 34px; }
.sv-tiles a.sv-tile {
  display: grid; gap: 8px; align-content: start; padding: 15px 15px 14px; min-width: 0;
  background: #f8f9fb; border: 1px solid #e3e7ef; border-radius: 8px;
  text-decoration: none; color: #14203b; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.sv-tiles a.sv-tile:hover { border-color: #1a2b4a; background: #fff; box-shadow: 0 10px 24px -14px rgba(20, 32, 59, .4); transform: translateY(-1px); }
.sv-tile .top { display: grid; justify-items: start; gap: 8px; }
.sv-tile .top .sv-code { margin-right: 0; }
.sv-tile .name { font-family: 'Marcellus', Georgia, serif; font-size: 17px; line-height: 1.2; color: #1a2b4a; }
.sv-tile .lab { font-family: 'Montserrat', Arial, sans-serif; font-size: 10.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: #7a5f2f; }
.sv-tile .fa { font-size: 13px; line-height: 1.45; color: #3d4a63; }
.sv-tile .go { font-family: 'Montserrat', Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: #1a2b4a; margin-top: 2px; }
.sv-tiles a.sv-tile.dark { background: #1a2b4a; border-color: #1a2b4a; }
.sv-tiles a.sv-tile.dark .name, .sv-tiles a.sv-tile.dark .go { color: #fff; }
.sv-tiles a.sv-tile.dark .lab { color: #d4bfa3; }
.sv-tiles a.sv-tile.dark .fa { color: #d5dbe6; }
.sv-tiles a.sv-tile.dark .sv-code { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
@media (max-width: 760px) { .sv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 380px) { .sv-tiles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Phones ---------- */
@media (max-width: 600px) {
  .sv-card-head { padding: 13px 16px; }
  .sv-row { padding: 11px 16px; font-size: 13px; }
  .sv-row.th { padding: 9px 16px; }
  .sv-card-title { padding: 14px 16px 4px; font-size: 18px; }
  .sv-card-sub { padding: 0 16px 12px; }
  .sv-floats { flex-direction: column; }
  .sv-browser-bar { padding: 8px 12px; }
  .sv-browser-bar .url { font-size: 11px; }
}

/* Row details used by the hero cards */
.sv-row .lbl b { font-weight: 500; }
.sv-row .vat { font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.sv-row .sub .sv-pill { margin-right: 6px; padding: 2px 8px; font-size: 10px; }