/* Inter, served from this site (owner 2026-09-30). It used to load from fonts.googleapis.com,
   which hands every visitor's IP address to Google - LG München I, 20.01.2022, 3 O 17493/20.
   Files: /fonts/ (variable weight 400-700, SIL Open Font License, /fonts/OFL.txt). */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Helal Scan marketing + compliance site — static, no cookies, no trackers.
   Skinned from the app's own tokens (artifacts/halal-scanner/constants/colors.ts):
   emerald/teal trust palette, Inter, radii 20/28/pill, girih lattice, and the
   حلال rosette logomark the app draws in components/Seal.tsx. Light AND dark —
   the site follows the device, exactly like the app's "system" theme mode. */
:root {
  /* Tell the browser we support both, so it themes its OWN widgets to match:
     form controls, scrollbars, the text caret and the default canvas. Without
     this the page is dark but the scrollbar and inputs stay light. */
  color-scheme: light dark;

  /* White on the old #0E8A63 measured 4.34:1 — under AA for the button label
     and every word on the hero plate. #0A7252 is 5.93:1 and reads as the same
     green. --emerald-deep is untouched — it is the link colour and it passed. */
  --emerald: #0A7252;
  --emerald-deep: #0A6B4D;
  --teal: #155E63;
  --gold: #C4871B;
  --bg: #F5F4EF;
  --fg: #1B2A24;
  --body: #2B3A33;
  --muted-fg: #5C6A62;   /* 4.33:1 was under AA on --bg, and 4.07:1 in the footer */
  --card: #FFFFFF;
  --wash: #E7F1EC;
  --wash-border: #CFE3D8;
  --border: #E6E2D8;
  --chip: #F1EFE8;
  --footer-bg: #EFEDE6;

  /* These are chip TEXT, 11.5-14px, on their own tint: 3.63 / 2.73 / 2.67 /
     4.14 / 3.06:1 before, all under AA, on the status of all 165 additives.
     Now the same values the answer legend already uses, 4.9-5.9:1. */
  --halal: #0A6B4D;      --halal-bg: #DCEFE7;
  --noconcern: #3F6B4E;  --noconcern-bg: #E7F0EA;
  --doubtful: #7A5310;   --doubtful-bg: #F8EEDA;
  --doubtful-border: #EAD3A0;
  --haram: #983A3A;      --haram-bg: #F6E4E4;
  --utv: #5C6A66;        --utv-bg: #ECEEED;

  --plate-from: #0A7252;
  --plate-to: #0A6B4D;
  --on-plate: #FFFFFF;
  /* White is 5.93:1 at the light end of the plate now and 6.52:1 at the dark
     end, so the small print on it passes too. Only the light end moved, which
     is why the plate still looks like the plate. */
  --on-plate-dim: #FFFFFF;

  --radius: 20px;        /* app cards */
  --radius-lg: 28px;     /* app verdict card / hero plate */
  --radius-pill: 999px;
  --maxw: 900px;         /* text pages: privacy, support, E-numbers */
  --maxw-wide: 1120px;   /* marketing pages */
  --shadow-sm: 0 1px 2px rgba(16, 32, 24, 0.05), 0 4px 14px rgba(16, 32, 24, 0.05);
  --shadow-lg: 0 24px 60px rgba(10, 60, 44, 0.16);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --emerald: #2FAF86;
    --emerald-deep: #268F6E;
    --teal: #3E9BA3;
    --gold: #D8A544;
    --bg: #101713;
    --fg: #ECF2EE;
    --body: #C9D5CE;
    --muted-fg: #96A69C;
    --card: #182119;
    --wash: #1C2C24;
    --wash-border: #26332B;
    --border: #26332B;
    --chip: #1F2A22;
    --footer-bg: #0C110E;

    --halal: #2FAF86;      --halal-bg: #17281F;
    --noconcern: #77B389;  --noconcern-bg: #1E2A22;
    --doubtful: #D8A544;   --doubtful-bg: #332A14;
    --doubtful-border: #4A3D1E;
    --haram: #E08B8B;      --haram-bg: #33201F;   /* #CF6B6B was 4.37:1 */
    --utv: #8D9994;        --utv-bg: #232A27;

    /* The emerald plate stays deep and saturated in dark, like the app hero. */
    --plate-from: #0F5E44;
    --plate-to: #0A4433;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }   /* the header is sticky and ~100-116px tall */
body {
  margin: 0; font-family: var(--font); color: var(--fg); background: var(--bg);
  line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased;
}
a { color: var(--emerald-deep); text-decoration: none; }
@media (prefers-color-scheme: dark) { a { color: var(--emerald); } }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }   /* height:auto or the width/height attributes stretch the image */
:focus-visible {
  /* A single emerald ring is invisible on the emerald plate (measured 1.0:1 at
     the top of the gradient). Two layers — white, then dark — contrast against
     any surface on the site, light or dark. W3C technique C40. */
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px #0A3C2C;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* Skip link — WCAG 2.4.1 is Level A, and /e-numbers puts six header links
   ahead of 165 rows. Off-screen until focused, then it lands on the plate. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  background: var(--card); color: var(--fg); font-weight: 600; font-size: 15px;
  padding: 12px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* ---- header ---- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav {
  max-width: var(--maxw-wide); margin: 0 auto; padding: 13px 20px;
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;   /* above 1000px it was nowrap, so 1001-1007px overflowed */
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; font-weight: 700; color: var(--fg); font-size: 18px; letter-spacing: -0.2px; }
.brand:hover { text-decoration: none; }
.brand .seal { width: 34px; height: 34px; flex: none; object-fit: contain; }
.nav .spacer { flex: 1; }
.nav a.navlink { color: var(--muted-fg); font-weight: 500; font-size: 15px; }
.nav a.navlink:hover { color: var(--emerald); text-decoration: none; }
.nav a.navlink.lang {
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 9px 14px; font-size: 13.5px;
}
.nav .btn.nav-cta { padding: 9px 18px; font-size: 14.5px; flex: none; }
/* Below 1000px the links used to be hidden outright, which left a phone with no
   way to reach E-Numbers, Guides or Support. They wrap onto a second row
   instead — CSS only, so every page gets it, including the generated ones. */
@media (max-width: 1000px) {
  .nav { flex-wrap: wrap; row-gap: 0; padding: 10px 20px 0; align-items: center; }
  .nav .spacer { display: none; }
  .brand { margin-right: auto; }
  .nav a.navlink { order: 3; font-size: 14.5px; white-space: nowrap; padding: 11px 0; color: var(--body); }
  .nav a.navlink:not(.lang) { margin-right: 20px; }
  .nav a.navlink.lang { order: 2; margin-left: 10px; }
  .nav .btn.nav-cta { order: 2; }
  .nav::after { content: ""; order: 2; flex-basis: 100%; height: 0; }   /* line break */
  /* A phone header has room for the three pages people came for. The legal
     pages stay one tap away in the footer, where they belong. */
  .nav a.navlink:not(.lang)[href*="privacy"], .nav a.navlink:not(.lang)[href*="security"],
  .nav a.navlink:not(.lang)[href*="datenschutz"], .nav a.navlink:not(.lang)[href*="sicherheit"],
  .nav a.navlink:not(.lang)[href^="#"] { display: none; }   /* :not(.lang) — the German pill matches "datenschutz" by href */
}
@media (max-width: 560px) {
  /* Everything on row one: brand, language, CTA. The subtitle is decoration and
     the first thing to go, so the three real controls fit across 375px.
     German needs more room than English — "App laden" plus "English" plus the
     brand is wider than its English equivalent — so the brand name alone can
     shrink rather than pushing the controls onto their own row. */
  .nav { padding-inline: 16px; gap: 8px; }
  .brand { min-width: 0; font-size: 15.5px; gap: 8px; }
  .brand .seal { width: 28px; height: 28px; }
  .brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav .brand .brand-text small { display: none; }   /* the base rule sits later in the file, so this needs the specificity */
  .nav a.navlink:not(.lang) { margin-right: 16px; font-size: 14px; }
  .nav .btn.nav-cta { padding: 8px 13px; font-size: 13px; }
  .nav a.navlink.lang { padding: 8px 11px; font-size: 12.5px; margin-left: 0; }
}

/* ---- layout ---- */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 20px 64px; }
main.wide { max-width: var(--maxw-wide); }
/* Marketing rhythm belongs to the marketing pages. The reference pages reuse
   .section as a plain content block, where 62px of dead space reads as a bug. */
main.wide .section { padding: 62px 0 0; }
main:not(.wide) .section { padding: 0; margin-top: 34px; }
.section-head { max-width: 660px; margin: 0 0 26px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--emerald); margin: 0 0 10px;
}
.section-head h2 { font-size: 30px; line-height: 1.2; margin: 0 0 10px; letter-spacing: -0.4px; }
.section-head p { font-size: 17.5px; color: var(--muted-fg); margin: 0; }
@media (max-width: 640px) { main.wide .section { padding-top: 46px; } .section-head h2 { font-size: 25px; } }

/* ---- hero: emerald plate on the left, the real app on the right ---- */
.hero { padding: 34px 0 0; }
.hero-plate {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--plate-from), var(--plate-to));
  border-radius: var(--radius-lg);
  padding: 56px 44px; color: var(--on-plate);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
}
.hero-plate::before {
  /* GirihOverlay.tsx: two nested 8-point stars on a 96px lattice. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M48 8 58 38 88 48 58 58 48 88 38 58 8 48 38 38Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.12'/%3E%3Cpath d='M48 24 55 41 72 48 55 55 48 72 41 55 24 48 41 41Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.12'/%3E%3C/svg%3E");
}
.hero-copy { position: relative; }
.hero-copy .mark { width: 62px; height: 62px; margin: 0 0 16px; display: block; object-fit: contain; }
.hero-plate h1 { font-size: 46px; line-height: 1.08; letter-spacing: -1px; margin: 0 0 26px; color: var(--on-plate); }
.hero-plate p.lede { font-size: 19px; color: var(--on-plate-dim); margin: 0 0 24px; max-width: 30em; }
.hero-art { position: relative; display: flex; justify-content: center; }
.hero-art .phone { width: min(290px, 80vw); }
@media (max-width: 900px) {
  .hero-plate { grid-template-columns: 1fr; padding: 44px 24px 0; text-align: center; gap: 26px; }
  .hero-copy .mark { margin-inline: auto; }
  .hero-plate h1 { font-size: 34px; }
  .hero-plate p.lede { margin-inline: auto; font-size: 17px; }
  .hero-art .phone { width: min(260px, 72vw); }
  .hero-plate { padding-bottom: 34px; }
}
@media (max-width: 460px) { .hero-plate h1 { font-size: 28px; } }

/* store buttons + the search form that lives on the plate */
.badge-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-plate .badge-row { margin-bottom: 18px; }
@media (max-width: 900px) { .hero-plate .badge-row, .hero-plate .plate-form { justify-content: center; } }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--emerald); color: #fff; font-weight: 600; font-size: 16px;
  padding: 13px 26px; border-radius: var(--radius-pill); border: 0; cursor: pointer;
  white-space: nowrap;   /* the label must never wrap inside a pill */
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: #075C42; text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: transparent; color: var(--emerald-deep); border: 1px solid var(--border); }
@media (prefers-color-scheme: dark) { .btn.secondary { color: var(--emerald); } }
.btn .ico { width: 20px; height: 20px; flex: none; }
/* on the emerald plate, buttons invert */
.hero-plate .btn, .cta-band .btn { background: #FFFFFF; color: var(--emerald-deep); box-shadow: var(--shadow-sm); }
.hero-plate .btn:hover, .cta-band .btn:hover { background: #E7F1EC; }
.hero-plate .btn.secondary, .cta-band .btn.secondary {
  background: rgba(255,255,255,0.08); color: var(--on-plate);
  border: 1px solid rgba(255,255,255,0.45); box-shadow: none;
}
.store-note { font-size: 13.5px; color: var(--on-plate-dim); margin: 0; }

.plate-form { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-copy .plate-form { margin-top: 18px; }
.hero-copy .plate-search { max-width: 330px; }
.plate-search {
  flex: 1; min-width: 210px; max-width: 360px;
  font: inherit; font-size: 16px; color: var(--fg);
  background: #FFFFFF; border: 0; border-radius: var(--radius-pill);
  padding: 13px 22px;
}
.plate-search::placeholder { color: #68766E; }
@media (prefers-color-scheme: dark) { .plate-search { background: #0B120E; color: var(--fg); } .plate-search::placeholder { color: var(--muted-fg); } }

/* ---- phone screenshots ---- */
.phone {
  /* One frame, drawn here. Every screenshot is cropped to the SCREEN only —
     never ship a shot with a device bezel baked in, or the page shows two. */
  /* Owner 2026-10-09: the same iPhone frame as the App Store preview video, scaled
     from it: a black bezel (border), a silver rim that is bright on the outside and
     darker going in (the stacked rings), and the screen corner at 12% of its width.
     The side buttons are on .device below. */
  display: block; width: 100%; background: var(--card);
  border: 4px solid #0A0A0B; border-radius: 13% / 6.1%;
  box-shadow:
    0 0 0 0.6px #363639, 0 0 0 1.1px #75757B, 0 0 0 1.6px #A0A1A7, 0 0 0 2px #C4C1C8,
    0 0 0 2.6px rgba(0,0,0,0.22), var(--shadow-lg);
}
/* The wrapper hugs the phone (sized below where the image width is a percentage) so
   the buttons sit on its edges: the action button and the two volume keys on the
   left, the side button on the right, placed as in the video (percent of height). */
.device { position: relative; display: block; width: fit-content; max-width: 100%; }
.device::before, .device::after {
  content: ""; position: absolute; width: 2.5px; pointer-events: none;
}
.device::before {
  left: -4.5px; top: 11.2%; height: 17%; border-radius: 1px 0 0 1px;
  background: linear-gradient(#A9AAB0 0 16.5%, transparent 16.5% 32.9%, #A9AAB0 32.9% 62.9%,
    transparent 62.9% 70%, #A9AAB0 70% 100%);
}
.device::after {
  right: -4.5px; top: 19.1%; height: 8%; border-radius: 0 1px 1px 0; background: #A9AAB0;
}
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 8px; }
.shot { margin: 0; text-align: center; }
.shot .phone { max-width: 236px; }
.shot .device { width: 100%; max-width: 236px; margin: 0 auto 14px; }
.shot figcaption { font-size: 15px; color: var(--muted-fg); }
.shot figcaption strong { display: block; color: var(--fg); font-size: 16px; margin-bottom: 2px; }
@media (max-width: 820px) {
  .shots { grid-template-columns: 1fr; gap: 34px; }
  .shot .phone, .shot .device { max-width: 235px; }
}

/* ---- the answer legend (the app's four results) ---- */
.answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 14px; margin: 24px 0 0; }
.answer {
  border-radius: var(--radius); padding: 18px 20px; font-size: 15px;
  border: 1px solid transparent; background: var(--card);
}
.answer .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 8px; background: currentColor; }
.answer strong { display: block; font-size: 16px; margin-bottom: 4px; letter-spacing: -0.2px; }
.answer span { color: var(--muted-fg); }
/* The tokens themselves now carry the darkened values, so this legend and the
   E-number status chips cannot drift apart again. The opacity that used to sit
   on the description span is gone — it cost another ~0.6:1. */
.answer.halal { background: var(--halal-bg); color: var(--halal); }
.answer.noconcern { background: var(--noconcern-bg); color: var(--noconcern); }
.answer.doubtful { background: var(--doubtful-bg); color: var(--doubtful); }
.answer.haram { background: var(--haram-bg); color: var(--haram); }
.answer.halal span, .answer.noconcern span, .answer.doubtful span, .answer.haram span { color: inherit; }
@media (prefers-color-scheme: dark) {
  .answer.halal { color: #45C79C; }
  .answer.noconcern { color: #8FC7A0; }
  .answer.doubtful { color: #E0B45E; }
  .answer.haram { color: #E08B8B; }
}

/* ---- numbered steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.step-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 22px; position: relative;
}
.step-card::before {
  counter-increment: step; content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--wash); color: var(--emerald-deep);
  font-weight: 700; font-size: 16px; margin-bottom: 14px;
}
@media (prefers-color-scheme: dark) { .step-card::before { color: var(--emerald); } }
.step-card h3 { margin: 0 0 6px; font-size: 17.5px; }
.step-card p { margin: 0; font-size: 15px; color: var(--muted-fg); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---- feature cards ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; margin: 26px 0 0; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 22px;
}
.card .ic {
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--wash); color: var(--emerald);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; margin-bottom: 14px;
}
.card h3 { margin: 0 0 6px; font-size: 17.5px; }
.card p { margin: 0; font-size: 15px; color: var(--muted-fg); }

/* ---- a real example, shown as the app shows it ---- */
.example {
  display: grid; grid-template-columns: 280px 1fr; gap: 34px; align-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px; margin-top: 8px;
}
.example .phone, .example .device { width: 100%; max-width: 252px; }
.example h3 { margin: 0 0 14px; font-size: 21px; letter-spacing: -0.3px; }
.flag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.flag-list li {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--haram-bg); border-radius: 14px; padding: 13px 16px; font-size: 15px; color: var(--fg);
}
.flag-list li .why { display: block; color: var(--muted-fg); font-size: 14px; }
.flag-list li .emoji { font-size: 19px; line-height: 1.3; }
.example .note { margin: 16px 0 0; font-size: 14.5px; color: var(--muted-fg); }
@media (max-width: 820px) { .example { grid-template-columns: 1fr; padding: 24px; gap: 24px; } .example .device { margin: 0 auto; } }

/* ---- E-number call to action band ---- */
.cta-band {
  position: relative; overflow: hidden; margin-top: 62px;
  background: linear-gradient(150deg, var(--plate-from), var(--plate-to));
  border-radius: var(--radius-lg); padding: 44px 40px; color: var(--on-plate);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M48 8 58 38 88 48 58 58 48 88 38 58 8 48 38 38Z' fill='none' stroke='%23FFFFFF' stroke-opacity='0.1'/%3E%3C/svg%3E");
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: 27px; margin: 0 0 8px; color: var(--on-plate); letter-spacing: -0.4px; }
.cta-band p { color: var(--on-plate-dim); margin: 0 0 20px; max-width: 46em; }
@media (max-width: 640px) { .cta-band { padding: 34px 22px; } .cta-band h2 { font-size: 22px; } }

/* ---- FAQ ---- */
.faq { margin-top: 8px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative;
  font-weight: 600; font-size: 17px; color: var(--fg);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 400; color: var(--emerald);
}
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 18px; font-size: 16px; }

.page-title { padding: 48px 0 8px; }
.page-title h1 { font-size: 32px; margin: 0 0 8px; letter-spacing: -0.4px; line-height: 1.16; }
@media (max-width: 560px) { .page-title h1 { font-size: 27px; } }
.page-title .updated { color: var(--muted-fg); font-size: 14px; }

h1, h2, h3 { line-height: 1.22; }
h2 { font-size: 22px; margin: 40px 0 10px; letter-spacing: -0.2px; }
h3 { font-size: 17px; margin: 22px 0 6px; }
p, li { color: var(--body); }
.muted { color: var(--muted-fg); }

/* the app home's answer chips */
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600;
  padding: 7px 15px; border-radius: var(--radius-pill);
}
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip.halal { background: var(--halal-bg); color: var(--halal); }
.chip.doubtful { background: var(--doubtful-bg); color: var(--doubtful); }
.chip.haram { background: var(--haram-bg); color: var(--haram); }

.flow-ic { display: inline-block; width: 17px; height: 17px; vertical-align: -3px; margin-right: 7px; color: var(--emerald); }
.flow-ic svg { width: 100%; height: 100%; }
.ic svg { width: 22px; height: 22px; }

/* block, not flex-column: the flag has to sit beside the name, not above the
   subtitle, and a text node plus a span become two flex items. */
.brand-text { display: block; line-height: 1.12; }
.brand .flag { font-size: 0.86em; line-height: 1; margin-left: 1px; }
@media (max-width: 560px) { .brand .flag { font-size: 0.8em; } }
.brand-text small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted-fg); margin-top: 1px; }

/* E-number tool */
.tool-search { margin: 6px 0 18px; }
.tool-search input {
  width: 100%; font: inherit; font-size: 16px; color: var(--fg);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; outline: none;
}
.tool-search input:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald) 22%, transparent); }
.tool-search input::placeholder { color: var(--muted-fg); }

.enum { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 6px 0 18px; font-size: 15px; }
.enum col.c-num { width: 110px; }
.enum col.c-status { width: 190px; }
.enum td, .enum th { overflow-wrap: anywhere; }
.enum th, .enum td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.enum th { color: var(--muted-fg); font-weight: 600; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.4px; }
.enum td:first-child { font-weight: 700; }
.enum .chip { font-size: 12.5px; padding: 5px 12px; white-space: nowrap; }
.enum tr:target td { background: var(--wash); }
.enum-link { color: inherit; }
.enum-link:hover { color: var(--emerald); text-decoration: none; }
.enum tbody tr:hover td { background: color-mix(in srgb, var(--wash) 55%, transparent); }
.enum tbody tr[aria-expanded="true"] td { background: var(--wash); }
.enum tr.more td { padding: 0; border-bottom: 1px solid var(--border); }
.more-body {
  background: var(--wash); border-left: 4px solid var(--emerald);
  border-radius: 12px; margin: 4px 0 14px; padding: 16px 18px;
}
.more-body .more-head { font-weight: 700; font-size: 15px; margin-bottom: 8px; color: var(--fg); }
.more-body p { margin: 0 0 8px; font-size: 15px; line-height: 1.6; }
.more-body p:last-child { margin-bottom: 0; }
.more-body strong { color: var(--fg); }
/* The app's "What it means" text (owner 2026-09-30): a heading line, then the note, whose
   bullet lines become a short list. */
.more-body .more-label { margin-bottom: 2px; }
.more-body .more-list { margin: 0 0 8px; padding-left: 20px; font-size: 15px; line-height: 1.6; }
.more-body .more-list li { margin: 0; }
/* The additive's picture, small, in the free space to the right of the short info
   (owner 2026-09-30). Floated so the text wraps under it on a phone. */
.more-body::after { content: ""; display: block; clear: both; }
.more-photo {
  float: right; width: 34%; max-width: 240px; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  margin: 2px 0 10px 18px; border-radius: 10px; border: 1px solid var(--border); background: var(--chip);
}
@media (max-width: 560px) { .more-photo { width: 40%; margin-left: 12px; } }
.hint { color: var(--muted-fg); font-size: 13.5px; margin: -6px 0 16px; }
@media (max-width: 640px) {
  .enum { font-size: 14.5px; }
  .enum col.c-num { width: 62px; }
  .enum col.c-status { width: 108px; }   /* 320px left the name column unreadable */
  .enum th, .enum td { padding: 11px 6px; }
  .enum .chip {
    font-size: 11.5px; padding: 4px 8px; gap: 5px;
    max-width: 100%; white-space: normal; text-align: left;
  }
  .enum .chip::before { flex: none; }
}
.chip.noconcern { background: var(--noconcern-bg); color: var(--noconcern); }
.chip.utv { background: var(--utv-bg); color: var(--utv); }
/* An earlier pass darkened these four here instead of at the token, which left
   the chips and the answer legend on two different sets of hexes. The tokens
   now carry the darkened values and this block is gone, so the home page's
   legend and an additive's status chip are the same colour by construction.
   Light 4.9-5.9:1, dark 5.0-6.3:1 — measured, not eyeballed. */

/* Touch targets: the language pill and the E-number link were under 40px. */
.nav a.navlink.lang { padding: 9px 14px; }
.enum-link { display: inline-block; padding: 6px 2px; }

/* callout / disclaimer */
.callout {
  background: var(--wash); border: 1px solid var(--wash-border); border-left: 4px solid var(--emerald);
  border-radius: 12px; padding: 16px 18px; margin: 24px 0; font-size: 15.5px;
}
.callout.warn { background: var(--doubtful-bg); border-color: var(--doubtful-border); border-left-color: var(--doubtful); }

/* privacy "what we do / don't" table */
.pp { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15.5px; }
.pp th, .pp td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pp th { color: var(--muted-fg); font-weight: 600; width: 38%; }
@media (max-width: 560px) {
  /* A 38% label column squeezes "A random device identifier" into three lines.
     Stack the pairs instead: label, then value, full width. */
  .pp, .pp tbody, .pp tr, .pp th, .pp td { display: block; width: auto; }
  .pp tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .pp th, .pp td { border: 0; padding: 0; }
  .pp th { margin-bottom: 4px; color: var(--fg); }
}
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); }
.tag.no { background: var(--wash); color: var(--emerald-deep); }
@media (prefers-color-scheme: dark) { .tag.no { color: var(--emerald); } }
.tag.yes { background: var(--chip); color: var(--fg); }

/* data-flow steps */
.flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 20px 0; }
.flow .step { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; flex: 1; min-width: 150px; }
.flow .arrow { color: var(--muted-fg); font-size: 20px; }

/* footer */
.site-footer { border-top: 1px solid var(--border); background: var(--footer-bg); }
.foot { max-width: var(--maxw-wide); margin: 0 auto; padding: 30px 20px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.foot .links { display: flex; gap: 16px; flex-wrap: wrap; }
.foot a { color: var(--muted-fg); font-size: 14px; }
.foot .fine { color: var(--muted-fg); font-size: 13px; width: 100%; margin-top: 6px; }

/* Reading measure. The reference pages run the full 900px, which is ~110
   characters a line; anything past ~75 costs the reader the line return.
   Paragraphs and headings only — tables, chips and cards keep the full width. */
main:not(.wide) > p,
main:not(.wide) > h2,
main:not(.wide) > h3,
main:not(.wide) .section > p,
main:not(.wide) .section > h2,
main:not(.wide) .section > h3,
main:not(.wide) .faq p,
main:not(.wide) .page-title p { max-width: 68ch; }

/* ---- guides: long-form answer pages (build-guides.py) ---- */
.crumbs { padding: 26px 0 0; font-size: 14px; color: var(--muted-fg); display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--muted-fg); }
.crumbs a:hover { color: var(--emerald); }

.guide { max-width: 720px; margin: 0 auto; padding-top: 10px; }
.guide h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.8px; margin: 14px 0 14px; }
.guide-lede { font-size: 20px; line-height: 1.55; color: var(--body); margin: 0 0 10px; }
.guide-meta { font-size: 13.5px; color: var(--muted-fg); margin: 0 0 26px; }
.guide h2 { font-size: 24px; margin: 38px 0 12px; letter-spacing: -0.3px; }
.guide p { font-size: 17px; margin: 0 0 14px; }
.guide strong { color: var(--fg); }
@media (max-width: 640px) { .guide h1 { font-size: 30px; } .guide-lede { font-size: 18px; } .guide h2 { font-size: 21px; } }

/* the short answer, first thing on the page and the thing search engines lift */
.answer-box {
  background: var(--wash); border: 1px solid var(--wash-border);
  border-left: 4px solid var(--emerald);
  border-radius: var(--radius); padding: 20px 22px; margin: 0 0 30px;
}
.answer-label {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--emerald-deep); margin: 0 0 6px !important;
}
@media (prefers-color-scheme: dark) { .answer-label { color: var(--emerald); } }
.answer-box p:last-child { margin: 0; font-size: 17.5px; color: var(--fg); }

.scan-cta {
  display: flex; gap: 22px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: linear-gradient(150deg, var(--plate-from), var(--plate-to));
  border-radius: var(--radius-lg); padding: 26px 28px; margin: 38px 0; color: var(--on-plate);
}
.scan-cta h2 { margin: 0 0 6px; font-size: 21px; color: var(--on-plate); }
.scan-cta p { margin: 0; color: var(--on-plate-dim); font-size: 15.5px; max-width: 42em; }
.scan-cta .btn { background: #fff; color: var(--emerald-deep); }
.scan-cta .btn:hover { background: #E7F1EC; }
.scan-cta-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.scan-cta-actions .muted { color: var(--on-plate-dim); font-size: 13px; }

.related { display: grid; gap: 10px; margin: 16px 0 30px; }
.related-link {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 18px; font-weight: 600; font-size: 16px; color: var(--fg);
}
.related-link:hover { border-color: var(--emerald); color: var(--emerald); text-decoration: none; }

/* guide hub + the home page teaser row */
.lede-muted { font-size: 18px; color: var(--muted-fg); margin: 0; max-width: 46em; }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 26px 0 34px; }
.guide-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px 22px; color: var(--fg); display: block;
}
.guide-card:hover { border-color: var(--emerald); text-decoration: none; transform: translateY(-2px); }
.guide-card { transition: border-color 0.15s ease, transform 0.15s ease; }
.guide-card h2, .guide-card h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.2px; }
.guide-card p { margin: 0; font-size: 15px; color: var(--muted-fg); }

/* product pages: the pack shot, and the maker's own words */
.product-shot { margin: 18px 0 22px; max-width: 220px; }
.product-shot img {
  width: 100%; height: auto; display: block;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
}
/* a maker sometimes answers with a whole product list; keep that readable rather than clipped */
.section blockquote p { margin: 0; }
.section blockquote { overflow-wrap: anywhere; }
@media (max-width: 560px) { .product-shot { max-width: 160px; } }

/* An app store we are not on yet (owner 2026-09-29: show the Android button, disabled,
   until there is a Google Play link). A <span>, not a link, so there is nothing to click. */
.btn[aria-disabled="true"] { opacity: 0.45; filter: grayscale(1); cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { background: transparent; }
.hero-plate .btn[aria-disabled="true"]:hover, .cta-band .btn[aria-disabled="true"]:hover { background: #FFFFFF; }
/* ...but the disabled one on the plate is the outlined secondary: hovering must not fill it white. */
.hero-plate .btn.secondary[aria-disabled="true"]:hover, .cta-band .btn.secondary[aria-disabled="true"]:hover { background: rgba(255,255,255,0.08); }
.btn[aria-disabled="true"]:active { transform: none; }

/* ---- the maker's words as a piece of correspondence (owner 2026-09-30: "should look like
   an email, a response from the manufacturer") ----
   CSS only, over the markup every product page (and the brand hub) already has:
     <blockquote><p>"…"</p></blockquote>  +  <p class="muted">Sender · <time>date</time></p>
   The blockquote becomes the letter (an airmail stripe, an envelope header, the words as the
   body) and the attribution under it becomes its "From" footer. Several statements on one page
   stack as several letters. The label says "statement", not "email": some sources are a
   maker's website or a data sheet, and the page must not claim a channel it cannot show. */
.section > blockquote,
.guide > blockquote {
  position: relative; margin: 16px 0 0; max-width: 720px;
  padding: 0 24px 20px; background: var(--card);
  border: 1px solid var(--border); border-bottom: 0; border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.section > blockquote::before,
.guide > blockquote::before {
  content: "Statement from the manufacturer";
  display: block; margin: 0 -24px 18px; padding: 18px 24px 12px 58px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--emerald-deep);
  /* airmail stripe on top, envelope at the left, a faint wash under the header */
  background:
    repeating-linear-gradient(135deg, var(--emerald) 0 12px, transparent 12px 18px,
                              var(--gold) 18px 30px, transparent 30px 36px) top / 100% 5px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A7252' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E")
      24px 60% / 22px 22px no-repeat,
    var(--wash);
  border-bottom: 1px solid var(--wash-border);
}
:lang(de) .section > blockquote::before,
:lang(de) .guide > blockquote::before { content: "Stellungnahme des Herstellers"; }
.section > blockquote p,
.guide > blockquote p {
  margin: 0; font-size: 17px; line-height: 1.7; color: var(--fg); white-space: pre-line;
}
.section > blockquote + p.muted,
.guide > blockquote + p.muted {
  max-width: 720px; margin: 0 0 8px; padding: 12px 24px 14px;
  background: var(--card); border: 1px solid var(--border); border-top: 1px dashed var(--border);
  border-radius: 0 0 16px 16px; box-shadow: var(--shadow-sm);
  font-size: 13.5px; line-height: 1.5;
}
.section > blockquote + p.muted::before,
.guide > blockquote + p.muted::before {
  content: "From"; display: inline-block; margin-right: 10px; padding: 2px 9px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg); background: var(--chip); border-radius: var(--radius-pill);
}
:lang(de) .section > blockquote + p.muted::before,
:lang(de) .guide > blockquote + p.muted::before { content: "Von"; }
.section > blockquote + p.muted time,
.guide > blockquote + p.muted time { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-color-scheme: dark) {
  .section > blockquote::before, .guide > blockquote::before { color: var(--emerald); }
}
@media (max-width: 560px) {
  .section > blockquote, .guide > blockquote { padding: 0 18px 16px; }
  .section > blockquote::before, .guide > blockquote::before { margin: 0 -18px 14px; padding-left: 50px;
    background-position: top, 18px 60%, 0 0; }
  .section > blockquote + p.muted, .guide > blockquote + p.muted { padding: 11px 18px 13px; }
  .section > blockquote p, .guide > blockquote p { font-size: 16px; }
}

/* ---- phones: fingers, not cursors (owner 2026-09-30: "make sure the website works well on
   mobile"). A 375 px audit of 11 page types found no overflow, but breadcrumb and footer links
   were 23 px tall, the product-list links 20 px with 8 px between them, the logo 28 px. WCAG 2.2
   asks for 24 px at least; these aim for ~44 px, the size a thumb actually hits. ---- */
@media (max-width: 640px) {
  .crumbs { align-items: center; }   /* the padded links must not drop below the current-page label */
  .crumbs a { display: inline-block; padding: 10px 0; }
  footer a { display: inline-block; padding: 10px 0; }
  .enumber-list a { display: inline-block; padding: 7px 0; }
  .nav .brand { padding: 8px 0; }
}

/* ---- phone hero: one column of equal controls (owner 2026-09-30: "size of those 4 buttons look
   inconsistent"). The two store buttons, the E-number field and its button were four widths. On
   a phone they now share one width and one height; the store buttons carry an icon each. ---- */
@media (max-width: 640px) {
  .hero-plate .badge-row, .hero-plate .plate-form, .cta-band .plate-form {
    flex-direction: column; align-items: stretch; gap: 10px;
    width: 100%; max-width: 340px; margin-left: auto; margin-right: auto;
  }
  .hero-plate .badge-row .btn, .hero-plate .plate-form .btn, .cta-band .plate-form .btn,
  .hero-plate .plate-search, .cta-band .plate-search {
    width: 100%; max-width: none; min-width: 0; height: 52px; box-sizing: border-box;
  }
  .hero-plate .plate-search, .cta-band .plate-search { flex: none; text-align: center; }
  .hero-plate .store-note { text-align: center; }
}

/* Narrow phones: the four nav links on row two filled it to within a pixel, so a 1 px
   rounding difference pushed "Support" onto a third row. Less space between them. */
@media (max-width: 400px) {
  .nav a.navlink:not(.lang) { margin-right: 10px; }
}

/* ---- the verdict as the app's stamp, next to the name (owner 2026-09-30: "instead ... halal or
   haram stamp like we did in app", then "should be next to the name"). Same object as
   components/VerdictBadge.tsx: a ring around a disc carrying the Arabic word, filled with the app's
   gradient for a verdict the evidence asserts (green VerifiedHalal, amber Doubtful, red Haram),
   OUTLINED for a verdict that is only the absence of a finding (an additive with "No concern"),
   and the label under it. CSS only, over the chip every product page and E-number page already has
   in its title, so no page is regenerated. The title becomes two columns: the name, and the stamp.
   A Halal product reads "Verified Halal" (the app's label) over the page's own "Confirmed by the
   manufacturer"; the other verdicts already say it. ---- */
.page-title:has(> .updated > .chip) {
  display: grid; grid-template-columns: minmax(0, max-content) auto; column-gap: 24px; align-items: center;
  justify-content: start;   /* the stamp follows the name, it does not drift to the far edge */
}
.page-title:has(> .updated > .chip) > h1 { grid-column: 1; margin: 0; }
/* The question headings ("Ist E442 (Ammoniumphosphatide) halal oder haram?") share a phone-width
   row with the stamp: long German and Turkish words must hyphenate (the pages set lang) rather than
   run under the stamp. */
.page-title h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.page-title:has(> .updated > .chip) > .updated { grid-column: 2; grid-row: 1; margin: 0; }
.page-title .updated .chip.halal { --stamp: var(--halal); }
.page-title .updated .chip.doubtful { --stamp: var(--doubtful); }
.page-title .updated .chip.haram { --stamp: var(--haram); }
.page-title .updated .chip.noconcern { --stamp: var(--noconcern); }
.page-title .updated .chip {
  display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 2px;
  width: 132px; background: none; padding: 0; margin: 0; border-radius: 0;
  font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: 0.2px;
}
.page-title .updated .chip::before {
  content: "حلال"; width: 60px; height: 60px; margin: 17px 17px 21px; border-radius: 50%;
  display: grid; place-items: center; box-sizing: border-box;
  font-family: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  font-size: 20px; font-weight: 700; line-height: 1; padding-top: 3px; color: #FFFFFF;
  /* the ring: 10 px of page background, then 7 px of the verdict colour at 18 % */
  box-shadow: 0 0 0 10px var(--bg), 0 0 0 17px color-mix(in srgb, var(--stamp) 18%, transparent),
              0 6px 12px rgba(0, 0, 0, 0.25);
}
.page-title .updated .chip.halal::before { background: linear-gradient(135deg, #2ECC71, #16A34A); }
.page-title .updated .chip.doubtful::before { content: "مشبوه"; font-size: 17px; color: #1B2A24;
  background: linear-gradient(135deg, #FBBF24, #F59E0B); }
.page-title .updated .chip.haram::before { content: "حرام"; background: linear-gradient(135deg, #DC2626, #B91C1C); }
.page-title .updated .chip.noconcern::before {   /* ingredients-only: an outline, not a claim */
  background: transparent; color: var(--stamp); border: 2.5px solid var(--stamp);
  box-shadow: 0 0 0 10px var(--bg), 0 0 0 17px color-mix(in srgb, var(--stamp) 18%, transparent);
}
/* A Halal product: the app's label, then the page's "confirmed by the manufacturer" in small caps. */
.page-title .updated .chip.halal { font-size: 10.5px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.page-title .updated .chip.halal::after {
  order: -1; grid-row: 2; content: "Verified Halal";
  font-size: 16px; font-weight: 700; letter-spacing: 0.2px; text-transform: none;
}
:lang(de) .page-title .updated .chip.halal::after { content: "Verifiziert Halal"; }
@media (max-width: 560px) {
  .page-title:has(> .updated > .chip) { column-gap: 12px; }
  .page-title .updated .chip { width: 104px; font-size: 13.5px; }
  .page-title .updated .chip::before { width: 48px; height: 48px; margin: 14px 14px 18px; font-size: 16px;
    box-shadow: 0 0 0 8px var(--bg), 0 0 0 14px color-mix(in srgb, var(--stamp) 18%, transparent), 0 5px 10px rgba(0,0,0,.25); }
  .page-title .updated .chip.doubtful::before { font-size: 13.5px; }
  .page-title .updated .chip.noconcern::before { box-shadow: 0 0 0 8px var(--bg), 0 0 0 14px color-mix(in srgb, var(--stamp) 18%, transparent); }
  .page-title .updated .chip.halal { font-size: 9.5px; }
  .page-title .updated .chip.halal::after { font-size: 13.5px; }
}

/* ---- additive pages: a picture of where it comes from (owner 2026-09-30: "so that people
   can understand just by seeing the image"). Under the opening line, as wide as the text. ---- */
.source-photo { margin: 18px 0 8px; max-width: 720px; }
.source-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--border); background: var(--chip);
}
.source-photo figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--muted-fg); }

/* ---- the page's share card, shown under the heading (2026-10-14): the picture a search result
   or a chat preview uses is one the reader can see. tools/og_cards.py makes it. ---- */
.page-card { margin: 18px 0 8px; max-width: 720px; }
.page-card img {
  display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--chip);
}

/* ---- language switch with three languages (2026-09-30: Turkish). Pages with a Turkish
   version name the two other languages by code in one pill, the same size as the old
   "Deutsch" / "English" pill, so the phone header does not grow. ---- */
.nav .lang-switch {
  display: inline-flex; align-items: center; flex: none;
  border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 13.5px;
}
.nav .lang-switch a { color: var(--muted-fg); font-weight: 600; letter-spacing: 0.3px; padding: 9px 12px; }
.nav .lang-switch a + a { border-left: 1px solid var(--border); }
.nav .lang-switch a:hover { color: var(--emerald); text-decoration: none; }
@media (max-width: 1000px) { .nav .lang-switch { order: 2; margin-left: 10px; } }
@media (max-width: 560px) {
  .nav .lang-switch { margin-left: 0; font-size: 12.5px; }
  .nav .lang-switch a { padding: 8px 10px; }
}

/* Source charts on doubtful additive pages (owner 2026-10-11, source_view.py):
   "Made from · Verdict · Why" and the grouped scholarly view. */
.src-lead { font-weight: 700; color: var(--fg); font-size: 1.15rem; line-height: 1.45; margin: 8px 0 18px; }
.src-lead .chip { vertical-align: 2px; }
.src-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); margin: 0 0 8px; }
.src-table th { background: var(--wash); color: var(--fg); text-align: left; font-size: .95rem; padding: 14px 16px; border-bottom: 1px solid var(--wash-border); }
.src-table td { padding: 14px 16px; border-top: 1px solid var(--border); vertical-align: top; color: var(--body); line-height: 1.45; }
.src-table tr:first-child td { border-top: 0; }
.src-table td:first-child { color: var(--emerald-deep); font-weight: 600; width: 40%; }
.src-table td:nth-child(2) { white-space: nowrap; width: 22%; }
.v { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.v.halal { color: var(--halal); } .v.haram { color: var(--haram); } .v.doubtful { color: var(--doubtful); }
.v .ic { font-size: 1.05rem; }
.sv { margin: 34px 0 8px; }
.sv-label { display: flex; align-items: center; gap: 10px; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; font-weight: 700; color: var(--muted-fg); margin: 22px 0 10px; }
.sv-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.sv-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; }
.sv-row { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; padding: 15px 18px; border-top: 1px solid var(--border); }
.sv-row:first-child { border-top: 0; }
.sv-who { color: var(--fg); font-weight: 600; min-width: 0; }
.sv-who small { display: block; font-weight: 400; color: var(--muted-fg); margin-top: 3px; line-height: 1.45; font-size: .88rem; }
.sv-say { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: .86rem; font-weight: 650; background: var(--doubtful-bg); color: var(--doubtful); }
.sv-say::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sv-say.halal { background: var(--halal-bg); color: var(--halal); } .sv-say.haram { background: var(--haram-bg); color: var(--haram); }
.src { display: inline-block; margin: 7px 6px 0 0; font-size: .78rem; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--chip); color: var(--muted-fg); text-decoration: none; }
.src:hover { color: var(--emerald); }
.sv-note { color: var(--muted-fg); font-size: .88rem; margin-top: 10px; }
@media (prefers-color-scheme: dark) { .src-table td:first-child { color: var(--emerald); } }
@media (max-width: 620px) {
  .src-table, .src-table tbody, .src-table tr, .src-table td { display: block; width: auto; }
  .src-table thead { display: none; }
  .src-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 16px; border-top: 1px solid var(--border); }
  .src-table tr:first-child { border-top: 0; }
  .src-table td { padding: 0; border: 0; }
  .src-table td:first-child, .src-table td:nth-child(2) { width: auto; }
  .src-table td:nth-child(3) { grid-column: 1 / -1; color: var(--muted-fg); }
  .sv-row { flex-direction: column; gap: 8px; }
  .sv-say { white-space: normal; }
}