/* ========================================
   Binnie Health (getbinnie.app/health, /nl/health, /ja/health)
   Health & food safety: what Binnie checks, on any recipe from anywhere.
   Loaded by health only, after home.css, whose palette tokens it reads.
   ======================================== */

/* 🔴 EVERY COLOUR HERE IS A TOKEN. The page follows the app's theme exactly as the
   home page does (?palette= / ?mode=, set on <html> by the theme boot before first
   paint), so a literal pink left in a rule stays pink on a green page. The warning
   colours are new tokens because home.css has none; each pair clears 4.5:1 on its
   own soft fill in light and dark. */
body.health {
  --hl-red: #B3261E;
  --hl-red-soft: #FCE4E2;
  --hl-amber: #9A4A00;
  --hl-amber-soft: #FDEBD3;
  --hl-green: #2E6B1F;
  --hl-green-soft: #DDEFCB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) body.health {
    --hl-red: #FFB4AB; --hl-red-soft: #4A1714;
    --hl-amber: #FFC27A; --hl-amber-soft: #3E2709;
    --hl-green: #B4E08C; --hl-green-soft: #23351A;
  }
}
:root[data-mode="dark"] body.health {
  --hl-red: #FFB4AB; --hl-red-soft: #4A1714;
  --hl-amber: #FFC27A; --hl-amber-soft: #3E2709;
  --hl-green: #B4E08C; --hl-green-soft: #23351A;
}

.health .act-head { margin-inline: 0; padding: clamp(56px, 9vh, 104px) 24px; }
.hl-center { display: grid; justify-items: center; text-align: center; gap: 14px; }
.hl-center h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.05; max-width: 900px; }
.hl-lead { color: var(--h-ink-2); font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 60ch; text-wrap: pretty; }

/* --- Hero --- */
.hl-hero { padding-block: 56px 72px; }
.hl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; align-items: center; }
.hl-hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.02; margin-top: 14px; }
.hl-em { color: var(--h-melon); }
.hl-sub { color: var(--h-ink-2); font-size: clamp(1.1rem, 1.6vw, 1.3rem); margin-top: 20px; max-width: 34em; text-wrap: pretty; }
.hl-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hl-btn, .hl-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 800; text-decoration: none; }
/* inline-block, not flex: a flex container drops the space between "Get" and the
   wordmark SVG, so the button read "Getbinnie, free". */
.hl-btn { display: inline-block; line-height: 48px; }
.hl-btn { background: var(--h-fill); color: #fff; }
.hl-btn:hover { background: var(--h-band); color: #fff; }
/* The wordmark inside the filled button is white, like the text around it. */
.hl-btn .wm-b, .hl-btn .wm-r { fill: #fff; }
.hl-ghost { color: var(--h-ink); box-shadow: inset 0 0 0 2px var(--h-line); }
.hl-ghost:hover { box-shadow: inset 0 0 0 2px var(--h-melon); color: var(--h-ink); }
.hl-stats-row { margin-top: 8px; }
.hl-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
/* Each stat is a link to the section that backs it up (founder 2026-10-21); the whole box is
   the target, and the page's smooth scroll and scroll-padding land it under the fixed nav. */
.hl-stats li { background: var(--h-card); border: 1px solid var(--h-line); border-radius: 20px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.hl-stats a { display: block; height: 100%; box-sizing: border-box; padding: 14px 12px; border-radius: inherit; color: inherit; text-decoration: none; }
.hl-stats li:hover { border-color: var(--h-melon); transform: translateY(-2px); box-shadow: 0 12px 24px -18px var(--h-shadow); }
.hl-stats a:focus-visible { outline: 3px solid var(--h-melon); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hl-stats li { transition: none; } .hl-stats li:hover { transform: none; } }
.hl-stats b { display: block; font-size: 1.9rem; font-weight: 900; line-height: 1; color: var(--h-melon); }
.hl-stats span { display: block; font-size: 0.86rem; font-weight: 700; color: var(--h-ink-2); margin-top: 6px; line-height: 1.25; hyphens: manual; overflow-wrap: break-word; }
.hl-stats li { min-width: 0; }
.hl-fine { font-size: 0.88rem; color: var(--h-ink-2); margin-top: 14px; }
/* The free promise, up front (founder 2026-10-21: the closing band comes too late to be read). */
.hl-promise { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-weight: 800; color: var(--h-ink); }
.hl-promise svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--hl-green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hl-meter-note { margin-top: 4px; }
/* A small drawn heart IS the hero's last full stop, in English only, so en.json's
   health.hero.h1_em carries no period (founder 2026-10-21; in every palette "as long as the
   heart stays pink"). It needs no JS to show. It is always
   Watermelon pink, the light or dark value, whatever the palette. The word joiner before it
   keeps it on the last word's line; aria-hidden keeps it silent to screen readers. */
.hl-heart { display: none; height: 0.62em; width: auto; margin-inline-start: 0.18em; vertical-align: 0.02em; fill: #D6245F; }
html[lang="en"] .hl-heart { display: inline-block; }
html[lang="en"][data-mode="dark"] .hl-heart { fill: #FF5E8F; }
/* The bottom padding keeps the recipe card clear of the stats row where the stage is the
   taller column (it sat 8px above the stats at 1024px). */
.hl-hero-stage { display: grid; gap: 16px; justify-items: center; padding-bottom: 32px; }
.hl-profile { width: min(380px, 100%); }
/* The recipe overlaps the profile it was checked against, leaning toward the copy: it never
   leaves the column (it was translated 28px right and clipped at the page edge). The overlap
   is 12px into the profile's 23px of padding under its last chip: -16px only cancelled the
   16px gap, so the edges touched and read as a mistake (founder 2026-10-21), and anything
   deeper covers the chips. */
.hl-verdict { width: min(380px, 100%); position: relative; z-index: 2; margin-top: -28px; transform: translateX(-44px); }

/* --- Cards and chips (the app's own vocabulary, drawn in HTML so they theme) --- */
.hl-card { background: var(--h-card); border: 1px solid var(--h-line); border-radius: 26px; padding: 22px 24px; box-shadow: 0 24px 48px -32px var(--h-shadow); width: min(400px, 100%); box-sizing: border-box; }
.hl-card-h { font-weight: 800; font-size: 1.05rem; margin: 0 0 10px; }
.hl-card-l { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--h-ink-2); margin: 14px 0 8px; }
.hl-card-note { font-size: 0.9rem; color: var(--h-ink-2); margin: 12px 0 0; }
.hl-card-src { font-size: 0.8rem; font-weight: 700; color: var(--h-ink-2); margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--h-line); }
.hl-why { margin-top: 16px; }
.hl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.hl-card .hl-chips { margin-top: 0; }
.hl-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--h-card); border: 1px solid var(--h-line); border-radius: 12px; padding: 7px 12px; font-weight: 700; font-size: 0.9rem; color: var(--h-ink); }
.hl-card .hl-chip { background: var(--h-paper); }
.hl-chip small { font-weight: 600; font-size: 0.75rem; color: var(--h-ink-2); }
.hl-chip.strike { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--h-ink-2); }
.hl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--h-melon); flex: none; }
.hl-dot.r { background: var(--hl-red); }
.hl-dot.a { background: var(--hl-amber); }
.hl-dot.g { background: var(--hl-green); }
.hl-w { display: inline-flex; align-items: center; border-radius: 999px; padding: 6px 13px; font-weight: 800; font-size: 0.86rem; }
.hl-w.r { background: var(--hl-red-soft); color: var(--hl-red); }
.hl-w.a { background: var(--hl-amber-soft); color: var(--hl-amber); }
.hl-w.g { background: var(--hl-green-soft); color: var(--hl-green); }
.hl-alert { border-radius: 16px; padding: 12px 14px; margin-bottom: 12px; }
.hl-alert b { display: block; font-size: 0.95rem; }
.hl-alert span { display: block; font-size: 0.86rem; margin-top: 2px; }
.hl-alert.r { background: var(--hl-red-soft); color: var(--hl-red); }
.hl-alert.a { background: var(--hl-amber-soft); color: var(--hl-amber); }
.hl-ing { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.hl-ing li { padding: 8px 4px; border-bottom: 1px solid var(--h-line); font-size: 0.95rem; }
.hl-ing li:last-child { border-bottom: 0; }
.hl-ing li.flag { color: var(--hl-red); font-weight: 800; }
.hl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hl-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; font-size: 0.95rem; }
.hl-opts { display: grid; gap: 6px; margin-bottom: 14px; }
.hl-opt { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.95rem; }
.hl-radio { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--h-ink-2); box-sizing: border-box; flex: none; }
.on > .hl-radio { border: 5px solid var(--h-melon); }
.hl-meter { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--h-line); font-weight: 700; }
.hl-meter b { font-size: 1.3rem; font-weight: 900; color: var(--h-melon); }

/* --- Only in Binnie --- */
/* A LIGHT band (founder 2026-10-21: white text on the pink band was hard to read). */
.hl-any { background: var(--h-paper-2); padding-block: 96px; }
.hl-any h2 { font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.03; max-width: 920px; }
.hl-any .hl-lead { max-width: 46em; }
.hl-src { list-style: none; padding: 0; margin: 36px 0 0; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hl-src li { display: flex; align-items: center; gap: 14px; background: var(--h-card); border: 1px solid var(--h-line); border-radius: 20px; padding: 16px; text-align: start; }
.hl-src-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--h-paper-2); color: var(--h-melon); }
.hl-src-ic svg { width: 26px; height: 26px; }
.hl-src-tiktok, .hl-src-instagram, .hl-src-youtube, .hl-src-facebook, .hl-src-pinterest, .hl-src-web { background: #fff; box-shadow: 0 3px 10px -5px rgb(30 5 12 / 0.4); }
.hl-src-t b { display: block; font-size: 1rem; color: var(--h-ink); }
.hl-src-t span { display: block; font-size: 0.86rem; color: var(--h-ink-2); }
.hl-src-note { font-size: 0.88rem; color: var(--h-ink-2); margin-top: 6px; }
.hl-vs { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.hl-vs > div { border-radius: 24px; padding: 24px 26px; text-align: start; }
.hl-vs-them { border: 2px dashed var(--h-line); }
.hl-vs-us { background: var(--h-card); border: 2px solid var(--h-melon); }
.hl-vs small { display: block; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; color: var(--h-ink-2); }
.hl-vs-us small { color: var(--h-melon-ink); }
.hl-vs b { display: block; font-size: 1.5rem; font-weight: 900; margin-top: 6px; line-height: 1.15; color: var(--h-ink); }
.hl-vs span { display: block; margin-top: 6px; font-size: 0.95rem; color: var(--h-ink-2); }
/* The testimonial. */
.hl-quote { margin: 44px auto 0; max-width: 860px; width: 100%; box-sizing: border-box; background: var(--h-card); color: var(--h-ink); border: 1px solid var(--h-line); border-radius: 32px; padding: 40px 44px; text-align: start; }
.hl-qm { display: block; height: 34px; font-size: 5rem; line-height: 0.6; font-weight: 900; color: var(--h-melon); }
.hl-quote blockquote { margin: 0; }
.hl-quote blockquote p { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 700; line-height: 1.4; color: var(--h-ink); }
.hl-quote figcaption { margin-top: 20px; }
/* The testimonial is English only (founder 2026-10-21: it reads oddly in nl and ja). */
[data-quote="hide"] .hl-quote { display: none; }
.hl-quote figcaption b { display: block; }
.hl-quote figcaption span { display: block; color: var(--h-ink-2); font-size: 0.92rem; }

/* --- Before you save (the home page's share layout, featured on its own) --- */
.hl-pre { padding-block: 88px; background: var(--h-paper); }
.hl-pre .hl-lead { margin-top: 16px; }

/* --- Three in one --- */
.hl-three { padding-block: 88px; }
.hl-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 36px; width: 100%; }
.hl-tile { background: var(--h-card); border: 1px solid var(--h-line); border-radius: 26px; padding: 26px; text-align: start; }
.hl-tile h3 { font-size: 1.3rem; margin-top: 12px; }
.hl-tile p { color: var(--h-ink-2); margin-top: 8px; }
.hl-ic { width: 46px; height: 46px; border-radius: 15px; background: var(--h-paper-2); color: var(--h-melon); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hl-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- Chapters --- */
.hl-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-block: 72px; border-bottom: 1px solid var(--h-line); }
.hl-row:last-child { border-bottom: 0; }
.hl-row.flip .hl-txt { order: 2; }
.hl-vis { display: flex; justify-content: center; }
.hl-num { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--h-fill); color: #fff; font-weight: 900; align-items: center; justify-content: center; font-size: 0.95rem; }
.hl-txt h3 { font-size: clamp(1.75rem, 3.1vw, 2.6rem); line-height: 1.06; margin-top: 14px; }
.hl-txt h3 span { display: block; color: var(--h-melon); }
.hl-txt > p { color: var(--h-ink-2); font-size: 1.12rem; margin-top: 16px; max-width: 32em; text-wrap: pretty; }
.hl-txt > p.hl-note { font-size: 0.9rem; }
.hl-srcs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hl-srcs span { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; border: 1.5px solid var(--h-line); border-radius: 8px; padding: 4px 9px; color: var(--h-ink-2); }
.hl-stages { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; width: min(440px, 100%); }
.hl-stages li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; background: var(--h-card); border: 1px solid var(--h-line); border-radius: 16px; padding: 12px 16px; }
.hl-stages .hl-radio { margin-top: 4px; }
.hl-stages b { display: block; }
.hl-stages span { display: block; font-size: 0.86rem; color: var(--h-ink-2); }
.hl-sync { display: grid; gap: 6px; width: min(400px, 100%); }
.hl-sync-row { display: flex; align-items: center; gap: 16px; width: 100%; }
.hl-sync-row b { display: block; font-size: 1.1rem; }
/* Only the text spans: a bare `span` rule also hit the icon box and broke its centring. */
.hl-sync-row > div > span { display: block; font-size: 0.9rem; color: var(--h-ink-2); }
.hl-ic-brand { background: #fff; box-shadow: 0 3px 10px -5px rgb(30 5 12 / 0.4); }
.hl-ic-brand svg, .hl-ic-brand img { width: 32px; height: 32px; }
.hl-ic-brand svg { stroke: none; }
.hl-arrows { text-align: center; color: var(--h-melon); font-weight: 900; margin: 0; }

/* The product-note card beside the barcode shot. */
.hl-vis-pair { position: relative; align-items: center; gap: 0; }
.hl-vis-pair .phone { width: min(250px, 46vw); }
/* The hero's barcode card as the scan hint (founder 2026-10-21): at the back phone's top-right
   corner, over its app bar icons and the gap above the front phone, never over a note. The
   box is the hero stage's width so the card's cqw radius, bars and badge match the hero. */
/* The barcode sits ON the front phone (its markup is inside it), over the dimmed screen
   behind the sheet (founder 2026-10-21), so it covers nothing a reader is meant to read and
   cannot drift off the phone at any width. Percentages are of the phone: its dimmed band runs
   from about 13% to 34% of its height. */
.hl-scan-card { position: absolute; z-index: 4; pointer-events: none; container-type: inline-size; width: 68%; aspect-ratio: 1; left: 42%; top: 17%; }
.hl-scan-card .c-barcode { left: 0; top: 0; width: 56.1%; rotate: 8deg; }
.hl-vis-pair .hl-pair-front { margin-inline-start: -48px; margin-top: 70px; z-index: 3; }
.hl-src-line { margin-top: 14px; }

/* --- Free and trust --- */
.hl-free { background: var(--h-paper-2); padding-block: 80px; }
.hl-ftile { background: var(--h-card); border: 1px solid var(--h-line); border-radius: 22px; padding: 22px; text-align: start; }
.hl-ftile b { display: block; font-size: 1.1rem; color: var(--h-ink); }
.hl-ftile span { display: block; margin-top: 6px; color: var(--h-ink-2); font-size: 0.95rem; }
.hl-more { margin-top: 24px; font-weight: 800; color: var(--h-melon-ink); }
.hl-more:hover { color: var(--h-ink); }
.hl-trust { padding-block: 88px 24px; }

/* --- Round 4 (founder 2026-10-21) --- */
/* "Millions of websites": the three browsers, overlapped like the home page's web card. */
.hl-discs { background: transparent; box-shadow: none; width: auto; gap: 0; display: flex; }
.hl-discs i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px -4px rgb(30 5 12 / 0.45); }
.hl-discs i + i { margin-inline-start: -9px; }
.hl-discs svg { width: 22px; height: 22px; }
/* Before you save: one real share sheet, upright. */
.h-share-stage .hl-solo { position: relative; rotate: none; translate: none; width: min(290px, 62vw); }
/* All nutrients: only the last row (Vitamin D, Calcium, from 91% down) fades; the bezel stays whole. */
.hl-fade .scr picture, .hl-fade .scr img { -webkit-mask-image: linear-gradient(#000 89%, transparent 100%); mask-image: linear-gradient(#000 89%, transparent 100%); }

@media (max-width: 1100px) { .hl-src { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Phones: two narrow columns squeezed each label to four lines; the icon goes above the text. */
@media (max-width: 600px) { .hl-src li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } }
@media (max-width: 900px) {
  .hl-hero-grid, .hl-row { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hl-row.flip .hl-txt { order: 0; }
  .hl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd last card sits centred at half width instead of hanging left. */
  .hl-stats li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 5px); box-sizing: border-box; }
  .hl-src { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-vis-pair .hl-pair-front { margin-inline-start: -36px; margin-top: 50px; }
  .hl-vs, .hl-grid3 { grid-template-columns: minmax(0, 1fr); }
  .hl-verdict { transform: none; }
  .hl-quote { padding: 28px 24px; }
}