/* Shared styles for the guide / comparison pages. index.html keeps its own
   inline <style> (it is a hand-port of the design source); these pages reuse
   its tokens, nav pill, App Store badge and footer so they read as one site.
   Same-origin, so the CSP's style-src 'self' already covers it. */
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/font/nunito-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/font/nunito-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/font/nunito-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/font/nunito-latin-800.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/font/nunito-latin-900.woff2') format('woff2'); }
:root { --ink:#2A2113; --cream:#FFF8EA; --hero:#FFDD6C; --accent:#FF6A3D; --accent-text:#BE3F17; --dark:#241B0E; --card:#FFFFFF; --muted:rgba(42,33,19,.68); color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--cream); }
body { font-family: 'Nunito', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; color: var(--ink); line-height: 1.6; font-size: 18px; font-weight: 600; }
img, video { max-width: 100%; }
a { color: inherit; }
a:hover { opacity: .82; }

/* nav — same pill as index.html */
.nav { position: sticky; top: 18px; z-index: 50; padding: 18px 20px 0; max-width: 1200px; margin: 0 auto; }
.navpill { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px 11px 15px; border-radius: 20px; background: rgba(255,247,230,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 12px 34px rgba(42,33,19,.15); border: 1px solid rgba(42,33,19,.06); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 12px; display: block; box-shadow: 0 2px 8px rgba(0,0,0,.14); }
.brand span { font-weight: 900; font-size: 23px; letter-spacing: -.02em; }
.navright { display: flex; align-items: center; gap: 26px; font-weight: 700; font-size: 16px; }
.navright a.navlink { color: var(--muted); text-decoration: none; }
.btn-store { display: inline-flex; align-items: center; gap: 12px; background: #000; color: #fff; padding: 13px 22px; border-radius: 15px; text-decoration: none; transition: transform .15s ease; }
.btn-store:hover { opacity: 1; transform: translateY(-2px); }
.btn-store.small { padding: 12px 18px; border-radius: 12px; font-size: 15px; font-weight: 800; }
.btn-store .lines { display: flex; flex-direction: column; line-height: 1.05; }
.btn-store .lines small { font-size: 11px; font-weight: 600; }
.btn-store .lines b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }

/* article */
.article { max-width: 760px; margin: 0 auto; padding: 44px 22px 40px; }
.eyebrow { display: inline-block; font-weight: 800; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 14px; }
h1 { font-weight: 900; font-size: 52px; line-height: 1.02; letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance; }
.lede { font-size: 21px; line-height: 1.5; color: var(--muted); margin: 0 0 26px; }
.updated { font-size: 15px; color: var(--muted); margin: 0 0 28px; }
h2 { font-weight: 900; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; margin: 44px 0 14px; }
h3 { font-weight: 900; font-size: 21px; letter-spacing: -.01em; margin: 26px 0 8px; }
p { margin: 0 0 16px; }
.article a { text-decoration: underline; text-underline-offset: 2px; }
ul, ol { padding-left: 24px; margin: 0 0 18px; }
li { margin: 6px 0; }
.steps { list-style: none; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 4px 0 10px 54px; min-height: 44px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--hero); display: grid; place-items: center; font-weight: 900; }
.note { background: var(--card); border-radius: 18px; padding: 18px 22px; box-shadow: 0 6px 20px rgba(0,0,0,.05); margin: 22px 0; }
.figure { display: flex; justify-content: center; margin: 30px 0; }
.phone { width: 250px; background: #1A1206; border-radius: 42px; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.22); }
.phone img { display: block; width: 100%; height: auto; border-radius: 33px; }
.tablewrap { overflow-x: auto; margin: 0 0 22px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 520px; background: var(--card); border-radius: 16px; overflow: hidden; font-size: 16px; }
th, td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid rgba(42,33,19,.08); }
th { background: var(--hero); font-weight: 900; }
.faq h3 { margin-top: 22px; }
.related { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; padding: 0; }
.related a { display: block; background: var(--card); border-radius: 14px; padding: 14px 18px; text-decoration: none; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.05); min-height: 44px; }

/* CTA band */
.cta { background: var(--hero); padding: 64px 22px; text-align: center; }
.cta h2 { font-size: 44px; margin: 0 auto 14px; max-width: 760px; text-wrap: balance; }
.cta p { color: rgba(42,33,19,.72); font-size: 19px; margin: 0 auto 28px; }
.cta-row { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.qr-cta { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1.5px solid rgba(42,33,19,.08); border-radius: 18px; padding: 12px 18px 12px 12px; text-align: left; }
.qr-cta img { display: block; width: 84px; height: 84px; }
.qr-cta span { font-weight: 800; font-size: 14px; line-height: 1.3; }

/* footer — same columns as index.html */
.foot { background: var(--dark); color: rgba(255,243,196,.75); padding: 52px 44px 40px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; max-width: 1200px; margin: 0 auto 40px; }
.foot-col { display: flex; flex-direction: column; gap: 2px; font-weight: 700; font-size: 15px; }
.foot-col .h { color: #fff; font-weight: 900; margin-bottom: 2px; }
.foot-link { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.foot-brand img { width: 34px; height: 34px; border-radius: 10px; display: block; }
.foot-brand span { font-weight: 900; font-size: 20px; color: #fff; }
.foot-copy { border-top: 1px solid rgba(255,243,196,.14); padding-top: 22px; font-size: 14px; max-width: 1200px; margin: 0 auto; }

@media (max-width: 860px) {
  .qr-cta { display: none; }
  .navlink { display: none; }
  .navpill { padding: 9px 10px 9px 12px; }
  h1 { font-size: 38px; }
  h2 { font-size: 27px; }
  .cta h2 { font-size: 32px; }
  .foot { padding: 44px 22px 32px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .related { grid-template-columns: 1fr; }
}

/* recipe pages (generated by scripts/build-recipes.mjs) */
.article.wide { max-width: 1100px; }
.crumbs { font-size: 15px; color: var(--muted); margin: 0 0 14px; }
.crumbs a { color: inherit; }
.sub { font-size: 15px; color: var(--muted); margin: -6px 0 14px; }
.rhero { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 28px; align-items: start; margin: 0 0 10px; }
.rimg { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 14px 34px rgba(0,0,0,.12); background: #EFE4CC; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 18px; }
.facts div { background: var(--card); border-radius: 14px; padding: 10px 14px; box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.facts dt { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; }
.facts dd { margin: 0; font-weight: 900; font-size: 20px; }
.nutrition { grid-template-columns: repeat(4, 1fr); }
.save-box { background: var(--hero); border-radius: 18px; padding: 18px 20px; }
.save-box h2 { font-size: 24px; margin: 0 0 8px; }
.save-box p { font-size: 16px; margin: 0 0 14px; }
.cta-row.left { justify-content: flex-start; gap: 16px; margin: 0 0 22px; }
.save-box .cta-row.left { margin: 0; }
.ingredients { list-style: none; padding: 0; background: var(--card); border-radius: 18px; padding: 6px 18px; box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.ingredients li { display: flex; gap: 14px; padding: 9px 0; margin: 0; border-bottom: 1px solid rgba(42,33,19,.08); }
.ingredients li:last-child { border-bottom: 0; }
.ingredients .q { flex: 0 0 96px; font-weight: 900; }
.sticky-btn { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 12px; background: #000; color: #fff; font-weight: 900; text-decoration: none !important; }
.about { list-style: none; padding: 0; }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.cards li { margin: 0; }
.rcard { display: flex; flex-direction: column; height: 100%; background: var(--card); border-radius: 18px; overflow: hidden; text-decoration: none !important; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.rcard img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: #EFE4CC; }
.rcard .rname { font-weight: 900; line-height: 1.25; padding: 12px 14px 4px; }
.rcard .rmeta { font-size: 14px; color: var(--muted); padding: 0 14px 14px; }
.links { columns: 3 220px; padding: 0; list-style: none; }
.links li { break-inside: avoid; margin: 0 0 6px; }
.count { font-size: 15px; color: var(--muted); }
.jump a { white-space: nowrap; }
/* Sticky install bar, on every width. The body gets matching bottom padding so
   the bar never covers the last of the content (the steps, the footer), safe
   area included. Hidden on Android (an App Store link is a dead end there): an
   inline script in <head> sets html.android. Without JS the bar just shows. */
body.has-sticky { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.sticky-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; align-items: center; justify-content: space-between; gap: 12px; padding: 12px max(16px, calc((100% - 1100px) / 2)) calc(12px + env(safe-area-inset-bottom)); background: rgba(255,247,230,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -8px 24px rgba(42,33,19,.14); font-weight: 900; }
.android .sticky-cta { display: none; }
.android body.has-sticky { padding-bottom: 0; }
.ai-note { background: var(--card); border-radius: 18px; padding: 14px 18px; margin: 28px 0; font-size: 15px; color: var(--muted); }
.ai-note h2 { font-size: 18px; margin: 0 0 6px; color: inherit; }
.ai-note p { margin: 0; }

@media (max-width: 860px) {
  .rhero { grid-template-columns: 1fr; }
  .rimg { aspect-ratio: 4 / 3; object-fit: cover; }
  .nutrition { grid-template-columns: 1fr 1fr; }
  .ingredients .q { flex-basis: 78px; }
  .cards { grid-template-columns: 1fr 1fr; gap: 12px; }
}
.article .btn-store { text-decoration: none; }

/* localized homepages (generated by scripts/build-locales.mjs) */
.lhero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: center; max-width: 1100px; margin: 0 auto; padding: 44px 22px 20px; }
.lhero .figure { margin: 0; }
.feat-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.feat-grid li { margin: 0; background: var(--card); border-radius: 22px; padding: 22px 24px; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.feat-grid h3 { margin: 0 0 8px; }
.feat-grid p { margin: 0; font-size: 16px; color: var(--muted); }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 34px 0 0; }
.shots img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 14px 34px rgba(0,0,0,.14); }
@media (max-width: 860px) {
  .lhero { grid-template-columns: 1fr; padding-top: 28px; }
  /* Swipeable strip instead of three thumbnails too small to read. */
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .shots img { flex: 0 0 72%; scroll-snap-align: center; }
}
/* ponytail: the self-hosted Nunito is the latin subset only, so Cyrillic (uk)
   and Turkish ş/ğ/ı fell back glyph by glyph mid-word. Those pages use the
   system font instead; self-host Nunito cyrillic + latin-ext if the brand font
   matters there. */
html[lang="uk"] body, html[lang="tr"] body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }