/* Shared article-shell styles, extracted from the inline <style> of every
   blog article (they each duplicated ~10KB of it). One cached file across
   all articles + language variants; page-specific rules stay inline. */
:root {
      --bg:          #F6F2EB;
      --bg-grad:     radial-gradient(1100px 560px at 80% -12%, rgba(200,90,60,0.10), transparent 62%),
                     radial-gradient(760px 420px at 12% 4%, rgba(245,180,90,0.10), transparent 70%), #F6F2EB;
      --surface:     #FFFFFF;
      --surface-2:   #FAF6EF;
      --surface-3:   #F3ECE1;
      --line:        rgba(34, 28, 22, 0.08);
      --ink:         #221C16;
      --muted:       #6B635A;
      --faint:       #9C948A;
      --accent:      #C85A3C;
      --accent-2:    #E0714D;
      --accent-soft: rgba(200, 90, 60, 0.10);
      --wa-green:    #25D366;
      --dk-bg:       #131110;
      --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 30px;
      --e1: 0 1px 2px rgba(34,24,16,0.05), 0 2px 10px rgba(34,24,16,0.06);
      --e2: 0 2px 4px rgba(34,24,16,0.05), 0 12px 32px rgba(34,24,16,0.10);
      --e3: 0 30px 70px rgba(34,24,16,0.14);
      --font-display: "Bricolage Grotesque", Inter, system-ui, sans-serif;
      --font-body: Inter, system-ui, sans-serif;
    }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { -webkit-font-smoothing: antialiased; }
body {
      font-family: var(--font-body);
      background: var(--bg-grad); background-attachment: fixed;
      color: var(--ink); line-height: 1.65; font-size: 17px;
    }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; }
.hdr-inner { max-width: 1180px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 11px; }
.logo-mark { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #E0714D, #B5651D); box-shadow: var(--e1); flex-shrink: 0; }
.logo-word { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.hdr-nav { display: flex; gap: 10px; margin-left: auto; align-items: center; }
.nav-burger { display: flex; flex-direction: column; gap: 5px; width: 42px; height: 42px; margin: 0 6px 0 0; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.nav-burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; position: absolute; top: 100%; left: 14px; margin-top: 8px; flex-direction: column; gap: 2px; min-width: 190px; z-index: 60; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px; box-shadow: var(--e2); }
.nav-toggle:checked ~ .mobile-menu { display: flex; }
.mobile-menu a { padding: 12px 14px; border-radius: 9px; font-size: 15px; font-weight: 500; color: var(--ink); }
.mobile-menu a:hover { background: var(--surface-2); }
.mobile-menu .mobile-cta { background: var(--wa-green); color: #fff; text-align: center; margin-top: 4px; }
.btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; border-radius: 999px; border: 1px solid transparent; transition: transform .15s, box-shadow .18s, background-color .18s, filter .18s; white-space: nowrap; font-family: inherit; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-wa { background: var(--wa-green); color: #fff; box-shadow: 0 8px 20px rgba(37,211,102,0.30); }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37,211,102,0.40); filter: brightness(1.03); }
.btn-ghost { background: var(--surface); color: var(--ink); box-shadow: var(--e1); }
.btn-ghost:hover { background: var(--surface-2); box-shadow: var(--e2); }
.crumbs { font-size: 13.5px; color: var(--faint); padding: 22px 0 0; }
.crumbs a:hover { color: var(--accent); }
article { padding: 14px 0 40px; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 6px 13px; border-radius: 999px; margin-bottom: 18px; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 5.5vw, 44px); line-height: 1.12; letter-spacing: -0.02em; margin-bottom: 20px; }
article > p { margin: 0 0 18px; color: #36302A; }
.lede { font-size: 19px; color: var(--muted); }
h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(23px, 4vw, 30px); line-height: 1.2; letter-spacing: -0.015em; margin: 44px 0 14px; }
h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 30px 0 10px; }
article ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
article ul li { position: relative; padding-left: 28px; margin-bottom: 9px; color: #36302A; }
article ul li::before { content: ""; position: absolute; left: 6px; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); }
article strong { font-weight: 700; color: var(--ink); }
hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.post-hero img { width: 100%; height: auto; display: block; }
.skip p { margin: 0; font-weight: 600; }
.cta h2 { color: #fff; margin: 0 0 12px; }
.cta p { color: #C9C2BB; margin: 0 auto 22px; max-width: 46ch; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.faq p { color: var(--muted); margin: 0 0 6px; }
.ftr-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 22px; align-items: center; }
.ftr-brand { display: flex; align-items: center; gap: 10px; color: #F0EAE3; font-weight: 500; font-size: 14px; }
.ftr-links { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; font-size: 14px; }
.ftr-links a { color: #C9C2BB; transition: color .15s; }
.ftr-links a:hover { color: #fff; }
.ftr-meta { font-size: 12.5px; color: #8A8480; text-align: right; }