:root{--paper:#fff8ec;--paper-raised:#ffffff;--highlight:#fff0b3;--line:#e8dcc4;--ink:#1c1a33;--ink-muted:#4d4866;--on-ink:#fff8ec;--tub-sky:#5cc8f5;--tub-tangerine:#ff9f43;--tub-sunflower:#ffd43b;--tub-watermelon:#ff8fab;--tub-grape:#b9a3ff;--tub-avocado:#a3d25a;--tub-coconut:#f5e8d0;--tub-cherry:#ff7062;--tub-acai:#de8fcb;--tub-aloe:#7ee2c4;--font-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;--font-body:"Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-pill:999px;--shadow-chunky:0 4px 0 #1c1a33;--shadow-pressed:0 1px 0 #1c1a33;--stroke-chunky:2.5px;--stroke-icon:2px}
/* Which Tub? — component styles. Every value comes from tokens.css; classes are prefixed wt-. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 28px; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); margin: 0; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.wt-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wt-icon { width: 24px; height: 24px; flex: none; display: inline-block; vertical-align: middle; }
.wt-icon--sm { width: 18px; height: 18px; }
.wt-icon--lg { width: 32px; height: 32px; }
.wt-eyebrow { font-family: var(--font-body); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.wt-muted { color: var(--ink-muted); }
.wt-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-4); }

/* ---------- Lockup ---------- */
.wt-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.wt-lockup__text { display: flex; flex-direction: column; }
.wt-lockup__name { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 28px; letter-spacing: -.02em; white-space: nowrap; }
.wt-lockup__tag { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--ink-muted); }
.wt-lockup--lg .wt-lockup__name { font-size: 48px; line-height: 50px; }
.wt-lockup--lg .wt-lockup__tag { font-size: 16px; line-height: 22px; }
.wt-lockup--lg { gap: 16px; }
.wt-lockup--on-ink, .wt-lockup--on-ink .wt-lockup__tag { color: var(--on-ink); }

/* ---------- Buttons ---------- */
.wt-btn { --btn-bg: var(--paper-raised); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 24px; border: var(--stroke-chunky) solid var(--ink); border-radius: var(--radius-pill); background: var(--btn-bg); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 20px; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-chunky); transition: transform .08s, box-shadow .08s; white-space: nowrap; }
.wt-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
.wt-btn:active, .wt-btn.is-pressed { transform: translateY(3px); box-shadow: var(--shadow-pressed); }
.wt-btn--primary { --btn-bg: var(--tub-sunflower); }
.wt-btn--shop { --btn-bg: var(--tub-tangerine); }
.wt-btn--ink { --btn-bg: var(--ink); color: var(--on-ink); }
.wt-btn--quiet { box-shadow: none; }
.wt-btn--quiet:hover { box-shadow: none; transform: none; background: var(--highlight); }
.wt-btn--quiz { --btn-bg: var(--tub-sunflower); min-height: 68px; padding: 16px 28px; font-size: 22px; line-height: 26px; }
.wt-btn--sm { min-height: 44px; padding: 8px 16px; font-size: 16px; }
.wt-btn--block { display: flex; width: 100%; }
.wt-btn[disabled], .wt-btn.is-disabled { background: var(--paper); color: var(--ink-muted); border-style: dashed; box-shadow: none; cursor: not-allowed; transform: none; }
.wt-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 4px; text-decoration-color: var(--tub-tangerine); }
.wt-link:hover { text-decoration-color: var(--ink); }

/* ---------- Chips: hair types ---------- */
.wt-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 30px; padding: 0 10px; border: 2px solid var(--ink); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1; color: var(--ink); background: var(--paper-raised); white-space: nowrap; }
.wt-chip--t1 { background: var(--tub-sky); }
.wt-chip--t2 { background: var(--tub-aloe); }
.wt-chip--t3 { background: var(--tub-tangerine); }
.wt-chip--t4 { background: var(--tub-acai); }
.wt-chip--lg { height: 40px; min-width: 52px; font-size: 18px; }
.wt-range { display: inline-flex; align-items: center; gap: 6px; }
.wt-range__to { font-size: 14px; color: var(--ink-muted); font-weight: 700; }

/* ---------- Tags: concerns ---------- */
.wt-tag { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 9px; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--paper-raised); font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1; color: var(--ink); white-space: nowrap; }
.wt-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }

/* ---------- Care step: Hydration / Nourishment / Repair ---------- */
.wt-step { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 3px; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--paper-raised); font-family: var(--font-display); font-weight: 600; font-size: 16px; white-space: nowrap; }
.wt-step__letter { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); font-weight: 700; font-size: 14px; line-height: 1; }
.wt-step--h .wt-step__letter { background: var(--tub-sky); }
.wt-step--n .wt-step__letter { background: var(--tub-sunflower); }
.wt-step--r .wt-step__letter { background: var(--tub-cherry); }
.wt-step--compact { padding: 0; border: none; background: none; height: auto; }
.wt-step--compact .wt-step__letter { width: 34px; height: 34px; font-size: 16px; border-width: 2.5px; }

/* ---------- Use icons ---------- */
.wt-uses { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.wt-use { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px dashed var(--line); color: var(--line); }
.wt-use.is-on { background: var(--tub-coconut); border: 2px solid var(--ink); color: var(--ink); }
.wt-uses--labelled { flex-wrap: wrap; gap: 10px 14px; }
.wt-uses--labelled .wt-use { width: auto; height: auto; border: none; background: none; display: inline-flex; gap: 6px; align-items: center; font-size: 15px; font-weight: 700; color: var(--ink-muted); }
.wt-uses--labelled .wt-use .wt-icon { width: 34px; height: 34px; padding: 5px; border-radius: 50%; border: 2px dashed var(--line); color: var(--line); }
.wt-uses--labelled .wt-use:not(.is-on) .wt-use__label { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.wt-uses--labelled .wt-use.is-on { color: var(--ink); }
.wt-uses--labelled .wt-use.is-on .wt-icon { background: var(--tub-coconut); border: 2px solid var(--ink); color: var(--ink); }

/* ---------- Filter chips (toggle) ---------- */
.wt-filters { display: flex; gap: var(--space-2); overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.wt-filter { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--paper-raised); color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 16px; cursor: pointer; white-space: nowrap; flex: none; }
.wt-filter .wt-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); }
.wt-filter[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.wt-filter[aria-pressed="true"] .wt-dot { border-color: var(--on-ink); }
.wt-filter__check { display: none; }
.wt-filter[aria-pressed="true"] .wt-filter__check { display: inline-block; }

/* ---------- Swatch ---------- */
.wt-swatch { width: 44px; height: 44px; border-radius: var(--radius-sm); border: 2px solid var(--ink); flex: none; }
.wt-jar { display: block; flex: none; }

/* ---------- Tub card (mobile chart) ---------- */
.wt-card { background: var(--paper-raised); border: var(--stroke-chunky) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-chunky); overflow: hidden; }
.wt-card__top { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--tub, var(--tub-coconut)); border-bottom: var(--stroke-chunky) solid var(--ink); }
.wt-card__name { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 26px; }
.wt-card__old { font-size: 15px; line-height: 20px; color: var(--ink); }
.wt-card__body { display: grid; gap: var(--space-3); padding: var(--space-4); }
.wt-card__row { display: grid; gap: 6px; }
.wt-card__label { font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.wt-card__foot { padding: 0 var(--space-4) var(--space-4); }

/* ---------- Comparison table (desktop chart) ---------- */
.wt-table-wrap { border: var(--stroke-chunky) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-chunky); overflow: hidden; background: var(--paper-raised); }
.wt-table { width: 100%; border-collapse: collapse; }
.wt-table caption { text-align: left; }
.wt-table th { background: var(--ink); color: var(--on-ink); font-family: var(--font-display); font-weight: 600; font-size: 16px; text-align: left; padding: 14px 16px; white-space: nowrap; }
.wt-table td { padding: 14px 16px; border-top: 2px solid var(--line); vertical-align: middle; }
.wt-table tbody tr:hover td { background: var(--paper); }
.wt-table__tub { display: flex; align-items: center; gap: 14px; }
.wt-table__name { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 24px; }
.wt-table__old { font-size: 15px; line-height: 20px; color: var(--ink-muted); }

/* ---------- Answer box ---------- */
.wt-answer { background: var(--highlight); border: var(--stroke-chunky) solid var(--ink); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-6) var(--space-6); box-shadow: var(--shadow-chunky); }
.wt-answer__label { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 15px; background: var(--ink); color: var(--on-ink); border-radius: var(--radius-pill); padding: 4px 12px 4px 8px; margin-bottom: var(--space-3); }
.wt-answer p { font-size: 20px; line-height: 30px; }
.wt-answer strong { font-weight: 700; }

/* ---------- Quiz ---------- */
.wt-progress { height: 14px; border: 2px solid var(--ink); border-radius: var(--radius-pill); background: var(--paper-raised); overflow: hidden; }
.wt-progress__fill { height: 100%; background: var(--tub-sunflower); border-right: 2px solid var(--ink); border-radius: var(--radius-pill); }
.wt-progress-row { display: flex; align-items: center; gap: var(--space-3); }
.wt-progress-row .wt-progress { flex: 1; }
.wt-progress-row__count { font-family: var(--font-display); font-weight: 600; font-size: 15px; white-space: nowrap; }
.wt-option { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 64px; padding: 12px 16px; border: var(--stroke-chunky) solid var(--ink); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink); text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 24px; cursor: pointer; }
.wt-option__sub { display: block; font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 20px; color: var(--ink-muted); margin-top: 2px; }
.wt-option__text { flex: 1; }
.wt-option__tick { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); display: grid; place-items: center; flex: none; background: var(--paper-raised); }
.wt-option__tick .wt-icon { width: 18px; height: 18px; visibility: hidden; }
.wt-option[aria-checked="true"], .wt-option.is-selected { background: var(--tub-sunflower); box-shadow: var(--shadow-chunky); }
.wt-option[aria-checked="true"] .wt-option__tick, .wt-option.is-selected .wt-option__tick { background: var(--ink); color: var(--on-ink); }
.wt-option[aria-checked="true"] .wt-option__tick .wt-icon, .wt-option.is-selected .wt-option__tick .wt-icon { visibility: visible; }
.wt-option[aria-checked="true"] .wt-option__sub, .wt-option.is-selected .wt-option__sub { color: var(--ink); }
.wt-options { display: grid; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.wt-curls { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.wt-curl { display: grid; justify-items: center; gap: 2px; padding: 8px 4px 6px; border: 2px solid var(--ink); border-radius: var(--radius-md); background: var(--paper-raised); font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); cursor: pointer; }
.wt-curl__art { width: 26px; height: 46px; }
.wt-curl.is-selected { background: var(--tub-sunflower); border-width: var(--stroke-chunky); box-shadow: var(--shadow-chunky); }
.wt-helper { border: 2px dashed var(--ink); border-radius: var(--radius-md); background: var(--paper-raised); padding: var(--space-3) var(--space-4); }
.wt-helper__head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 18px; }

/* ---------- FAQ ---------- */
.wt-faq { display: grid; gap: var(--space-3); }
.wt-faq details { border: 2px solid var(--ink); border-radius: var(--radius-md); background: var(--paper-raised); }
.wt-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 24px; }
.wt-faq summary::-webkit-details-marker { display: none; }
.wt-faq summary .wt-icon { transition: transform .15s; }
.wt-faq details[open] summary .wt-icon { transform: rotate(180deg); }
.wt-faq details > div { padding: 0 16px 16px; }

/* ---------- Disclaimer / footer ---------- */
.wt-footer { background: var(--ink); color: var(--on-ink); padding: var(--space-8) var(--space-4); }
.wt-footer a { color: var(--on-ink); }
.wt-disclaimer { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 22px; font-weight: 700; }
.wt-disclaimer .wt-icon { margin-top: -1px; }
.wt-disclaimer--light { color: var(--ink); background: var(--paper-raised); border: 2px solid var(--ink); border-radius: var(--radius-md); padding: 12px 14px; }

/* ---------- Site header ---------- */
.wt-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: var(--stroke-chunky) solid var(--ink); background: var(--paper); }
.wt-nav { display: flex; gap: var(--space-6); align-items: center; }
.wt-nav a { font-family: var(--font-display); font-weight: 600; font-size: 17px; text-decoration: none; }
.wt-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--tub-tangerine); }
.wt-iconbtn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper-raised); color: var(--ink); cursor: pointer; }

/* ---------- Print ---------- */
@media print {
  @page { size: auto; margin: 12mm; }
  body { background: #fff; }
  .wt-btn, .wt-header nav, .wt-filters { display: none !important; }
  .wt-card, .wt-table-wrap, .wt-answer { box-shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.wt-card__pair { display: grid; grid-template-columns: auto auto; justify-content: start; gap: var(--space-6); }

/* Brazilian Conditioner Guide: page layouts on top of the Which Tub? components. Prefix bcg-. */
html { scroll-behavior: smooth; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
.bcg-skip { position: absolute; left: -9999px; top: 0; z-index: 10; background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: 0 0 var(--radius-md) 0; font-family: var(--font-display); font-weight: 600; }
.bcg-skip:focus { left: 0; }
.bcg-small { font-size: 15px; line-height: 22px; }
.bcg-note { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.bcg-lead { font-size: 20px; line-height: 30px; max-width: 760px; }
.wt-footer .wt-icon { color: var(--on-ink); }

/* Header: the name is long, so it wraps on phones and the nav drops to its own row. */
.bcg-header { display: block; padding: 10px var(--space-4); }
.bcg-header__in { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.bcg-header .wt-lockup__name { font-size: 22px; line-height: 24px; white-space: normal; }
.bcg-nav { gap: 6px 18px; flex-wrap: wrap; }
@media (max-width: 759px) { .bcg-wide { display: none; } }
@media (min-width: 760px) { .bcg-narrow { display: none; } }
.bcg-nav a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font-size: 16px; }
@media (min-width: 760px) { .bcg-header .wt-lockup__name { font-size: 26px; line-height: 28px; white-space: nowrap; } .bcg-nav a { font-size: 17px; } }

/* Footer */
.bcg-footer { max-width: 1200px; margin: 0 auto; display: grid; gap: 20px; }
.bcg-footer__links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.bcg-footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-display); font-weight: 600; font-size: 17px; text-decoration: none; }
.bcg-footer__links a:hover { text-decoration: underline; }
.wt-footer .wt-lockup__name { white-space: normal; font-size: 26px; }

/* Home hero */
.bcg-hero { display: grid; gap: var(--space-4); padding-top: var(--space-6); padding-bottom: var(--space-8); }
.bcg-hero__copy { display: grid; gap: var(--space-4); align-content: start; }
.bcg-display { font-size: 44px; line-height: 47px; font-weight: 800; letter-spacing: -.015em; }
.bcg-ctas { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.bcg-ctas .wt-btn--quiz { white-space: normal; text-align: center; }
.bcg-hero__art { display: flex; justify-content: center; }
.bcg-hero__art svg { width: 300px; height: auto; }
@media (max-width: 340px) { .bcg-hero__art { display: none; } }
@media (min-width: 960px) {
  .wt-wrap { padding: 0 40px; }
  .bcg-hero { grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; padding-top: var(--space-12); padding-bottom: var(--space-12); }
  .bcg-display { font-size: 64px; line-height: 66px; letter-spacing: -.02em; }
  .bcg-hero__art svg { width: 520px; }
}
@media (max-width: 959px) { .bcg-ctas .wt-btn--quiz { width: 100%; } }

/* Chart */
.bcg-chart { display: grid; gap: var(--space-4); padding-bottom: var(--space-8); }
.bcg-chart h2, .bcg-section h2 { font-size: 30px; line-height: 34px; }
.bcg-chart__head { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: flex-end; }
.bcg-chart__actions { display: flex; gap: 8px; }
.bcg-legend { display: grid; gap: 8px; padding: var(--space-3) var(--space-4); border: 2px dashed var(--ink); border-radius: var(--radius-md); background: var(--paper-raised); }
.bcg-legend p { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 15px; line-height: 22px; }
.bcg-legend p > strong { font-family: var(--font-display); font-weight: 600; font-size: 16px; min-width: 76px; }
.bcg-legend .bcg-small { display: block; }
.bcg-legend__use { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.bcg-legend .wt-use { width: 32px; height: 32px; }
.bcg-legend .wt-use .wt-icon { width: 20px; height: 20px; }
.bcg-filters { display: grid; gap: 4px; }
.bcg-filters .wt-filters { margin: 0 calc(-1 * var(--space-4)); padding-left: var(--space-4); padding-right: var(--space-4); }
.bcg-count-row { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.bcg-count { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.bcg-clear { background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer; font-size: 16px; }
.bcg-cards { display: grid; gap: 20px; }
.bcg-bestfor { font-size: 15px; line-height: 21px; margin-top: 8px; max-width: 280px; }
.bcg-th-sub { display: block; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .06em; }
.bcg-flag { display: inline-block; margin-top: 4px; font-size: 13px; line-height: 18px; font-weight: 700; padding: 0 8px; border: 1.5px dashed var(--ink); border-radius: var(--radius-pill); }
.bcg-table { display: none; }
.wt-table tbody th { text-align: left; font-weight: 400; background: none; color: var(--ink); padding: 14px 16px; border-top: 2px solid var(--line); white-space: normal; font-family: var(--font-body); font-size: 18px; vertical-align: top; }
.wt-table td { vertical-align: top; }
.bcg-table .wt-tags { flex-direction: column; align-items: flex-start; }
.wt-card__old { overflow-wrap: anywhere; }
@media (min-width: 960px) {
  .bcg-table { display: block; }
  .bcg-cards { display: none; }
  .bcg-filters .wt-filters { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .bcg-chart h2, .bcg-section h2 { font-size: 34px; line-height: 38px; }
}
@media (min-width: 640px) and (max-width: 959px) { .bcg-cards { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Chip and tag extensions */
.bcg-chip--wide { min-width: 0; padding: 0 12px; }
.bcg-chip--quiet { border-style: dashed; background: var(--paper); }
.bcg-tag--plain { padding-left: 12px; }
.bcg-steps { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.bcg-step--none .wt-step__letter { background: var(--paper); border-style: dashed; }
/* Uses: not listed = dashed ring (from the design); not stated = dotted ring with a question mark. */
.wt-use { color: #8a7d64; border-color: #b5a789; }
.wt-use.is-unknown { border: 2px dotted var(--ink-muted); color: var(--ink-muted); }
.wt-uses--labelled .wt-use .wt-icon { color: #8a7d64; border-color: #b5a789; }
.wt-uses--labelled .wt-use.is-unknown .wt-icon { border: 2px dotted var(--ink-muted); color: var(--ink-muted); }
.wt-uses--labelled .wt-use { color: var(--ink-muted); }
.wt-uses--labelled .wt-use.is-unknown .wt-use__label { text-decoration: none; }
.bcg-use__q { font-family: var(--font-display); margin-left: 2px; }

/* Sections */
.bcg-section { display: grid; gap: var(--space-4); padding-bottom: var(--space-8); }
.bcg-rename { max-width: 760px; }
.bcg-rename .wt-table th, .bcg-rename .wt-table td { white-space: normal; }
.bcg-qgrid { display: grid; gap: 16px; }
@media (min-width: 760px) { .bcg-qgrid { grid-template-columns: repeat(3, 1fr); } }
.bcg-q { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px; border: var(--stroke-chunky) solid var(--ink); border-radius: var(--radius-lg); background: var(--paper-raised); box-shadow: var(--shadow-chunky); font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 24px; text-decoration: none; }
.bcg-q:hover { background: var(--highlight); }
.wt-faq { max-width: 860px; }
.wt-faq summary { min-height: 44px; }

/* Prose pages: answers, how we choose */
.bcg-prose { max-width: 720px; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-12); display: grid; gap: 28px; }
.bcg-crumbs { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.bcg-crumbs a { color: var(--ink-muted); }
.bcg-prose h1 { font-size: 34px; line-height: 38px; }
.bcg-meta { font-size: 15px; color: var(--ink-muted); margin-top: 8px; }
.bcg-body { display: grid; gap: 14px; }
.bcg-body h2 { font-size: 25px; line-height: 30px; margin-top: 14px; }
.bcg-body ul, .bcg-body ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.bcg-body p, .bcg-body li { max-width: 68ch; }
.bcg-mini { background: var(--paper-raised); border: var(--stroke-chunky) solid var(--ink); border-radius: var(--radius-lg); padding: 18px 16px; display: grid; gap: 14px; }
.bcg-mini h2 { font-size: 22px; line-height: 26px; }
.bcg-mrows { list-style: none; margin: 0; padding: 0; display: grid; }
.bcg-mrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 2px solid var(--line); }
.bcg-mrow:first-child { border-top: 0; }
.bcg-mt { flex: 1; display: grid; gap: 6px; min-width: 0; }
.bcg-mn { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 22px; }
.bcg-mrow .wt-btn { padding: 8px 14px; }
@media (min-width: 960px) { .bcg-prose h1 { font-size: 40px; line-height: 44px; } }

/* Quiz */
.bcg-quiz { max-width: 560px; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-12); }
.bcg-quiz__top { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4); }
.bcg-q-step { display: grid; gap: 14px; }
.bcg-q-step h1, .bcg-q-step h2 { font-size: 30px; line-height: 34px; }
.bcg-help { font-size: 17px; line-height: 24px; color: var(--ink-muted); }
.bcg-fams { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ink-muted); }
.wt-curl { min-height: 64px; }
.wt-curl[aria-checked="true"] { background: var(--tub-sunflower); border-width: var(--stroke-chunky); box-shadow: var(--shadow-chunky); }
.bcg-goals { grid-template-columns: 1fr 1fr; }
.bcg-goals .wt-option { position: relative; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 96px; font-size: 17px; line-height: 21px; padding: 12px; }
.bcg-goals .wt-option__text { flex: none; padding-right: 32px; }
.bcg-goals .wt-option__tick { position: absolute; top: 10px; right: 10px; }
.bcg-quiz__next { position: sticky; bottom: 0; padding: 12px 0 16px; background: var(--paper); border-top: 2px solid var(--line); margin-top: var(--space-6); display: grid; gap: 8px; }
.bcg-skip-link { background: none; border: 0; padding: 10px 0; min-height: 44px; cursor: pointer; justify-self: start; }
.bcg-noscript { border: 2px dashed var(--ink); border-radius: var(--radius-md); padding: var(--space-4); background: var(--paper-raised); }

/* Results */
.bcg-result { max-width: 560px; margin: 0 auto; padding: var(--space-4) var(--space-4) var(--space-12); display: grid; gap: 16px; }
.bcg-result h1 { font-size: 34px; line-height: 38px; }
.bcg-you { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.bcg-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-raised); font-size: 15px; font-weight: 700; }
.bcg-top { position: relative; background: var(--paper-raised); border: 3px solid var(--ink); border-radius: var(--radius-lg); box-shadow: 0 6px 0 var(--ink); padding: 0 18px 18px; display: grid; gap: 12px; overflow: hidden; }
.bcg-top__art { margin: 0 -18px; background: var(--tub); border-bottom: 3px solid var(--ink); display: grid; place-items: center; padding: 48px 0 20px; }
.bcg-badge { position: absolute; top: 14px; left: 14px; display: inline-flex; gap: 6px; align-items: center; background: var(--ink); color: var(--on-ink); font-family: var(--font-display); font-weight: 600; font-size: 15px; padding: 5px 12px 5px 8px; border-radius: 999px; }
.bcg-top h2 { font-size: 30px; line-height: 32px; }
.bcg-old { font-size: 15px; color: var(--ink-muted); margin-top: -8px; }
.bcg-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bcg-why li { display: flex; gap: 8px; align-items: flex-start; font-size: 17px; line-height: 24px; }
.bcg-why .wt-icon { margin-top: 1px; }
.bcg-aff { font-size: 13px; line-height: 18px; color: var(--ink-muted); text-align: center; }
.bcg-alt-h { font-size: 24px; margin-top: 8px; }
.bcg-rc { background: var(--paper-raised); border: var(--stroke-chunky) solid var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-chunky); overflow: hidden; display: grid; gap: 12px; padding-bottom: 16px; }
.bcg-rc__top { display: flex; gap: 12px; align-items: center; background: var(--tub); border-bottom: var(--stroke-chunky) solid var(--ink); padding: 10px 16px; }
.bcg-rc h3 { font-size: 21px; }
.bcg-rc__top p { font-size: 15px; line-height: 20px; }
.bcg-rc__why { padding: 0 16px; font-size: 17px; line-height: 24px; }
.bcg-rc .wt-btn { margin: 0 16px; width: auto; }
.bcg-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 8px 0 24px; }

/* Print: the home page prints as the chart only; /printable-chart/ has its own sheet. */
@media print {
  .bcg-header, .wt-footer .bcg-footer__links, .bcg-hero__art, .bcg-ctas, .bcg-note, .bcg-filters, .bcg-chart__actions, .bcg-qgrid, .bcg-skip { display: none !important; }
  .wt-footer { background: #fff; color: var(--ink); padding: 12px 0; border-top: 2px solid var(--ink); }
  .wt-footer .wt-icon, .wt-footer .wt-lockup, .wt-footer .wt-lockup__tag { color: var(--ink); }
  .bcg-table { display: block; }
  .bcg-cards { display: none; }
  .wt-table tr { break-inside: avoid; }
  details { display: block; }
}