:root{
  --bg:#f0ede6; --bg-2:#e8e3d9;
  --ink:#1c1712; --ink-soft:#4a4034; --ink-faint:#685c4c;
  --line:rgba(28,20,12,.1);
  --surface:rgba(255,255,255,.62);
  --surface-strong:rgba(255,255,255,.78);
  --red:#c8102e; --red-bg:rgba(200,16,46,.14);
  --amber:#93692a; --amber-bg:rgba(147,105,42,.14);
  --teal:#1f6b57; --teal-bg:rgba(31,107,87,.14);
  --slate:#6b7280; --slate-bg:rgba(107,114,128,.14);
  --mesh-1: rgba(200,16,46,.10);
  --mesh-2: rgba(31,107,87,.08);
  --mesh-3: rgba(147,105,42,.07);
  --shadow: 0 1px 2px rgba(28,20,12,.04);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#130e0b; --bg-2:#191310;
    --ink:#f4ede2; --ink-soft:#cabfae; --ink-faint:#8f8375;
    --line:rgba(243,236,227,.12);
    --surface:rgba(255,255,255,.07);
    --surface-strong:rgba(255,255,255,.1);
    --red:#e2172f; --red-bg:rgba(226,23,47,.14);
    --amber:#f0a93e; --amber-bg:rgba(240,169,62,.14);
    --teal:#24c79b; --teal-bg:rgba(36,199,155,.14);
    --slate:#9aa0ac; --slate-bg:rgba(154,160,172,.14);
    --mesh-1: rgba(226,23,47,.18); --mesh-2: rgba(36,199,155,.11); --mesh-3: rgba(240,169,62,.1);
    --shadow: 0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --bg:#130e0b; --bg-2:#191310;
  --ink:#f4ede2; --ink-soft:#cabfae; --ink-faint:#8f8375;
  --line:rgba(243,236,227,.12);
  --surface:rgba(255,255,255,.07);
  --surface-strong:rgba(255,255,255,.1);
  --red:#e2172f; --red-bg:rgba(226,23,47,.14);
  --amber:#f0a93e; --amber-bg:rgba(240,169,62,.14);
  --teal:#24c79b; --teal-bg:rgba(36,199,155,.14);
  --slate:#9aa0ac; --slate-bg:rgba(154,160,172,.14);
  --mesh-1: rgba(226,23,47,.18); --mesh-2: rgba(36,199,155,.11); --mesh-3: rgba(240,169,62,.1);
  --shadow: 0 1px 2px rgba(0,0,0,.3);
}
*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;} }
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Manrope',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:700; text-wrap:balance; margin:0;}
p{margin:0;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:4px;}
img,svg{max-width:100%;}
.mono{font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.06em; font-size:.68rem;}
.mesh{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 14% 6%, var(--mesh-1), transparent 40%),
    radial-gradient(circle at 90% 14%, var(--mesh-2), transparent 46%),
    radial-gradient(circle at 55% 96%, var(--mesh-3), transparent 52%), var(--bg);}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px; position:relative; z-index:1;}
.wrap-narrow{max-width:820px; margin:0 auto; padding:0 32px; position:relative; z-index:1;}
section{position:relative; z-index:1;}
.card{background:var(--surface); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);}
.pill{font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.045em; font-size:.64rem; padding:2px 7px;
  border-radius:5px; font-weight:500; display:inline-flex; align-items:center; gap:4px; white-space:nowrap;}
.pill.red{background:var(--red-bg); color:var(--red);}
.pill.amber{background:var(--amber-bg); color:var(--amber);}
.pill.teal{background:var(--teal-bg); color:var(--teal);}
.pill.slate{background:var(--slate-bg); color:var(--slate);}
.btn{font-family:'Manrope',sans-serif; font-size:.86rem; cursor:pointer; touch-action:manipulation;
  padding:12px 20px; border-radius:10px; border:none; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; gap:8px;}
.btn-primary{background:var(--red); color:#fff8f4; font-weight:700;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-ghost{background:var(--surface-strong); color:var(--ink); border:1px solid var(--line); font-weight:600;}
.btn-ghost:hover{background:var(--surface);}
.btn-whatsapp{background:#25D366; color:#04210f; font-weight:700;}
.btn-whatsapp:hover{filter:brightness(1.05);}
.reveal{opacity:0; transform:translateY(12px); animation:reveal .5s cubic-bezier(.16,.84,.44,1) forwards;}
@keyframes reveal{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; animation:none;} }

/* nav */
header{position:sticky; top:0; z-index:30; background:var(--surface); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3); border-bottom:1px solid var(--line);}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:14px 32px; max-width:1180px; margin:0 auto; gap:18px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; flex:none;}
.brand .mark{width:28px;height:28px;border-radius:8px; flex:none; background:linear-gradient(155deg, var(--red) 0%, transparent 78%); background-color:var(--red-bg);
  border:1px solid var(--red); display:flex;align-items:center;justify-content:center; color:var(--red); font-family:'Fraunces',serif; font-weight:700; font-size:14px;}
.brand .word{font-family:'Fraunces',serif; font-weight:700; font-size:1.05rem; color:var(--ink);}
.navlinks{display:flex; align-items:center; gap:22px; position:relative;}
.navlinks > a, .navlinks > .navdrop > button{font-size:.86rem; font-weight:600; color:var(--ink-soft); text-decoration:none; background:none; border:none; cursor:pointer; font-family:'Manrope',sans-serif; display:flex; align-items:center; gap:4px; padding:0;}
.navlinks a:hover, .navdrop > button:hover{color:var(--ink);}
.navdrop{position:relative;}
.navdrop-menu{position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(4px); min-width:240px;
  background:var(--surface-strong); backdrop-filter:blur(20px); border:1px solid var(--line); border-radius:12px; padding:8px; box-shadow:0 12px 32px -8px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;}
.navdrop:hover .navdrop-menu, .navdrop:focus-within .navdrop-menu{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);}
.navdrop-menu a{display:block; padding:8px 10px; border-radius:8px; font-size:.82rem; font-weight:600; color:var(--ink-soft); text-decoration:none;}
.navdrop-menu a:hover{background:var(--surface); color:var(--ink);}
.navcta{display:flex; align-items:center; gap:10px; flex:none;}
.icon-btn{width:34px;height:34px;border-radius:10px; background:var(--surface); border:1px solid var(--line); display:flex;align-items:center;justify-content:center; color:var(--ink-soft); cursor:pointer; touch-action:manipulation; font-family:'JetBrains Mono',monospace; font-size:.85rem;}
.icon-btn:hover{color:var(--ink); background:var(--surface-strong);}
.nav-toggle{display:none;}
@media (max-width:900px){
  .navlinks{display:none;}
  .nav-toggle{display:flex;}
}

/* mobile nav drawer */
.mobile-drawer{position:fixed; inset:0; z-index:40; display:none;}
.mobile-drawer.open{display:block;}
.mobile-drawer-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45);}
.mobile-drawer-panel{position:absolute; top:0; right:0; bottom:0; width:min(340px,86vw); background:var(--bg); border-left:1px solid var(--line);
  padding:20px; overflow-y:auto; transform:translateX(100%); transition:transform .25s cubic-bezier(.16,.84,.44,1);}
.mobile-drawer.open .mobile-drawer-panel{transform:translateX(0);}
.mobile-drawer-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px;}
.mobile-drawer h4{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin:18px 0 8px; font-weight:700;}
.mobile-drawer h4:first-of-type{margin-top:4px;}
.mobile-drawer a{display:block; padding:9px 0; font-size:.9rem; color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line);}
.mobile-drawer a:hover{color:var(--ink);}
.mobile-drawer .btn{width:100%; justify-content:center; margin-top:18px;}
@media (prefers-reduced-motion: reduce){ .mobile-drawer-panel{transition:none;} }

/* breadcrumb */
.crumbs{padding:18px 0 0; font-size:.78rem; color:var(--ink-faint);}
.crumbs a{text-decoration:none; color:var(--ink-faint);}
.crumbs a:hover{color:var(--ink);}

/* article-style page hero */
.page-hero{padding:28px 0 8px;}
.page-hero .eyebrow{color:var(--red); display:block; margin-bottom:14px;}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.1rem); line-height:1.08; letter-spacing:-.015em;}
.page-hero .dek{color:var(--ink-soft); font-size:1.05rem; line-height:1.6; margin-top:16px; max-width:68ch;}
.page-hero .meta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.byline{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:.78rem; color:var(--ink-faint);}
.byline b{color:var(--ink-soft);}

/* article body */
.article{padding:36px 0 8px;}
.article h2{font-size:1.5rem; margin-top:40px; margin-bottom:14px; letter-spacing:-.01em;}
.article h2:first-child{margin-top:0;}
.article h3{font-size:1.12rem; margin-top:26px; margin-bottom:10px;}
.article p{color:var(--ink-soft); line-height:1.75; font-size:.98rem; margin-bottom:14px;}
.article ul, .article ol{color:var(--ink-soft); line-height:1.75; font-size:.98rem; padding-left:22px; margin:0 0 14px;}
.article li{margin-bottom:6px;}
.article li b, .article p b, .article li strong, .article p strong{color:var(--ink); font-weight:700;}
.article table{width:100%; border-collapse:collapse; margin:18px 0 22px; font-size:.86rem;}
.article th, .article td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);}
.article th{font-family:'JetBrains Mono',monospace; text-transform:uppercase; letter-spacing:.05em; font-size:.66rem; color:var(--ink-faint);}
.callout{border-radius:12px; padding:18px 20px; border:1px dashed var(--line); background:var(--surface); display:flex; gap:14px; align-items:flex-start; margin:22px 0;}
.callout .tag{flex:none; margin-top:2px;}
.callout p{font-size:.86rem; margin:0;}
.callout.warn{border-color:var(--red); background:var(--red-bg);}
.callout.warn p{color:var(--ink);}
.disclaimer-note{font-size:.78rem; color:var(--ink-faint); font-style:italic; margin-top:10px;}

/* related / cross-link grid */
.related{padding:36px 0 60px;}
.related h2{font-size:1.3rem; margin-bottom:18px;}
.rel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.rel-card{padding:18px; text-decoration:none; display:block;}
.rel-card .k{color:var(--red);}
.rel-card h3{font-size:1rem; margin:8px 0 6px;}
.rel-card p{color:var(--ink-faint); font-size:.82rem; line-height:1.5;}

/* SEO cross-link section (products/guides grid) */
.siteindex{padding:20px 0 60px;}
.siteindex h2{font-size:1.5rem; margin-bottom:6px;}
.siteindex .sub{color:var(--ink-faint); font-size:.9rem; margin-bottom:24px;}
.siteindex-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
@media (max-width:860px){ .siteindex-grid{grid-template-columns:1fr;} }
.siteindex-col h3{font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--red); margin-bottom:14px; font-weight:700;}
.siteindex-col a{display:block; padding:10px 0; border-bottom:1px solid var(--line); font-size:.88rem; color:var(--ink-soft); text-decoration:none;}
.siteindex-col a:hover{color:var(--ink);}
.siteindex-col a:last-child{border-bottom:none;}

/* lead capture */
.lead{padding:20px 0 60px;}
.lead-card{padding:36px; display:grid; grid-template-columns:1.1fr 1fr; gap:36px; align-items:center;}
.lead-card h2{font-size:1.5rem; margin-bottom:10px;}
.lead-card p{color:var(--ink-soft); font-size:.92rem; line-height:1.6;}
.lead-form{display:grid; gap:10px;}
.lead-form label{font-size:.72rem; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:-4px;}
.lead-form input, .lead-form select{font-family:'Manrope',sans-serif; font-size:.92rem; padding:11px 13px; border-radius:9px; border:1px solid var(--line); background:var(--surface-strong); color:var(--ink); width:100%;}
.lead-form input:focus, .lead-form select:focus{outline:2px solid var(--red); outline-offset:1px;}
.lead-form .fine{color:var(--ink-faint); font-size:.72rem; line-height:1.5; margin-top:2px;}
.lead-form button{margin-top:6px;}
.consent-row{display:flex; gap:9px; align-items:flex-start; margin-top:4px;}
.consent-row input{width:16px; height:16px; margin-top:2px; accent-color:var(--red); flex:none;}
.consent-row label{font-size:.74rem; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-faint); line-height:1.5;}
.consent-row a{color:var(--ink-soft); text-decoration:underline;}
.lead-alt{display:flex; align-items:center; gap:10px; margin-top:4px;}
.lead-alt::before, .lead-alt::after{content:""; flex:1; height:1px; background:var(--line);}
.lead-alt span{font-size:.7rem; color:var(--ink-faint); white-space:nowrap;}
.lead-status{font-size:.82rem; margin-top:10px; display:none;}
.lead-status.show{display:block;}
@media (max-width:760px){ .lead-card{grid-template-columns:1fr;} }

/* footer */
footer{border-top:1px solid var(--line); padding:34px 0 40px;}
.foot-grid{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px;}
.foot-cols{display:flex; gap:48px; flex-wrap:wrap;}
.foot-col h4{font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin-bottom:10px; font-weight:700;}
.foot-col a{display:block; font-size:.84rem; color:var(--ink-soft); text-decoration:none; margin-bottom:8px;}
.foot-col a:hover{color:var(--ink);}
.foot-legal{color:var(--ink-faint); font-size:.76rem; line-height:1.7; max-width:640px;}
footer .mono{color:var(--ink-faint);}

::selection{background:var(--red-bg); color:var(--ink);}