/* Guide pages of the two comparisons: "How we built …" and "Choosing …" under /formula-comparison/ and /baby-food-comparison/
   (slugs listed in FE101_GUIDE_PAGES, inc/guide-pages.php).
   Markup: the Elementor HTML widget on each page (root .fe-hwbn); behaviour: fe101-how-we-built.js.
   Content 1180px wide, article + sticky "On this page" sidebar; one column below 1025px. */

.fe-hwbn {
	--hw-page: #fff; --hw-soft: #f7f5f0; --hw-sage: #a9cdbd; --hw-sage-soft: #e9f2ed; --hw-orange: #f6a25a; --hw-orange-ink: #e0701f;
	--hw-yellow: #fbefb2; --hw-green: #5fb56e; --hw-ink: #141414; --hw-muted: #5b5f5c; --hw-line: #e4e4df; --hw-line-2: #cfcfc8; --hw-card: #fff;
	--hw-btn: #111; --hw-btn-ink: #fff;
	--hw-sans: "Catamaran", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--hw-serif: "Newsreader", Georgia, serif;
	background: var(--hw-page); color: var(--hw-ink); font-family: var(--hw-sans); font-size: 17px; line-height: 1.6;
}
.fe-hwbn *, .fe-hwbn *::before, .fe-hwbn *::after { box-sizing: border-box; }
.fe-hwbn a { color: inherit; }
.fe-hwbn :focus-visible { outline: 3px solid var(--hw-orange-ink); outline-offset: 2px; border-radius: 6px; }
.fe-hwbn h1, .fe-hwbn h2, .fe-hwbn h3 { font-family: var(--hw-sans); color: var(--hw-ink); }
.fe-hwbn__wrap { max-width: 1228px; margin: 0 auto; padding: 0 24px; }

.fe-hwbn .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 10px 22px; min-height: 44px; border: 1.5px solid var(--hw-btn); background: var(--hw-btn); color: var(--hw-btn-ink); font: 700 15px/1.2 var(--hw-sans); text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s; }
.fe-hwbn .btn:hover, .fe-hwbn .btn:focus-visible { background: #333; border-color: #333; color: #fff; }
.fe-hwbn .pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 12px; font-size: 13px; font-weight: 700; line-height: 1.7; }
.fe-hwbn .pill.cat { background: var(--hw-yellow); color: #3b3205; }

/* reading progress */
.fe-hwbn__progress { position: fixed; top: 0; left: 0; z-index: 9999; height: 3px; width: 0; background: var(--hw-orange-ink); pointer-events: none; }

/* hero */
.fe-hwbn .crumbs { margin: 22px 0 0; font-size: 14px; color: var(--hw-muted); }
.fe-hwbn .crumbs a { text-decoration: none; }
.fe-hwbn .crumbs a:hover { text-decoration: underline; }
.fe-hwbn .hero { max-width: 820px; padding: 20px 0 28px; }
.fe-hwbn .hero h1 { margin: 14px 0; font-size: clamp(34px, 4.4vw, 54px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.fe-hwbn .hero .dek { max-width: 52ch; margin: 0 0 22px; font-size: 19px; line-height: 1.5; color: var(--hw-muted); }
.fe-hwbn .hero .meta { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 14px; color: var(--hw-muted); }
.fe-hwbn .hero .meta b { color: var(--hw-ink); }

.fe-hwbn .disclose { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; margin: 0 0 36px; padding: 14px 18px; border: 1px solid #f3c9a1; border-radius: 14px; background: #fff3e6; font-size: 15px; line-height: 1.5; }
.fe-hwbn .disclose svg { margin-top: 2px; color: var(--hw-orange-ink); }

/* layout */
.fe-hwbn .layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 64px; align-items: start; padding-bottom: 64px; }
.fe-hwbn .side { position: sticky; top: 32px; display: grid; gap: 18px; }
.admin-bar .fe-hwbn .side { top: 64px; }
.fe-hwbn .toc { padding: 18px 18px 14px; border: 1px solid var(--hw-line); border-radius: 18px; }
.fe-hwbn .toc > p { margin: 0 0 8px; font-size: 15px; font-weight: 800; }
.fe-hwbn .toc ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.fe-hwbn .toc li { margin: 0; }
.fe-hwbn .toc a { display: flex; gap: 8px; align-items: flex-start; padding: 6px 10px; border-radius: 8px; font-size: 14.5px; line-height: 1.35; color: var(--hw-muted); text-decoration: none; }
.fe-hwbn .toc a:hover { background: var(--hw-soft); color: var(--hw-ink); }
.fe-hwbn .toc a.on { background: var(--hw-sage-soft); color: var(--hw-ink); font-weight: 700; }
.fe-hwbn .toc .tick { flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid var(--hw-line-2); border-radius: 50%; transition: background-color .2s, border-color .2s; }
.fe-hwbn .toc a.read .tick { background: var(--hw-green); border-color: var(--hw-green); }
.fe-hwbn .toc a.read .tick::after { content: ""; width: 6px; height: 3px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.fe-hwbn .toc .tocmeta { margin: 10px 10px 0; font-size: 12.5px; color: var(--hw-muted); }
.fe-hwbn .side-cta { padding: 20px 18px; border-radius: 18px; background: var(--hw-sage); color: #0f2a1e; }
.fe-hwbn .side-cta b { display: block; margin-bottom: 6px; font-size: 17px; line-height: 1.25; }
.fe-hwbn .side-cta p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; }
.fe-hwbn .side-cta .btn { min-height: 40px; padding: 8px 18px; font-size: 14px; }

/* article */
.fe-hwbn .entry-content { max-width: 720px; min-width: 0; }
.fe-hwbn .entry-content > * { margin-top: 0; margin-bottom: 20px; }
.fe-hwbn .entry-content p, .fe-hwbn .entry-content li { font-size: 18px; line-height: 1.7; }
.fe-hwbn .entry-content h2 { position: relative; scroll-margin-top: 96px; margin: 56px 0 14px; font-size: clamp(26px, 2.8vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.fe-hwbn .entry-content a { color: var(--hw-orange-ink); font-weight: 600; text-underline-offset: 3px; }
.fe-hwbn .entry-content ul { padding-left: 24px; }
.fe-hwbn .entry-content li { margin: 6px 0; }
.fe-hwbn .entry-content li::marker { color: var(--hw-orange-ink); font-weight: 700; }

/* three boxes */
.fe-hwbn .boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 8px; }
.fe-hwbn .box { padding: 20px 20px 18px; border: 1px solid var(--hw-line); border-radius: 18px; background: var(--hw-card); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.fe-hwbn .box h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; line-height: 1.25; }
.fe-hwbn .entry-content .box p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--hw-muted); }
/* two columns of boxes with a heading, text and sources at the bottom (Choosing a formula) */
.fe-hwbn .boxes.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
.fe-hwbn .boxes.two .box { display: flex; flex-direction: column; }
.fe-hwbn .entry-content .box h2 { margin: 0 0 8px; font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: 0; scroll-margin-top: 96px; }
.fe-hwbn .entry-content .boxes.two .box p { margin: 0 0 10px; }
.fe-hwbn .entry-content .box p.srcline { margin: auto 0 0; padding-top: 10px; font-size: 13px; line-height: 1.5; }
.fe-hwbn .entry-content .box > :last-child { margin-bottom: 0; }
.fe-hwbn .entry-content .box .src-toggle { align-self: flex-start; margin: auto 0 0; }
.fe-hwbn .entry-content .box .src-toggle + p.srcline { margin-top: 10px; }

/* one box per row, with lists and small sub-headings (Choosing a baby food) */
.fe-hwbn .boxes.two.one { grid-template-columns: minmax(0, 1fr); }
.fe-hwbn .entry-content .box ul { margin: 4px 0 10px; padding-left: 20px; }
.fe-hwbn .entry-content .box li { margin: 4px 0; font-size: 16px; line-height: 1.55; color: var(--hw-muted); }
.fe-hwbn .entry-content .box h3 { margin: 12px 0 4px; font-size: 15px; letter-spacing: .02em; }
.fe-hwbn .entry-content .boxes:not(.two) .box h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: 0; }

/* testing-fact badges (same colours as the baby food comparison) */
.fe-hwbn { --hw-ok-bg: #e3f3e6; --hw-ok-ink: #17602f; --hw-none-bg: #eceeea; --hw-none-ink: #47524c; --hw-unk-bg: #fff2d2; --hw-unk-ink: #7a4b00; --hw-rc-bg: #fde5e2; --hw-rc-ink: #a52a20; }
.fe-hwbn .badge { display: inline-flex; gap: 6px; align-items: flex-start; padding: 3px 9px; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.35; white-space: nowrap; }
.fe-hwbn .badge i { font-style: normal; font-weight: 800; }
.fe-hwbn .b-yes { background: var(--hw-ok-bg); color: var(--hw-ok-ink); }
.fe-hwbn .b-no { background: var(--hw-none-bg); color: var(--hw-none-ink); }
.fe-hwbn .b-unk { background: var(--hw-unk-bg); color: var(--hw-unk-ink); }
.fe-hwbn .b-recall { background: var(--hw-rc-bg); color: var(--hw-rc-ink); }
.fe-hwbn .entry-content p.legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; }
.fe-hwbn .tbl table.matrix { min-width: 820px; }
.fe-hwbn .tbl table.matrix td { padding: 8px 10px; vertical-align: middle; }
/* icon-only status cells in the baby food matrix (2026-11-09): green check / grey dash / amber ? / red ! */
.fe-hwbn .ico { display: inline-block; width: 24px; height: 24px; flex: none; vertical-align: middle; background: center / 24px 24px no-repeat; }
.fe-hwbn .i-yes { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232e8b57'/%3E%3Cpath d='m7 12.4 3.3 3.3L17.2 8.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fe-hwbn .i-no { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.4' fill='%23eceeea' stroke='%23c9cdc7' stroke-width='1.2'/%3E%3Cpath d='M8.5 12h7' stroke='%2347524c' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fe-hwbn .i-unk { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10.4' fill='%23fdeab0' stroke='%23e0a92e' stroke-width='1.2'/%3E%3Cpath d='M9.6 9.4a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.1-2.4 3.6' fill='none' stroke='%237a4b00' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.2' fill='%237a4b00'/%3E%3C/svg%3E"); }
.fe-hwbn .i-recall { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23c62828'/%3E%3Cpath d='M12 6.8v6.6' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1.5' fill='%23fff'/%3E%3C/svg%3E"); }
.fe-hwbn .tbl table.matrix:has(.ico) { min-width: 640px; }
.fe-hwbn .tbl table.matrix:has(.ico) th:not(:first-child), .fe-hwbn .tbl table.matrix td:has(> .ico) { text-align: center; }
.fe-hwbn .tbl table.matrix td:has(> .ico) { line-height: 0; }
.fe-hwbn p.legend.icons { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.fe-hwbn p.legend.icons .lg { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--hw-ink); }
@media print { .fe-hwbn .ico { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* callout */
.fe-hwbn .callout { padding: 16px 20px; border-left: 4px solid var(--hw-green); border-radius: 0 16px 16px 0; background: var(--hw-sage-soft); }
.fe-hwbn .entry-content .callout > :last-child { margin-bottom: 0; }

/* source lines + "Sources (n)" toggle (added by the script) */
.fe-hwbn .entry-content p.srcline { border-top: 1px solid var(--hw-line); padding-top: 8px; font-size: 14px; color: var(--hw-muted); }
.fe-hwbn .entry-content p.srcline a { font-weight: 600; }
.fe-hwbn .entry-content p.srcline[hidden] { display: none; }
.fe-hwbn .src-toggle, .fe-hwbn .src-toggle:hover, .fe-hwbn .src-toggle:focus { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border: 1px solid var(--hw-line-2); border-radius: 999px; background: var(--hw-card); color: var(--hw-muted); font: 600 13px/1.2 var(--hw-sans); cursor: pointer; }
.fe-hwbn .src-toggle:hover { border-color: var(--hw-ink); color: var(--hw-ink); }
.fe-hwbn .src-toggle svg { transition: transform .2s; }
.fe-hwbn .src-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* tables: scroll on phones with the first column pinned */
/* (beats Elementor's ".elementor .elementor-widget:not(…):not(…) figure { margin: 0 }") */
.fe-hwbn .fe-hwbn__wrap .entry-content > figure.tbl.tbl { margin: 24px 0; }
.fe-hwbn .tbl { overflow-x: auto; border: 1px solid var(--hw-line); border-radius: 16px; }
.fe-hwbn .tbl table { width: 100%; min-width: 620px; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.5; }
.fe-hwbn .tbl th, .fe-hwbn .tbl td { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--hw-line); background: var(--hw-card); text-align: left; vertical-align: top; }
.fe-hwbn .tbl thead th { background: var(--hw-soft); font-weight: 800; }
.fe-hwbn .tbl tbody td:first-child, .fe-hwbn .tbl thead th:first-child { position: sticky; left: 0; z-index: 1; font-weight: 800; box-shadow: 1px 0 0 var(--hw-line); }
.fe-hwbn .tbl tr:last-child > * { border-bottom: 0; }
.fe-hwbn .tbl tbody tr > td { transition: background-color .15s; }
/* (the theme stripes odd rows: keep the rows plain, grey on hover) */
.fe-hwbn .tbl tbody tr:nth-child(n) > td { background-color: var(--hw-card); }
.fe-hwbn .tbl tbody tr:nth-child(n):hover > td { background-color: var(--hw-soft); }

/* status chips (added by the script) */
.fe-hwbn .chip-s { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 4px; border: 1px solid var(--hw-line-2); border-radius: 999px; background: var(--hw-card); font-size: 13px; font-weight: 600; white-space: nowrap; transition: opacity .2s, box-shadow .2s; }
.fe-hwbn .chip-s i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--hw-soft); color: var(--hw-ink); font-size: 11px; font-style: normal; font-weight: 800; }
.fe-hwbn .chip-s.s-found i, .fe-hwbn .chip-s.s-clear i { background: var(--hw-ink); color: #fff; }
.fe-hwbn .chip-s.s-unk { border-style: dashed; color: var(--hw-muted); }
.fe-hwbn .chip-s.s-recall { border: 1.5px solid var(--hw-ink); }
.fe-hwbn .chip-s.s-recall i { background: var(--hw-orange); color: #2a1606; }
.fe-hwbn .has-filter td .chip-s { opacity: .25; }
.fe-hwbn .has-filter td .chip-s.match { opacity: 1; box-shadow: 0 0 0 3px var(--hw-yellow); }
/* icon-only status chips in the formula status table (2026-11-10); the legend table keeps icon + words */
.fe-hwbn .chip-s.ico-only { padding: 0; border: 0; background: none; border-radius: 50%; }
.fe-hwbn .chip-s.ico-only i { width: 24px; height: 24px; font-size: 13px; border: 1px solid var(--hw-line-2); }
.fe-hwbn .chip-s.ico-only.s-found i, .fe-hwbn .chip-s.ico-only.s-clear i { border-color: var(--hw-ink); }
.fe-hwbn .chip-s.ico-only.s-unk i { border-style: dashed; border-color: #b9b3a6; background: var(--hw-card); color: var(--hw-ink); }
.fe-hwbn .chip-s.ico-only.s-recall i { border: 1.5px solid var(--hw-ink); }
.fe-hwbn .chip-s.ico-only.s-part i, .fe-hwbn .chip-s.ico-only.s-no i { font-size: 17px; font-weight: 700; }
.fe-hwbn .chip-s.ico-only.s-part i { font-size: 24px; line-height: 1; padding-bottom: 3px; box-sizing: border-box; }
.fe-hwbn .tbl.icons-only td.has-ico { text-align: center; line-height: 0; }
.fe-hwbn .tbl.icons-only th:not(:first-child) { text-align: center; }
@media print { .fe-hwbn .chip-s.ico-only i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
.fe-hwbn .filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 10px; font-size: 14px; }
.fe-hwbn .filterbar > span { margin-right: 2px; font-weight: 600; color: var(--hw-muted); }
.fe-hwbn .fbtn, .fe-hwbn .fbtn:hover, .fe-hwbn .fbtn:focus { min-height: 36px; padding: 6px 12px; border: 1px solid var(--hw-line-2); border-radius: 999px; background: var(--hw-card); color: var(--hw-ink); font: 600 13px/1.2 var(--hw-sans); cursor: pointer; }
.fe-hwbn .fbtn:hover { border-color: var(--hw-ink); }
.fe-hwbn .fbtn[aria-pressed="true"] { background: var(--hw-ink); border-color: var(--hw-ink); color: #fff; }
.fe-hwbn .entry-content p.fcount { min-height: 1.4em; margin: 0 0 8px; font-size: 13.5px; line-height: 1.4; color: var(--hw-muted); }

/* copy-link buttons on headings */
.fe-hwbn .h-anchor, .fe-hwbn .h-anchor:hover, .fe-hwbn .h-anchor:focus { position: absolute; left: -30px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--hw-muted); opacity: 0; cursor: pointer; transition: opacity .15s; }
.fe-hwbn .entry-content h2:hover .h-anchor, .fe-hwbn .h-anchor:focus-visible { opacity: 1; }
.fe-hwbn .h-anchor.done { color: var(--hw-green); opacity: 1; }

/* scroll reveal */
.fe-hwbn.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
.fe-hwbn.js .reveal.in { opacity: 1; transform: none; }

/* back to top + toast */
.fe-hwbn .totop, .fe-hwbn .totop:hover, .fe-hwbn .totop:focus { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 999; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--hw-btn); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s; }
.fe-hwbn .totop.show { opacity: 1; transform: none; pointer-events: auto; }
.fe-hwbn .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 1000; padding: 10px 16px; border-radius: 999px; background: var(--hw-btn); color: #fff; font: 600 14px var(--hw-sans); opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: opacity .2s, transform .2s; }
.fe-hwbn .toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1024px) {
	.fe-hwbn .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.fe-hwbn .side { position: static; order: -1; grid-template-columns: 1fr 1fr; margin-bottom: 28px; }
	.fe-hwbn .h-anchor { display: none; }
}
@media (max-width: 900px) {
	.fe-hwbn .boxes, .fe-hwbn .boxes.two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
	.fe-hwbn { font-size: 16px; }
	.fe-hwbn__wrap { padding: 0 16px; }
	.fe-hwbn .side { grid-template-columns: 1fr; }
	.fe-hwbn .side-cta { display: none; }
	.fe-hwbn .entry-content p, .fe-hwbn .entry-content li { font-size: 17px; }
	.fe-hwbn .entry-content .box p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.fe-hwbn *, .fe-hwbn *::before, .fe-hwbn *::after { transition: none !important; animation: none !important; }
	.fe-hwbn.js .reveal { opacity: 1; transform: none; }
}
@media print {
	.fe-hwbn .side, .fe-hwbn__progress, .fe-hwbn .totop, .fe-hwbn .filterbar { display: none !important; }
	.fe-hwbn .layout { display: block; }
}