/*
  Download page — dark, because the app is dark by default and the butter
  artwork is gold; the colours below are the app's own tokens
  (app/src/theme/tokens.ts), not a second palette invented for the web.

  Two rules the copy depends on:
  · Arabic is NEVER letter-spaced. Tracking breaks the joins between letters,
    so the eyebrow and headings carry weight and size instead.
  · Line-height runs a little taller than a Latin page would want, because
    Arabic ascenders and diacritics need the room.
*/

/* ── fonts ──────────────────────────────────────────────────────────────────
   Self-hosted rather than linked to fonts.gstatic.com: one less origin to
   resolve from Saudi, no third-party request, and the CDN in front of this
   site is the same one serving the page. Latin is declared FIRST and without
   a unicode-range so it acts as the catch-all; the Arabic face is declared
   after it WITH a range, and a later matching face wins. */
@font-face {
  font-family: "Plex Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/plex-latin-400.woff2) format("woff2");
}
@font-face {
  font-family: "Plex Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/plex-latin-600.woff2) format("woff2");
}
@font-face {
  font-family: "Plex Arabic"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/plex-latin-700.woff2) format("woff2");
}
@font-face {
  font-family: "Plex Arabic"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/plex-arabic-400.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Plex Arabic"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/plex-arabic-600.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: "Plex Arabic"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/plex-arabic-700.woff2) format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  --bg: #14110D;
  --surface: #1E1913;
  --line: #2E2620;
  --line-2: #3A3128;
  --text: #F5EFE4;
  --muted: #A89882;
  --dim: #6B5B45;
  --gold: #F6B93B;
  --pad: clamp(20px, 5vw, 32px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* motion.ts smoothOut */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Plex Arabic", -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; }
::selection { background: rgba(246, 185, 59, 0.28); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Ambient warmth behind the hero. Absolute, not fixed: a glow that follows
   the scroll reads as a stuck overlay rather than light on the page. */
.bloom {
  position: absolute; inset-block-start: 0; inset-inline: 0; height: 860px;
  pointer-events: none; z-index: 0;
  background:
    radial-gradient(48rem 26rem at 50% -5rem, rgba(246, 185, 59, 0.15), transparent 68%),
    radial-gradient(28rem 20rem at 85% 5rem, rgba(237, 139, 22, 0.08), transparent 70%);
}

main, footer { position: relative; z-index: 1; }
main { max-width: 1080px; margin-inline: auto; padding-inline: var(--pad); }

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero { text-align: center; padding-block: clamp(44px, 10vh, 96px) clamp(52px, 9vh, 84px); }

.eyebrow {
  display: inline-block; margin: 0;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--line-2); background: rgba(246, 185, 59, 0.06);
  color: var(--gold); font-size: 13px; font-weight: 600; line-height: 1.4;
}

.lockup {
  display: block; height: auto;
  width: min(440px, 76vw);
  margin: clamp(22px, 4.5vw, 36px) auto clamp(16px, 3vw, 24px);
}

.hero h1 {
  margin: 0 auto;
  max-width: 19ch;
  font-size: clamp(26px, 5.4vw, 43px);
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
}

.lede {
  margin: 14px auto 0; max-width: 36ch;
  color: var(--muted); font-size: clamp(15px, 2.3vw, 18px);
}

.fineprint { margin: 18px 0 0; color: var(--dim); font-size: 13px; }

/* ── store buttons ────────────────────────────────────────────────────────── */
.stores {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(10px, 2.4vw, 16px);
  margin-top: clamp(26px, 4.5vw, 36px);
}

.store {
  display: block; border-radius: 16px;
  transition: transform 0.24s var(--ease), filter 0.24s var(--ease);
}
.store img { display: block; height: clamp(52px, 13.5vw, 62px); width: auto; }
.store:hover { transform: translateY(-3px); filter: drop-shadow(0 12px 26px rgba(246, 185, 59, 0.3)); }
.store:active { transform: translateY(-1px) scale(0.985); }
.store:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

/* The visitor's own store leads. Markup order (Apple, then Play) matches the
   artwork and is what stands when the platform is unknown or JS is off. */
[data-os="android"] .store[data-store="android"] { order: -1; }

/* ── why-zubda cards ──────────────────────────────────────────────────────── */
/* The cards are the last thing on the page now, so this padding plus the
   footer's own margin-top is the entire gap before the rule above the footer. */
.features {
  display: grid; gap: clamp(12px, 2vw, 16px);
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  padding-block: 0 clamp(16px, 3vw, 28px);
}

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; padding: clamp(20px, 3vw, 26px);
}
.card h3 { margin: 16px 0 8px; font-size: 17.5px; font-weight: 700; line-height: 1.5; }
.card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.8; }

.glyph {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; color: var(--gold);
  background: rgba(246, 185, 59, 0.1); border: 1px solid rgba(246, 185, 59, 0.16);
}
.glyph svg { width: 22px; height: 22px; }

/* ── footer ───────────────────────────────────────────────────────────────── */
footer {
  max-width: 1080px; margin: clamp(48px, 8vw, 76px) auto 0;
  padding: 26px var(--pad) max(34px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  text-align: center; color: var(--dim); font-size: 13.5px;
}
footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-bottom: 12px; }
footer a { color: var(--muted); text-decoration: none; transition: color 0.2s var(--ease); }
footer a:hover { color: var(--gold); }
footer a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 5px; }
footer p { margin: 0; }

/* ── motion ───────────────────────────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 0.75s var(--ease) both; }
  .hero > .reveal:nth-child(2) { animation-delay: 0.07s; }
  .hero > .reveal:nth-child(3) { animation-delay: 0.14s; }
  .hero > .reveal:nth-child(4) { animation-delay: 0.2s; }
  .hero > .reveal:nth-child(5) { animation-delay: 0.27s; }
  .hero > .reveal:nth-child(6) { animation-delay: 0.34s; }
}

/* `js` is added by site.js itself, never by the head script — so a failed or
   blocked site.js leaves everything visible instead of hiding the whole page
   behind an observer that will never run. */
.js .on-scroll { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .on-scroll.in { opacity: 1; transform: none; }
.js .features .card:nth-child(2) { transition-delay: 0.08s; }
.js .features .card:nth-child(3) { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  .js .on-scroll { opacity: 1; transform: none; transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   SITE CHROME — added 2026-08-24, when zubdah.ai stopped being one page.

   The nav and the page shell below are shared by every authored page
   (index, features, pricing, creators, faq, en). They are NOT used by
   c.html or a.html: those are single-purpose surfaces with their own
   reasons to have no way out of them, and a nav on the creator dashboard
   would invite a logged-in creator to wander off it.
   ───────────────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 12px var(--pad); border-bottom: 1px solid var(--line);
  /* the page behind is near-black; a translucent bar with a blur keeps the
     bloom visible through it rather than cutting a hard band across it */
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.nav .brand {
  font-weight: 700; font-size: 17px; color: var(--text);
  text-decoration: none; letter-spacing: -0.01em; flex: 0 0 auto;
}
.nav .brand:hover { color: var(--gold); }
/* Scrolls rather than wraps on a phone: a nav that wraps to two lines pushes
   the hero below the fold on exactly the devices most of the traffic uses. */
.nav .links {
  display: flex; align-items: center; gap: 4px; flex: 1 1 auto;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.nav .links::-webkit-scrollbar { display: none; }
.nav .links a {
  color: var(--muted); text-decoration: none; font-size: 14.5px;
  padding: 7px 11px; border-radius: 9px; white-space: nowrap;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav .links a:hover { color: var(--text); background: var(--surface); }
.nav .links a[aria-current="page"] { color: var(--gold); }
.nav .cta {
  flex: 0 0 auto; background: var(--gold); color: #14110D;
  font-weight: 700; font-size: 14px; text-decoration: none;
  padding: 9px 16px; border-radius: 999px; white-space: nowrap;
}
.nav .cta:hover { filter: brightness(1.06); }
.nav .lang {
  flex: 0 0 auto; color: var(--dim); font-size: 13px; text-decoration: none;
  padding: 7px 9px; direction: ltr;
}
.nav .lang:hover { color: var(--text); }
@media (max-width: 560px) { .nav .cta { display: none; } }

/* ── the shell every inner page sits in ─────────────────────────────────── */
.page-head { max-width: 760px; margin: 0 auto; padding: 56px var(--pad) 8px; text-align: center; }
.page-head h1 { font-size: clamp(28px, 6vw, 42px); margin: 0 0 12px; line-height: 1.25; }
.page-head p { color: var(--muted); font-size: clamp(15px, 2.4vw, 17.5px); margin: 0; line-height: 1.8; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--pad) 72px; }
.wrap h2 { font-size: clamp(20px, 3.6vw, 26px); margin: 44px 0 14px; }
.wrap h3 { font-size: 17px; margin: 24px 0 8px; }
.wrap p, .wrap li { color: var(--muted); line-height: 1.9; }

/* ── a plain content panel, used by pricing rows, faq answers, steps ────── */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 20px 22px;
}
.panel + .panel { margin-top: 12px; }
.panel h3 { margin-top: 0; color: var(--text); }
.panel p:last-child { margin-bottom: 0; }

/* ── pricing ────────────────────────────────────────────────────────────── */
.plans { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 20px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.plan.best { border-color: color-mix(in srgb, var(--gold) 42%, var(--line)); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); }
.plan .name { font-size: 15px; color: var(--muted); }
.plan .price { font-size: 32px; font-weight: 700; margin: 6px 0 2px; direction: rtl; }
.plan .price .per { font-size: 14px; font-weight: 400; color: var(--muted); }
.plan .note { font-size: 13px; color: var(--dim); min-height: 1.4em; }
.plan ul { list-style: none; padding: 0; margin: 16px 0 0; }
.plan li { position: relative; padding-inline-start: 20px; margin: 9px 0; font-size: 14.5px; }
.plan li::before {
  /* A dot, not a chevron. `›` points right, which under RTL sits on the
     reading edge pointing AWAY from its own text; the mirrored `‹` would then
     be wrong on the English page. A dot is the same in both directions. */
  content: "•"; position: absolute; inset-inline-start: 0;
  color: var(--gold); font-weight: 700;
}

/* ── numbered steps, for «كيف يشتغل» and the creator flow ───────────────── */
.steps { counter-reset: s; display: grid; gap: 12px; margin-top: 18px; }
.step { counter-increment: s; position: relative; padding-inline-start: 46px; }
.step::before {
  content: counter(s); position: absolute; inset-inline-start: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--gold) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 34%, var(--line));
  color: var(--gold); font-weight: 700; font-size: 14px;
}
.step h3 { margin: 4px 0 4px; }
.step p { margin: 0; }

/* ── a closing call to action ───────────────────────────────────────────── */
.tail { text-align: center; padding: 48px var(--pad) 8px; }
.tail h2 { margin: 0 0 8px; }
.tail p { color: var(--muted); margin: 0 0 20px; }
.tail .stores { margin-top: 0; }

/* The official accounts, linked from every page. `sameAs` in the schema
   DECLARES the association; these links corroborate it, and `rel="me"` is the
   microformat that says so explicitly. Quiet by design: they are a signal
   first and a navigation element second. */
footer .social { display: flex; gap: 14px; justify-content: center; margin: 2px 0 10px; }
footer .social a { color: var(--dim); font-size: 13px; }
footer .social a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════════════
   The data sections: /calories, /recipes, /calculator.

   LOGICAL PROPERTIES ONLY below this line. `left` and `right` are swapped
   under RTL by the same rule the app documents, so a physical edge written
   here would sit on the wrong side in Arabic and the right one in English.
   `inline-start` / `inline-end` mean the reading edge in both.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the store rating, shown because the schema declares it ───────────────
   Two lines, not one sentence: the figure and its bar read at a glance, the
   provenance stays quiet underneath. The bar is filled to the MEASURED
   fraction — 4.8 paints 96% of the row — because five solid stars over the
   number 4.8 is a picture disagreeing with its own caption.
   `--fill` rides the markup, so the CSS never hardcodes the rating. */
.rating {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: 0 9px;
  margin: 12px auto 18px; text-align: center;
}
.rating .score {
  color: var(--text); font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.rating .from {
  flex-basis: 100%; margin-top: 6px;
  color: var(--muted); font-size: 12.5px; line-height: 1.5;
}
/* letter-spacing stays at 0 so the gradient stop is exactly value/5 of the
   row; ★ carries its own sidebearings and needs no help. */
.rating .stars {
  display: inline-block; font-size: 15px; line-height: 1;
  letter-spacing: 0; color: var(--gold);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .rating .stars {
    background-image: linear-gradient(var(--star-dir, 90deg),
      var(--gold) var(--fill, 100%), var(--dim) var(--fill, 100%));
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
  }
  /* A gradient angle has no logical form, so the one physical direction on
     this page is set explicitly per direction. Mirrored, the part-filled star
     lands where an Arabic reader finishes the row rather than where they
     start it, which is how both stores draw it. */
  [dir="rtl"] .rating .stars { --star-dir: 270deg; }
}

/* ── the headline numbers ───────────────────────────────────────────────── */
.figs {
  display: grid; gap: 10px; margin: 26px 0 18px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.fig {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px 18px; text-align: center;
}
.fig .v { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.2; }
.fig .v .u { font-size: 14px; font-weight: 600; color: var(--muted); margin-inline-start: 3px; }
.fig .k { font-size: 13px; color: var(--muted); margin-top: 4px; }
.fig.lead { background: linear-gradient(180deg, rgba(246,185,59,0.11), rgba(246,185,59,0.03)); border-color: rgba(246,185,59,0.32); }
.fig.lead .v { color: var(--gold); font-size: 32px; }

/* ── the macro split ────────────────────────────────────────────────────── */
.macrobar {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--line); margin: 4px 0 10px;
}
.macrobar .seg { display: block; height: 100%; }
.macrobar .seg.p { background: #6FBF8B; }
.macrobar .seg.c { background: var(--gold); }
.macrobar .seg.f { background: #E08A4B; }
.legend {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 8px;
  font-size: 13px; color: var(--muted);
}
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-inline-end: 6px; }
.legend i.p { background: #6FBF8B; } .legend i.c { background: var(--gold); } .legend i.f { background: #E08A4B; }

/* ── data tables. The wrapper scrolls, the page never does. ─────────────── */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0 8px; }
.ftable {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; min-width: 460px;
}
.ftable th, .ftable td { padding: 11px 14px; text-align: start; border-bottom: 1px solid var(--line); }
.ftable thead th { color: var(--muted); font-size: 13px; font-weight: 600; background: rgba(255,255,255,0.02); white-space: nowrap; }
.ftable tbody th { color: var(--text); font-weight: 600; }
.ftable td { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ftable tbody tr:last-child th, .ftable tbody tr:last-child td { border-bottom: 0; }
.ftable tfoot th, .ftable tfoot td { padding: 11px 14px; text-align: start; color: var(--text); font-weight: 700; background: rgba(246,185,59,0.06); border-top: 1px solid var(--line-2); }
.ftable a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.ftable a:hover { color: var(--gold); border-color: var(--gold); }
.ftable tr.self { background: rgba(246,185,59,0.07); }
.ftable tr.self th { color: var(--gold); }

/* ── breadcrumb line above an H1 ────────────────────────────────────────── */
.crumb { font-size: 13.5px; color: var(--dim); margin: 0 0 10px; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--gold); }

/* ── the hub's per-category chip lists ──────────────────────────────────── */
.catblurb { color: var(--muted); margin: 0 0 14px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 8px; }
.chips a {
  display: flex; align-items: baseline; gap: 8px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 15px; color: var(--text); font-size: 14.5px;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.chips a:hover { border-color: var(--gold); background: rgba(246,185,59,0.07); }
.chips a b { color: var(--gold); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── recipes ────────────────────────────────────────────────────────────── */
.hero-dish { margin: 0 0 20px; }
.hero-dish img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); display: block; }
.hero-dish figcaption { color: var(--dim); font-size: 12.5px; margin-top: 8px; text-align: center; }
.pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 6px; padding: 0; }
.pill {
  font-size: 12.5px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--muted);
}
.pill.goal-lose { border-color: rgba(111,191,139,0.5); color: #8ED0A5; }
.pill.goal-gain { border-color: rgba(224,138,75,0.5); color: #EFA574; }
.steps-list { padding-inline-start: 22px; }
.steps-list li { color: var(--muted); line-height: 1.9; margin-bottom: 10px; }
.rgrid {
  list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.rcard a {
  display: block; text-decoration: none; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.rcard a:hover { border-color: var(--gold); transform: translateY(-2px); }
.rcard img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.rname { display: block; padding: 12px 14px 2px; color: var(--text); font-weight: 600; font-size: 15.5px; }
.rmeta { display: block; padding: 0 14px 13px; color: var(--muted); font-size: 13px; }

/* ── the calculator form ────────────────────────────────────────────────── */
.calc { display: grid; gap: 14px; }
.calc .row { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: 12px; }
.calc label { color: var(--text); font-size: 14.5px; font-weight: 600; }
.calc input[type="number"], .calc select {
  width: 100%; background: var(--bg); color: var(--text); font: inherit; font-size: 15px;
  border: 1px solid var(--line-2); border-radius: 11px; padding: 10px 12px;
}
.calc input[type="number"]:focus, .calc select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.calc input[type="range"] { width: 100%; accent-color: var(--gold); }
.calc .unit { color: var(--muted); font-size: 13.5px; white-space: nowrap; }
.kv { list-style: none; padding: 0; margin: 0; }
.kv li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv li:last-child { border-bottom: 0; }
.kv span { color: var(--muted); font-size: 14.5px; }
.kv strong { color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .calc .row { grid-template-columns: 1fr; gap: 6px; }
  .calc .unit { justify-self: start; }
}

/* ── the provenance note, deliberately quieter than the numbers ─────────── */
.panel.method p { font-size: 14.5px; }
.panel.method p:last-child { color: var(--dim); }

/* The short answer, first thing under the H1. Reads as an answer rather than
   a callout: a boxed shout would compete with the numbers below it. */
.answer {
  background: rgba(246,185,59,0.07); border: 1px solid rgba(246,185,59,0.28);
  border-inline-start: 3px solid var(--gold);
  border-radius: 14px; padding: 14px 18px; margin: 0 0 6px;
  color: var(--text); font-size: 15.5px; line-height: 1.85;
}
.answer strong { color: var(--gold); font-weight: 700; }