/* Receeto guide pages - shared styles. Matches the Receeto design system:
   Inter, black/white, #EDEFF0 cards, SF Mono only for metadata. */

@font-face { font-family: "Inter"; src: url("fonts/4eab01_GrgcKwrN6d3Uz8EwcLHZxwEfC4.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Inter"; src: url("fonts/3c0d87_yDtI2UI8XcEg1W2je9XPN3Noo.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 600; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Inter"; src: url("fonts/e75bc0_syRNPWzAMIrcJ3wIlPIP43KjQs.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 700; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2070, U+2074-207E, U+2080-208E, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #1a1a1a; background: #ffffff; }
img { max-width: 100%; height: auto; }
a { color: inherit; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ===== NAV ===== */
.site-nav { border-bottom: 1px solid #eee; background: #fff; position: sticky; top: 0; z-index: 50; }
.site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-logo img { width: 36px; height: 36px; border-radius: 8px; }
.nav-logo span { font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: #111; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { font-size: 14px; color: #555; text-decoration: none; }
.nav-links a:hover { color: #000; }
.nav-cta { background: #000; color: #fff !important; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 13px !important; transition: background 0.2s; }
.nav-cta:hover { background: #333; }

/* ===== ARTICLE ===== */
.article-wrap { max-width: 720px; margin: 0 auto; padding: 48px 24px 64px; }
.breadcrumbs { font-size: 13px; color: #888; margin-bottom: 24px; }
.breadcrumbs a { color: #888; text-decoration: none; }
.breadcrumbs a:hover { color: #111; text-decoration: underline; }
.article-meta { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: #999; letter-spacing: 0.02em; margin-bottom: 16px; text-transform: uppercase; }
article h1 { font-size: clamp(30px, 5vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 20px; }
article .lede { font-size: 18px; line-height: 1.65; color: #444; margin-bottom: 36px; }
article h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 44px 0 14px; line-height: 1.25; }
article h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 30px 0 10px; }
article p { font-size: 16px; line-height: 1.75; color: #333; margin-bottom: 16px; }
article ul, article ol { margin: 0 0 16px 22px; }
article li { font-size: 16px; line-height: 1.75; color: #333; margin-bottom: 8px; }
article strong { font-weight: 600; color: #111; }
article a { color: #111; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #bbb; }
article a:hover { text-decoration-color: #111; }
article table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 15px; }
article th, article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e8e8e8; line-height: 1.5; }
article th { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: #666; }
.table-scroll { overflow-x: auto; }

/* Callout */
.callout { background: #EDEFF0; border-radius: 16px; padding: 20px 24px; margin: 24px 0; }
.callout p { margin-bottom: 0; font-size: 15px; }
.callout p + p { margin-top: 10px; }
.callout .callout-title { font-weight: 600; color: #111; }

/* Steps */
.how-steps { counter-reset: step; list-style: none; margin: 20px 0 8px; }
.how-steps > li { counter-increment: step; position: relative; padding: 0 0 24px 56px; margin: 0; }
.how-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: #000; color: #fff; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.how-steps > li h3 { margin: 4px 0 6px; }
.how-steps > li p { margin-bottom: 0; }

/* Screenshot figure */
.guide-shot { margin: 28px auto; text-align: center; }
.guide-shot img { width: 260px; border-radius: 24px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.guide-shot figcaption { font-size: 13px; color: #888; margin-top: 12px; }

/* ===== GUIDE CTA ===== */
.guide-cta { background: #000; border-radius: 24px; padding: 40px 32px; text-align: center; margin: 48px 0 8px; }
.guide-cta h2 { color: #fff; font-size: 24px; margin: 0 0 8px; }
.guide-cta p { color: rgba(255,255,255,0.7); font-size: 15px; margin-bottom: 24px; }
.guide-cta img { height: 48px; width: auto; }
.guide-cta .cta-note { font-size: 13px; color: rgba(255,255,255,0.45); margin: 14px 0 0; }

/* ===== FAQ ===== */
.faq-block { margin-top: 48px; }
.faq-item { border-bottom: 1px solid #e5e5e5; }
.faq-item summary { padding: 20px 0; font-size: 16px; font-weight: 600; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 20px; font-weight: 400; color: #999; margin-left: 16px; }
.faq-item[open] summary::after { content: "-"; }
.faq-item .faq-answer { padding: 0 0 20px; font-size: 15px; line-height: 1.7; color: #555; }

/* Related guides */
.related { margin-top: 48px; padding-top: 32px; border-top: 1px solid #eee; }
.related h2 { margin-top: 0; font-size: 20px; }
.related ul { list-style: none; margin: 16px 0 0; }
.related li { margin-bottom: 10px; }
.related a { font-size: 15px; font-weight: 500; }

/* ===== FOOTER ===== */
.site-footer { background: #000; padding: 56px 24px; margin-top: 40px; }
.footer-inner { display: flex; flex-direction: column; align-items: center; gap: 28px; max-width: 1120px; margin: 0 auto; }
.footer-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-logo img { width: 36px; height: 36px; border-radius: 8px; }
.footer-logo span { font-weight: 700; font-size: 20px; color: #fff; letter-spacing: -0.02em; }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,0.5); text-align: center; line-height: 1.6; max-width: 340px; }
.footer-badge img { height: 44px; width: auto; }
.footer-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,0.4); text-decoration: none; }
.footer-links a:hover { color: rgba(255,255,255,0.7); }
.footer-links .sep { color: rgba(255,255,255,0.2); }
.footer-copyright { font-size: 12px; color: rgba(255,255,255,0.25); }

@media (max-width: 600px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .article-wrap { padding: 36px 20px 48px; }
  .guide-cta { padding: 32px 20px; }
}