/* =================================================================
   Willow — index page

   Shared by index.html and nl/index.html. Lifted out of their inline
   <style> blocks so both languages load one cacheable file and
   cannot drift apart again.
   ================================================================= */
/* ============ Home page specific ============ */

/* Hero */
/* Split hero — the customer-proof chips sit in the right column */
.home-hero { padding: var(--hero-pad-top) 0 var(--hero-pad-bottom) 0; position: relative; overflow: hidden; }
.home-hero .wrap { position: relative; z-index: 2; }
.home-hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
  gap: 64px;
  align-items: start;
}
.home-hero .hero-left { min-width: 0; }
.home-hero .hero-right {
  padding-top: 88px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-hero h1 {
  font-size: var(--hero-h1-split);
  letter-spacing: var(--hero-tracking);
  line-height: var(--hero-lh);
  max-width: var(--hero-max-split);
  margin-top: 24px;
}
.home-hero h1 .italic { font-style: italic; font-weight: 500; color: var(--blue); }
.home-hero .lede { margin-top: 32px; max-width: 56ch; font-size: 21px; }
.home-hero .ctas { margin-top: 36px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* Hero proof strip — right column of hero */
.hero-proof {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-proof .hp-cap {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-proof .hp-cap::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
}
.hero-proof .hp-tp {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  transition: border-color 0.15s;
}
.hero-proof .hp-tp .hp-stars {
  display: inline-flex; gap: 2px;
}
.hero-proof .hp-tp .hp-stars span {
  width: 20px; height: 20px;
  background: #00b67a;
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t-micro); line-height: 1;
  /* ★ renders from a fallback font and sits high in the box — see --optical-glyph */
  padding-top: calc(2 * var(--optical-glyph));
}
.hero-proof .hp-tp .hp-stars span.empty { background: var(--rule); color: rgba(12,19,56,0.3); }
.hero-proof .hp-tp .hp-score {
  display: flex; flex-direction: column; gap: 1px; line-height: 1;
}
.hero-proof .hp-tp .hp-score .big {
  font-size: 15px; font-weight: 600; letter-spacing: -0.008em;
}
.hero-proof .hp-tp .hp-score .sub {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 3px;
}
.hero-proof .hp-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-proof .hp-chip {
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  display: flex; align-items: center; gap: 14px;
  transition: border-color 0.15s;
}
.hero-proof .hp-chip .hp-num {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ink);
  line-height: 1;
  flex-shrink: 0;
}
.hero-proof .hp-chip .hp-num .unit {
  display: block;
  font-size: var(--t-micro);
  color: var(--ink-3);
  margin-top: 4px;
  font-weight: 500;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hero-proof .hp-chip .hp-who {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.3;
  border-left: 1px solid var(--rule);
  padding-left: 14px;
  flex: 1;
}
.hero-proof .hp-chip .hp-who strong { color: var(--ink); font-weight: 600; }
.hero-proof .hp-chip .hp-who .det {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 3px;
}
.hero-proof .hp-chip .hp-tag {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
}
.hero-proof .hp-chip:nth-child(2) .hp-tag { background: var(--punch-orange); }
.hero-proof .hp-chip:nth-child(3) .hp-tag { background: var(--punch-yellow); }

/* Small demoted rating chip — sits below the result cards */
.hero-proof .hp-rating {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  margin-top: 2px;
  padding: 8px 13px;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  background: var(--white);
  transition: border-color 0.15s;
}
.hero-proof .hp-rating:hover { border-color: var(--ink); }
.hero-proof .hp-rating .hp-rating-score { font-weight: 600; color: var(--ink); font-size: 13px; letter-spacing: -0.01em; }
.hero-proof .hp-rating .hp-rating-star { color: #00b67a; font-size: 13px; line-height: 1; }
.hero-proof .hp-rating .hp-rating-txt { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.02em; color: var(--ink-3); }
.hero-proof .hp-rating .hp-rating-go { color: var(--ink-4); margin-left: 2px; transition: transform 0.15s; }
.hero-proof .hp-rating:hover .hp-rating-go { transform: translateX(3px); }

/* Unified stat numerals — tabular figures everywhere numbers carry the argument */
.hero-proof .hp-num,
.hero-proof .hp-rating-score,
.num-cell .big,
.result .num,
.cb-num,
.tab-content .factoids li strong { font-variant-numeric: tabular-nums; }

.home-hero .meta-row {
  margin-top: 56px;
  display: flex;
  gap: 28px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.home-hero .meta-row .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-4); }

/* Hero bg accent — soft halo */
.home-hero::after {
  content: "";
  position: absolute;
  top: -200px;
  right: -180px;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(0,48,221,0.09), transparent 60%);
  pointer-events: none;
}

/* Section: The break */
.break-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--white);
}
.break-stage {
  padding: 28px;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 240px;
  position: relative;
}
.break-stage:last-child { border-right: none; background: var(--ink); color: var(--cream); }
.break-stage .n {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--blue);
  text-transform: uppercase;
}
.break-stage:last-child .n { color: var(--blue-mid); }
.break-stage h3 { font-size: 24px; letter-spacing: -0.015em; }
.break-stage p { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-top: auto; }
.break-stage:last-child p { color: var(--on-dark-2); }

/* The fix — consistency proof card (Balsy blue) */
.break-proof {
  margin-top: 20px;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--r-xl);
  padding: 44px 48px;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.break-proof::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.break-proof > * { position: relative; z-index: 1; }
.break-proof .bp-eye {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--blue-mid);
}
.break-proof h3 {
  font-size: 38px; letter-spacing: -0.026em; line-height: 1.04;
  margin-top: 12px; max-width: 15ch; color: var(--white);
}
.break-proof p {
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.82);
  margin-top: 16px; max-width: 48ch;
}
.break-proof p strong { color: var(--white); font-weight: 600; }
.break-proof .bp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.break-proof .bp-stat { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 18px; }
.break-proof .bp-stat .v { font-size: 34px; font-weight: 600; letter-spacing: -0.026em; line-height: 1; }
.break-proof .bp-stat .v small { font-size: 18px; font-weight: 500; opacity: 0.75; margin-left: 1px; }
.break-proof .bp-stat .l {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.05em;
  text-transform: uppercase; color: rgba(255,255,255,0.72);
  margin-top: 8px; line-height: 1.4;
}
@media (max-width: 1100px) {
  .break-proof { grid-template-columns: 1fr; gap: 28px; padding: 32px 28px; }
  .break-proof h3 { font-size: 30px; }
}

/* Three products row */
.products-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
.prod-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 380px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.15s;
}
.prod-card:hover { border-color: var(--ink); }
.prod-card.featured { background: var(--ink); color: var(--cream); border-color: transparent; }
.prod-card .nm {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--blue);
}
.prod-card.featured .nm { color: var(--blue-mid); }
.prod-card .nm::before { display: none; }
.prod-card h3 { font-size: 36px; letter-spacing: -0.022em; }
.prod-card .desc { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.prod-card.featured .desc { color: var(--on-dark-2); }
.prod-card ul { list-style: none; margin: 8px 0 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.prod-card ul li {
  font-size: 13px;
  color: var(--ink-3);
  padding-left: 16px;
  position: relative;
}
.prod-card ul li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 1px; background: currentColor;
}
.prod-card.featured ul li { color: var(--on-dark-3); }
.prod-card .more {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
}
.prod-card.featured .more { color: var(--blue-mid); }
.duo-panel .sub { font-size: 14px; color: var(--on-dark-3); }
.duo-panel.human .sub { color: var(--ink-3); }

/* Built for / tabs */
.built-for {
  background: var(--cream);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 96px 0;
}
.tabs-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 32px;
  margin-bottom: 32px;
}
.tab-btn {
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--white);
  border: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-2);
  transition: all 0.15s;
}
.tab-btn:hover { border-color: var(--ink); }
.tab-btn.active { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.tab-content {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: 40px;
}
.tab-content h3 { font-size: 38px; letter-spacing: -0.022em; margin-bottom: 14px; }
.tab-content p { color: var(--ink-2); font-size: 16px; line-height: 1.55; margin-bottom: 20px; max-width: 72ch; }
.tab-content .factoids {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.tab-content .factoids li {
  padding: 14px 16px;
  background: var(--paper);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}
.tab-content .factoids li strong { display: block; font-size: 22px; color: var(--blue); letter-spacing: -0.012em; font-weight: 600; margin-bottom: 4px; }
.tab-illust .big {
  position: relative;
  z-index: 2;
  align-self: center;
  text-align: center;
  text-transform: none;
  font-family: var(--sans);
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 0.95;
}
.tab-illust .big small { display: block; font-size: 14px; font-family: var(--mono); font-weight: 400; color: var(--ink-3); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.1em; }
.numbers .lede { color: var(--on-dark-2); margin-top: 18px; max-width: 56ch; }
.num-cell .big {
  font-size: 64px;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--cream);
  line-height: 1;
  margin: 16px 0 8px;
}
.num-cell .big .unit { font-size: 24px; color: var(--on-dark-3); margin-left: 2px; vertical-align: top; }
.num-cell .det { font-size: 13px; color: var(--on-dark-2); line-height: 1.45; margin-top: 4px; }
@media (max-width: 560px) {
  .num-cell .big { font-size: 44px; margin: 12px 0 6px; }
}
.tag-mock .tm-pop .tm-row.active { background: var(--blue-soft); }

/* ============================================
   PROOF SECTION — Trustpilot + testimonials + stats
   ============================================ */
.proof {
  padding: 120px 0 96px;
  background: var(--cream);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.proof .sec-head { margin-bottom: 40px; }

/* Trustpilot strip */
.tp-strip {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 24px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.tp-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.tp-logo .star {
  width: 18px; height: 18px;
  background: #00b67a;
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.tp-stars {
  display: inline-flex; gap: 2px;
}
.tp-stars span {
  width: 28px; height: 28px;
  background: #00b67a;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 15px;
  line-height: 1;
  /* ★ renders from a fallback font and sits high in the box — see --optical-glyph */
  padding-top: calc(2 * var(--optical-glyph));
}
.tp-stars span.half {
  background: linear-gradient(to right, #00b67a 50%, var(--rule) 50%);
}
.tp-stars span.empty { background: var(--rule); color: rgba(12,19,56,0.3); }
.tp-score {
  display: flex; flex-direction: column; gap: 2px;
}
.tp-score .big {
  font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1;
}
.tp-score .sub {
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.tp-divider {
  width: 1px; height: 36px; background: var(--rule);
}
.tp-also {
  display: flex; gap: 28px; align-items: center;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 1;
}
.tp-also strong { color: var(--ink); font-weight: 500; }
.tp-also a {
  margin-left: auto;
  color: var(--blue);
  font-family: var(--sans);
  font-size: 13px;
  text-transform: none;
  letter-spacing: -0.005em;
}

/* Testimonial wall */
.quote-wall {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: auto;
  gap: 18px;
}
.qcard {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  grid-column: span 2;
  transition: border-color 0.15s, transform 0.15s;
}
.qcard:hover { border-color: var(--ink); }
.qcard.feature { grid-column: span 3; background: var(--ink); color: var(--cream); border-color: transparent; }
.qcard.feature .qstars span { background: var(--blue-mid); color: var(--ink); }
.qcard.wide { grid-column: span 3; }
.qcard .qstars {
  display: inline-flex; gap: 2px;
}
.qcard .qstars span {
  width: 16px; height: 16px;
  background: #00b67a;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 9px;
  /* ★ renders from a fallback font and sits high in the box — see --optical-glyph */
  padding-top: calc(2 * var(--optical-glyph));
}
.qcard .qhead {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}
.qcard.feature .qhead { color: var(--cream); }
.qcard blockquote {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  flex: 1;
}
.qcard.feature blockquote {
  color: var(--on-dark);
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.014em;
}
.qcard blockquote .hl {
  background: var(--blue-soft);
  color: var(--blue);
  padding: 1px 4px;
  border-radius: 3px;
}
.qcard.feature blockquote .hl {
  background: rgba(124,155,242,0.2);
  color: var(--blue-mid);
}
.qcard .qfoot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.qcard.feature .qfoot { border-top-color: rgba(255,255,255,0.14); }
.qcard .qav {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
.qcard.feature .qav { background: rgba(124,155,242,0.2); color: var(--blue-mid); }
.qcard .qmeta { font-size: 13px; line-height: 1.3; }
.qcard .qmeta strong { font-weight: 600; color: var(--ink); }
.qcard.feature .qmeta strong { color: var(--cream); }
.qcard .qmeta div { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.qcard.feature .qmeta div { color: var(--on-dark-3); }
.qcard .qsource {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.qcard.feature .qsource { color: var(--on-dark-3); }
.results-head .mono {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.result .num .unit { font-size: 16px; color: var(--ink-3); margin-left: 2px; vertical-align: top; font-weight: 500; }
.result .det { font-size: 12px; color: var(--ink-3); line-height: 1.45; }

/* CTA */
.home-cta {
  padding: 96px 0 120px 0;
}
.home-cta-card {
  background: var(--blue);
  color: var(--white);
  border-radius: 28px;
  padding: 80px 64px;
  position: relative;
  overflow: hidden;
}
.home-cta-card::after {
  content: "";
  position: absolute;
  right: -200px; top: -160px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.15), transparent 65%);
}
.home-cta-card h2 { font-size: 64px; letter-spacing: -0.028em; max-width: 16ch; }
.home-cta-card .lede { color: rgba(255,255,255,0.78); margin-top: 18px; max-width: 56ch; }
.home-cta-card .ctas { margin-top: 36px; display: flex; gap: 12px; }
.home-cta-card .btn-light { background: var(--white); color: var(--blue); }
.home-cta-card .btn-light:hover { background: var(--cream); color: var(--blue-deep); }
.home-cta-card .btn-out { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,0.4); }
.home-cta-card .btn-out:hover { background: rgba(255,255,255,0.1); }

@media (max-width: 1100px) {
  .home-hero { padding-top: 120px; }
  .home-hero .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .home-hero .hero-right { padding-top: 0; }
  .home-hero .hero-proof { max-width: 560px; }
  /* single column below 1100px, so the full-width scale applies again */
  .home-hero h1 { font-size: var(--hero-h1); max-width: var(--hero-max); }
  .break-grid { grid-template-columns: 1fr 1fr; }
  .break-stage:nth-child(2) { border-right: none; }
  .break-stage:nth-child(1), .break-stage:nth-child(2) { border-bottom: 1px solid var(--rule); }
  .products-row { grid-template-columns: 1fr; }
  .tab-content .factoids { grid-template-columns: 1fr 1fr; }
  .home-cta-card { padding: 48px 32px; }
  .quote-wall { grid-template-columns: 1fr 1fr; }
  .qcard, .qcard.feature, .qcard.wide { grid-column: span 1; }
  .qcard.feature { grid-column: span 2; }
  .tp-strip { gap: 16px; }
  .tp-also { font-size: var(--t-micro); gap: 16px; }
}
@media (max-width: 720px) {
  .quote-wall { grid-template-columns: 1fr; }
  .qcard.feature { grid-column: span 1; }
  .qcard.feature blockquote { font-size: 18px; }
  .tp-divider { display: none; }
  .tp-also { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.marquee-logos.marquee { overflow: hidden; }
.marquee-logos .marquee-track { gap: 64px; }
.marquee-logos .marquee-track:hover { animation-play-state: paused; }
.marquee-logos .marquee-track span.logo-item {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; position: relative;
}
.marquee-logos .marquee-track span::after { display: none; }
.marquee-logos .marquee-track img {
  height: 100%;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  opacity: 0.85;
  filter: grayscale(1);
  transition: opacity 0.2s, filter 0.2s;
}
.marquee-logos .marquee-track img:hover { opacity: 1; filter: grayscale(0); }
.launch { padding: 88px 0 76px; background: var(--ink); color: var(--cream); overflow: hidden; }
.launch-top { max-width: 70ch; }
.launch-eye { display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-size: var(--t-micro); letter-spacing:0.1em; text-transform:uppercase; color:var(--blue-mid); }
.launch-eye::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--blue-mid); box-shadow:0 0 0 0 rgba(124,155,242,0.5); animation:pulse 1.8s ease-out infinite; }
.launch-top h2 { font-size:clamp(40px,5.6vw,76px); letter-spacing:-0.03em; line-height:1.0; margin-top:18px; text-wrap:balance; }
.launch-top h2 em { font-style:italic; font-weight:500; color:var(--blue-mid); }
.launch-top p { font-size:17px; color:var(--on-dark-2); margin-top:18px; line-height:1.55; max-width:56ch; }

.launch-film { display:block; position:relative; margin-top:40px; aspect-ratio:16/9; border-radius:var(--r-xl); overflow:hidden; background:#05070f; box-shadow:0 40px 90px -24px rgba(0,0,0,0.65); }
.launch-film img { width:100%; height:100%; object-fit:cover; display:block; }
.launch-film::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,7,15,0.05) 0%, rgba(5,7,15,0) 40%, rgba(5,7,15,0.55) 100%); transition:background .2s; }
.launch-film:hover::after { background:linear-gradient(180deg, rgba(5,7,15,0.12) 0%, rgba(5,7,15,0.02) 45%, rgba(5,7,15,0.62) 100%); }
.launch-film .lf-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:104px; height:104px; border-radius:50%; background:var(--blue); display:flex; align-items:center; justify-content:center; box-shadow:0 18px 60px -12px rgba(16,51,213,0.8); transition:transform .2s; z-index:2; }
.launch-film .lf-play::before { content:""; border-style:solid; border-width:17px 0 17px 27px; border-color:transparent transparent transparent var(--white); margin-left:7px; }
.launch-film:hover .lf-play { transform:translate(-50%,-50%) scale(1.06); }
.launch-film .lf-label { position:absolute; left:30px; bottom:28px; z-index:2; display:flex; flex-direction:column; gap:6px; font-size:20px; font-weight:600; letter-spacing:-0.014em; color:var(--white); }
.launch-film .lf-eye { font-family:var(--mono); font-size: var(--t-micro); font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue-mid); display:inline-flex; align-items:center; gap:8px; }
.launch-film .lf-eye::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--blue-mid); }

.launch-marquee { overflow:hidden; margin-top:52px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.launch-track { display:flex; gap:20px; width:max-content; animation:scroll 70s linear infinite; }
.launch-marquee:hover .launch-track { animation-play-state:paused; }
.launch-card { height:300px; margin:0; flex:none; border:1px solid rgba(244,239,231,0.14); border-radius:var(--r-pill); overflow:hidden; background:rgba(244,239,231,0.04); }
.launch-card img { height:100%; width:auto; display:block; object-fit:cover; }
@media (max-width: 720px) {
  .launch { padding:64px 0 56px; }
  .launch-card { height:200px; }
  .launch-film .lf-play { width:72px; height:72px; }
  .launch-film .lf-play::before { border-width:12px 0 12px 19px; }
  .launch-film .lf-label { left:18px; bottom:18px; font-size:16px; }
}
@media (prefers-reduced-motion: reduce) {
  .launch-track { animation:none; }
  .launch-marquee { overflow-x:auto; }
}
.trust-strip { border-top: 1px solid var(--rule); background: var(--paper); }
.trust-strip .wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
  padding-top: 20px; padding-bottom: 20px;
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3);
}
.trust-strip .ts-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }


/* ---- lifted from inline style attributes (TODO §0) ---- */
.marquee-cap {
  margin-top: 24px;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: 0.05em; text-transform: uppercase; text-align: center;
}


/* ===== Quote-card photos (the "1,000+ businesses" section) =====
   Third avatar component on the site, alongside .cta-quote .cq-av and the
   blog bylines — same opt-in pattern: data-photo="<slug>" plus one rule per
   person, with `color: transparent` kept per-person so an untagged slug
   still falls back to initials.

   Two of these carried inline background colours (punch-orange, punch-red)
   as decorative fills. Those are gone: a photo replaces them, and inline
   style belongs in the stylesheet anyway (TODO §0).

   Peter's and Inge's sources are wide shots where `cover` leaves the face
   small, so both zoom; Jackie's and Wouter's are already head-and-shoulders. */
.qcard .qav[data-photo] { background-size: cover; background-repeat: no-repeat; }
.qcard .qav[data-photo="wouter"] { background-image: url("customers/slot-acs.webp");          background-position: 50% 28%; color: transparent; }
.qcard .qav[data-photo="jackie"] { background-image: url("customers/slot-united-codes.webp"); background-position: 50% 24%; color: transparent; }
.qcard .qav[data-photo="inge"]   { background-image: url("customers/slot-inge.webp");         background-position: 63% 13%; background-size: 230%; color: transparent; }
.qcard .qav[data-photo="peter"]  { background-image: url("customers/slot-psgrow.webp");       background-position: 50% 28%; background-size: 260%; color: transparent; }