/* SommelierX website layer — canonical integrated brand, July 2026.
   Loaded after page-specific CSS so every public page shares one visual system. */

:root {
  --sx-brand: #681D35;
  --sx-brand-light: #9F4963;
  --sx-brand-dark: #54152B;
  --sx-brand-wash: #F8F1F3;
  --sx-bg: #F7F6F2;
  --sx-off-white: #F7F6F2;
  --sx-surface: #FDFCF9;
  --sx-surface-elevated: #FFFFFF;
  --sx-text: #2C2416;
  --sx-ink: #2C2416;
  --sx-charcoal: #3E352A;
  --sx-graphite: #665D52;
  --sx-text-muted: #756B5F;
  --sx-pewter: #756B5F;
  --sx-border: rgba(60, 50, 30, .10);
  --sx-sand: rgba(60, 50, 30, .08);
  --sx-stone: rgba(60, 50, 30, .14);
  --sx-accent: var(--sx-brand);
  --sx-accent-pale: rgba(104, 29, 53, .08);
  --sx-accent-ghost: rgba(104, 29, 53, .04);
  --sx-accent-gradient: linear-gradient(145deg, #681D35, #8B3650);
  --sx-accent-gradient-hover: linear-gradient(145deg, #54152B, #7F2944);
  --sx-accent-glow: 0 6px 20px rgba(104, 29, 53, .18);
  --sx-shadow-sm: 0 2px 10px rgba(75, 55, 30, .06);
  --sx-shadow-md: 0 12px 36px rgba(75, 55, 30, .10);
  --sx-shadow-lg: 0 28px 70px rgba(75, 55, 30, .12);
  --sx-wine-red: #8B2232;
  --sx-wine-white: #B8960E;
  --sx-wine-rose: #D4737D;
  --sx-wine-orange: #C77D3C;
  --sx-wine-dessert: #A06030;
  --sx-wine-unknown: #8A7E6F;
  --sx-match-score-bg: #E5F4EF;
  --sx-match-score-text: #245F50;
  --sx-match-score-border: #ACD8C9;
  --sx-utility-teal: #39796A;
  --sx-font-display: 'Lora', Georgia, serif;
  --sx-font-heading: 'Lora', Georgia, serif;
  --sx-font-body: 'Inter', system-ui, sans-serif;
  --sx-font-serif: 'Lora', Georgia, serif;
  --sx-font-mono: 'JetBrains Mono', monospace;
  --sx-page-width: 1180px;
  --sx-reading-width: 760px;
  color-scheme: light;
}

html { scroll-behavior: smooth; }

body {
  background: var(--sx-bg);
  color: var(--sx-text);
  font-family: var(--sx-font-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::selection { background: rgba(104, 29, 53, .16); }

a { text-underline-offset: .18em; }

:focus-visible {
  outline: 3px solid rgba(104, 29, 53, .34);
  outline-offset: 3px;
  border-radius: 6px;
}

.container,
.nav-container {
  width: min(var(--sx-page-width), calc(100% - 40px));
  max-width: var(--sx-page-width);
  margin-inline: auto;
  padding-inline: 0;
}

/* Navigation */
.nav,
header.site {
  min-height: 72px;
  background: rgba(253, 252, 249, .94);
  border-bottom: 1px solid var(--sx-border);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

.nav { padding: 0; }
.nav.scrolled { padding: 0; background: rgba(253, 252, 249, .97); }

.nav-container,
header.site .nav-inner {
  min-height: 72px;
  display: flex;
  align-items: center;
}

.nav-logo-img { width: 193px; height: 44px; }
.footer-logo-img { width: 263px; height: 60px; }

.nav-links,
header.site nav.desktop { gap: 22px; }

.nav-link,
header.site .nav-link {
  color: var(--sx-text-muted);
  font-family: var(--sx-font-body);
  font-size: .9rem;
  font-weight: 550;
}

.nav-link:hover,
header.site .nav-link:hover { color: var(--sx-text); }

.nav-link[aria-current='page'],
.nav-link.is-active { color: var(--sx-brand); }

.btn-lang {
  min-width: 44px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--sx-border);
  border-radius: 999px;
  background: var(--sx-surface-elevated);
  color: var(--sx-text);
  box-shadow: none;
}

.sx-language-select {
  width: auto;
  max-width: 116px;
  padding-right: 30px;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--sx-text-muted) 50%),
    linear-gradient(135deg, var(--sx-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 10px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
  font: 650 .78rem/1 var(--sx-font-body);
}

.nav-mobile .sx-language-select {
  width: min(220px, 100%);
  max-width: 220px;
  min-height: 44px;
  text-align: center;
}

.nav-mobile {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px;
  position: relative;
  z-index: 999;
  background: rgba(253, 252, 249, .98);
  border-top: 1px solid var(--sx-border);
  box-shadow: 0 24px 50px rgba(44, 36, 22, .10);
}

.nav-mobile.open { display: flex; }

header.site .nav-mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  padding: 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

header.site .nav-mobile-toggle span {
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: var(--sx-text);
  transition: transform .18s ease, opacity .18s ease;
}

header.site .nav-mobile-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
header.site .nav-mobile-toggle.open span:nth-child(2) { opacity: 0; }
header.site .nav-mobile-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Buttons — restrained, clear and consistent. */
.btn,
.btn-primary,
.btn-outline,
.btn-primary-nav,
.wks-cta-btn,
.cta a,
header.site .btn-primary-nav {
  min-height: 44px;
  border-radius: 12px;
  font-family: var(--sx-font-body);
  font-weight: 650;
  letter-spacing: -.01em;
  box-shadow: none;
}

.btn-lg {
  min-height: 48px;
  padding: 13px 22px;
  border-radius: 13px;
  font-size: 1rem;
  font-weight: 650;
}

.btn-primary,
.btn-primary-nav,
.wks-cta-btn,
.page-developers .btn-primary,
header.site .btn-primary-nav {
  color: #fff;
  background: var(--sx-brand);
  border: 1px solid var(--sx-brand);
  box-shadow: 0 6px 18px rgba(104, 29, 53, .16);
}

.btn-primary::after,
.btn-primary-nav::after,
.wks-cta-btn::after { opacity: .38; }

.btn-primary:hover,
.btn-primary-nav:hover,
.wks-cta-btn:hover,
.page-developers .btn-primary:hover,
header.site .btn-primary-nav:hover {
  color: #fff;
  background: var(--sx-brand-dark);
  border-color: var(--sx-brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(104, 29, 53, .19);
}

.btn-outline,
.btn-secondary {
  color: var(--sx-text);
  background: rgba(255, 255, 255, .76);
  border: 1px solid var(--sx-stone);
}

.btn-outline:hover,
.btn-secondary:hover {
  color: var(--sx-brand);
  background: #fff;
  border-color: rgba(104, 29, 53, .35);
}

/* Shared editorial type and section rhythm */
h1, h2, h3, h4 { color: var(--sx-text); }

.hero-title,
.section-title,
.cta-title,
.blog-header h1,
.pairing-header h1,
.blog-index > h1,
.page-developers .hero h1,
.wks-hero h1 {
  font-family: var(--sx-font-serif);
  font-weight: 600;
  letter-spacing: -.035em;
}

.section-title,
.wks-section-title { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.02; }
.section-subtitle { max-width: 660px; margin-inline: auto; color: var(--sx-text-muted); }

section { position: relative; }

/* Consumer homepage */
.page-home .hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 46vw);
  min-height: 760px;
  padding: 92px 0 24px;
  background: #fff;
  overflow: hidden;
}

.page-home .hero-bg { display: none; }

.page-home .hero > .container {
  width: auto;
  max-width: 620px;
  margin-left: max(32px, calc((100vw - var(--sx-page-width)) / 2));
  margin-right: 32px;
  display: flex;
  align-items: center;
}

.page-home .hero-content { max-width: 620px; text-align: left; padding: 54px 0 40px; }

.page-home .hero-badge,
.winkels-hero .hero-badge,
.page-developers .hero-badge,
.wks-hero-badge {
  background: var(--sx-brand-wash);
  border: 1px solid rgba(104, 29, 53, .14);
  color: var(--sx-brand);
  box-shadow: none;
}

.page-home .hero-title {
  color: var(--sx-text);
  font-size: clamp(3.25rem, 6.4vw, 6.6rem);
  line-height: .92;
  margin-bottom: 28px;
}

.page-home .gradient-text,
.widget-hero .gradient-text,
.winkels-hero .gradient-text,
.page-retailers .hero h1 .gradient,
.page-developers .gradient {
  background: none;
  color: var(--sx-brand-light);
  -webkit-text-fill-color: currentColor;
}

.page-home .hero-subtitle {
  max-width: 570px;
  margin: 0 0 12px;
  color: var(--sx-text);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.45;
  text-align: left;
}

.page-home .hero-brand-claim {
  margin: 0 0 20px;
  color: var(--sx-brand-light);
  font-family: var(--sx-font-serif);
  font-size: 1.25rem;
  font-style: italic;
  text-align: left;
}

.page-home .hero-tagline {
  max-width: 600px;
  margin: 0 0 30px;
  color: var(--sx-text-muted);
  font-size: 1rem;
  line-height: 1.7;
  text-align: left;
}

.page-home .hero-cta { margin-bottom: 26px; }
.page-home .hero-cta-sub,
.page-home .hero-cta-webapp { text-align: left; color: var(--sx-text-muted); }
.page-home .hero-cta-webapp .text-link { color: var(--sx-brand); }
.page-home .store-badges { justify-content: flex-start; }

.page-home .hero-stats {
  justify-content: flex-start;
  gap: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--sx-border);
}

.page-home .stat-number,
.page-home .stat-label { color: var(--sx-text); font-family: var(--sx-font-body); }
.page-home .stat-number { font-size: 1.35rem; }
.page-home .stat-label { color: var(--sx-text-muted); }

.page-home .hero-visual {
  position: relative;
  display: block;
  min-height: 660px;
  margin: 26px 0 26px;
  border-radius: 32px 0 0 32px;
  overflow: hidden;
  background: url('assets/editorial/table-pairing.webp') center / cover no-repeat;
  box-shadow: var(--sx-shadow-lg);
}

.page-home .hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(44, 36, 22, .08), transparent 45%);
  pointer-events: none;
}

.page-home .phone-mockup {
  position: absolute;
  z-index: 2;
  left: 28px;
  bottom: 34px;
  width: 250px;
  transform: none;
  box-shadow: 0 24px 70px rgba(20, 16, 10, .28);
}

/* Lifestyle rail */
.lifestyle-intro { padding: 78px 0; background: var(--sx-bg); }
.lifestyle-intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lifestyle-card {
  min-height: 420px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background-position: center;
  background-size: cover;
  box-shadow: var(--sx-shadow-sm);
}
.lifestyle-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(25, 18, 13, .78)); }
.lifestyle-card > * { position: relative; z-index: 1; }
.lifestyle-card h3 { color: #fff; font-family: var(--sx-font-serif); font-size: 2rem; line-height: 1; margin-bottom: 8px; }
.lifestyle-card p { margin: 0; color: rgba(255,255,255,.88); line-height: 1.5; }
.lifestyle-card--dish { background-image: url('assets/editorial/dish-creation.webp'); }
.lifestyle-card--wine { background-image: url('assets/editorial/wine-selection.webp'); }
.lifestyle-card--table { background-image: url('assets/editorial/group-table.webp'); }

/* Cards and proof blocks */
.feature-card,
.compare-item,
.pricing-card,
.blog-card,
.widget-step,
.widget-benefit,
.winkels-usecase,
.winkels-step,
.winkels-pricing-card,
.wks-step,
.wks-deliverable,
.step-card,
.feature-card,
.pricing-card,
.card,
.wine-card,
.related-card {
  background: rgba(255, 255, 255, .82);
  border: 1px solid var(--sx-border);
  box-shadow: var(--sx-shadow-sm);
  border-radius: 18px;
}

.feature-card:hover,
.blog-card:hover,
.related-card:hover {
  border-color: rgba(104, 29, 53, .22);
  box-shadow: var(--sx-shadow-md);
  transform: translateY(-2px);
}

.feature-icon,
.widget-step-number,
.winkels-step-number,
.step-number,
.wks-step-number,
.wks-deliverable-icon {
  color: var(--sx-brand);
  background: var(--sx-brand-wash);
  border: 1px solid rgba(104, 29, 53, .12);
  box-shadow: none;
}

.feature-premium::before,
.feature-free::before { background: var(--sx-surface-elevated); color: var(--sx-text-muted); border: 1px solid var(--sx-border); }

.why-not-chatgpt,
.features,
.how-it-works,
.pricing,
.blog-section { background: var(--sx-bg); }

.proof,
.final-cta { background: #fff; color: var(--sx-text); }
.proof *, .final-cta * { color: inherit; }
.final-cta .btn-primary { color: #fff; }

/* B2B page heroes */
.winkels-hero,
.widget-hero,
.wks-hero,
.page-retailers > .hero,
.page-developers > .hero {
  min-height: 680px;
  padding: 150px 0 90px;
  background: #fff;
  overflow: hidden;
  text-align: left;
}

.winkels-hero::after,
.widget-hero::after,
.wks-hero::after,
.page-retailers > .hero::after,
.page-developers > .hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 105px;
  right: 0;
  bottom: 44px;
  width: 45%;
  border-radius: 28px 0 0 28px;
  background-position: center;
  background-size: cover;
  box-shadow: var(--sx-shadow-lg);
}

.winkels-hero::after { background-image: url('assets/editorial/wine-selection.webp'); }
.widget-hero::after { background-image: url('assets/editorial/discover-wine.webp'); }
.wks-hero::after { background-image: url('assets/editorial/restaurant-wine-list.webp'); }
.page-retailers > .hero::after { background-image: url('assets/editorial/wine-selection.webp'); }
.page-developers > .hero::after { background-image: url('assets/editorial/vineyard-discovery.webp'); }

.page-retailers > .hero::before { display: none; }

.winkels-hero .container,
.widget-hero .container,
.wks-hero .container,
.page-retailers > .hero .container,
.page-developers > .hero .container { position: relative; z-index: 1; }

.winkels-hero-content,
.widget-hero-content,
.wks-hero .container,
.page-retailers > .hero .container,
.page-developers > .hero .container { max-width: var(--sx-page-width); }

.winkels-hero-content,
.widget-hero-content,
.wks-hero .container > *,
.page-retailers > .hero .container > *,
.page-developers > .hero .container > * { max-width: 570px; margin-left: 0; text-align: left; }

.page-retailers > .hero .hero-cta-group { justify-content: flex-start; }

.winkels-hero .hero-title,
.widget-hero .hero-title,
.wks-hero h1,
.page-retailers > .hero h1,
.page-developers > .hero h1 {
  max-width: 610px;
  color: var(--sx-text);
  font-size: clamp(3rem, 5.2vw, 5.7rem);
  line-height: .96;
  text-align: left;
}

.page-retailers > .hero h1 {
  max-width: 650px;
  font-size: clamp(3rem, 4vw, 4.6rem);
  line-height: .98;
}

.winkels-hero .hero-subtitle,
.widget-hero .hero-subtitle,
.wks-hero-sub,
.page-retailers > .hero .hero-subtitle,
.page-developers > .hero .hero-subtitle {
  max-width: 560px;
  margin-left: 0;
  color: var(--sx-text-muted);
  text-align: left;
}

.winkels-hero-trust,
.widget-hero-trust,
.page-developers .hero-stats {
  color: var(--sx-text-muted);
  border-color: var(--sx-border);
}

.widget-section,
.winkels-research,
.winkels-usecases,
.winkels-steps,
.winkels-pricing,
.wks-steps,
.wks-deliverables,
.page-developers .section { background: var(--sx-bg); }

.winkels-research-stat-number,
.roi-number,
.stats-bar-number { color: var(--sx-brand); }

/* Recommendation data is turquoise, not brand or wine colour. */
.pairing-score,
.wine-card-score,
.match-score,
[class*='score-badge'] {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 4px 10px;
  border: 1px solid var(--sx-match-score-border);
  border-radius: 999px;
  color: var(--sx-match-score-text);
  background: var(--sx-match-score-bg);
  font-weight: 700;
}

.dna-axis-track,
.dna-track { background: rgba(57, 121, 106, .12); }
.dna-axis-fill,
.dna-fill { background: var(--sx-utility-teal); }

/* Editorial, pairing and grape templates */
.blog-index,
.blog-article,
.pairing-page,
main.container { color: var(--sx-text); }

.blog-index { max-width: var(--sx-page-width); padding-top: 128px; }
.blog-index > h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: .95; }
.blog-index > p { color: var(--sx-text-muted); font-size: 1.15rem; }
.blog-hub-links { gap: 14px; }
.blog-hub-link { background: #fff; border-color: var(--sx-border); box-shadow: var(--sx-shadow-sm); }
.blog-card { color: var(--sx-text); }
.blog-card-tag { color: var(--sx-brand); }

.blog-header,
.pairing-header { padding-top: 96px; text-align: left; }
.blog-header {
  width: min(920px, calc(100vw - 40px));
  margin-left: 50%;
  transform: translateX(-50%);
}
.blog-header h1 { font-size: clamp(2.7rem, 5vw, 4.15rem); line-height: .98; }
.pairing-header h1 { font-size: clamp(2.8rem, 6vw, 5.2rem); line-height: 1; }
.blog-feature-image {
  width: min(920px, calc(100vw - 40px));
  margin: 0 0 46px 50%;
  transform: translateX(-50%);
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--sx-shadow-md);
}
.blog-feature-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.pairing-feature-image {
  width: min(920px, calc(100vw - 40px));
  margin: 0 0 44px 50%;
  transform: translateX(-50%);
}
.pairing-feature-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: var(--sx-shadow-lg);
}
@media (max-width: 640px) {
  .pairing-feature-image { margin-bottom: 30px; }
  .pairing-feature-image img { border-radius: 18px; }
}
.blog-body,
.pairing-body,
.pairing-intro { color: var(--sx-graphite); }
.blog-body h2,
.pairing-section-title { font-family: var(--sx-font-serif); font-size: clamp(2rem, 4vw, 3.1rem); }
.blog-body h3 { color: var(--sx-text); }
.blog-cta,
.pairing-cta,
.pairing-tip,
.tips-section { background: var(--sx-brand-wash); border-color: rgba(104, 29, 53, .10); }

header.site .brand {
  font-family: var(--sx-font-display);
  color: var(--sx-text);
}

header.site + main.container { max-width: 840px; padding-top: 38px; }
header.site + main.container > h1 { font-family: var(--sx-font-serif); font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1; }
header.site + main.container h2 { font-family: var(--sx-font-serif); font-size: clamp(1.8rem, 3vw, 2.7rem); }
header.site + main.container .cta { background: var(--sx-brand-wash); color: var(--sx-text); border: 1px solid rgba(104, 29, 53, .12); }
header.site + main.container .cta a { color: var(--sx-brand); }

.page-grape-guide header.site + main.container,
.page-grape-index header.site + main.container { max-width: 920px; padding-top: 62px; }
.page-grape-guide header.site + main.container > h1,
.page-grape-index header.site + main.container > h1 { max-width: 860px; }
.grape-hero-image {
  min-height: clamp(260px, 36vw, 430px);
  margin: 28px 0 34px;
  border-radius: 28px;
  background-image: linear-gradient(180deg, transparent 65%, rgba(44, 36, 22, .12)), var(--grape-image);
  background-position: center;
  background-size: cover;
  box-shadow: var(--sx-shadow-md);
}
.grape-hero-image--hub { background-position: center 58%; }

/* Legal and docs pages without shared page classes */
.legal-page,
.legal-container { max-width: var(--sx-reading-width); margin-inline: auto; }

.legal-nav {
  background: rgba(253, 252, 249, .96) !important;
  border-bottom: 1px solid var(--sx-border) !important;
  box-shadow: none;
}
.legal-nav-logo img { width: auto; height: 42px; }
.legal-nav-actions { display: flex; align-items: center; gap: 14px; }
.legal-nav-back { color: var(--sx-text-muted) !important; }
.legal-nav-back:hover { color: var(--sx-brand) !important; }
.legal-lang {
  min-width: 44px;
  min-height: 40px;
  border: 1px solid var(--sx-border);
  border-radius: 12px;
  background: #fff;
  color: var(--sx-text);
  font: 600 .86rem var(--sx-font-body);
  cursor: pointer;
}
.legal-content { max-width: 780px !important; color: var(--sx-graphite); }
.legal-content h1,
.legal-content h2 { color: var(--sx-text) !important; font-family: var(--sx-font-serif) !important; }
.legal-content h1 { font-size: clamp(3rem, 7vw, 5.2rem) !important; line-height: .98; }
.legal-content h2 { font-size: clamp(1.8rem, 4vw, 2.6rem) !important; }
.legal-content h3,
.legal-content th { color: var(--sx-text) !important; }
.legal-content a { color: var(--sx-brand); }
.legal-content th,
.legal-content td { border-color: var(--sx-border) !important; }
.legal-meta { color: var(--sx-text-muted) !important; }
.legal-footer { border-color: var(--sx-border) !important; color: var(--sx-text-muted) !important; background: #fff; }

/* Footer */
.footer {
  background: #fff;
  color: var(--sx-text-muted);
  border-top: 1px solid var(--sx-border);
}
.footer h4 { color: var(--sx-text); }
.footer a { color: var(--sx-text-muted); }
.footer a:hover { color: var(--sx-brand); }

[data-content-locale][hidden] { display: none !important; }

@media (max-width: 980px) {
  .page-home .hero { grid-template-columns: 1fr; padding-top: 72px; }
  .page-home .hero > .container { width: min(760px, calc(100% - 40px)); margin: 0 auto; }
  .page-home .hero-content { text-align: center; margin-inline: auto; }
  .page-home .hero-subtitle,
  .page-home .hero-brand-claim,
  .page-home .hero-tagline,
  .page-home .hero-cta-sub,
  .page-home .hero-cta-webapp { text-align: center; margin-inline: auto; }
  .page-home .store-badges,
  .page-home .hero-stats { justify-content: center; }
  .page-home .hero-visual { min-height: 520px; margin: 0 20px 32px; border-radius: 28px; }
  .lifestyle-intro-grid { grid-template-columns: 1fr 1fr; }
  .lifestyle-card:last-child { grid-column: 1 / -1; min-height: 360px; }

  .winkels-hero,
  .widget-hero,
  .wks-hero,
  .page-retailers > .hero,
  .page-developers > .hero { padding-bottom: 430px; }
  .winkels-hero::after,
  .widget-hero::after,
  .wks-hero::after,
  .page-retailers > .hero::after,
  .page-developers > .hero::after { left: 20px; right: 20px; top: auto; bottom: 32px; width: auto; height: 360px; border-radius: 24px; }
}

@media (max-width: 720px) {
  .container,
  .nav-container { width: min(100% - 32px, var(--sx-page-width)); }
  .nav-logo-img { width: 158px; height: 36px; }
  .page-home .hero-title { font-size: clamp(3.1rem, 16vw, 5rem); }
  .page-home .hero-content { padding: 48px 0 30px; }
  .page-home .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .page-home .stat-number { font-size: 1rem; }
  .page-home .stat-label { font-size: .7rem; }
  .page-home .hero-visual { min-height: 390px; }
  .page-home .phone-mockup { display: none; }
  .lifestyle-intro { padding: 48px 0; }
  .lifestyle-intro-grid { grid-template-columns: 1fr; }
  .lifestyle-card,
  .lifestyle-card:last-child { grid-column: auto; min-height: 360px; }
  .winkels-hero,
  .widget-hero,
  .wks-hero,
  .page-retailers > .hero,
  .page-developers > .hero { padding-top: 118px; padding-bottom: 350px; }
  .winkels-hero::after,
  .widget-hero::after,
  .wks-hero::after,
  .page-retailers > .hero::after,
  .page-developers > .hero::after { left: 16px; right: 16px; height: 286px; }
  .winkels-hero .hero-title,
  .widget-hero .hero-title,
  .wks-hero h1,
  .page-retailers > .hero h1,
  .page-developers > .hero .container { width: 100%; padding-inline: 20px; }
  .page-retailers > .hero h1,
  .page-developers > .hero h1 {
    max-width: 100%;
    font-size: clamp(2.35rem, 11vw, 3.2rem);
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .wine-card { padding: 18px; }

  header.site nav.desktop { display: none; }
  header.site .nav-mobile-toggle { display: flex; }

  .pairing-breadcrumb {
    width: min(100% - 40px, 740px);
    padding-top: 92px !important;
  }
  .pairing-header { padding-top: 30px !important; }
}

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

/* ── Merk-lockup "SommelierX by WineStein" (ruling 22) ──────────────────
   Het woordmerk en de erfgoedregel vormen één merkteken, geen losse tekstregel.
   Dat vraagt om de werkelijke maatvoering van landing/assets/wordmark.svg
   (viewBox 280×64). Gemeten op de gerenderde SVG (canvas, alpha > 24):

     inkt links   x =   2,0 →  0,7 % van de afbeeldingsbreedte
     inkt rechts  x = 234,7 → 83,8 % van de afbeeldingsbreedte  (rechterrand X)
     kaplijn      y =  13,1 → 20,5 % van de afbeeldingshoogte
     basislijn    y =  44,4 → 69,4 % van de afbeeldingshoogte

   Twee getallen verklaren waarom de vorige uitvoering los oogde: onder de
   basislijn zit 30,6 % lóze hoogte in de SVG en rechts van de X 16,2 % lóze
   breedte. Een gewone `gap: 3px` werd daardoor optisch 16 px, en een gewone
   links-uitlijning hing de regel onder de "S" in plaats van aan de "X".
   De lockup rekent beide marges weg. Alle maten zijn afgeleid van één
   variabele — de woordmerkhoogte — zodat kop, voet en mobiel meeschalen.

   Tekst: exact "by WineStein" in alle vier de talen (echte tekst, geen beeld),
   in de bestaande merkserif Cormorant Garamond italic. Geen nieuw
   lettertypebestand en geen kleur buiten de huisstijl-tokens. */

.nav-logo,
.footer-brand,
header.site .brand {
  /* Aspect van wordmark.svg: 280 / 64 = 4,375. */
  --sx-wordmark-h: 44px;
  --sx-wordmark-w: calc(var(--sx-wordmark-h) * 4.375);
  --sx-wordmark-below-baseline: .306;  /* lóze hoogte onder de basislijn */
  --sx-wordmark-ink-right: .162;       /* lóze breedte rechts van de X */
  --sx-wordmark-cap: .489;             /* kaphoogte van het woordmerk */
  /* Verticale afstand basislijn → kaplijn ondertitel: 0,26 × kaphoogte
     (was 0,15; Roger, 4 sep 2026: "heel klein beetje meer witruimte om het
     iets onderscheidender te maken"). */
  --sx-lockup-gap: .26;
  /* Correctie voor de halve interlinie boven de kapitalen van Cormorant
     Garamond bij line-height: 1 — empirisch bepaald op de gerenderde kop. */
  --sx-lockup-cap-offset: .145em;
}

.footer-brand { --sx-wordmark-h: 60px; }

/* Het woordmerk in de voet staat inline; de regelbox eronder voegt dan nog een
   onzichtbare afdaallijn toe. Als blok klopt de lockup-maat wél. */
.footer-brand .footer-logo-img { display: block; }

.brand-subtitle {
  display: block;
  box-sizing: border-box;
  width: var(--sx-wordmark-w);
  max-width: 100%;
  /* Trek de regel door de lóze SVG-hoogte heen tot vlak onder de basislijn. */
  margin: calc(
      var(--sx-wordmark-h) * (var(--sx-lockup-gap) * var(--sx-wordmark-cap) - var(--sx-wordmark-below-baseline))
      - var(--sx-lockup-cap-offset)
    ) 0 0;
  /* Hang de regel aan de rechterrand van de X, niet aan de rand van de SVG. */
  padding-right: calc(var(--sx-wordmark-w) * var(--sx-wordmark-ink-right));
  font-family: var(--sx-font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: calc(var(--sx-wordmark-h) * .325);
  letter-spacing: .04em;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  color: var(--sx-brand);
}

/* Eén kleur, bewust. De regel is één tekstknoop: i18n.js zet `textContent`
   en zou losse span-jes voor "by" en "WineStein" bij iedere taalwissel wissen.
   Een kleurverloop met een harde stop zou dat omzeilen, maar de stop hangt aan
   de tekstbreedte en die verschilt tussen Cormorant Garamond en de
   Georgia-terugval. Monochroom bordeaux is stabiel én leest als één merkteken. */

/* Het logoblok wordt alleen een kolom wanneer de lockup er werkelijk staat;
   zonder ondertitel blijft de bestaande rij-uitlijning ongewijzigd. */
.nav-logo:has(.brand-subtitle),
header.site .brand:has(.brand-subtitle) {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* De voet zet de eigen kolomruimte terug: de tagline hangt onder de lockup,
   niet onder de lóze SVG-hoogte. */
.footer-brand .brand-subtitle + .footer-tagline { margin-top: calc(var(--sx-wordmark-h) * .30); }

/* Variant B — inline-lockup. Beschikbaar als modifier, niet standaard actief:
   "by WineStein" staat dan achter de X op de basislijn van het woordmerk,
   gescheiden door een bordeaux hairline. Onder 720 px valt B terug op A.
   Bewust alleen voor de navigatiekop: de voet is een tekstkolom, geen
   flexrij, en houdt daarom altijd variant A. */
@media (min-width: 721px) {
  .nav-logo.brand-lockup--inline:has(.brand-subtitle),
  header.site .brand.brand-lockup--inline:has(.brand-subtitle) {
    flex-direction: row;
    align-items: baseline;
  }

  .nav-logo.brand-lockup--inline > .brand-subtitle,
  header.site .brand.brand-lockup--inline > .brand-subtitle {
    position: relative;
    width: auto;
    /* Sluit aan op de X: haal de lóze SVG-breedte weg, zet dan de eigen ruimte. */
    margin: 0 0 0 calc(var(--sx-wordmark-w) * var(--sx-wordmark-ink-right) * -1 + var(--sx-wordmark-h) * .16);
    padding-right: 0;
    padding-left: calc(var(--sx-wordmark-h) * .16);
    /* Op de basislijn van het woordmerk: die ligt 30,6 % bóven de SVG-onderrand. */
    align-self: flex-end;
    transform: translateY(calc(var(--sx-wordmark-h) * var(--sx-wordmark-below-baseline) * -1));
    font-size: calc(var(--sx-wordmark-h) * .55 * var(--sx-wordmark-cap));
    text-align: left;
  }

  .nav-logo.brand-lockup--inline > .brand-subtitle::before,
  header.site .brand.brand-lockup--inline > .brand-subtitle::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -.06em;
    width: 1px;
    height: calc(var(--sx-wordmark-h) * var(--sx-wordmark-cap) * .84);
    background: var(--sx-brand);
    opacity: .3;
  }
}

@media (max-width: 720px) {
  .nav-logo,
  header.site .brand { --sx-wordmark-h: 36px; }
}

/* Erfgoedregel in de opening van de homepage en de twee B2B-ingangen. */
.hero-heritage {
  margin: 0 0 20px;
  max-width: 620px;
  font-family: var(--sx-font-body);
  font-size: .95rem;
  line-height: 1.55;
  color: var(--sx-text-muted);
}

.wks-hero .hero-heritage {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 28px;
  text-align: center;
}

/* Erfgoedpagina /winestein — hergebruikt de bestaande koptypografie. */
.page-winestein .heritage {
  padding: clamp(104px, 12vh, 136px) 0 clamp(56px, 8vh, 88px);
  background: linear-gradient(180deg, var(--sx-brand-wash) 0%, var(--sx-bg) 100%);
}

.page-winestein .heritage .container { max-width: var(--sx-reading-width); }

.page-winestein .heritage-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 10px;
  border: 1px solid var(--sx-stone);
  border-radius: 999px;
  font-family: var(--sx-font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--sx-brand);
  background: var(--sx-accent-pale);
}

.page-winestein .heritage-title {
  margin: 0 0 20px;
  font-family: var(--sx-font-serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.1;
  color: var(--sx-ink);
}

.page-winestein .heritage-body {
  margin: 0 0 32px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--sx-text);
}

.page-winestein .heritage-store-intro {
  margin: 0 0 12px;
  font-size: .9rem;
  color: var(--sx-text-muted);
}

.page-winestein .heritage-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* =====================================================================
   Huisstijl "Ambachtelijk" — Roger, 5/6 september 2026 (canvas de20e109).
   Papier, inktlijnen, Lora + Inter, roestbruin, penseelletter Kalam als één
   accent per pagina. Dit blok staat bewust onderaan: het overschrijft de
   bordeaux-tokens hierboven zonder één component te verplaatsen of te
   verwijderen (harde eis: geen functiewijziging).
   ===================================================================== */
:root {
  --sx-paper: #EFE6D6;
  --sx-paper-2: #F8F2E6;
  --sx-paper-3: #E6DBC8;
  --sx-ink-2: #3B2A22;
  --sx-rust: #7A3B2E;
  --sx-rust-light: #A85C46;
  --sx-rust-dark: #5E2C22;
  --sx-brown-muted: #6F5C4E;

  --sx-brand: var(--sx-rust);
  --sx-brand-light: var(--sx-rust-light);
  --sx-brand-dark: var(--sx-rust-dark);
  --sx-brand-wash: #F3E6DC;
  --sx-bg: var(--sx-paper);
  --sx-off-white: var(--sx-paper);
  --sx-surface: var(--sx-paper-2);
  --sx-surface-elevated: var(--sx-paper-2);
  --sx-text: var(--sx-ink-2);
  --sx-ink: var(--sx-ink-2);
  --sx-charcoal: var(--sx-ink-2);
  --sx-graphite: var(--sx-brown-muted);
  --sx-text-muted: var(--sx-brown-muted);
  --sx-pewter: var(--sx-brown-muted);
  --sx-border: rgba(59, 42, 34, .18);
  --sx-sand: rgba(59, 42, 34, .08);
  --sx-stone: rgba(59, 42, 34, .22);
  --sx-accent: var(--sx-rust);
  --sx-accent-pale: rgba(122, 59, 46, .10);
  --sx-accent-ghost: rgba(122, 59, 46, .05);
  --sx-accent-gradient: var(--sx-rust);
  --sx-accent-gradient-hover: var(--sx-rust-dark);
  --sx-accent-glow: none;
  --sx-accent-glow-intense: none;
  --sx-shadow-sm: none;
  --sx-shadow-md: none;
  --sx-shadow-lg: none;
  --sx-shadow-ink: 4px 4px 0 var(--sx-ink-2);

  /* Wijnkleuren: overal herkenbaar (besluit 1, 5 sep 2026). */
  --sx-wine-red: #6E1B2C;
  --sx-wine-white: #F1E4A8;
  --sx-wine-rose: #EFB8BD;
  --sx-wine-orange: #D9893A;
  --sx-wine-dessert: #C7862C;
  --sx-wine-unknown: #8A7E6F;
  /* Scorebadge in wijnkleur; aqua (P-09, juli 2026) vervalt. Standaard = rood. */
  --sx-match-score-bg: var(--sx-wine-red);
  --sx-match-score-text: #FBF3EE;
  --sx-match-score-border: var(--sx-ink-2);
  --sx-utility-teal: var(--sx-rust);

  --sx-font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --sx-font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --sx-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --sx-font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sx-font-brush: 'Kalam', 'Comic Sans MS', cursive;
  --sx-radius-card: 10px;
}

body {
  background-color: var(--sx-paper);
  background-image: radial-gradient(rgba(59, 42, 34, .05) 1px, transparent 1px);
  background-size: 6px 6px;
}
body::selection, ::selection { background: rgba(122, 59, 46, .18); }
:focus-visible { outline: 3px solid rgba(122, 59, 46, .40); }

h1, h2, h3, .ws-title, .section-title, .ws-section-title, .cta-title, .hero-title,
.pricing-section-title, .pairing-section-title, .comparison-title {
  font-family: var(--sx-font-heading);
  letter-spacing: -0.005em;
  color: var(--sx-ink-2);
  text-wrap: pretty;
}
h4, h5, h6 { font-family: var(--sx-font-body); }
.ws-title-accent, .hero-title .accent, .ws-title em { color: var(--sx-rust); font-style: normal; }

/* Penseelregel: één handschrift-accent per pagina (eyebrow boven de kop). */
.ws-eyebrow, .home-eyebrow, .section-eyebrow, .wks-eyebrow, .eyebrow,
.ws-badge, .hero-badge {
  font-family: var(--sx-font-brush);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sx-rust);
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  line-height: 1.1;
}

/* Knoppen: vlak roestbruin, geen verloop, geen gloed. */
.btn, .btn-primary, .btn-outline, .btn-secondary, .btn-primary-nav, .btn-lg, button.btn {
  border-radius: 10px;
  font-family: var(--sx-font-body);
  font-weight: 600;
  letter-spacing: 0;
  box-shadow: none;
}
.btn-primary, .btn-primary-nav, .btn-cta, .wks-submit, .btn-primary:visited {
  background: var(--sx-rust);
  color: var(--sx-paper-2);
  border: 1.5px solid var(--sx-rust);
}
.btn-primary::after { display: none; }
.btn-primary:hover, .btn-primary-nav:hover, .btn-cta:hover {
  background: var(--sx-rust-dark);
  border-color: var(--sx-rust-dark);
  color: var(--sx-paper-2);
  transform: none;
  box-shadow: none;
}
.btn-outline, .btn-secondary {
  background: var(--sx-paper-2);
  color: var(--sx-ink-2);
  border: 1.5px solid var(--sx-ink-2);
}
.btn-outline:hover, .btn-secondary:hover { background: var(--sx-ink-2); color: var(--sx-paper-2); transform: none; }

/* Kaarten: rustige inktlijn; alleen de hoofdkaart krijgt rand + harde schaduw. */
.home-biz-card, .price-card, .ws-benefit, .ws-steps li, .faq-item, .wks-checkout-form,
.widget-card, .ws-showcase-figure, .home-phone, .home-how-shot, .winkels-card, .plan-card,
.comparison-wrapper, .card, .feature-card, .pricing-card, .dev-card, .sx-card {
  background: var(--sx-paper-2);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius-card);
  box-shadow: none;
}
.sx-card-main, .price-card-popular, .price-card.featured, .ws-showcase-figure.is-main,
.wks-start-form, .home-phone {
  border: 1.5px solid var(--sx-ink-2);
  box-shadow: var(--sx-shadow-ink);
  background: var(--sx-paper-2);
}
.price-card-popular { transform: none; }
.popular-badge { background: var(--sx-rust); color: var(--sx-paper-2); border-radius: 999px; font-family: var(--sx-font-body); }
.save-badge { background: var(--sx-accent-pale); color: var(--sx-rust); }

/* Navigatie en voet */
.nav, header.site { background: rgba(248, 242, 230, .94); border-bottom: 1px solid var(--sx-border); }
.nav.scrolled { background: rgba(248, 242, 230, .98); }
.nav-link[aria-current='page'], .nav-link.is-active { color: var(--sx-rust); }
.footer { background: var(--sx-paper-3); color: var(--sx-ink-2); border-top: 1px solid var(--sx-border); }
.footer a { color: var(--sx-ink-2); }
.footer h4 { color: var(--sx-rust); font-family: var(--sx-font-body); }

/* Lockup: "by WineStein · sinds 2009" in penseelletter, roestbruin (Roger, 6 sep 2026). */
.nav-logo, .footer-brand, header.site .brand { --sx-lockup-gap: .34; --sx-lockup-cap-offset: .02em; --sx-wordmark-ink-right: .144; }
.brand-subtitle {
  font-family: var(--sx-font-brush);
  font-style: normal;
  font-weight: 400;
  font-size: calc(var(--sx-wordmark-h) * .36);
  letter-spacing: 0;
  color: var(--sx-rust);
}

/* Formulieren */
input, select, textarea, .wks-checkout-form input, .wks-checkout-form select {
  background: var(--sx-paper-2);
  border: 1px solid var(--sx-stone);
  border-radius: 8px;
  color: var(--sx-ink-2);
  font-family: var(--sx-font-body);
}
input:focus, select:focus, textarea:focus { border-color: var(--sx-rust); outline-color: rgba(122, 59, 46, .35); }

/* Scorebadge in wijnkleur */
.match-score, .score-badge, .sx-score {
  background: var(--sx-match-score-bg);
  color: var(--sx-match-score-text);
  border: 1.5px solid var(--sx-match-score-border);
  border-radius: 999px;
  font-family: var(--sx-font-heading);
  font-weight: 600;
}
.sx-score--white { background: var(--sx-wine-white); color: var(--sx-ink-2); border-color: #B9A85A; }
.sx-score--rose { background: var(--sx-wine-rose); color: #5A2A30; border-color: #C98A90; }
.sx-score--orange { background: var(--sx-wine-orange); color: var(--sx-ink-2); }
.sx-score--dessert { background: var(--sx-wine-dessert); color: #FBF3EE; }

/* Wijnkleurstip met inktrand: overal dezelfde. */
.sx-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--sx-ink-2); vertical-align: -2px; background: var(--sx-wine-red); }
.sx-dot--white { background: var(--sx-wine-white); }
.sx-dot--rose { background: var(--sx-wine-rose); }
.sx-dot--orange { background: var(--sx-wine-orange); }
.sx-dot--dessert { background: var(--sx-wine-dessert); }

/* Geen verschijn-animaties meer: inhoud is direct zichtbaar (ook zonder scrollen,
   bij verminderde beweging en in schermafdrukken). Prijskaarten stonden op opacity 0
   tot de kijker langs scrolde — dat las als een lege pagina. */
.fade-in, .fade-up, .reveal, .animate-on-scroll { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Inklapbare gratis kaartscan op /restaurants en de voorbeeldknoppen onder de showcase. */
details.wks-quickscan > summary { cursor: pointer; list-style: none; font-family: var(--sx-font-heading); font-size: 1.15rem; font-weight: 600; color: var(--sx-ink-2); padding: 6px 0; }
details.wks-quickscan > summary::-webkit-details-marker { display: none; }
details.wks-quickscan > summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--sx-rust); font-weight: 700; }
details.wks-quickscan[open] > summary::before { content: '−'; }
.ws-showcase-cta { margin: 18px 0 0; text-align: center; }
.ws-showcase-figure.is-main { border-radius: 10px; }

/* Veelgestelde vragen: lucht (Roger, 6 sep 2026: "alles staat gedrongen"). Eén kaart per vraag,
   ruime kop in Lora, antwoord met marge; geldt voor alle FAQ-varianten op de site. */
.faq-list, .winkels-faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item, .winkels-faq-item { padding: 6px 24px; margin: 0; }
.faq-question, .winkels-faq-question {
  padding: 20px 0;
  font-family: var(--sx-font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sx-ink-2);
  gap: 16px;
}
.faq-question::after { color: var(--sx-rust); font-size: 1.6rem; }
.faq-answer p, .winkels-faq-answer-inner { padding: 0 0 22px; font-size: 1rem; line-height: 1.65; color: var(--sx-brown-muted); margin: 0; }
.faq-item.open, .winkels-faq-item.open { border-color: var(--sx-ink-2); }
.faq-section .section-header, .winkels-section-header { margin-bottom: 28px; }
.faq-section .section-title, .winkels-section-header h2 { text-align: center; }

/* Lucht in de andere lijstkaarten die door de kaartstijl krap werden. */
.ws-benefit { padding: 18px 20px; gap: 14px; }
.ws-steps li { padding: 18px 20px 18px 56px; }
.home-biz-card { padding: 26px 26px 22px; }
.ws-benefit-icon { color: var(--sx-rust); }

/* Formulieren op /restaurants: lucht in de hoofdkaart, leesbare labels. */
.wks-start-form { padding: 28px 28px 24px; }
.wks-checkout-form .wks-form-group { margin-bottom: 18px; }
.wks-checkout-form .wks-form-group label { font-size: .95rem; margin-bottom: 8px; line-height: 1.4; }
.wks-checkout-form .wks-form-input { padding: 14px 16px; border-radius: 8px; }
.wks-checkout-form .wks-form-input:focus { border-color: var(--sx-rust); box-shadow: 0 0 0 3px rgba(122, 59, 46, .14); }
.wks-file-btn { border: 1.5px dashed var(--sx-ink-2); border-radius: 8px; padding: 14px; color: var(--sx-ink-2); background: var(--sx-paper); }
.wks-form-hint, .wks-cta-price { color: var(--sx-brown-muted); font-size: .9rem; line-height: 1.5; margin-top: 8px; }
.wks-cta-btn, .wks-form-submit { margin-top: 6px; }
details.wks-quickscan { margin-top: 28px; padding: 6px 28px; border: 1px solid var(--sx-border); border-radius: 10px; background: var(--sx-paper-2); max-width: 536px; margin-inline: auto; }
details.wks-quickscan[open] { padding-bottom: 20px; }
.wks-quickscan-sub { color: var(--sx-brown-muted); }

/* Developers-hero: de vier kenmerken liepen over het beeld heen (flex zonder krimp). */
.page-developers > .hero { background: var(--sx-paper-2); }
.page-developers .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; max-width: 570px; justify-content: start; }
.page-developers .hero-stat { text-align: left; }
.page-developers .hero-stat-number { font-family: var(--sx-font-heading); font-size: 1.35rem; font-weight: 600; color: var(--sx-ink-2); }
.page-developers .hero h1 .gradient { background: none; -webkit-text-fill-color: var(--sx-rust); color: var(--sx-rust); }
@media (max-width: 720px) { .page-developers .hero-stats { grid-template-columns: 1fr 1fr; } }