/* 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; } }

/* ═══════════════════════════════════════════════════════════════════════
   GELIJK AAN DE APP (Roger, 9 sep 2026: "de website volledig ge-aligned met
   het app-design"). Bron = app/src/theme/variables.scss + global.scss na
   PR #1969 (9 sep). Selectors dragen `body` zodat ze winnen van de inline
   <style>-blokken in de pagina's, die ná dit bestand geladen worden.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Eén papier, geen stippen, geen gloed (app: .sx-paper-dots → .sx-paper). */
body, body.page-home, body.page-developers {
  background: var(--sx-paper);
  background-image: none;
}
body .ws-hero, body .hero, body .lifestyle-intro, body .ws-section, body .home-biz,
body .pricing, body .final-cta, body .features, body .how-it-works, body .ws-pricing,
body .faq-section, body .ws-showcase, body .footer, body .page-developers > .hero {
  background: var(--sx-paper);
  background-image: none;
}
body .home-biz, body .ws-pricing { border-top: 0; border-bottom: 0; }
body .final-cta::before, body .final-cta::after, body .features::before, body .pricing::before,
body .hero-gradient, body .hero-particles, body .phone-glow, body .hero-bg { display: none; }
body .footer { border-top: 1px solid var(--sx-border); }

/* 2. Koppen zoals de app (.sx-heading: Lora 600, -0.01em, inkt). */
body h1, body h2, body h3, body .ws-title, body .section-title, body .ws-section-title,
body .cta-title, body .hero-title, body .pricing-section-title {
  font-family: var(--sx-font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sx-ink-2);
  background: none;
  -webkit-text-fill-color: currentColor;
}
body .ws-title .ws-title-accent, body .cta-title .accent { color: var(--sx-rust); -webkit-text-fill-color: var(--sx-rust); }

/* 3. Penseelregel (.sx-brush): Kalam 400, roestbruin, gewone zinskast, geen pil.
   Wint van de inline .ws-badge/.home-eyebrow (klein, kapitalen, pil met rand). */
body .ws-badge, body .hero-badge, body .home-eyebrow, body .ws-eyebrow, body .section-eyebrow,
body .wks-eyebrow, body .eyebrow, body .home-biz-card .ws-eyebrow {
  display: block;
  font-family: var(--sx-font-brush);
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--sx-rust);
  background: none;
  border: 0;
  padding: 0;
  margin: 0 0 6px;
  border-radius: 0;
  line-height: 1.1;
}

/* 4. Knoppen = pillen (app .sx-btn). Primair: roestbruin + harde inktschaduw
   3px 3px 0; secundair: papier met inktrand. Indrukken schuift 1px mee. */
body .btn, body .btn-primary, body .btn-outline, body .btn-secondary, body .btn-primary-nav,
body .btn-lg, body button.btn, body .wks-submit, body .wks-form-submit, body .wks-cta-btn,
body .btn-cta, body .rs-btn, body .btn-nav {
  border-radius: 9999px;
  font-family: var(--sx-font-body);
  font-weight: 600;
  letter-spacing: 0.025em;
  min-height: 44px;
  transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease;
}
body .btn-primary, body .btn-primary-nav, body .btn-cta, body .wks-submit, body .wks-form-submit,
body .wks-cta-btn, body .btn-primary:visited, body .rs-btn-primary {
  background: var(--sx-rust);
  color: var(--sx-paper-2);
  border: 1.5px solid var(--sx-rust);
  box-shadow: 3px 3px 0 var(--sx-ink-2);
}
body .btn-primary:hover, body .btn-primary-nav:hover, body .btn-cta:hover, body .wks-submit:hover,
body .wks-form-submit:hover, body .wks-cta-btn:hover {
  background: var(--sx-rust-dark);
  border-color: var(--sx-rust-dark);
  color: var(--sx-paper-2);
  box-shadow: 3px 3px 0 var(--sx-ink-2);
  transform: none;
}
body .btn-primary:active, body .btn-primary-nav:active, body .btn-cta:active, body .wks-submit:active,
body .wks-form-submit:active, body .wks-cta-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--sx-ink-2);
}
body .btn-outline, body .btn-secondary, body .ws-platform, body .rs-btn-outline {
  background: var(--sx-paper-2);
  color: var(--sx-ink-2);
  border: 1.5px solid var(--sx-ink-2);
  box-shadow: none;
}
body .btn-outline:hover, body .btn-secondary:hover { background: var(--sx-paper-2); color: var(--sx-rust); border-color: var(--sx-rust); transform: none; }
body .btn-outline:active, body .btn-secondary:active { transform: translate(1px, 1px); }
body .ws-platform { border-radius: 9999px; }
body .btn-lang { border-radius: 9999px; border: 1px solid var(--sx-border); background: var(--sx-paper-2); color: var(--sx-ink-2); font-family: var(--sx-font-body); }

/* 5. Tekstlinks in kaarten zoals de app: roestbruin met inktlijn eronder. */
body .home-biz-card a, body .ws-position a, body .ws-start-note a, body .hero-secondary-link {
  color: var(--sx-rust);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-color: var(--sx-rust);
}

/* 6. Hoofdkaart op de homepage: de tekst van de hero staat, net als "Vanavond
   koken?" in de app, op een papieren kaart met inktrand en harde schaduw. */
body.page-home .ws-hero .container > div:first-child {
  background: var(--sx-paper-2);
  border: 1.5px solid var(--sx-ink-2);
  border-radius: var(--sx-radius-card);
  box-shadow: var(--sx-shadow-ink);
  padding: 28px 28px 26px;
}
body.page-home .ws-hero .ws-lead { max-width: none; }
body.page-home .ws-hero .hero-heritage { margin-bottom: 22px; }
body.page-home .ws-hero .ws-ctas { margin-bottom: 0; }
@media (max-width: 640px) { body.page-home .ws-hero .container > div:first-child { padding: 22px 18px 20px; } }

/* 7. Telefoonkaders: fotokaart in inktrand + harde schaduw (app, 9 sep), geen
   zachte slagschaduw, geen witte bezel. */
body .home-phone, body .home-how-shot, body .phone-mockup, body .ws-showcase-figure,
body .ws-showcase-figure.is-main, body .rs-report-cover {
  background: var(--sx-paper-2);
  border: 1.5px solid var(--sx-ink-2);
  border-radius: 22px;
  box-shadow: var(--sx-shadow-ink);
  padding: 8px;
  animation: none;
  transform: none;
}
body .home-phone img, body .home-how-shot img { border-radius: 16px; }
body .ws-showcase-figure { border-radius: 14px; padding: 0; overflow: hidden; }
body .ws-showcase-figure img { filter: sepia(.12) saturate(.95); }
body .home-phone-caption { font-family: var(--sx-font-body); color: var(--sx-brown-muted); }

/* 8. Sfeerfoto's: lichte sepia-toon zoals in de app (.sx-photo). */
body img[src*="/editorial/"], body .lifestyle-photo img, body .sx-photo { filter: sepia(.12) saturate(.95); }

/* 9. Overige kaarten: rustige inktlijn, geen slagschaduw of zweefeffect. */
body .ws-benefit, body .ws-steps li, body .home-biz-card, body .price-card, body .faq-item,
body .feature-card, body .widget-card, body .card, body .dev-card, body .ws-plans, body .ws-price-card,
body .winkels-card, body .plan-card, body .pricing-card, body .comparison-wrapper {
  background: var(--sx-paper-2);
  border: 1px solid var(--sx-border);
  border-radius: var(--sx-radius-card);
  box-shadow: none;
  transform: none;
}
body .feature-card:hover, body .price-card:hover, body .home-biz-card:hover { transform: none; box-shadow: none; border-color: var(--sx-stone); }
body .ws-price-card { border: 1.5px solid var(--sx-ink-2); box-shadow: var(--sx-shadow-ink); }
body .price-card-popular, body .price-card.featured { border: 1.5px solid var(--sx-ink-2); box-shadow: var(--sx-shadow-ink); }
body .ws-steps li::before, body .ws-showcase-steps li::before { background: var(--sx-rust); color: var(--sx-paper-2); }
body .ws-benefit-icon { background: var(--sx-paper); border: 1px solid var(--sx-border); border-radius: 50%; color: var(--sx-rust); }

/* 10. Invoervelden zoals de app: papier, zandrand, 10px, roestbruine focus. */
body input:not([type='checkbox']):not([type='radio']), body select, body textarea, body .wks-form-input {
  background: var(--sx-paper-2);
  border: 1px solid var(--sx-stone);
  border-radius: 10px;
  color: var(--sx-ink-2);
  font-family: var(--sx-font-body);
}
body input:focus, body select:focus, body textarea:focus, body .wks-form-input:focus {
  border-color: var(--sx-rust);
  outline: none;
  box-shadow: 0 0 0 3px rgba(122, 59, 46, .14);
}

/* 11. Navigatie: papier met inktlijn, actieve link roestbruin met lijn. */
body .nav, body header.site { background: rgba(239, 230, 214, .94); border-bottom: 1px solid var(--sx-border); box-shadow: none; }
body .nav.scrolled { background: rgba(239, 230, 214, .98); box-shadow: none; }
body .nav-link { font-family: var(--sx-font-body); color: var(--sx-ink-2); }
body .nav-link:hover { color: var(--sx-rust); }
body .nav-link[aria-current='page'], body .nav-link.is-active { color: var(--sx-rust); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }

/* 12. Voet: zelfde papier, rubriekkoppen in Lora zoals de app-secties. */
body .footer h4 { color: var(--sx-rust); font-family: var(--sx-font-body); letter-spacing: .08em; }
body .footer-tagline { font-family: var(--sx-font-brush); font-style: normal; color: var(--sx-rust); font-size: 1.1rem; }

/* 13. Developers-pagina: zelfde penseelregel (zonder pil en knipperende stip),
   stapnummers en tegels als de rest; taalknop als pil met inktlijn. */
body.page-developers .hero-badge, body .winkels-hero .hero-badge, body .wks-hero-badge, body .hero-badge { display: block; background: none; border: 0; padding: 0; margin: 0 0 10px; text-transform: none; letter-spacing: 0; font-size: 1.125rem; color: var(--sx-rust); }
body .hero-badge-dot { display: none; }
body.page-developers .hero::before { display: none; }
body .step-number { background: var(--sx-rust); color: var(--sx-paper-2); font-family: var(--sx-font-heading); box-shadow: none; }
body .step-card { background: var(--sx-paper-2); border: 1px solid var(--sx-border); border-radius: var(--sx-radius-card); }
body .feature-icon { color: var(--sx-rust); background: var(--sx-paper); border: 1px solid var(--sx-border); }
body .btn-lang { min-height: 40px; padding: 0 14px; }

/* 14. Lichter papier (Roger, 9 sep 2026: "de website is veel donkerder dan de app").
   Gemeten waren de kleuren gelijk (#EFE6D6 / #F8F2E6), maar in de app vult de
   lichte kaartkleur bijna het hele scherm en op de site juist het canvas.
   Daarom: canvas = app-kaartpapier #F8F2E6, kaarten = app-verhoogd papier
   #FBF7EE (--sx-surface-elevated in de app). Beide zijn app-tokens. */
:root {
  --sx-paper: #F8F2E6;
  --sx-paper-2: #FBF7EE;
  --sx-paper-3: #EFE6D6;
}
body .nav, body header.site { background: rgba(248, 242, 230, .94); }
body .nav.scrolled { background: rgba(248, 242, 230, .98); }