:root {
  --green-950: #103d2e;
  --green-900: #174b38;
  --green-800: #1f5a43;
  --green-700: #2f6c53;
  --green-100: #e9f0ec;
  --cream: #f5f1e8;
  --cream-2: #fbfaf6;
  --ink: #1c261f;
  --muted: #657169;
  --line: #dfe4df;
  --white: #ffffff;
  --shadow: 0 18px 45px rgba(20, 49, 36, .10);
  --radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.55;
}

h1, h2, h3, .brand {
  font-family: Georgia, "Times New Roman", serif;
}

a { color: inherit; }
.section-block { padding: 42px 0; }
.container { max-width: 1180px; }

.site-header {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(22, 75, 56, .08);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-950);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.32rem;
}
.brand-mark { width: 44px; display: inline-flex; }
.brand-mark svg { width: 100%; height: auto; }
.brand-light { font-weight: 500; }

.nav-link {
  color: #29372f;
  font-size: .95rem;
  font-weight: 550;
  padding: .55rem .7rem !important;
  position: relative;
}
.nav-link:hover, .nav-link.active { color: var(--green-900); }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: 2px;
  height: 2px;
  background: var(--green-900);
}

.btn-primary-green {
  background: var(--green-950);
  border: 1px solid var(--green-950);
  color: #fff;
  border-radius: 7px;
  font-weight: 650;
  padding: .78rem 1.05rem;
  box-shadow: 0 7px 18px rgba(16,61,46,.14);
}
.btn-primary-green:hover,
.btn-primary-green:focus {
  background: var(--green-800);
  border-color: var(--green-800);
  color: #fff;
}

.hero {
  min-height: 520px;
  position: relative;
  overflow: visible;
  background:
    linear-gradient(90deg, rgba(251,248,240,.94) 0%, rgba(251,248,240,.88) 24%, rgba(251,248,240,.58) 42%, rgba(251,248,240,.10) 62%),
    linear-gradient(0deg, rgba(17,41,31,.14), rgba(17,41,31,.14)),
    url("../images/hero/hero-campsite.png") center center / cover no-repeat;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,250,242,.22) 0%, rgba(255,250,242,0) 45%, rgba(16,61,46,.08) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding-top: 55px;
  padding-bottom: 32px;
}
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--green-900);
  margin-bottom: .6rem;
}
.hero h1 {
  color: var(--green-950);
  font-size: clamp(2.7rem, 5.3vw, 4.6rem);
  line-height: .98;
  letter-spacing: -.035em;
  max-width: 710px;
  margin-bottom: 1rem;
}
.hero-lead {
  max-width: 610px;
  font-size: 1.03rem;
  color: #33443b;
  margin-bottom: 1.45rem;
}

.advisor-card {
  max-width: 760px;
  padding: 16px;
  border-radius: 10px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(25,67,48,.12);
  box-shadow: var(--shadow);
}
.advisor-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}
.advisor-title { font-weight: 800; font-family: Georgia, serif; font-size: 1.06rem; }
.advisor-subtitle { color: var(--muted); font-size: .77rem; margin-top: 2px; }
.mini-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--green-700);
  border-radius: 50%;
  color: var(--green-900);
  margin-right: 4px;
}
.advisor-note { font-size: .75rem; color: var(--green-800); font-weight: 650; }
.form-label { font-size: .76rem; font-weight: 700; margin-bottom: 5px; }
.form-select, .form-control {
  min-height: 43px;
  font-size: .86rem;
  border-color: #d7ddd8;
  border-radius: 7px;
}
.advisor-button { min-height: 43px; white-space: nowrap; }
.advisor-result {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--green-100);
  color: var(--green-950);
  font-size: .88rem;
}

.trust-strip, .criteria-strip {
  background: #fff;
  border-bottom: 1px solid #e9ece8;
  border-top: 1px solid #e9ece8;
}
.trust-strip { padding: 17px 0; }
.trust-item, .criteria-item {
  display: flex;
  gap: 12px;
  align-items: center;
}
.trust-icon {
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  border: 1.5px solid var(--green-800);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--green-900);
  font-weight: 800;
}
.trust-item strong, .criteria-item strong {
  display: block;
  font-size: .84rem;
  color: var(--green-950);
}
.trust-item span, .criteria-item span:not(.criteria-symbol) {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.35;
}

.section-heading {
  margin-bottom: 20px;
}
.section-heading h2, .how-card h2 {
  color: var(--green-950);
  font-size: 1.65rem;
  font-weight: 700;
  margin: 0;
}
.section-heading-inline {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.small-link {
  font-size: .77rem;
  text-decoration: none;
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #3a4a40;
}
.small-link:hover { border-color: var(--green-700); color: var(--green-900); }

.category-card {
  display: block;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  transition: .18s ease;
}
.category-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(25,55,42,.08);
}
.category-photo {
  height: 118px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.category-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.18));
}
.category-photo::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:42%;
  background:linear-gradient(to top,rgba(13,47,35,.52),transparent);
}
.category-photo span {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.95);
  color: var(--green-900);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  font-size: 1rem;
  filter: none;
}
.photo-camping { background-image: url("../images/categories/camping.png"); }
.photo-backpack { background-image: url("../images/categories/backpacken.png"); }
.photo-side { background-image: url("../images/categories/zijslapers.png"); }
.photo-winter { background-image: url("../images/categories/winter.png"); }
.photo-light { background-image: url("../images/categories/lichtgewicht.png"); }
.photo-family { background-image: url("../images/categories/gezin.png"); }
.category-label {
  padding: 11px 8px;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
}

.product-card {
  position: relative;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 15px;
  box-shadow: 0 5px 20px rgba(23,60,44,.04);
}
.badge-pick {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  background: var(--cream);
  color: var(--green-950);
  padding: 5px 8px;
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 800;
}
.product-layout {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  min-height: 190px;
  align-items: center;
}
.product-visual {
  height: 165px;
  border-radius: 55% 45% 48% 52% / 8% 8% 92% 92%;
  display: grid;
  place-items: center;
  transform: rotate(5deg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 12px 30px rgba(0,0,0,.12);
}
.mat-green { background: linear-gradient(135deg,#6a7451,#a2ab76); }
.mat-blue { background: linear-gradient(135deg,#36566c,#66879a); }
.mat-dark { background: linear-gradient(135deg,#343938,#636867); }
.mat-shape {
  width: 72%;
  height: 86%;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,.16);
  background: repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 8px,rgba(0,0,0,.04) 8px 15px);
}
.mat-dotted {
  background:
    radial-gradient(circle, rgba(255,255,255,.18) 0 3px, transparent 4px) 0 0 / 20px 20px;
}
.product-info h3 { font-size: 1.02rem; margin-bottom: 3px; }
.product-info p { color: var(--muted); font-size: .74rem; margin-bottom: 12px; }
.product-info dl { margin:0; }
.product-info dl div { display:flex; justify-content:space-between; gap:10px; border-top:1px dashed #e3e7e4; padding:5px 0; }
.product-info dt { font-size:.73rem; font-weight:600; color:#56645c; }
.product-info dd { margin:0; font-size:.74rem; font-weight:800; }

.criteria-strip { padding: 23px 0; background: var(--cream-2); }
.criteria-symbol {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid !important;
  place-items: center;
  font-size: 1.65rem !important;
  color: var(--green-900) !important;
}

.how-card {
  border-radius: 10px;
  background: var(--cream-2);
  border: 1px solid #e8e3d8;
  padding: 19px 21px;
}
.how-card h2 { font-size: 1.35rem; margin-bottom: 18px; }
.step-card { display:flex; align-items:flex-start; gap:13px; }
.step-number {
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:50%;
  background:#e9e2d2;
  color:var(--green-950);
  display:grid;
  place-items:center;
  font-weight:800;
}
.step-card strong { display:block; font-size:.84rem; margin-bottom:3px; }
.step-card span:not(.step-number) { display:block; color:var(--muted); font-size:.72rem; }

.article-card {
  height: 100%;
  display: grid;
  grid-template-columns: 42% 58%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.article-image {
  min-height: 150px;
  display: grid;
  place-items: center;
  position: relative;
  color: transparent;
  font-size: 0;
  background-size: cover;
  background-position: center;
}
.article-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.18));
}
.article-side { background-image: url("../images/articles/zijslapers.png"); }
.article-compare { background-image: url("../images/articles/vergelijking.png"); }
.article-rvalue { background-image: url("../images/articles/r-waarde.png"); }
.article-content { padding: 16px; }
.article-content h3 { font-size: .92rem; margin-bottom: 8px; }
.article-content p { font-size: .72rem; color: var(--muted); margin-bottom: 13px; }
.article-content a { font-size:.73rem; font-weight:800; text-decoration:none; color:var(--green-900); }

.brand-strip {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  background: #fff;
}
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.brand-row::-webkit-scrollbar { display:none; }
.brand-row strong { font-family: Georgia,serif; color:var(--green-950); font-size: .95rem; }
.brand-row span { font-size:.72rem; letter-spacing:.07em; color:#414c45; font-weight:700; }

.site-footer {
  background: var(--green-950);
  color: rgba(255,255,255,.86);
  padding: 38px 0 18px;
}
.footer-brand { color:#fff; }
.site-footer p, .site-footer a { font-size:.72rem; }
.site-footer p { color:rgba(255,255,255,.73); }
.site-footer h4 { font-size:.78rem; color:#fff; font-weight:800; margin-bottom:12px; }
.site-footer a {
  display:block;
  text-decoration:none;
  color:rgba(255,255,255,.78);
  margin-bottom:6px;
}
.site-footer a:hover { color:#fff; }
.newsletter-form { display:flex; gap:6px; }
.newsletter-form .form-control { min-width:0; min-height:39px; }
.newsletter-form .btn { font-size:.72rem; font-weight:700; }
.site-footer small { display:block; margin-top:7px; color:#d9e3dc; font-size:.64rem; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:28px;
  padding-top:15px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:.65rem;
  color:rgba(255,255,255,.55);
}

@media (max-width: 991.98px) {
  .hero { min-height: auto; }
  .hero-content { padding-top: 38px; padding-bottom: 28px; }
  .hero h1 { font-size: clamp(2.6rem, 8vw, 4rem); }
  .advisor-card { max-width: 100%; }
  .product-layout { grid-template-columns: 130px 1fr; }
  .site-header .navbar-collapse {
    padding: 12px 0 8px;
    border-top: 1px solid #eef1ee;
    margin-top: 8px;
  }
  .nav-link.active::after { display:none; }
}

@media (max-width: 767.98px) {
  .section-block { padding: 32px 0; }
  .hero-overlay { background: linear-gradient(90deg, rgba(255,250,242,.9) 0%, rgba(255,250,242,.76) 72%, rgba(255,255,255,.26)); }
  .hero h1 { font-size: 2.85rem; }
  .advisor-heading { align-items:flex-start; flex-direction:column; }
  .advisor-note { display:none; }
  .trust-item { align-items:flex-start; }
  .trust-item span { display:none; }
  .section-heading-inline { align-items:flex-start; }
  .small-link { font-size:.7rem; }
  .category-photo { height: 104px; }
  .product-layout { grid-template-columns: 105px 1fr; }
  .product-visual { height:145px; }
  .article-card { grid-template-columns: 36% 64%; }
  .footer-bottom { flex-direction:column; }
}

@media (max-width: 575.98px) {
  .hero h1 { font-size: 2.45rem; }
  .hero-lead { font-size:.95rem; }
  .section-heading h2 { font-size:1.45rem; }
  .trust-icon { width:34px; height:34px; }
  .product-layout { grid-template-columns: 92px 1fr; }
  .product-visual { height:132px; }
  .category-label { min-height: 56px; display:grid; place-items:center; }
}


/* v0.5 - content pages and product architecture */
.subpage-hero {
  position: relative;
  padding: 68px 0 74px;
  min-height: 430px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.subpage-hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(251,248,240,.96) 0%,rgba(251,248,240,.88) 38%,rgba(251,248,240,.28) 68%,rgba(16,61,46,.10) 100%); }
.subpage-hero-best { background-image:url("../images/hero/hero-campsite.png"); }
.subpage-hero-rvalue { background-image:url("../images/categories/winter.png"); background-position:center 58%; }
.subpage-hero h1 { color:var(--green-950); font-size:clamp(2.5rem,5vw,4.35rem); line-height:1.02; letter-spacing:-.035em; margin:.25rem 0 1rem; }
.subpage-hero p { max-width:680px; font-size:1.05rem; color:#34463b; }
.breadcrumb-sm { display:flex; gap:8px; align-items:center; margin-bottom:20px; font-size:.76rem; color:#5e6b63; }
.breadcrumb-sm a { text-decoration:none; font-weight:700; color:var(--green-900); }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.btn-soft { background:rgba(255,255,255,.86); border:1px solid rgba(16,61,46,.18); color:var(--green-950); border-radius:7px; font-weight:700; padding:.78rem 1.05rem; }
.btn-soft:hover { background:#fff; color:var(--green-900); border-color:var(--green-700); }
.section-soft { background:var(--cream-2); border-top:1px solid #eee9df; border-bottom:1px solid #eee9df; }
.section-kicker { display:inline-block; margin-bottom:7px; color:var(--green-800); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:800; }
.section-intro { max-width:760px; color:var(--muted); margin:9px 0 0; }
.comparison-placeholder { display:flex; gap:22px; align-items:center; padding:26px; border:1px dashed #aebbb3; border-radius:12px; background:#fff; }
.comparison-placeholder-icon { flex:0 0 auto; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:var(--green-100); color:var(--green-900); font-size:1.7rem; }
.comparison-placeholder h3 { font-size:1.2rem; margin:0 0 5px; }
.comparison-placeholder p { margin:0; color:var(--muted); }
.factor-card { height:100%; padding:22px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.factor-card > span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--green-100); color:var(--green-900); font-size:1.25rem; margin-bottom:14px; }
.factor-card h3 { font-size:1.04rem; margin-bottom:6px; }
.factor-card p { margin:0; color:var(--muted); font-size:.88rem; }
.content-prose { font-size:1rem; }
.content-prose h2 { color:var(--green-950); margin:0 0 15px; font-size:1.8rem; }
.content-prose h3 { color:var(--green-950); margin:28px 0 10px; font-size:1.25rem; }
.content-prose p, .content-prose li { color:#46544b; }
.check-list { padding-left:0; list-style:none; }
.check-list li { padding:5px 0 5px 28px; position:relative; }
.check-list li::before { content:"✓"; position:absolute; left:0; color:var(--green-800); font-weight:900; }
.side-cta { padding:24px; background:var(--cream-2); border:1px solid #e7e0d3; border-radius:12px; }
.side-cta h3 { font-size:1.35rem; color:var(--green-950); }
.side-cta p { color:var(--muted); }
.r-number-card { height:100%; min-height:230px; padding:30px; border-radius:14px; background:var(--green-950); color:#fff; display:flex; flex-direction:column; justify-content:center; }
.r-number-card > span { font-family:Georgia,serif; font-size:5.5rem; line-height:.8; opacity:.96; }
.r-number-card strong { font-size:1.2rem; margin:18px 0 8px; }
.r-number-card small { color:rgba(255,255,255,.72); }
.guide-table { background:#fff; border:1px solid var(--line); }
.guide-table th { background:var(--green-950); color:#fff; border:0; font-size:.82rem; }
.guide-table td { vertical-align:middle; font-size:.88rem; color:#46544b; }
.calculator-card { height:100%; padding:26px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 8px 30px rgba(23,60,44,.05); }
.calculator-card h2 { color:var(--green-950); font-size:1.7rem; }
.faq-item { border-top:1px solid var(--line); padding:14px 0; }
.faq-item:last-child { border-bottom:1px solid var(--line); }
.faq-item summary { cursor:pointer; color:var(--green-950); font-weight:800; }
.faq-item p { margin:10px 0 0; }
@media (max-width: 767.98px) {
  .subpage-hero { min-height:auto; padding:48px 0; }
  .subpage-hero::before { background:linear-gradient(90deg,rgba(251,248,240,.96),rgba(251,248,240,.82) 75%,rgba(251,248,240,.56)); }
  .subpage-hero h1 { font-size:2.65rem; }
  .comparison-placeholder { align-items:flex-start; }
}


/* v0.6 - dual choice helper */
.advisor-advanced-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:13px;
  padding-top:11px;
  border-top:1px solid #e8ece9;
  color:var(--muted);
  font-size:.74rem;
}
.advisor-advanced-link a {
  color:var(--green-900);
  text-decoration:none;
  font-weight:800;
  white-space:nowrap;
}
.advisor-result-actions { margin-top:9px; }

.choice-hero {
  background-image:url("../images/hero/hero-campsite.png");
  background-position:center 58%;
}
.choice-start { background:#fff; }
.choice-mode-card {
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  padding:28px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  transition:.2s ease;
  box-shadow:0 8px 28px rgba(23,60,44,.05);
}
.choice-mode-card:hover {
  transform:translateY(-3px);
  border-color:#a9b9af;
  box-shadow:0 16px 38px rgba(23,60,44,.10);
}
.choice-mode-card-primary {
  background:linear-gradient(145deg,#f8faf8,#eef4f0);
  border-color:#cfdcd4;
}
.choice-time {
  position:absolute;
  top:19px;
  right:20px;
  color:var(--muted);
  font-size:.7rem;
  font-weight:700;
}
.choice-icon {
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--green-100);
  color:var(--green-900);
  font-size:1.25rem;
  font-weight:900;
  margin-bottom:18px;
}
.choice-mode-card > strong {
  font-family:Georgia,serif;
  color:var(--green-950);
  font-size:1.65rem;
  margin-bottom:2px;
}
.choice-mode-card > span:not(.choice-time):not(.choice-icon) {
  color:var(--green-800);
  font-size:.82rem;
  font-weight:800;
}
.choice-mode-card p { margin:12px 0 19px; color:var(--muted); max-width:480px; }
.choice-mode-card b { color:var(--green-900); font-size:.84rem; margin-top:auto; }
.choice-reassurance { text-align:center; color:var(--muted); font-size:.78rem; margin:20px 0 0; }
.choice-form-wrap { max-width:1000px; }
.choice-panel-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px; }
.choice-panel-header h2 { color:var(--green-950); margin:0; }
.choice-panel-header p { color:var(--muted); margin:6px 0 0; }
.choice-question {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:18px;
  padding:26px 0;
  border-top:1px solid #e4e8e5;
}
.choice-question:first-of-type { border-top:0; padding-top:0; }
.choice-question-number {
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--green-950);
  color:#fff;
  font-weight:900;
}
.choice-question h3 { font-size:1.18rem; color:var(--green-950); margin:5px 0 14px; }
.answer-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.answer-grid-3 { grid-template-columns:repeat(3,1fr); }
.answer-grid-2 { grid-template-columns:repeat(2,1fr); }
.answer-card { display:block; cursor:pointer; height:100%; }
.answer-card input { position:absolute; opacity:0; pointer-events:none; }
.answer-card span {
  height:100%;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:14px;
  border:1px solid #d9dfdb;
  border-radius:9px;
  background:#fff;
  transition:.16s ease;
}
.answer-card b { font-size:.83rem; color:var(--green-950); }
.answer-card small { font-size:.69rem; color:var(--muted); }
.answer-card:hover span { border-color:#97aa9e; }
.answer-card input:checked + span {
  border-color:var(--green-800);
  background:var(--green-100);
  box-shadow:inset 0 0 0 1px var(--green-800);
}
.choice-submit-row { display:flex; justify-content:flex-end; padding-top:20px; }
.extended-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:17px; }
.extended-field { padding:17px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.extended-field label { display:flex; justify-content:space-between; gap:10px; font-size:.78rem; font-weight:800; margin-bottom:7px; color:var(--green-950); }
.extended-field label a { font-size:.68rem; color:var(--green-800); text-decoration:none; }
.choice-result-card { max-width:960px; margin:auto; padding:30px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 12px 38px rgba(23,60,44,.08); }
.choice-result-card h2 { color:var(--green-950); margin:0 0 7px; }
.choice-result-card > div:first-child p { color:var(--muted); }
.profile-specs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:24px 0; }
.profile-spec { padding:12px 14px; border-radius:8px; background:var(--cream-2); border:1px solid #eae5dc; }
.profile-spec span { display:block; font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-weight:800; }
.profile-spec strong { display:block; margin-top:3px; font-size:.82rem; color:var(--green-950); }
.result-future { margin-top:24px; padding:20px; background:var(--green-100); border-radius:10px; }
.result-future > strong { color:var(--green-950); }
.result-future p { color:#48584e; margin:6px 0 15px; font-size:.88rem; }

@media (max-width: 767.98px) {
  .advisor-advanced-link { align-items:flex-start; flex-direction:column; }
  .choice-panel-header { flex-direction:column; }
  .choice-question { grid-template-columns:1fr; gap:7px; }
  .answer-grid, .answer-grid-3, .answer-grid-2 { grid-template-columns:1fr 1fr; }
  .extended-grid { grid-template-columns:1fr; }
  .profile-specs { grid-template-columns:1fr 1fr; }
}
@media (max-width: 480px) {
  .answer-grid, .answer-grid-3, .answer-grid-2 { grid-template-columns:1fr; }
  .profile-specs { grid-template-columns:1fr; }
}


/* v0.7 - real product catalogue */
.product-catalog-hero {
  background-image:
    linear-gradient(90deg,rgba(251,248,240,.06),rgba(251,248,240,.02)),
    url("../images/hero/hero-campsite.png");
  background-position:center 58%;
}
.catalog-notice {
  padding:15px 18px;
  margin-bottom:20px;
  border:1px solid #dce5df;
  background:var(--green-100);
  border-radius:9px;
  font-size:.84rem;
  color:#405148;
}
.brand-filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.brand-filter {
  border:1px solid var(--line); background:#fff; color:#47564d;
  border-radius:999px; padding:7px 12px; font-size:.75rem; font-weight:700;
}
.brand-filter:hover, .brand-filter.active { background:var(--green-950); border-color:var(--green-950); color:#fff; }
.real-products-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.real-product-card {
  display:grid; grid-template-columns:115px 1fr; min-height:250px;
  border:1px solid var(--line); border-radius:12px; background:#fff; overflow:hidden;
  box-shadow:0 6px 22px rgba(23,60,44,.05);
}
.real-product-visual { position:relative; display:grid; place-items:center; min-height:100%; }
.real-product-visual span {
  width:52%; height:72%; border-radius:45% 45% 16% 16%/10% 10% 15% 15%;
  transform:rotate(6deg);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.17) 0 7px,rgba(0,0,0,.04) 7px 14px);
  box-shadow:0 13px 25px rgba(0,0,0,.16);
}
.mat-tone-1 { background:linear-gradient(145deg,#d8dec4,#74805b); }
.mat-tone-2 { background:linear-gradient(145deg,#c8d5d8,#526d78); }
.mat-tone-3 { background:linear-gradient(145deg,#ded2bb,#8a7354); }
.mat-tone-4 { background:linear-gradient(145deg,#d2d8d3,#5a6760); }
.real-product-body { padding:16px 16px 14px; display:flex; flex-direction:column; }
.real-product-brand { font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--green-800); font-weight:900; }
.real-product-body h3 { font-size:1.05rem; margin:2px 0 1px; color:var(--green-950); }
.real-product-variant { font-size:.69rem; color:var(--muted); margin-bottom:10px; }
.real-product-spec-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.real-product-spec-grid div { padding:6px 7px; background:var(--cream-2); border-radius:6px; }
.real-product-spec-grid span { display:block; font-size:.58rem; color:var(--muted); text-transform:uppercase; font-weight:800; }
.real-product-spec-grid strong { display:block; font-size:.76rem; color:var(--green-950); }
.real-product-body p { font-size:.68rem; color:var(--muted); margin:10px 0; }
.real-product-bottom { margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.real-product-bottom a { text-decoration:none; color:var(--green-900); font-size:.7rem; font-weight:800; }
.verified-label { font-size:.62rem; color:var(--green-800); font-weight:800; }
@media(max-width:991.98px){ .real-products-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:680px){ .real-products-grid{grid-template-columns:1fr;} .real-product-card{grid-template-columns:100px 1fr;} }


/* v0.8 - real product matching */
.choice-result-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.matching-explanation {
  margin:20px 0;
  padding:14px 16px;
  background:#f7f5ef;
  border:1px solid #e7e2d8;
  border-radius:9px;
  font-size:.78rem;
  color:#526057;
}
.matching-explanation span { color:#795d2d; }
.product-matches {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:18px;
}
.match-card {
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:0 7px 24px rgba(23,60,44,.06);
}
.match-card-best { border-color:#93ad9e; box-shadow:0 10px 28px rgba(23,75,56,.11); }
.match-rank {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:var(--cream-2);
  border-bottom:1px solid #ebe7df;
}
.match-card-best .match-rank { background:var(--green-100); }
.match-rank > span { flex:1; color:var(--green-950); font-size:.7rem; font-weight:900; }
.match-rank b { color:var(--green-950); font-size:.9rem; }
.match-rank small { display:none; }
.match-main { padding:15px; }
.match-brand {
  font-size:.61rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--green-800);
  font-weight:900;
}
.match-main h3 { color:var(--green-950); font-size:1.08rem; margin:2px 0 0; }
.match-variant { color:var(--muted); font-size:.68rem; margin-bottom:10px; }
.match-specs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  margin-bottom:13px;
}
.match-specs span {
  padding:7px 8px;
  border-radius:6px;
  background:#f7f8f6;
  border:1px solid #edf0ed;
}
.match-specs small { display:block; color:var(--muted); font-size:.56rem; text-transform:uppercase; font-weight:800; }
.match-specs b { display:block; color:var(--green-950); font-size:.76rem; }
.match-why, .match-tradeoff {
  padding-top:11px;
  border-top:1px solid #ecefec;
}
.match-why > strong, .match-tradeoff > strong { font-size:.72rem; color:var(--green-950); }
.match-why ul, .match-tradeoff ul {
  margin:6px 0 10px;
  padding-left:17px;
  color:#526057;
  font-size:.68rem;
}
.match-why li, .match-tradeoff li { margin-bottom:4px; }
.match-tradeoff { margin-top:8px; }
.match-tradeoff > strong { color:#7a5a2a; }
.match-links {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:12px;
}
.match-links a { color:var(--green-900); text-decoration:none; font-size:.68rem; font-weight:800; }
.excluded-details {
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}
.excluded-details summary {
  padding:14px 16px;
  cursor:pointer;
  color:var(--green-950);
  font-size:.8rem;
  font-weight:900;
}
.excluded-inner {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:24px;
  padding:0 16px 17px;
  border-top:1px solid #eef0ee;
}
.excluded-inner h4 { margin:14px 0 8px; font-size:.78rem; color:var(--green-950); }
.excluded-inner ul { margin:0; padding-left:17px; font-size:.7rem; color:var(--muted); }
.excluded-example {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  border-bottom:1px dashed #e3e7e4;
  font-size:.67rem;
}
.excluded-example b { color:#46554c; }
.excluded-example span { color:var(--muted); text-align:right; }
.result-method-note {
  margin-top:20px;
  padding:18px;
  border-radius:10px;
  background:var(--green-950);
  color:#fff;
}
.result-method-note strong { font-size:.82rem; }
.result-method-note p { margin:5px 0 0; color:rgba(255,255,255,.76); font-size:.72rem; }
.no-match-card {
  grid-column:1/-1;
  padding:28px;
  text-align:center;
  border:1px dashed #aebbb3;
  border-radius:12px;
  background:var(--cream-2);
}
.no-match-card h3 { color:var(--green-950); }
.home-match-list { margin-top:10px; border-top:1px solid #dce5df; }
.home-match-row {
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid #dce5df;
  text-decoration:none;
  color:inherit;
}
.home-match-row span:first-child { min-width:0; }
.home-match-row b { display:block; color:var(--green-950); font-size:.75rem; }
.home-match-row small { display:block; color:var(--muted); font-size:.63rem; }
.home-match-score {
  flex:0 0 auto;
  font-size:.69rem;
  font-weight:900;
  color:var(--green-900);
}
.home-match-note { margin-top:8px; color:var(--muted); font-size:.64rem; }
.advisor-result-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
@media(max-width:991.98px) {
  .product-matches { grid-template-columns:1fr; }
  .match-card { display:grid; grid-template-columns:180px 1fr; }
  .match-rank { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; border-bottom:0; border-right:1px solid #ebe7df; }
  .match-rank b { font-size:1.3rem; }
  .match-rank small { display:block; color:var(--muted); font-size:.6rem; }
}
@media(max-width:650px) {
  .choice-result-heading { flex-direction:column; }
  .match-card { display:block; }
  .match-rank { flex-direction:row; align-items:center; border-right:0; border-bottom:1px solid #ebe7df; }
  .match-rank b { font-size:.9rem; }
  .match-rank small { display:none; }
  .excluded-inner { grid-template-columns:1fr; gap:0; }
}


/* v0.9 - Bever-first catalogue */
.real-product-topline {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.bever-badge {
  flex:0 0 auto;
  padding:3px 6px;
  border-radius:999px;
  background:#eef4f0;
  color:var(--green-900);
  font-size:.54rem;
  font-weight:900;
  white-space:nowrap;
}